Преміальне портфоліо з 3D WebGL та скрамбл-анімацією
Преміальне інтерактивне портфоліо Full-Stack розрозробника, реалізоване в естетиці темного цифрового мінімалізму та натхненне сайтами-переможцями Awwwards. Головна мета проєкту - продемонструвати високий рівень володіння складною інтерактивною анімацією, 3D-графікою в реальному часі та бездоганним UX/UI.
Що реалізовано:
- Інтерактивна 3D WebGL-сцена: генеративна сфера з тисяч часток у Hero-блоці, яка фізично реагує (відштовхується, вигинається та деформується) на рухи миші або дотики до екрана.
- Оптимізація ресурсів GPU/CPU: за допомогою IntersectionObserver рендер-цикл Three.js повністю зупиняється, як тільки Hero-блок зникає з екрана, що економить до 90% ресурсів пристрою.
- Ефект цифрового скрамблінгу (Text Scramble): кастомний алгоритм випадкової заміни символів, який ефектно анімує текстові заголовки при першому появі, кліках на меню або скролі назад до початку сторінки.
- Преміальний прелоадер: брендований екран завантаження з динамічним індикатором прогресу та ефектом фізичного розсунення екрана по вертикалі.
- Магнітні UI-елементи: інтерактивні кнопки та пункти меню м'яко притягуються до курсору користувача, додаючи інтерфейсу тактильного відчуття фізичного об'єму.
- Кастомний курсор з магнітним ефектом: курсор плавно слідує за мишею з легким запізненням (lerp), змінює розмір при наведенні на активні зони та має вбудовану помаранчеву крапку-фокус.
- Ефект неонового свічення у футері: фінальний слоган при наведенні миші плавно перетікає з металевого градієнта в насичений фірмовий колір із м'яким неоновим свіченням (glow).
- Брендований SVG Favicon: кастомна геометрична іконка-монограма "DV" з помаранчевим акцентом, вбудована безпосередньо в код для надшвидкого завантаження.
- Повна кросбраузерна стабільність: впроваджено Critical CSS, інлайнові стилі та синхронний рендер буфера, що повністю вирішує проблему білих спалахів (F5 flash) на Windows/ANGLE GPU-контекстах.
Технології:
HTML5, CSS3 (Vanilla), JavaScript, Three.js (WebGL), GSAP (GreenSock), ScrollTrigger, Lenis (Smooth Scroll)
Що реалізовано:
- Інтерактивна 3D WebGL-сцена: генеративна сфера з тисяч часток у Hero-блоці, яка фізично реагує (відштовхується, вигинається та деформується) на рухи миші або дотики до екрана.
- Оптимізація ресурсів GPU/CPU: за допомогою IntersectionObserver рендер-цикл Three.js повністю зупиняється, як тільки Hero-блок зникає з екрана, що економить до 90% ресурсів пристрою.
- Ефект цифрового скрамблінгу (Text Scramble): кастомний алгоритм випадкової заміни символів, який ефектно анімує текстові заголовки при першому появі, кліках на меню або скролі назад до початку сторінки.
- Преміальний прелоадер: брендований екран завантаження з динамічним індикатором прогресу та ефектом фізичного розсунення екрана по вертикалі.
- Магнітні UI-елементи: інтерактивні кнопки та пункти меню м'яко притягуються до курсору користувача, додаючи інтерфейсу тактильного відчуття фізичного об'єму.
- Кастомний курсор з магнітним ефектом: курсор плавно слідує за мишею з легким запізненням (lerp), змінює розмір при наведенні на активні зони та має вбудовану помаранчеву крапку-фокус.
- Ефект неонового свічення у футері: фінальний слоган при наведенні миші плавно перетікає з металевого градієнта в насичений фірмовий колір із м'яким неоновим свіченням (glow).
- Брендований SVG Favicon: кастомна геометрична іконка-монограма "DV" з помаранчевим акцентом, вбудована безпосередньо в код для надшвидкого завантаження.
- Повна кросбраузерна стабільність: впроваджено Critical CSS, інлайнові стилі та синхронний рендер буфера, що повністю вирішує проблему білих спалахів (F5 flash) на Windows/ANGLE GPU-контекстах.
Технології:
HTML5, CSS3 (Vanilla), JavaScript, Three.js (WebGL), GSAP (GreenSock), ScrollTrigger, Lenis (Smooth Scroll)
Львів 
Вільний для роботи
Запропонувати роботу