Portofolio yang lagi kamu buka ini bukan template yang tinggal ganti nama dan foto. Ini dibangun dari nol, section demi section, sampai tiap scroll-mu kerasa seperti lagi nonton sesuatu — bukan sekadar baca halaman.
← Back to Blog
ID
Di Balik Layar: Cara Aku Bikin Portofolio Ini
Bukan template, bukan asal jadi — ini cerita di balik tiap efek scroll di situs ini, dan kenapa 'terlihat keren' itu butuh lebih dari sekadar nama tools.
● Case Study
Scene 01
Kenapa Gak Pakai Template Aja?
Aku sering ditanya, "Ini beneran dikerjain sendiri?" Jawabannya iya — dari keputusan desain paling kecil sampai server yang menjalankannya sekarang, semuanya aku yang pegang kendali penuh.
Template itu cepat, tapi ceritanya jadi generik. Semua orang bisa punya hero section yang sama, layout proyek yang sama, warna yang sama. Untuk portofolio yang tujuannya meyakinkan orang buat percaya sama kerjaanmu, itu kontradiktif — gimana caranya klien percaya kamu bisa bikin sesuatu yang unik, kalau situs kamu sendiri kelihatan seperti ribuan situs lain?
Jadi aturannya cuma satu: setiap section harus punya momen sendiri. Nggak boleh ada bagian yang terasa "template polos" — kalau cuma judul plus grid kartu standar, berarti belum selesai.
Scene 02
Filosofi di Balik Tiap Scroll
Situs ini dirancang sebagai satu perjalanan utuh, bukan kumpulan section yang ditumpuk asal. Dari atas ke bawah, tiap bagian punya karakter geraknya sendiri.
- Hero — nama nggak cuma nongol, tapi masuk berlapis dengan kecepatan berbeda-beda, ditambah kartu foto yang miring mengikuti posisi kursor kamu.
- Baris skill berjalan — kecepatannya bukan konstan. Makin cepat kamu scroll, makin cepat juga dia berlari. Dia "merasakan" gerakanmu.
- Layanan — kartu-kartunya menumpuk satu per satu saat kamu scroll, seperti membalik kartu remi.
- Proyek — scroll vertikal disulap jadi gerakan horizontal, galeri proyek meluncur menyamping di dalam panel gelap.
- Tentang — ini favoritku. Teksnya nggak langsung muncul semua; tiap kata "menyala" satu-satu, persis mengikuti seberapa jauh kamu scroll.
- FAQ & Kontak — ditutup dengan sesuatu yang tenang setelah semua gerakan di atas, biar nggak melelahkan.
Efeknya dibangun pakai kombinasi smooth-scroll dan scroll-triggered animation yang sudah lazim dipakai situs-situs kelas atas — tapi nama tools cuma modal awal. Yang bikin beda adalah jam terbang nyetel timing-nya: kapan harus cepat, kapan harus pelan, kapan harus diam sama sekali. Itu bagian yang nggak ada di dokumentasi manapun — cuma didapat dari trial-error berkali-kali sampai "terasa pas".
Scene 03
Bukan Cuma Tampilan
Di balik animasi itu ada backend beneran: database, sistem login, dan dashboard admin yang aku pakai sendiri buat nambah proyek, nulis artikel ini, sampai balas pesan masuk — tanpa harus sentuh kode tiap kali ada yang berubah. Semuanya jalan di server milikku sendiri, bukan numpang platform gratisan.
Kombinasi ini yang sering luput dilihat orang: bikin animasi keren itu satu skill, tapi bikin sistem di baliknya tetap rapi, aman, dan gampang dikelola jangka panjang itu skill yang beda lagi. Aku pegang dua-duanya.
Scene 04
AI Sebagai Partner, Bukan yang Mikir
Iya, aku pakai AI dalam prosesnya — sama kayak developer modern lainnya. Tapi peran AI di sini eksekutor, bukan pengambil keputusan.
Setiap detail — dari palet warna, ritme animasi, sampai section mana yang kurang "wah" dan perlu dirombak ulang — itu arahan dan review dariku. AI cuma secepat instruksi yang dikasih; rasa dan standarnya tetap dari orang yang paham mau dibawa ke mana.
Scene 05
Kalau Kamu Butuh yang Serupa
Situs ini contoh kecil dari apa yang bisa aku kerjakan: web development, aplikasi mobile, WordPress, sampai setup server dari nol — semuanya aku tangani end-to-end.
Kalau kamu punya ide bisnis atau produk yang butuh presence online yang nggak pasaran, ceritakan lewat form kontak di bawah. Aku balas secepatnya.