The problem underneath.
An immersive portfolio should reveal the engineer without hiding the work. Visual ambition has to coexist with semantic content, a direct CV path, and visitors who prefer less motion.
What shaped the solution.
- Readable content before WebGL loads.
- A separate mobile composition and reduced-motion behavior.
- One source of content across immersive and recruiter routes.
The important decisions.
HTML first, world second.
Astro delivers semantic sections and routes. The React Three Fiber island loads progressively and has an explicit WebGL failure path.
Keep materials and motion intentional.
A shared token registry connects the interface to ceramic, metal, glass, and signal colors. The world is built from procedural geometry instead of large downloaded scene assets.
Let visitors choose the experience.
Reading mode, motion controls, a quiet-by-default sound preference, and a night state make the experience adjustable without hiding essential content.
A simpler view of the system.
- Published content
- Validated contracts
- Astro HTML
- Lazy React island
- Adaptive Three.js world
Conceptual flow. Simplified to explain the engineering without exposing internal implementation.
Where I made a difference.
The portfolio brings my product, architecture, and creative engineering interests into one evolving public project.
The result.
A working portfolio foundation with static content routes and an interactive garden. Production performance and CMS hosting remain separate verification gates.
What I’d explore next.
Next work should follow measured device behavior and real recruiter feedback rather than adding interaction for its own sake.
Open portfolio experiment. This project is still evolving.