mackenziechild.me

A personal site built as a horizontal filmstrip of tall white cards on a Zinc-gray ground (#f4f4f5), each card a self-contained column — About me, Career journey, Highlighted work — paged with a pair of small chevron buttons in the top-right corner instead of a scrolling document. The page is a single viewport high (900px, no scroll); everything lives inside the cards, which are hairline-bordered, 16px-rounded and layered on the ground with no shadow. The whole thing is set in one grotesk, Pressura, at 400 weight — 20px/30px for the intro statement, 16px/26px for body, and tiny tracked uppercase labels (ABOUT ME, ROLE, FOCUS) followed by dotted leader rules. The only color is an olive-sage green, carried by an ASCII-art halftone portrait in dark olive (#485634) on pale sage, and echoed as a soft green vertical band running down the career timeline labelled "Freelance & Side Projects". The timeline itself is a dev-tool object: a year axis on the left, roles as white cards whose height is literally their tenure, with monospace date ranges (DEC 21 — DEC 24) and brand favicons for each employer. Work is shown as bento tiles with one large screenshot and a row of four thumbnails beneath. It reads like a designer-engineer's personal dashboard — restrained, systematic, quietly witty.

Build on a cool near-white ground (#f4f4f5) with white cards (#ffffff) bordered by a 1px hairline (#d0d3d0) and rounded 16px; never use drop shadows — depth comes from white on gray only. Set all type in a single humanist grotesk (Pressura; fall back to Inter or Söhne) at weight 400 everywhere except 500 for button labels: 20px/30px for lead statements, 16px/26px for body, 14px for controls, 12px tracked uppercase (+0.08em) in #6c745e for section labels. Text is near-black #0a0c13; secondary text #2b2f2c or #6c745e. Choose one muted natural accent — an olive green #485634 with a pale companion #aab29f — and spend it on exactly two things: one textured image treatment (halftone, ASCII, dither) and one translucent annotation band; never on buttons. Buttons are white, 44px tall, 1px #d0d3d0 border, 6px radius, 0 16px padding, 14px/500 label; icon-only buttons are 44px squares in the same style. Compose the page as a horizontal strip of equal-width cards that fill the viewport height with 16px internal padding and 20px gutters, paged by a chevron pair rather than scrolled; on mobile stack the pager into a sticky bottom bar. Use inner cards for list items (8px radius, 1px border), tabular monospace-feeling small caps for dates and metadata, and dotted leader rules after labels. Encode data in geometry where possible (height = duration, position = time). Images sit in 8px-rounded frames with a 1px border; thumbnails share the radius and border of their parent. Radii scale: 6px controls, 8px inner items and images, 16px cards, 9999px for pills.