# mackenziechild.me

Source: https://www.mackenziechild.me/
Captured: 2026-09-13
Tags: portfolio, landing, light, both, minimal, swiss, bento, calm, technical, human, confident, friendly
Colors: #f4f4f5, #0a0c13, #d0d3d0, #aab29f, #485634, #8a9479, #6c745e, #2b2f2c
Type (h1): pressura · 16px/24px · 400 · tracking -0.4px — "Mackenzie Child"
Type (h2): pressura · 20px/30px · 400 — "Hey, I'm Mackenzie. I design and build internet things. Sometimes for the teams "
Type (h3): pressura · 12px/12px · 400 — "Design Engineer"
Type (body): pressura · 16px/26px · 400 — "I'm based in Atlanta with my wife and our 2-year-old son, figuring out the balan"
Type (small): pressuraMono · 12px/16px · 400 · tracking 0.3px — "ROLE"
Type (button): pressura · 14px/20px · 500 — "Copy email"
Button (primary): "Copy email" — fill #ffffff, text #3f3f46, radius 6px, border 1px, padding 0px 16px, height 44px, type 14px/500
Button (secondary): "About me" — text #44403b, radius 32px, border 0px, padding 0px 20px, height 64px, type 16px/400
Radii: 8px (32), 16px (23), 32px (15), 6px (10), 9999px (10)

## Images

- Hero (desktop): https://media.lvly.design/library/mackenziechild-me/hero.webp?v=3a452a40
- Hero (mobile): https://media.lvly.design/library/mackenziechild-me/mobile-hero.webp?v=b4269721
- Full page (desktop): https://media.lvly.design/library/mackenziechild-me/full.jpg?v=3dd924c3
- Full page (mobile): https://media.lvly.design/library/mackenziechild-me/mobile-full.jpg?v=cab1b966
- Clip preview (mp4): https://media.lvly.design/library/mackenziechild-me/video-rtnnoo.preview.mp4?v=59b69254

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.

## Steal-worthy details

- Horizontal card pager instead of a vertical page: a one-viewport-tall layout of 456px-wide columns, browsed with two 44px chevron buttons (rounded 6px, 1px border) that sit in the header on desktop and drop into a sticky footer bar on mobile.
- Career timeline where card height encodes duration — a year axis at 60px per year, employer cards spanning exactly their tenure, so a three-year Webflow stint is visibly taller than a four-month Gumroad one.
- A translucent sage-green vertical band (#aab29f at low opacity) behind part of the timeline with rotated text "Freelance & Side Projects" — a period annotation done as a shape rather than a label.
- ASCII/halftone portrait rendered in two-tone olive (#485634 on #aab29f), 8px-rounded, as the only image and the only color on the About card — a portrait that reads as a texture.
- Section labels as tracked 12px uppercase (ROLE, FOCUS) followed by a dotted leader line to the card edge — a table-of-contents flourish that also acts as a divider.
- Monospace-style date ranges in small caps ("NOV 16 — NOV 19", "AUG — DEC 21") right-aligned inside compact role pills; favicons of Anthropic, Webflow, Gumroad, Podia, Laracasts as 16px logos in place of company names' weight.
- Two-button CTA row where the icon button (X logo) and the text button (Copy email) share the same 44px height, 6px radius and 1px border — a copy-to-clipboard as the primary action, not a mailto.
- Work tiles: one 16:10 hero screenshot with four thumbnails in a row beneath, each 6px-rounded with a 1px border, and a favicon + project name caption line with a right-aligned muted "Company" tag.

## Style recipe

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.