Interactive AI-Themed Portfolio

Overview

The site you're on right now. A Next.js/React Three Fiber portfolio built around a cinematic first encounter with a procedurally-built 3D robot character, backed by a fully synthesized audio system and a matching Flutter/Flame shell for a future interactive game world.

My Role

Sole developer — architecture, 3D scene, design system, audio, and testing

Highlights

• Real-time procedural 3D robot character with a live canvas-driven face (genuine blink/wake states, not a static texture)

• A character state machine drives a full cinematic encounter: unaware → notices visitor → suspicious → turns → approaches → activates the system

• Entirely synthesized spatial audio (Web Audio API) — zero external audio files, zero licensing surface

• Quality-tiered rendering (DPR caps, postprocessing gating, PerformanceMonitor-driven downgrades) tuned for real mobile hardware

Problem & Challenges

• A rendering bug where the robot computed correctly in every respect (materials, bounds, camera position) but rendered as a fully invisible canvas in production

• Keeping a temporary placeholder 3D asset fully swappable without the rest of the app depending on its specific geometry, bone names, or clip names

Approach & Solutions

• Root-caused the invisibility bug via direct WebGL instrumentation (patching the renderer's own render calls) rather than guessing at fixes — traced it to scene fog range clipping the robot at the camera distance a wider desktop framing produced

• Built a single model-configuration/adapter layer isolating every asset-specific fact, so the robot's geometry was later replaced entirely (GLTF → hand-built procedural rig) without touching the camera, lighting, or character-state code

Results

• A full automated test suite (unit + end-to-end) covering the cinematic sequence, responsive layout across 10+ viewports, and accessibility

• No external binary audio assets shipped — the entire sound layer is generated code

Technology