My 3d portfolo

Inspiration

I wanted to break away from conventional, flat 2D portfolio layouts and create a truly memorable web experience. Inspired by modern generative artwork and high-end physical glass refraction, I set out to construct a fluid, interactive 3D world directly in the browser—where physics, dynamic lighting, and ambient sound merge into a cohesive digital showcase.

What it does

My 3D Portfolio is a real-time WebGL interactive portfolio featuring:

• Liquid Glass Specular Wave Surface: An undulating, real-time wave plane rendered with realistic physical material properties (ior refraction, clearcoat, specular highlights, and metalness).
• Interactive 3D Bento Showcase: Interactive 3D cards that respond dynamically to cursor movement, raycasting, and theme toggling.
• Dual Aesthetic Themes: A high-contrast dark cyber-mode and a warm, luxury golden-glaze light mode featuring soft specular bloom.
• 3D Loading Sequence: A custom WebGL loading canvas featuring a morphing liquid glass orb and smooth GSAP entrance transitions.
• Ambient Audio Engine: Integrated low-volume background audio with interactive mute and play controls for an immersive atmosphere.

How I built it

• 3D & WebGL Engine: Built using React Three Fiber (R3F), Three.js, and custom vertex displacement equations to generate real-time fluid ripples and physical glass materials.
• UI & Architecture: Structured with React 18, TypeScript, and Vite for fast performance and strong type safety.
• Styling & Motion: Crafted with Tailwind CSS, GSAP for spatial scene transitions, and Lucide Icons for UI elements.
• Audio Integration: Developed a seamless background audio streamer and procedural Web Audio engine with real-time spectrum bar animations.

Challenges I ran into

• WebGL Shader Performance: Calculating real-time vertex displacement across dense plane geometries while maintaining smooth 60 FPS performance across desktop and mobile devices required fine-tuning normals and geometry vertex counts.
• Light Mode Refraction: Achieving a realistic, elegant "golden glaze" liquid glass aesthetic in light mode without over-exposing specular highlights or compromising readability required precise tuning of lighting color temperatures, attenuation, and physical material parameters (ior, transmission, and sheen).
• Browser Audio Policies: Ensuring the ambient soundtrack plays seamlessly while respecting strict browser autoplay guidelines required careful interaction handling.

Accomplishments that I'm proud of

• I am proud of creating a realistic physical liquid glass wave shader that runs smoothly right in the browser without requiring pre-rendered video assets.
• I am proud of building a cohesive 3D design system where every component—from the loading sequence to the bento cards—feels responsive, tactile, and visually unified.
• I am proud of crafting a light mode that feels like a luxury golden glass artwork while preserving high contrast and crisp typography.

What I learned

I deepened my understanding of Three.js physical material properties (MeshPhysicalMaterial), real-time vertex displacement algorithms, lighting setups, and optimizing WebGL scenes inside React Fiber trees. I also learned how spatial ambient audio dramatically enhances the emotional impact of a web interface.

What's next for My 3D Portfolio

• Adding customizable custom shader nodes so visitors can interactively tune wave frequency, viscosity, and refractive indices in real time.
• Expanding interactive 3D particle systems that respond to audio frequency analysis.

Built With

• css3
• framer-motion
• gsap
• html5
• lucide-react
• react
• react-three-fiber
• tailwindcss
• three.js
• typescript
• webgl