I rebuilt my portfolio as a request travelling through a system

A portfolio usually tells you what someone builds. I work on backends, APIs and cloud systems, where most of the work is invisible, so I wanted mine to show it instead.

The idea

You are a request. The site is the system you pass through.

Beside the content sits a 3D model of a seven-layer architecture: client, edge, services, messaging, data, intelligence and platform. As you scroll, the request leaves the browser, crosses the network boundary, moves down through the layers and returns as a 200 OK.

What's on the page

• 57 nodes, all real. Each one is a technology I've shipped with.
• 16 systems, each traceable. Select a project and its actual stack lights up as a path through the model.
• Navigation as a trace. Sections are spans: dns.resolve, services.execute, stack.inspect, client.response.
• Two sides. The page changes character when the request crosses from client to server.

Three decisions worth sharing

1. The model is generated from data. Projects are typed entries with a stack. Nodes, wiring and paths are derived from them, so adding a project redraws the diagram.

2. Content first, 3D second. The Three.js bundle (about 140 KB gzipped) loads after the page is readable. With WebGL unavailable or reduced motion on, nothing is lost: every project also carries its path as a plain layer-by-layer list.

3. One idea, carried everywhere. The loading screen is the request's cold start. Contact is the response. Nothing on the page is decoration.

Stack

Next.js, React, TypeScript, and Three.js with custom GLSL shaders. No other runtime dependencies.

See it here: https://aarshdeepchadha.vercel.app/

I'd like to know what you'd change.