©2025 · Personal brand · Strona designerska
Air Dave
Strona reżyserowana jak film, nie wizytówka. Hero z video, pinning w każdej sekcji, horizontal scroll i nachodzące karty.
- Klient
- Dawid Chęsiak
- Osoba
- Dawid „air_d.a.v.e” Chęsiak
- Lokalizacja
- Bydgoszcz i okolice
- Rok
- 2025
- Zakres
- Identyfikacja personal brand · Strona designerska · Animacje GSAP · Wdrożenie
Branża
Fotografia i film z drona · Bydgoszcz
- Klient
- Dawid Chęsiak
- Osoba
- Dawid „air_d.a.v.e” Chęsiak
- Lokalizacja
- Bydgoszcz i okolice
- Rok
- 2025
- Zakres
- Identyfikacja personal brand · Strona designerska · Animacje GSAP · Wdrożenie
Problem i podejście
Jak sprzedać widok z góry komuś, kto siedzi za ekranem na drugim piętrze?
- Identyfikacja personal brand
- Strona designerska
- Animacje GSAP
- Wdrożenie
Problem
Dawid lata dronem od ponad pięciu lat, hobbystycznie. Prowadzi Instagram @air_d.a.v.e i większość nagrań do tej pory robił za darmo, dla znajomych i z miłości do latania. Teraz chce zacząć powoli traktować to poważniej i przyjmować pierwsze płatne zlecenia.
Nadal bez działalności gospodarczej, nadal jako pasjonat, ale z miejscem w internecie, w którym ktoś zupełnie obcy może go zobaczyć, ocenić poziom i napisać. W Bydgoszczy operatorów drona jest sporo, każdy z podobnym Instagramem.
Strona miała pokazać, że Dawid jest gotowy na pierwsze realne zlecenia, mimo że dalej traktuje to jak pasję.
Podejście
Drone to ruch, więc strona też musi być ruchem. Zamiast galerii ze statycznymi zdjęciami klient od razu po wejściu widzi fragment lotu jako tło hero. Każda kolejna sekcja zatrzymuje go na chwilę, jak scena w filmie, zanim przejdzie dalej.
Galeria nie spada w dół długą listą, tylko przesuwa kadry w bok. Karty na telefonie nachodzą jedna na drugą, jakby ktoś rozłożył je na biurku. Cała strona naśladuje rytm montażu wideo. Zamiast czytać listę usług klient ogląda kilka scen i decyduje, czy chce takich kadrów u siebie.
Wynik wdrożenia
- 97Performance
- 100Accessibility
- 100Best Practices
- 100SEO
Co dostarczyłem.
Dawid dostał stronę, która robi to samo, co jego dron: prowadzi widza kadr po kadrze. Jedna strona zmontowana jak film — sześć scen, każda na pełną wysokość ekranu, każda zatrzymuje na chwilę, zanim wjedzie następna.
- 01Hero z 17-sekundową rolką 1080p — kadr widać od pierwszej sekundy
- 02Oferta rozpisana na pięć usług, od ujęć promocyjnych po montaż
- 03Scena o sprzęcie z realnymi trybami zapisu DJI Mini 3 Pro
- 04Galeria ośmiu kadrów — w bok na desktopie, nachodzące karty na telefonie
- 05Kontakt z telefonem, mailem i lokalnym czasem Bydgoszczy
- 06JSON-LD Person, og:image z podpisem, theme-color w kinowej czerni
Scena 02 — „Jestem Dawid”, zatrzymana pinem na pełnym ekranie
Jak to zrobiłem.
Strona wstaje szybko nawet na słabszym łączu, bo przeglądarka nie czeka na jeden wielki plik. React i Vite, animacje na GSAP-ie ze ScrollTriggerem; build wychodzi w trzech kawałkach — osobno React, osobno GSAP, reszta w pliku głównym — i wszystkie jadą równolegle.
Pierwszą klatkę maluje plakat WebP wpisany prosto w HTML. Wideo ma preload ustawiony na same metadane i dochodzi chwilę później, już pod spodem. Dlatego kadr jest na ekranie od razu, zamiast trzymać czarne tło do czasu, aż dojedzie cztery megabajty nagrania.
Każda scena to pełna wysokość ekranu z własnym z-indexem. Scroll nie przesuwa ich obok siebie, tylko nasuwa jedną na drugą — na telefonie wygląda to jak karty rozkładane na biurku. Galeria działa odwrotnie: pionowy scroll zamienia się w poziomy ruch kadrów.
Przesuń, aby zobaczyć więcej
Widok mobilny — hero, oferta i galeria, wszystkie sceny od 360 px
Dlaczego tak.
Klient operatora drona kupuje ruch: dynamikę, kompozycję, świadomość kadru. Dlatego hero otwiera video, nie obraz — pierwsza klatka sprzedaje ruch, zanim ktokolwiek przeczyta jedno zdanie. Statyczna galeria na to pytanie nie odpowiada.
Pin w każdej sekcji to świadomy reżyserski wybór. Klasyczny scroll to lista. Pinning robi z każdej sekcji scenę, którą widz dogląda do końca, zanim przejdzie dalej. Klient ogląda stronę jak film, nie przewija jak feed.
Horizontal scroll w galerii i nachodzące karty na mobile rozwiązują ten sam problem inaczej: zamiast rozciągać sekcje na pięć ekranów, kompresują kompozycję i każdy scroll dostarcza nowy kadr. Patrzy się gęściej, mniej się przewija.
React plus Vite zamiast Next.js, bo to nie katalog dwustu podstron pod SEO, tylko jeden pokaz na sześć scen. SSR i generowanie statyczne rozwiązywałyby problem, którego tu nie ma. Vite daje krótki build, przewidywalny podział na kawałki i GSAP-a bez obchodzenia frameworka.
Ostatni kadr — pożegnanie zamiast klasycznej stopki
Design system.
Kinowa czerń, jeden czerwony akcent i ciężka kondensowana bold. Typografia krzyczy, tło milczy — tak, żeby kadr z lotu był jedynym kolorem na ekranie.
Air Dave
- N° 01To moja pasja
- N° 02Trochę o mnie
- N° 03Mój sprzęt
- N° 04Kontakt
- Tło#080808
- Tekst#ffffff
- Akcent#e10300
- Sekcja jasna#e8e8e8
- Display
- Drone Operator
- H1
- Jestem Dawid
- H2
- Moje realizacje
- H3
- Mój sprzęt
Tech stack
- React
- Vite
- GSAP
- ScrollTrigger
- Netlify
Credits
- Projekt i kod
- SoraWeb Studio · Aleksander Pietrzak
- Stack
- React · Vite · GSAP · ScrollTrigger
- Hosting
- Netlify
Schol-Bud
Podobny projekt?
Porozmawiajmy o Twojej stronie.
Każda strona zaczyna się od krótkiej rozmowy o celach. Bez briefu, bez zobowiązań. Najpierw sprawdzam, czy się dogadujemy.