Why the site is
built this way.
This page is a portfolio piece in its own right: the design system behind the work, the components it's built from, and the reasoning behind every decision. Brand-led, precision-first, and honest about what it does and doesn't yet prove.
Dark, with intent
Deep navy (#000718) with a vivid orange — confident and agency-grade, the opposite of the warm cream + terracotta a thousand sites land on by inertia. The accent does the talking; the dark does the listening.
Framed, not drawn
A navy badge with a single orange chamfer and SR inside — a precise, ownable mark. It scales from the header to a 200px hero graphic without losing its edge, and the chamfer recurs as a motif on every work tile.
Hanken, large and legible
Hanken Grotesk for display: bold and impressive at hero scale, still readable down to small sizes. Inter carries body copy; Space Grotesk handles the technical labels and meta. Three roles, one voice.
On the work, not the words
The banner light tracks your cursor and the work parallaxes toward it — but every page settles the moment you stop. One orchestrated moment per surface, engineered and measured.
Full-bleed and large
Edge-to-edge layout, big type, generous tiles. The work and the words get room to be seen — and stay highly interactive down to mobile, where tiles rise in on scroll and respond to tap.
The messy middle
Every project runs on one engine: setup, the wrong turn, the pivot, the reframe, the friction, the resolution, the postmortem. Real research over fabricated metrics — the thing a hiring manager actually trusts.
Background
#000718
Surface
#0a1430
Ink
#eef1fa
Accent
#ff5a2c
Components
Built once · reused everywhere · decisions on recordThree weights, one job each
Solid carries the single primary action per view; ghost is the quiet secondary. On the dark gradient band, the button switches to a navy fill with white text and an orange edge — pure white on orange fails contrast, and accessibility is the brand, so the surface flips instead of the text losing legibility.
The chamfer is the spine, not décor
Every tile inherits the mark's chamfered corner, so the brand reads before a single word does. The preview parallaxes toward the cursor on fine pointers and toggles on tap for touch — motion that signals precision rather than noise. Kinetic throwing was cut on purpose: it buried the work it was meant to showcase.
Let's talk.
Let's talk.
Two variants, one tested for contrast
The solid orange band is the loud option for a single landing moment. The gradient variant — navy into plum, an orange corner that shifts on hover — is the default in production: white copy on a dark field clears WCAG comfortably where dark-on-orange was getting tight. Same component, the safer surface wins.
Real screens, framed in context
Screenshots ship inside pure-CSS device frames — MacBook for desktop work, iPhone for mobile — so a flat export reads as a shipped product, not a cropped image. No raster mockup assets, no weight: the frame is markup, the screen is yours to drop in.