Overview
SkyView.id adalah website portfolio untuk studio fotografi dan videografi drone fiktif berbasis di Jakarta, menampilkan karya di empat kategori (Wedding, Real Estate, Corporate, Tourism) dengan animasi sinematik dan kesiapan SEO. Dibangun untuk mendemonstrasikan arsitektur frontend modern untuk website berat media dengan video embed lazy-loaded, galeri masonry dengan filter, dan validasi form dua lapis.
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
