Air Dave

A single-page landing designed like an edited video, not a website. The hero, with a preloaded webm video (2 Mbps, LCP marker), starts its first frame along with the first render, no empty placeholder for 2 seconds.

Four scenes: the reel in the hero, “I'm Dawid” (about me, with specific gear, a DJI Mini 3 Pro), “My Work” (a gallery of flight films and photos) and contact. Each section has a pin and its own scroll-driven micro-narrative.

A gallery with horizontal scroll on desktop, driven by vertical scroll through ScrollTrigger. On mobile, the cards overlap instead of stacking, which keeps the composition dense within the phone frame rather than stretching the section across 3 screens.

Parallax on the flight photos, scroll reveal on the headings, magnetic-like hover on the CTA. JSON-LD of type Person with jobTitle “Drone Operator”, an og:image of the signature shot, meta theme-color in cinematic black.

Stack: React, Vite, GSAP, ScrollTrigger, Netlify. A single bundle without SSR, because this isn't a site with a hundred subpages to index. It's a four-scene showcase. The SPA delivers an instant first paint and full control over GSAP without a hydration mismatch.

The hero video is a webm preloaded via `<link rel="preload" as="video">`, so LCP latches onto the first video frame rather than a fallback image. The 2 Mbps bitrate is a deliberate compromise between sharpness and weight.

ScrollTrigger in every section: `pin` holds the scene on screen, `scrub` ties scroll progress to the animation, horizontal scroll runs through translateX driven by vertical scroll. The mobile overlapping cards use position absolute plus transform driven by ScrollTrigger progress. Every listener is cleaned up in the effect's return function.

Video in the hero instead of an image is an industry-driven decision. A drone is a medium of movement, and a client looks to an operator for dynamics, composition and an eye for framing. A static gallery doesn't answer that question. The very first frame of the site already sells movement, before the client reads a single sentence.

A pin in every section is a deliberate directorial choice. A classic scroll is a list. Pinning turns each section into a scene the viewer watches to the end before moving on. The client watches the site like a film rather than swiping it like a feed.

Horizontal scroll in the gallery and overlapping cards on mobile solve the same problem differently: instead of stretching sections across five screens, they compress the composition so every scroll delivers a new frame. You look more densely and swipe less.

React plus Vite instead of Next.js, because this isn't a site with 200 subpages for SEO. It's a 4-scene showcase. SSR and static rendering would be over-engineered. Vite gives a single bundle, a lightning-fast LCP and GSAP without compromise. The DJI Mini 3 Pro named in the about section answers “what do you fly” before the client gets the chance to ask.