Back to Portfolio🌐 3D Portfolio Site
🌐

Immersive Web Experience

3D Portfolio Site

Three.jsWebGLHTML
01

About Project

A groundbreaking personal portfolio website that pushes the boundaries of web graphics using Three.js and custom WebGL shaders. The site features a real-time particle nebula system with thousands of animated points forming a cosmic backdrop, a DNA helix double-helix structure rendered with 3D geometry, and smooth scroll-driven animations that seamlessly transition between sections. Every visual element is crafted to create an immersive cyberpunk atmosphere.

CategoryThree.js
Tech StackThree.js · GLSL · CSS
StatusActive
02

Key Features

Particle Nebula

Real-time particle system rendering 1500+ animated points with custom shaders, additive blending, and depth-based opacity.

🧬

DNA Helix Animation

Parametric double-helix geometry with connected nodes, smooth rotation, and color-gradient materials.

🖥️

Custom Shaders

GLSL vertex and fragment shaders for post-processing effects including bloom, chromatic aberration, and film grain.

👀

Scroll Animations

IntersectionObserver-driven reveal animations with staggered delays, parallax effects, and smooth section transitions.

🎨

Cyberpunk Theme

Custom design system with neon cyan/violet color palette, glassmorphism, glow effects, and Orbitron typography.

🌌

3D Project Backgrounds

Each section features its own animated Three.js background with floating particles and ambient motion.

03

Tech Stack

🌌Three.js
🖥️WebGL
⚙️GLSL
Next.js
⚗️React Three Fiber
🎬Framer Motion
04

Project Preview

3D Portfolio Site — Preview
🌐

The portfolio opens with a full-screen particle nebula that responds to scroll position. As users navigate, sections reveal with staggered animations while 3D backgrounds maintain ambient motion throughout. The custom cursor, glowing UI elements, and smooth transitions create a cohesive futuristic experience.

Back to Portfolio