Vikram Thirumaran

The web

At the center is the root node — the landing. Five spokes branch from it: the four areas of work (tech, design, drone, research) and this page. Each of the 11 projects hangs off its area. Projects that build on each other are linked directly; projects that share a topic are joined by fainter threads. Those cross-links are what turn four separate clusters into one web.

Moving around

Hover a node to light up its connections. Click any node to re-root the web on it — the layout re-rings by distance from it and the camera glides over; nothing is ever hidden, only emphasized. Click a centered project to open its case study. Drag nodes to rearrange (your arrangement persists), zoom to reveal labels, and use the map in the corner to jump anywhere — even from inside a case study. Browser Back/Forward walk your re-root history.

Prefer a keyboard? The sidebar is a fully keyboard-navigable tree with search, and the graph itself is too — Tab to a node, arrows walk the edges, Enter re-roots. And if you live in a terminal, press ctrl+` — there is a real shell down there (ls, cd, tree, cat, open). cd design re-roots the live graph. In a hurry, ⌘K opens a command palette that jumps anywhere from any page.

Under the hood

The one rule this site is built on: the graph is derived from content, never hand-maintained. Each project is a single MDX file; its frontmatter is the entire definition of its node:

category: design        # → edge to its hub
related: [mcc-scheduler] # → direct project links
tags: [graphic-design]   # → faint shared-topic threads

At build time, Velite validates every file against a Zod schema and emits typed JSON; one pure function derives the nodes and edges from it. Adding a project means adding one file — the node, its edges, the sidebar entry, the terminal's filesystem, and the case-study route all appear on the next build. There is no graph config to keep in sync, so there is nothing to drift.

The rendering is deliberately small: d3-force for layout and SVG elements rendered by React — no canvas, no graph library. Each layout (web, radial, tree, cluster) is just a different force configuration on the same running simulation, so switching layouts or re-rooting reheats the physics instead of rebuilding the world — which is why your hand-dragged pins survive everything. Re-rooting BFS-computes distances from the new center and re-rings the web around it; emphasis fades nodes by that same distance.

The minimap and the main graph never share React state — a ref-based bridge passes position snapshots one way and pan/re-root commands the other, so sixty-fps physics never cause a render storm. Media lives on a CDN, referenced by URL from frontmatter; the repository stays lean enough to read in one sitting.

Colophon

Next.js 16 (App Router, RSC) · Velite · Tailwind CSS v4 · d3-force · Vercel (+ Blob for media). Type is JetBrains Mono. The source — including the architecture notes the site is built against — is public: github.com/vikthebrik/Portfolio ↗