Portofolio pribadi ini dibuat untuk memberi pengunjung, baik calon klien maupun recruiter, gambaran jelas tentang apa yang saya kerjakan, skill yang saya miliki, dan proses detail di balik setiap proyek yang sudah saya bangun. Kini situsnya tersedia dalam bahasa Inggris dan Indonesia, jadi studi kasus yang sama tetap nyaman dibaca oleh klien lokal maupun pengunjung internasional.
Tampilan situs jadi yang bisa di-scroll, persis seperti yang dilihat pengunjung.
Desktop
Mobile
Pekerjaan seperti ini biasanya dibagi ke pengembang, desainer UI/UX, desainer grafis, dan pemasar. Di proyek ini, keempat keahlian itu dikuasai satu orang, jadi setiap keputusan datang dari orang yang memahami keseluruhan proyek, bukan hanya bagiannya sendiri.
16
standar yang terpenuhi, dari kode hingga pemasaran.
Dampak bisnis di sini diukur dari 5 area: Kehadiran, Kualitas, Kepercayaan, Konversi dan Pertumbuhan. Semuanya mencakup bagaimana bisnisnya ditemukan, dipersepsikan, dan direspons.
Semua dalam satu tempat, bukan tersebar
Sebelum
Belum ada satu tempat yang menyajikan gambaran lengkap dan detail tentang skill dan proses kerja saya. Buktinya masih tersebar di berbagai kanal.
Sesudah
Portofolio ini kini menjadi satu tempat yang lengkap dan detail untuk ditinjau langsung oleh klien dan recruiter, tanpa perlu mengumpulkan sendiri potongan informasinya.
Tiap proyek memanfaatkan kombinasi berbagai disiplin, begini gambarannya di proyek ini.
Tools dan teknologi yang digunakan untuk mewujudkan proyek ini.
Masalah yang muncul selama membangun proyek ini, dan hasil yang didapat dari menyelesaikannya.
Konsistensi Animasi di Seluruh Bagian
Awalnya setiap bagian punya delay animasi yang berbeda-beda, lalu diseragamkan menjadi satu urutan, yaitu label, judul, deskripsi, lalu konten.
Konflik Hover Framer Motion
Menggabungkan animasi masuk dengan efek hover-lift di elemen yang sama membuat efek hover tidak berjalan, karena inline transform style dari Framer Motion selalu mengalahkan class hover Tailwind. Masalah ini diperbaiki dengan memisahkan animasi masuk ke elemen luar dan efek hover ke elemen dalam.
Status Bar iOS yang Transparan
Konten sempat terlihat di area status bar iOS 26. Masalah ini diselesaikan dengan navbar full-width yang menutupi bagian paling atas viewport saat scroll.
Kedip Peluncuran PWA di iOS
iOS sekilas menampilkan launch placeholder-nya sendiri sebelum first paint, dan ini tidak bisa diubah dari kode aplikasi. Jadi solusinya adalah menerima satu kedip yang bersih, bukan menumpuk workaround yang justru memperburuknya.
Menjaga Dua Bahasa Tetap Sinkron
Setiap studi kasus punya dua versi, jadi setiap perubahan berisiko membuat isi keduanya tidak lagi sama. Kontennya dipecah menjadi satu file shared untuk fakta dan satu file per bahasa untuk teks, lalu diperiksa dengan script yang memastikan struktur kedua bahasa tetap sama sebelum dirilis.
State Navbar yang Ter-reset Setiap Navigasi
Navbar menentukan kapan harus menampilkan bar full-width berdasarkan state yang di-reset setiap kali pindah halaman, sehingga sempat tampil dalam mode yang salah sebelum membetulkan dirinya sendiri. Setelah ditelusuri, penyebabnya adalah cara router me-remount komponen saat navigasi. Solusinya, posisi scroll dibaca saat render dari store yang tetap ada walau halaman berganti.
Masalah teknis yang diperbaiki selama membangun proyek ini.
Kerentanan ditambal
Benar sejak frame pertama, di setiap navigasi
Gambar di bawah 200KB
Pipeline gambar yang lebih cepat
Dipastikan sinkron di setiap rilis
Status bar yang bersih
Sebelum
Situs berjalan di versi Next.js lama dengan kerentanan keamanan yang sudah diketahui publik.
Sesudah
Diperbarui ke versi yang sudah ditambal tanpa mengubah perilaku situs yang terlihat.
Sebelum
Navbar menentukan apakah harus menampilkan bar full-width berdasarkan state yang di-reset setiap kali halaman berganti, sehingga sempat ter-render dalam mode yang salah sebelum membetulkan dirinya sendiri. Bug ini terus muncul kembali walau sudah beberapa kali dicoba diperbaiki.
Sesudah
Posisi scroll kini dibaca saat render langsung dari store yang tetap ada walau halaman berganti, sehingga navbar ter-render dengan benar sejak frame pertama, berapa kali pun router me-remount komponennya.
Sebelum
Gambar beresolusi tinggi yang tersebar di seluruh situs, bukan hanya di satu bagian, berisiko memperlambat setiap halaman.
Sesudah
Setiap gambar di seluruh situs dikompres ke WebP dan dijaga di bawah 200KB, sehingga halaman tetap cepat tanpa penurunan kualitas yang terlihat.
Sebelum
Tanpa sharp, Next.js di produksi memakai image processor WASM yang lebih lambat.
Sesudah
Menginstal sharp mempercepat optimasi dan pemuatan gambar di setiap halaman.
Sebelum
Karena setiap studi kasus punya dua versi bahasa, setiap perubahan berisiko membuat isi keduanya perlahan tidak lagi sama.
Sesudah
Konten dipisah menjadi satu file bersama untuk fakta yang tidak pernah berubah dan satu file per bahasa untuk teks, lalu diperiksa dengan script yang memastikan struktur kedua bahasa tetap sama sebelum dirilis.
Sebelum
Di iOS 26, konten halaman sempat bocor sekilas ke area status bar yang transparan.
Sesudah
Navbar full-width yang menyesuaikan diri dengan posisi scroll menjaga area status bar tetap bersih.
