Architecture lab / 07
Machine InteriorUnder the hood.
A Next.js document layer stays readable while device capabilities determine whether the background runs a 3D scene or a lightweight fallback.
Adaptive interactive portfolioSelect a component to inspect
Service
Page & content layer
Next.js · React · TypeScript
Renders the portfolio and project architecture pages from typed content.
- Receives
- Route and project data.
- Produces
- HTML, component state, and page metadata.
Design boundary
Core content uses normal document flow instead of pinned or disappearing scroll panels.
Connections
Visitor & browser Page & content layerpage request
Page & content layer Capability boundarydetect
Page & content layer Project explorercontent
AI Services & code Data & output Controls- - Verification path
The core decision
Content works independently of the visual effects.
Scope & limits
The 3D background is reserved for larger fine-pointer screens. Touch devices and reduced-motion visitors receive the static scene; form delivery depends on Netlify Forms.
Portfolio implementation