Personal Portfolio
Portfolio interaktif dengan 3D dan motion design
Overview
Website portfolio pribadi yang dibangun dari nol dengan Next.js App Router. Fokusnya bukan cuma menampilkan daftar project, tapi membangun kesan pertama yang kuat lewat motion design, elemen 3D interaktif, dan tipografi yang berani — sambil tetap menjaga performa tetap ringan.
Fitur Utama
- Hero 3D interaktif dengan React Three Fiber
- Animasi scroll-driven memakai Framer Motion
- Bento grid layout untuk section About
- Globe 3D yang di-lazy-load saat masuk viewport
- Fully responsive dari mobile sampai desktop
Tantangan
Menampilkan elemen 3D dan animasi yang banyak tanpa membuat halaman jadi berat. Versi awal sempat mengirim 569 kB JavaScript dan 29 MB gambar ke browser.
Solusi
Three.js dan Lottie dipisah dari bundle awal lewat dynamic import, semua canvas WebGL dibatasi device pixel ratio-nya dan berhenti render saat keluar viewport, dan seluruh aset gambar dikonversi ke WebP pada ukuran tampil sebenarnya.
Hasil
First Load JS turun dari 569 kB ke 266 kB, dan total gambar yang diunduh turun dari 29 MB ke sekitar 276 KB — tanpa mengurangi satupun elemen visual.
Galeri
Klik gambar untuk memperbesar