Overview
SkyView.id is a portfolio website for an aerial drone photography studio based in Jakarta. The studio shoots across four categories (Wedding, Real Estate, Corporate, Tourism), and the site needed to match the cinematic quality of the work itself.
That meant no generic portfolio template. I built a media-heavy site with lazy-loaded video embeds, a filterable masonry gallery with full-screen lightbox, and scroll-triggered cinematic animations throughout. The architecture handles 16 portfolio items and 6 video embeds without sacrificing load speed.
The site is also fully SEO-optimized with per-page meta tags, structured data, and a programmatic sitemap, so it ranks for location-specific queries like “drone photography Jakarta” alongside the visual experience.
Challenge
Aerial photography is inherently cinematic. The website has to feel that way too, but media-heavy sites are notoriously hard to make fast:
- Most portfolio templates look generic and buckle under the weight of high-resolution images and video embeds. Photographers deserve better
- Portfolio galleries need category filtering without full page reloads, plus a full-screen viewing experience that does the photos justice
- YouTube video embeds are performance killers. Six iframes loading on page load would destroy the initial page speed
- The site needs to rank in search engines for location-specific queries while also serving an international audience browsing for inspiration
Solution
Visual Experience and Animation
The hero section sets the tone immediately. I built a full-screen hero with word-by-word text reveal animation, a cinematic Ken Burns zoom on the background, and an asymmetric bento grid layout for featured work below.
- Scroll-triggered animations (fade, slide, scale) using Framer Motion with a single consistent easing curve across the entire site
- Animated number counters for the stats section that count up when scrolled into view, giving the page a sense of life
Portfolio and Media
The gallery is the heart of the site. I built a category-filtered masonry layout covering all four shooting categories, with a full-screen lightbox for detailed viewing.
- Video showcase uses lazy-loaded YouTube embeds: thumbnails display first, and iframes only load when the user actually clicks play (via Intersection Observer). This keeps the page fast while still offering 6 video pieces
- 16 portfolio items and 6 video items span 5 SEO-optimized pages with structured data
Business and SEO
The site doesn’t just look good. It converts visitors into leads and ranks in search.
- Contact form with dual-layer validation: React Hook Form + Zod on the client, with the same schema re-validated server-side via an API route
- Services page with 4 categories, detailed feature lists, and 3 transparent pricing tiers (Basic, Standard, Premium)
- Per-page meta titles, Open Graph images, programmatic sitemap.xml, and a scroll-aware frosted-glass header with dark mode support
Results
- Portfolio presentation → 16 filterable items across 4 categories with full-screen lightbox, replacing a flat image dump
- Video performance → Zero YouTube iframes load until user clicks play, via Intersection Observer. Six embeds with no load penalty
- Form reliability → Dual-layer client + server validation with a shared Zod schema ensures no bad data reaches the inbox
- Animation consistency → 15+ scroll-triggered animations with a unified easing curve across all 5 pages
