A portfolio that reads like a record.

A recruiter spends under a minute. The site is built so that minute lands on facts: dates, employers, what was actually done. The playful parts sit behind interactions, so they reward the curious without slowing down the skimmer.

• Black and white does the work.No brand colour. Colour appears only as data: a small square per employer, a chart line. Nothing is coloured to decorate.
• Three voices, each with one job.Serif for names and headings. Sans for reading. Mono for dates, numbers and labels. Never two of them in one sentence.
• Every claim is traceable.Content lives in data files, checked by a script before it can ship. Stand-in photos say they are stand-ins.
• Motion has weight.Springs and inertia, never linear fades. Nothing appears from nothing; nothing moves without a reason.
• One desk, many windows.Tools open as glass windows over the page: a terminal, a game, the resume builder. The page underneath never reloads.

Two complete palettes, switched by the visitor's system setting. Define every component against the role names, never against a hex value, so the light theme is a redefinition rather than a second stylesheet.

Glass

Windows and menus use a near-opaque panel so they stay readable over any page content: rgb(12 12 12 / 0.93) dark, rgb(255 255 255 / 0.94) light, a hairline edge at 10% of the text colour, and blur(64px) saturate(180%) behind. On a phone a window goes full-screen and drops the blur, because there is nothing behind it to see.

Data colour

Each employer or project gets one colour, used only as an 8px square beside its name and as its tile in the skills grid.

The live site uses the system's own faces, so nothing downloads for the serif or the sans. Only the mono is a web font, subset to Latin at about 16 KB.

Display serifui-serif, New York · 24–80px · 400 · −0.02em

Carbon fiber bodywork and FEA

Section serif21px · 400 · 1.2

Experience [1]

Reading sanssystem-ui · 15px · 1.55

Completed a summer internship on a structures design team, checking drawings against team checklists.

Utility monoIBM Plex Mono · 11–13px · +0.12em caps

May–Aug 2026 · Spring 2027

Rules: dates and figures always in mono with tabular numerals, so columns line up. Headings get balanced wrapping. Body lines stay under about 65 characters.

One centred column with generous gutters. The home page is a sequence of short numbered sections, three across on a wide screen and stacked on a phone. The number beside each heading is its place in reading order, which also lets the terminal and the menu refer to sections by number.

Every row is a full-width link at least 44px tall, so a thumb never misses. Squares carry a second colour as an inset edge for two-colour brands.

Four curves cover everything. They are steep at the start, so a response feels immediate, and slow to settle, so it feels physical. Choose the curve first, then the duration.

Anything triggered from the keyboard is instant. Under reduced motion, movement stops and only fades remain.

These are enforced by a script in the build, so they cannot drift.

• No gradients, except as masks for fading an image
• No blurred drop shadows; use a border
• No purple or indigo
• No shimmer, sparkle or particle effects
• No emoji as icons
• No bold on hover or selection
• No copy that talks about the owner in the third person
• No page that fails the content check

Budgets