2026 · Personal Brand · Fitness
Trener Chmielewski liga sportu.
Magister fizjoterapii i finalista Mistrzostw Polski w kulturystyce — strona, która od pierwszej sekundy mówi: to nie jest startowy poradnik fitness.
- Domena
- jantrenerchmielewski.pl
- Rok
- 2026
- Rola
- Brand · Design · Full-stack · Motion
- Status
- Live
Brief
Co było do zrobienia i dlaczego.
Trener z 8 latami praktyki, magistrem fizjoterapii i finałem Mistrzostw Polski w kulturystyce — bez reprezentacji online. Brief był jednoznaczny: dark immersive, atletyczny, premium, asymetryczny.
WordPress z motywem fitness znaczyłby pomyłkę kategorii. Każda sekcja musi mówić: tu jesteś u kogoś, kto wie, co robi, a nie u trenera, który dopiero zaczyna.
Decyzje
Jak rozwiązaliśmy problem.
Dark OKLCH paleta (cyan-glow + warm-accent CTA), custom WebGL particle background z device-class detection (deviceMemory + hardwareConcurrency + prefers-reduced-motion), dual animation layer — Framer Motion dla gestów i spring physics, GSAP dla scroll-precision.
45+ programmatic city pages (/trener-personalny-warszawa, /dieta-online-krakow, /prowadzenie-online-bydgoszcz...) wygenerowane przez next-sitemap dla local SEO bez ręcznej duplikacji. Lenis na całej stronie, sticky CTA zawsze widoczny.
Tech
Architektura w skrócie.
Decyzje techniczne, które miały wpływ. Bez frazesu „nowoczesny stack”.
- Next.js 16
- React 19
- Tailwind v4
- Custom WebGL particles
- GSAP 3.15 + ScrollTrigger
- Framer Motion 12
- Lenis 1.3
- Supabase
- next-sitemap
- Resend
- Phosphor Icons
- Syne + Outfit + Geist Mono
WebGL bez pożaru
Particle engine pisany od zera, detekcja low-end devices przez navigator.deviceMemory, hardwareConcurrency i prefers-reduced-motion. Fallback static gradient, animacja na scroll, nie na każdy frame. Cena za WOW musi być uczciwa — telefony mają zostać żywe.
Dual animation layer (bez konfliktów)
Framer Motion dla mikro (hover, tap, drag) i spring physics, GSAP wyłącznie w izolowanych useEffect z cleanup dla scroll timeline. Nigdy w tym samym tree — to jedyny sposób, żeby staggerChildren Framera nie zniknął, gdy GSAP przejmie kontrolę nad skrolem.
Programmatic local SEO
next-sitemap.config.js z 45 miastami x 4 usługi (trener-personalny / dieta-online / plan-treningowy / prowadzenie-online), prioritized entries (pillar 0.9, lokalne 0.8, top-10 PL 0.7), JSON-LD Person + LocalBusiness, robots.txt allow GPTBot/ClaudeBot.
Co dostarczamy
Funkcje w produkcji.
Custom WebGL particles z device-class detection
Dark immersive OKLCH (cyan-glow + warm-accent)
Dual animation: Framer + GSAP + Lenis bez konfliktów
45+ city landing pages (programmatic SEO)
Custom cursor + magnetic CTA
Sticky CTA button always visible
Metamorphosis gallery (before/after klientów)
Testimonial carousel z keyboard nav
Lead capture do Supabase + email Resend
Showcase
Galeria live.
Zrzuty z produkcji w pełnej rozdzielczości. Kliknij kafelek, żeby otworzyć w fullscreen — keyboard nav (← → ESC), zoom (Z lub podwójne kliknięcie).
Liczby
Skala projektu bez koloru.
Liczby z kodu i analytics. Bez wysiłku, żeby coś z nich wyciągnąć.
- miast w sitemapie
0+
programmatic SEO
- routes w App Router
0
- sekcji na home
0
- silniki animacji
0
Framer + GSAP + Lenis
- z fallbackiem
WebGL
low-end device safe
- commitów / plików w repo
0 / 157
Refleksja
Co się okazało po fakcie.
WebGL na home brzmi prosto, dopóki nie odpalisz na 4-letnim Androidzie. Detekcja deviceMemory < 4, hardwareConcurrency < 4 i prefers-reduced-motion pozwala mieć WOW i nie zabijać telefonów. Druga lekcja: nie mieszaj GSAP z Framer w jednym React tree — izoluj GSAP w useEffect z cleanup, inaczej znikną stagger childreny i straci się 4h na pytaniu dlaczego to się nie chce odpalać.
06 / Kontakt
Powiedz, na co robisz stronę.
Napisz kilka zdań o projekcie — wracam z konkretami i wyceną w ciągu 24h. Spotkanie online za darmo, bez zobowiązań.
- Emailhej@twojdesigner.pl
- Telefon+48 727 219 717
- LokalizacjaToruń, cała Polska
- Odpowiadampon–pt, do 24h
- Wolisz pominąć formularz?
Status
Przyjmuję projekty — kwiecień i maj 2026