Premium portfolio with 3D WebGL and scramble animation
Premium interactive portfolio of a Full-Stack developer, designed in the aesthetics of dark digital minimalism and inspired by Awwwards-winning websites. The main goal of the project is to showcase a high level of mastery in complex interactive animation, real-time 3D graphics, and impeccable UX/UI.
What has been implemented:
- Interactive 3D WebGL scene: a generative sphere with thousands of particles in the Hero block that physically reacts (repels, bends, and deforms) to mouse movements or screen touches.
- GPU/CPU resource optimization: using IntersectionObserver, the Three.js render cycle completely stops as soon as the Hero block disappears from the screen, saving up to 90% of device resources.
- Digital scrambling effect (Text Scramble): a custom algorithm for random character replacement that effectively animates text headings upon first appearance, clicks on the menu, or scrolling back to the top of the page.
- Premium preloader: a branded loading screen with a dynamic progress indicator and a physical vertical screen push effect.
- Magnetic UI elements: interactive buttons and menu items gently attract to the user's cursor, adding a tactile sense of physical volume to the interface.
- Custom cursor with magnetic effect: the cursor smoothly follows the mouse with a slight delay (lerp), changes size when hovering over active areas, and features a built-in orange focus dot.
- Neon glow effect in the footer: the final slogan smoothly transitions from a metallic gradient to a rich brand color with a soft neon glow upon mouse hover.
- Branded SVG Favicon: a custom geometric monogram icon "DV" with an orange accent, embedded directly in the code for ultra-fast loading.
- Full cross-browser stability: Critical CSS, inline styles, and synchronous buffer rendering have been implemented, completely resolving the issue of white flashes (F5 flash) on Windows/ANGLE GPU contexts.
Technologies:
HTML5, CSS3 (Vanilla), JavaScript, Three.js (WebGL), GSAP (GreenSock), ScrollTrigger, Lenis (Smooth Scroll)
What has been implemented:
- Interactive 3D WebGL scene: a generative sphere with thousands of particles in the Hero block that physically reacts (repels, bends, and deforms) to mouse movements or screen touches.
- GPU/CPU resource optimization: using IntersectionObserver, the Three.js render cycle completely stops as soon as the Hero block disappears from the screen, saving up to 90% of device resources.
- Digital scrambling effect (Text Scramble): a custom algorithm for random character replacement that effectively animates text headings upon first appearance, clicks on the menu, or scrolling back to the top of the page.
- Premium preloader: a branded loading screen with a dynamic progress indicator and a physical vertical screen push effect.
- Magnetic UI elements: interactive buttons and menu items gently attract to the user's cursor, adding a tactile sense of physical volume to the interface.
- Custom cursor with magnetic effect: the cursor smoothly follows the mouse with a slight delay (lerp), changes size when hovering over active areas, and features a built-in orange focus dot.
- Neon glow effect in the footer: the final slogan smoothly transitions from a metallic gradient to a rich brand color with a soft neon glow upon mouse hover.
- Branded SVG Favicon: a custom geometric monogram icon "DV" with an orange accent, embedded directly in the code for ultra-fast loading.
- Full cross-browser stability: Critical CSS, inline styles, and synchronous buffer rendering have been implemented, completely resolving the issue of white flashes (F5 flash) on Windows/ANGLE GPU contexts.
Technologies:
HTML5, CSS3 (Vanilla), JavaScript, Three.js (WebGL), GSAP (GreenSock), ScrollTrigger, Lenis (Smooth Scroll)
Lvov 
Available for hire
Offer work