Not your average portfolio. This is an interactive 3D park you drive through in a monster truck, collecting skill orbs, hitting checkpoints, and discovering projects along the way — all running in the browser at 60fps.
🚗 The Vehicle:
A flat-shaded green monster truck with oversized off-road tires, roof rack, bull bar, and spare tire. Physics-driven movement using Rapier — mass, friction, rolling resistance, engine braking, and collision response all feel real.
🌳 The Environment:
A lush park with wind-animated trees (sine-wave canopy sway), rolling stone paths, mossy rocks with collision physics, and a day-cycle sky. CatmullRom spline track curve with 28 waypoints drives the layout.
🎮 Game Systems:
• 8 collectible skill orbs representing real tech skills
• 7 checkpoint gates with proximity detection and celebration effects
• Real-time HUD: speedometer, nitro bar, checkpoint progress
• Mobile touch controls alongside keyboard (WASD / arrows)
• Car selector, map view, sound toggle
🛠️ Tech Stack:
React 19 + TypeScript, React Three Fiber (r3f), Three.js, @react-three/rapier (physics), @react-three/drei (helpers), Zustand (game state), Framer Motion (UI animations), Vite (build), served via Django backend.
🏗️ Architecture:
Canvas-based 3D scene with Physics wrapper, separate React UI layer for HUD/menus. All 3D objects use procedural geometry (no external model files) — flat-shaded, chunky, low-poly aesthetic inspired by isometric illustration style.