Colophon

How this site works under the hood. Short version: static files, one data file, and deliberate decisions about what runs where.

Hosting

Next.js 15 with the App Router and output: 'export'. The build emits plain HTML, CSS and JS, and GitHub Pages serves it. There is no server runtime: nothing executes at request time, no SSR, no backend, no database. React 19, TypeScript, Tailwind CSS 4. The deploy pipeline is the whole story: next build, git push, Pages publishes.

The 3D experience

The home page is five React Three Fiber scenes (hero, avatar, journey, data center, skills hall) built on three.js with drei helpers and @react-three/postprocessing. A perf-tier hook classifies the device eagerly, before the first frame: narrow viewport plus coarse pointer reads as a phone, and hardwareConcurrency / deviceMemory hints demote constrained machines when the browser reports them.

Low tier (phones): exactly one WebGL canvas mounted at a time, scenes unmount on navigation, device pixel ratio capped at 1, postprocessing (bloom, SMAA, the whole composer) skipped, particle counts cut, autorotate off. High tier: visited scenes stay mounted so switching back is instant, DPR up to 1.75, the full effect chain. prefers-reduced-motion is respected on both tiers, and a context guard rebuilds the canvas when iOS Safari evicts the WebGL context instead of leaving a black rectangle.

The terminal

/terminal is xterm.js wired to a real command registry: help, ls, cat, deploy, incident, uptime and the rest are plain functions that return ANSI-colored output. Output stays printable ASCII plus ANSI escapes, because fancy block glyphs fall out of the monospace font and garble banners.

Data

Every career fact on the site lives in one file, src/data/career.ts: identity, war stories, projects, milestones, skills. The 3D scenes, the plain-text /work page, and the outage writeup all render from it, so a fact never has to be maintained in two places.

Privacy and honest metrics

No backend means nothing to log you into. The only analytics is GoatCounter, a privacy-light page counter: no cookies, no PII. Every number on the site is either measured (session uptime counts from your page load, the only honest uptime a static site has) or clearly labeled parody.

Source

The whole site, including this page, is open source: github.com/sbmagar13/brain-portfolio.