3D Portfolio

Overview

A portfolio reimagined as an isometric 3D room rendered with React Three Fiber. Instead of scrolling sections, visitors click objects in the scene: the framed picture opens an About Me modal, the laptop opens a projects gallery, the medals show achievements, the metal case and album cover work experience and education, and the coffee maker lists the tech stack. The room's lighting shifts through day, evening, and night phases based on the visitor's local time, and a wandering cat roams the scene and meows on click. Every object is swappable — it starts as a primitive placeholder and can be dropped for a real GLB model without touching scene code.

Contribution summary

• Built the isometric 3D room in React Three Fiber and drei, with GSAP driving camera transitions between focused objects.
• Designed a time-of-day lighting system (day/evening/night) driven by the visitor's local clock, with a URL override for previewing any phase.
• Built a swappable-model architecture: every object renders a primitive placeholder that can be swapped for a real GLB without touching scene logic.
• Used Zustand to share state between the R3F canvas and the DOM overlays (modals, HUD) driving each interaction.
• Kept all portfolio content in flat data files, separate from scene code, so bio, projects, experience, and stack are editable without touching 3D logic.