Website Portofolio Personal
Website portofolio profesional dan berkinerja tinggi yang dibangun menggunakan Nuxt 4 oleh web developer berpengalaman. Dilengkapi animasi 3D, integrasi formulir kontak, dan CMS admin.
Ringkasan Proyek
Website portofolio personal yang berfungsi sebagai etalase karya web developer dan studi kasus teknis. Tujuannya adalah membangun situs website yang menarik secara visual tanpa mengorbankan performa atau kemudahan perawatan.
Tantangan Utama
Performa Bagian Hero 3D
Halaman beranda menampilkan korsel 3D dengan animasi mengambang. Tantangannya adalah menjaga animasi tetap mulus pada 60fps sambil meminimalkan dampak pada waktu muat halaman.
Saya menggunakan transformasi 3D berbasis CSS dengan perspektif dan akselerasi perangkat keras. Elemen-elemen berat dimuat secara malas (lazy-loaded) agar tampilan awal tetap cepat.
Formulir Kontak dengan Notifikasi Email
Formulir kontak perlu mengirim email secara langsung tanpa bergantung pada layanan pihak ketiga. Saya mengintegrasikan Nodemailer dengan SMTP Gmail menggunakan Sandi Aplikasi (App Passwords) untuk autentikasi.
Menambahkan halaman Terima Kasih (Thank You) khusus dengan perlindungan rute agar analitik dapat melacak pengiriman yang berhasil.
Masalah Tata Letak Responsif
Bagian statistik terpotong pada ukuran layar tertentu. Diperbaiki dengan menyesuaikan perilaku tinggi bagian dan properti overflow. Mengubah navigasi dari posisi sticky menjadi fixed untuk pengalaman pengguna (UX) yang lebih baik saat digulir.
Halaman 404 Kustom
Membuat halaman kesalahan kustom dengan desain kartu mengambang dan animasi halus. Awalnya diimplementasikan dengan pendekatan pengalihan (redirect) yang menyebabkan masalah di produksi, lalu di-refactor untuk dirender secara sebaris (inline).
Apa yang Saya Pelajari
Lingkungan produksi berperilaku berbeda dari lokal. Variabel lingkungan dengan karakter khusus memerlukan pengkodean yang tepat. Selalu uji alur autentikasi secara menyeluruh (end-to-end) sebelum peluncuran.
Penanganan kesalahan yang anggun (graceful error handling) sangat penting. Ketika koneksi basis data gagal di produksi, situs rusak total. Menambahkan cadangan (fallback) agar situs tetap berfungsi dengan konten statis saat basis data tidak tersedia.
Hasil
Situs ini mencapai skor Lighthouse sempurna dan memberikan pengalaman mulus di berbagai perangkat. Dilengkapi dengan sistem admin lengkap untuk mengelola konten, dilindungi oleh kata sandi dan autentikasi 2FA opsional.