Premium portfolio z 3D WebGL i animacją skramblowania
Premium interaktywne portfolio Full-Stack dewelopera, zrealizowane w estetyce ciemnego cyfrowego minimalizmu i inspirowane stronami zwycięzcami Awwwards. Głównym celem projektu jest zaprezentowanie wysokiego poziomu opanowania skomplikowanej interaktywnej animacji, grafiki 3D w czasie rzeczywistym oraz doskonałego UX/UI.
Co zrealizowano:
- Interaktywna scena 3D WebGL: generatywna sfera z tysiącem cząsteczek w bloku Hero, która fizycznie reaguje (odpycha się, wygina i deformuje) na ruchy myszy lub dotyki ekranu.
- Optymalizacja zasobów GPU/CPU: za pomocą IntersectionObserver cykl renderowania Three.js całkowicie zatrzymuje się, gdy blok Hero znika z ekranu, co oszczędza do 90% zasobów urządzenia.
- Efekt cyfrowego skramblowania (Text Scramble): niestandardowy algorytm losowej zamiany znaków, który efektownie animuje nagłówki tekstowe przy pierwszym pojawieniu się, kliknięciach w menu lub przewijaniu z powrotem na początek strony.
- Premium preloader: markowany ekran ładowania z dynamicznym wskaźnikiem postępu i efektem fizycznego rozciągania ekranu w pionie.
- Magnetyczne elementy UI: interaktywne przyciski i pozycje menu delikatnie przyciągają się do kursora użytkownika, dodając interfejsowi dotykowe poczucie fizycznej objętości.
- Niestandardowy kursor z efektem magnetycznym: kursor płynnie podąża za myszą z lekkim opóźnieniem (lerp), zmienia rozmiar przy najeżdżaniu na aktywne obszary i ma wbudowaną pomarańczową kropkę-fokus.
- Efekt neonowego świecenia w stopce: końcowy slogan przy najeżdżaniu myszą płynnie przechodzi z metalicznego gradientu w nasycony kolor firmowy z delikatnym neonowym świeceniem (glow).
- Markowany SVG Favicon: niestandardowa geometryczna ikona-monogram "DV" z pomarańczowym akcentem, wbudowana bezpośrednio w kod dla superszybkiego ładowania.
- Pełna stabilność między przeglądarkami: wdrożono Critical CSS, style inline oraz synchronizowane renderowanie bufora, co całkowicie rozwiązuje problem białych błysków (F5 flash) w kontekstach GPU Windows/ANGLE.
Technologie:
HTML5, CSS3 (Vanilla), JavaScript, Three.js (WebGL), GSAP (GreenSock), ScrollTrigger, Lenis (Smooth Scroll)
Co zrealizowano:
- Interaktywna scena 3D WebGL: generatywna sfera z tysiącem cząsteczek w bloku Hero, która fizycznie reaguje (odpycha się, wygina i deformuje) na ruchy myszy lub dotyki ekranu.
- Optymalizacja zasobów GPU/CPU: za pomocą IntersectionObserver cykl renderowania Three.js całkowicie zatrzymuje się, gdy blok Hero znika z ekranu, co oszczędza do 90% zasobów urządzenia.
- Efekt cyfrowego skramblowania (Text Scramble): niestandardowy algorytm losowej zamiany znaków, który efektownie animuje nagłówki tekstowe przy pierwszym pojawieniu się, kliknięciach w menu lub przewijaniu z powrotem na początek strony.
- Premium preloader: markowany ekran ładowania z dynamicznym wskaźnikiem postępu i efektem fizycznego rozciągania ekranu w pionie.
- Magnetyczne elementy UI: interaktywne przyciski i pozycje menu delikatnie przyciągają się do kursora użytkownika, dodając interfejsowi dotykowe poczucie fizycznej objętości.
- Niestandardowy kursor z efektem magnetycznym: kursor płynnie podąża za myszą z lekkim opóźnieniem (lerp), zmienia rozmiar przy najeżdżaniu na aktywne obszary i ma wbudowaną pomarańczową kropkę-fokus.
- Efekt neonowego świecenia w stopce: końcowy slogan przy najeżdżaniu myszą płynnie przechodzi z metalicznego gradientu w nasycony kolor firmowy z delikatnym neonowym świeceniem (glow).
- Markowany SVG Favicon: niestandardowa geometryczna ikona-monogram "DV" z pomarańczowym akcentem, wbudowana bezpośrednio w kod dla superszybkiego ładowania.
- Pełna stabilność między przeglądarkami: wdrożono Critical CSS, style inline oraz synchronizowane renderowanie bufora, co całkowicie rozwiązuje problem białych błysków (F5 flash) w kontekstach GPU Windows/ANGLE.
Technologie:
HTML5, CSS3 (Vanilla), JavaScript, Three.js (WebGL), GSAP (GreenSock), ScrollTrigger, Lenis (Smooth Scroll)
Lwów 
Gotowy do podjęcia pracy
Zaproponuj zlecenie