Skip to content

Colophon

How this site is built.

v3 · 2026. Designed and built by Aryan, from scratch, to a performance budget. The site is also a frontend sample: everything here is owned code, no UI kit.

Numbers

  • 100

    Lighthouse mobile, all four scores

    Homepage, music page, colophon and all five case studies

  • 148 KB

    homepage JavaScript, gzipped

    Budget 150 KB. The old site shipped 378 KB

  • 0.9 s

    largest contentful paint

    Throttled mobile; 1.2 s on the homepage

  • 0

    cumulative layout shift

    Every page

  • 0.81 MB

    /public

    Was 14 MB across 82 files. Includes three resume PDFs and a song

  • 90

    Playwright checks

    Chrome, Safari (iPhone) and Firefox; both themes, JS off, keyboard, reduced motion, axe

Measured on a local production build, 3 Nov 2026.

Stack

Framework
Next.js 16 (App Router, Turbopack), React 19.3, TypeScript strict
Styling
Tailwind CSS v4 with CSS tokens; light and dark designed separately, following the system with a toggle and no flash
Type
Instrument Sans for everything, one Instrument Serif italic word per page, JetBrains Mono for numbers and code
Motion
CSS first: scroll-driven reveals and highlighter, View Transitions for the theme switch and tile → case-study morph, a few small client components (terminal, count-up, ⌘K). Reduced motion turns movement off everywhere
Content
One typed, Zod-validated source in content/. A build check fails if a claim that must not be published appears, and the music list is checked against Aryan's order
Testing
Playwright + axe in both themes, a link checker, Lighthouse
Rendering
Static where possible; the homepage renders per request so ?role= links are tailored on the server

Decisions

  • Rebuilt instead of restyling: the old site's showpieces were template components, and they carried most of its weight.
  • No 3D on the homepage. The craft is in behaviour: the How I ship story, the Tech Specs cross-highlight, build logs, ⌘K.
  • One accent colour, Apple blue. Green only means “available” or “passed”.
  • No role menu. Proof re-orders quietly when a link carries ?role=, so the page reads as one engineer, not a list of job titles.
  • Music covers are generated, not Instagram thumbnails: consistent, theme-aware, and nothing third-party loads until you press play.

Changelog

  1. v3Nov 2026This site. Rebuilt from scratch: Apple-like, light + dark, case studies with build logs, notesbyaryan redesigned.
  2. v22025Next.js site built on a popular open-source portfolio template (globe, bento grid, 3D cards).
  3. v12024First portfolio: React, Next.js, Three.js and Tailwind.

Credits

Instrument Sans & Instrument Serif
Open-source fonts by Instrument
JetBrains Mono
Open-source font by JetBrains
Simple Icons
Brand icons in Tech Specs (CC0)
Ideas
Apple product pages for the look; Emil Kowalski's motion rules; mechanics like the glow card, number ticker and highlighter from the Magic UI / React Bits family, rebuilt small

Psst: press ⌘K, or type ship anywhere for debug mode. Last built 2026-11-04.

Home