Portfolio Liquid Glass
Situs yang sedang Anda baca: multi-bahasa, ringan, dan tanpa template.
- Peran
- Designer & developer
- Tahun
- 2026
- Status
- Live
- Tech stack
- Next.jsnext-intlFramer MotionLiquid GlassVPS
Pratinjau ini adalah ilustrasi antarmuka, bukan tangkapan layar data pelanggan.
Masalah
Template portfolio terasa kosong dan generik: satu halaman panjang, teks placeholder, dan animasi yang membebani perangkat kelas bawah.
Pendekatan
Saya memisahkan konten dari struktur, menaruh seluruh teks di berkas pesan per bahasa, dan membuat lapisan glass yang hanya aktif saat elemen terlihat, di layar lebar, dan tanpa preferensi reduced motion. Sisanya memakai fallback CSS yang jauh lebih murah.
Fitur utama
- Tujuh halaman dengan prefix bahasa /id dan /en.
- Animasi scroll yang berhenti setelah elemen terlihat sekali.
- Fallback glass murni CSS untuk Firefox dan perangkat mobile.
- Form kontak dengan validasi dan fallback mailto.
Hasil
- 01
Semua halaman dapat dirender statis dan diprefetch.
- 02
Efek berat hanya berjalan pada elemen yang terlihat.
- 03
Preferensi bahasa dan tema tetap tersimpan setelah reload.
Catatan
Efek yang mahal harus punya jalan keluar. Membuat fallback lebih dulu justru menyederhanakan seluruh desain.
Punya tantangan serupa?
Saya senang membahas masalah teknis, bahkan sebelum ada anggaran atau spesifikasi lengkap.