Interactive Web Experience · Three.js
Portfolio 2026
Personal portfolio website featuring a realistic 3D Rapier physics ID lanyard, procedural Web Audio synthesizer engine, stacked phone showcase decks, drifting space particle canvas, and hardware-accelerated liquid glass panels.
https://portfolio.dev
Feature
Interactive 3D Rapier Physics ID Lanyard
- Three.js and React Three Fiber interactive ID badge responding to mouse drag, inertia, and gravity
- Rigid body Rapier physics simulation calculating realistic rope tension, angular drag, and surface rebound
- GPU-composited micro-shadows and realistic material specular reflections rendering at 60fps
Procedural Web Audio Soundscape Engine
- Synthesized Web Audio API sound engine generating realtime tones mapped to pentatonic melodic frequencies
- Subtle acoustic feedback on navigation, project card hover, and interactive button clicks
- Global mute controls with smooth gain fades, audio spectrum persistence, and zero external asset latency
Stacked Card Showcases & Dynamic Decks
- Framer Motion stacked phone decks with spring gesture physics, swipe dismiss, and peeking back card depth
- Touch-optimized drag interactions allowing users to cycle through mobile application screens
- Accessible navigation architecture with scroll-synchronized URL hashes and responsive layouts
Liquid Glass & Adaptive Theme Architecture
- Hardware-accelerated glassmorphism panels featuring dynamic backdrop filters and glowing borders
- Instantaneous dark and light theme toggle with CSS variable design tokens and zero flash of unstyled content
- High-contrast editorial typography pairing Anton display headlines with clean monospace telemetry
Technical
Real-time Three.js lanyard simulation computed with rigid body Rapier physics and collision response
Procedural Web Audio API soundscape synthesizing melodic frequencies on the pentatonic scale without audio assets
Zero-runtime-overhead architecture powered by TanStack Start, Vite, and hardware-accelerated GPU transforms
Technologies Utilized
React
TanStack Start
Three.js
React Three Fiber
Rapier 3D
Framer Motion
GSAP
Web Audio API
Tailwind CSS