Portfolio website

The site has one job. When I apply for a product design role, the people reviewing my application should quickly understand who I am, how I work and how to reach me.

An editorial, minimal site on a black ground, where the work does the talking and the interface stays out of the way. One accent colour, used sparingly, marks where you are and what you can do.

A portrait lit from behind in a nameless grey space, looking up. Over it, one line in three steps — Simplifying, complex, products — with the middle word in grey. The photo breathes slowly, and a soft glow sits on its brightest spot.

Every case study opens with an overview of background, problem, approach and outcome, then moves through numbered sections with a sticky side navigation that marks where you are. Section intros are one or two sentences, and stats show only measured results.

One family, two voices. Geist carries headings and reading text; Geist Mono, drawn as its partner, carries the interface — labels, chips, navigation and captions. Headings sit at 500, tracking tightens as the size grows, and fluid sizes show their mobile to desktop range.

Black and white carry the page, alternating panel by panel — black for the hero, work and contact, white for About. A single accent is kept for state: the current page in the navigation and the number in each section label. Every pairing was checked against WCAG contrast.

Pictures round their corners by how large they render: the bigger the picture, the softer its corners. Project cards take the large radius wherever they appear. Controls keep their own shapes — pills for chips and tags, circles for icon buttons.

Every project has one picture, prepared twice: a wide 16:10 shot for the case study cover, and a square for the project card on the home page and in the carousel. The squares are recomposed rather than cropped, so no product is cut — the backdrop is extended above and below the device, or, where the product is a phone in hand, the frame moves onto the phone.

One hairline does all the separating: a single pixel at 14%, wherever two things need parting rather than enclosing.

Five named measures carry the structure, and everything inside a component steps in fours. The big number is the one that matters: 96px above and below every section is what gives the pages their air.

Actions are set as type — the header Contact is a Label in capitals with an arrow — and controls are round icon buttons: outlined for navigation, filled white for the arrow that opens a project card. The copy control in the Contact email row is a round icon button too.

The top nav and the case study side nav share one indicator bar. Only its intensity changes, so hover, focus and selection read as one pattern. In the top nav the bar sits on the header's bottom edge rather than under the word.

One component shows a project wherever it appears: in the two columns of Recent works on the home page, and in the carousel that closes every case study. The square picture carries the card; the platforms sit on it as small frosted pills, and the title and the kind of work sit straight on the page underneath.

A filled panel carrying one supporting point, set in rows of three inside a case study.

Every case study closes with the other projects, so there is always a way forward. The track holds the same project cards as the home page; they scroll horizontally against snap points, and the arrows disappear when the track already fits.

Chips carry the facts at the top of every case study — status, timeline, role, team and platform — in one scannable row.

The hero is one photograph, upscaled once and served as WebP in four widths. The browser fetches only the width it needs — the screen's width on landscape screens, three quarters of its height on portrait ones — so the sharpest file is downloaded only where it shows.