Премиальное портфолио с 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)
Львов 
Свободен для работы
Предложить работу