Overview
SkyView.id adalah website portfolio untuk studio fotografi dan videografi drone (proyek konsep) berbasis Jakarta. Karya ditampilkan di empat kategori: Wedding, Real Estate, Corporate, dan Tourism.
Situs ini didesain untuk media berat: video YouTube dimuat malas (lazy), galeri masonry dengan filter dan lightbox layar penuh, animasi scroll yang konsisten, serta meta, data terstruktur, dan sitemap untuk SEO.
Challenge
- Fotografer aerial butuh tampilan web yang setara dengan kualitas sinematik karya mereka, tapi kebanyakan template terlihat generik dan lambat saat memuat file media besar
- Galeri portfolio butuh filter kategori tanpa reload halaman penuh, ditambah pengalaman viewing full-screen untuk gambar resolusi tinggi
- Konten video dari YouTube harus dimuat hanya saat user benar-benar ingin menonton, bukan saat halaman pertama kali dibuka, agar performa tetap cepat
- Website harus bisa ranking di mesin pencari untuk query spesifik lokasi sambil tetap melayani audiens internasional
Solution
Pengalaman Visual & Animasi
- Hero full-screen dengan animasi reveal teks per kata, efek zoom sinematik Ken Burns, dan layout bento grid asimetris untuk karya unggulan
- Animasi scroll-triggered di seluruh halaman (fade, slide, scale) menggunakan Framer Motion dengan satu kurva easing konsisten
- Counter angka animasi pada bagian statistik yang berjalan saat di-scroll ke area pandang
Portfolio & Media
- Galeri masonry dengan filter kategori (Wedding, Real Estate, Tourism, Corporate) dan lightbox full-screen untuk melihat detail
- Showcase video dengan YouTube embed lazy-loaded: thumbnail tampil duluan, iframe baru dimuat saat diklik via Intersection Observer
- 16 item portfolio dan 6 item video dengan data terstruktur di 5 halaman SEO-ready
Bisnis & SEO
- Form kontak dengan validasi dua lapis (React Hook Form + Zod di client, schema yang sama divalidasi ulang server-side via API route)
- Halaman layanan dengan 4 kategori, daftar fitur detail, dan 3 paket harga transparan (Basic/Standard/Premium)
- Meta title per halaman, Open Graph image, sitemap.xml programatik, dan header frosted-glass scroll-aware dengan dukungan dark mode
Results
- Presentasi portfolio: Dump gambar statis → 16 item yang bisa difilter di 4 kategori dengan lightbox full-screen
- Performa video: Semua 6 iframe YouTube dimuat saat page load → Nol iframe sampai user klik play via Intersection Observer
- Reliabilitas form: Tanpa validasi → Validasi dua lapis client + server dengan Zod schema yang dishare
- Konsistensi animasi: Tidak ada → 15+ animasi scroll-triggered dengan kurva easing seragam di seluruh 5 halaman
