Overview
Dron Matej is a portfolio site for a drone pilot and videographer covering real estate, events and sports across Herzegovina. The whole page is built around one metaphor — a flight: it opens with a drone taking off through the clouds, glides through the work, and lands on a cinematic sunset contact section.
Key Features
Cinematic experience
- Animated hero flight — drone, clouds and a scroll-driven ascent
- Preloader that waits for the gallery so the reveal is seamless
- Scroll-driven parallax on every gallery tile
- Cinematic contact landing — sunset scene with framing marks, like a drone's viewfinder
Gallery
- Curated bento grid (one highlight per project) + full filterable gallery
- Lightbox with keyboard navigation, swipe gestures and a thumbnail strip
- Mobile-first polish — compact bento layout and a collapsed gallery with "show all" toggle so the page stays short on phones
SEO & performance
- All photography converted to webp and preloaded intelligently
- Full metadata: Open Graph image, favicon from the brand mark, JSON-LD LocalBusiness schema, sitemap and robots
- Static export — everything prerendered, no server work at runtime
Tech Stack
- Next.js 16 + TypeScript (App Router, static prerender)
- framer-motion for reveals, counters and the hero flight
- sharp pipeline for image processing (webp conversion, crops, OG image composition)
Client work for a real videography business — from brand assets and photo curation to deployment and Google Search Console setup.
Live: dronmatej.com
