Overview
SkyView.id is a portfolio website for a fictional aerial drone photography studio based in Jakarta, showcasing work across four categories (Wedding, Real Estate, Corporate, Tourism) with cinematic animations and SEO readiness. Built to demonstrate modern frontend architecture for media-heavy websites with lazy-loaded video embeds, filterable masonry gallery, and dual-layer form validation.
Challenge
- Aerial photographers need a web presence matching the cinematic quality of their work, but most templates look generic and load slowly with large media files
- Portfolio galleries need category filtering without full page reloads, plus a full-screen viewing experience for high-resolution images
- Video content from YouTube needs to load only when users actually want to watch, not on page load, to keep performance fast
- The site needs to rank in search engines for location-specific queries while serving an international audience
Solution
Visual Experience & Animation
- Full-screen hero with word-by-word text reveal animation, cinematic Ken Burns zoom, and asymmetric bento grid layout for featured work
- Scroll-triggered animations throughout (fade, slide, scale) using Framer Motion with a single consistent easing curve
- Animated number counters for the stats section that count up when scrolled into view
Portfolio & Media
- Category-filtered masonry gallery (Wedding, Real Estate, Tourism, Corporate) with full-screen lightbox for detailed viewing
- Video showcase with lazy-loaded YouTube embeds: thumbnails show first, iframes load only on play click via Intersection Observer
- 16 portfolio items and 6 video items with structured data across 5 SEO-optimized pages
Business & SEO
- Contact form with dual-layer validation (React Hook Form + Zod on client, same schema re-validated server-side via 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 scroll-aware frosted-glass header with dark mode support
Results
- Portfolio presentation: Static image dump → 16 filterable items across 4 categories with full-screen lightbox
- Video performance: All 6 YouTube iframes on page load → Zero iframes until user clicks play via Intersection Observer
- Form reliability: No validation → Dual-layer client + server validation with shared Zod schema
- Animation consistency: None → 15+ scroll-triggered animations with unified easing curve across all 5 pages
