Membangun Website Portfolio dengan React & Vite

Membangun portfolio pribadi adalah salah satu proyek yang paling menyenangkan sekaligus menantang bagi seorang pengembang. Ini adalah kesempatan untuk memamerkan keahlian teknis sambil mengekspresikan identitas Anda sebagai kreator. Dalam artikel ini, saya akan berbagi proses lengkap di balik pembuatan portfolio saya menggunakan React dan Vite.

Pertanyaan pertama yang muncul adalah: mengapa tidak menggunakan Next.js? Jawabannya sederhana — portfolio ini adalah website statis yang tidak membutuhkan Server-Side Rendering (SSR) atau API routes. Vite menawarkan build yang jauh lebih cepat dengan hot module replacement yang instan, membuat Developer Experience (DX) terasa lebih menyenangkan saat proses pengembangan.

# Membuat proyek baru dengan Vite
npm create vite@latest portfolio -- --template react-ts
cd portfolio
npm install

Saya mengorganisir proyek ke dalam beberapa folder utama: components untuk komponen yang dapat digunakan ulang, pages untuk halaman-halaman utama (Home, Resume, Blog), contexts untuk state global seperti tema, dan data untuk konten seperti data blog. Struktur ini membuat kode mudah dinavigasi dan dipelihara.

src/
├── components/
│   ├── Navbar.tsx
│   ├── Hero.tsx
│   ├── Skills.tsx
│   └── ...
├── pages/
│   ├── Resume.tsx
│   ├── BlogList.tsx
│   └── BlogPost.tsx
├── data/
│   └── blogData.ts
└── contexts/
    └── ThemeContext.tsx

Salah satu aspek yang paling membuat portfolio ini terasa premium adalah penggunaan Framer Motion untuk animasi. Saya menerapkan "Masked Reveal" untuk heading, di mana teks muncul seolah-olah terungkap dari balik tirai yang tidak terlihat. Efek ini dicapai dengan membungkus teks dalam container overflow-hidden dan menganimasikan posisi Y-nya.

// MaskedReveal.tsx
export default function MaskedReveal({ children, delay = 0 }) {
  return (
    <div style={{ overflow: 'hidden' }}>
      <motion.div
        initial={{ y: '100%' }}
        whileInView={{ y: '0%' }}
        transition={{ duration: 0.7, delay, ease: [0.4, 0, 0.2, 1] }}
        viewport={{ once: true }}
      >
        {children}
      </motion.div>
    </div>
  );
}

Saya menggunakan CSS custom properties (variabel CSS) yang dikombinasikan dengan kelas `dark` di elemen HTML untuk mengelola tema. TailwindCSS v4 mendukung ini secara native, membuat perpindahan tema menjadi sangat mulus tanpa flash of unstyled content (FOUC).

"Portfolio yang baik bukan yang paling banyak fiturnya, melainkan yang paling jelas menceritakan siapa Anda dan apa yang bisa Anda lakukan."

Fitur paling unik di portfolio ini adalah preloader berbasis fisika. Saat halaman pertama kali dimuat, nama "DANU" muncul dalam huruf-huruf besar, kemudian jatuh akibat gravitasi dan menumpuk di bagian bawah layar. Setelah tumpukan terbentuk, seluruh layar bergerak ke atas seperti tirai yang ditarik, mengungkap konten portfolio di baliknya. Efek dramatis ini dibangun menggunakan Matter.js untuk simulasi fisika yang realistis.

Secara keseluruhan, proyek ini adalah perpaduan antara kecintaan saya terhadap desain minimalis dan kemampuan teknis React modern. Hasilnya adalah website yang tidak hanya terlihat profesional, tetapi juga terasa hidup dan responsif.