Views

Project A case study, told in the same grammar as the home page: a flow of blocks, labelled in the label column, separated by gap roles, with a rule only where a group ends. Read section

System The design behind a portfolio made to form connections. Read section

System Section One route per design-system section — /system/foundations, the component groups derived from groupEntries(), patterns, views, and internal. Read section

Variant Personalised home page for a specific company. Read section

Home

Landing page. A vertical flow of blocks in a two-column reading layout — byline and headline flush left, the prior engagements as a bordered grid of metrics, then a run of attributed passages and framed figures. The composition is PageFlow, shared with every /for/ page; this file supplies the content a variant would otherwise supply.

Foundations

Behaviour

Contains BaseLayout PageFlow

Rolemain

WhenThe default, un-personalised landing page at /.

Not whenA company-specific landing page — use the Variant view at /for/[slug] instead.

PreferVariant for personalised outreach links

The composition is PageFlow and this file adds no blocks of its ownHome and the /for/ pages are the same page with different content. Anything added here and not there is a divergence nobody will notice until a variant page is already sent

Home's content lives in src/lib/home.ts, not in this fileA /for/ page gets its headline and its selected work from one YAML file. / needs the same decisions made somewhere, and one named file keeps changing home the same size of edit as adding a variant

NotFound

The branded 404. Astro emits it as 404.html, which the static host serves with a real 404 status for any URL that matches no route — without it, unknown URLs fall back to the homepage with HTTP 200 and read as soft 404s to crawlers, monitors, and link checkers.

Foundations

Spacing space-page nav-cluster-bottom space-blocks space-inset

Behaviour

Contains BaseLayout

Rolemain

WhenAny request that matches no built route — the host serves this automatically.

Not whenNever rendered on a valid route.

Never linked to from the siteIt is the host's fallback document, not a destination — the only way to arrive is a URL that matches nothing

Offers the way back rather than a search or a menuThe site is one page of work and a handful of case studies; the front page is the index

Project

A case study, told in the same grammar as the home page: a flow of blocks, labelled in the label column, separated by gap roles, with a rule only where a group ends. It has no chrome of its own — the return is a trail in the flow, not a toolbar — and it ends on one considered destination rather than a row of equal chips. It also owns the Lightbox: a full-screen media viewer that opens from any Media on the page, showing an image or video at maximum size with its caption. The Lightbox is not a separate component; it is a native <dialog> opened as a modal, with inline markup, script, and styles on this page, triggered by the `lightbox` prop on Media.

Behaviour

Contains BaseLayout Icon Identity Passage Divider ImpactMetrics TeamPanel Media SummaryCard

Rolemain

KeyboardLightbox: triggers are buttons (Enter/Space opens); while open the page behind is inert so focus stays in the dialog — the close button takes it on open and the trigger takes it back on close; Escape (native cancel), close button, and backdrop all dismiss

WhenAny case study route (/project/[slug]) and its full-screen media viewing behaviour.

Not whenHome, Variant, or System — those never render project content or the Lightbox.

One static page per work YAML entrygetStaticPaths() generates a route for every file in src/data/work

The return is a trail in the flow, and the page carries no other chromeThe sticky toolbar it replaces was the only piece of chrome on the site: full-bleed, opaque, carrying a hairline nothing else earns, and pinned even though the nav cluster beside it scrolls away. Its IntersectionObserver project name existed only because a bar that height had to justify itself. The trail is a line of type on the byline's column, sitting on the cluster's centre line across the page from it, and it scrolls with everything else

A rule closes every group, and there are fourPageFlow's rule, applied here: after the narrative, after impact-and-quote, after Credits, and after the next project — which is also what holds the footer off the reading. The page used to draw one after every section, seven in all, which makes all the boundaries equal and then none of them means anything. The narrative sections are separated from each other by --space-sections and their labels alone

Impact and the quote are one group; the narrative sections precede themThe numbers and what was said about them are one subject, so they sit in a .flow at --space-blocks with no rule between. An earlier attempt moved impact into the head, echoing home's evidence-before-claim order; that is wrong on a case study, where the numbers are what the quote speaks to rather than what the headline argues from

The page ends on one SummaryCard, not the prior-work rowHome's grid is the head of a page that has not said anything yet, where five parallel facts are the argument. At the end of a case study the argument is made, and a row of equal chips asks the reader to start over. The card is the next entry in the prior-work order, wrapping — the same order the home row states, so "next" means the same thing in both places

The credit is team[0], and the role beside his name is that engagement's, not his current oneThe work collection carries Alan as the first team member with the role he held for that project — "Lead Product Designer" on GSK, "UX/UI Designer & Front-end Developer" on Google. It is per-project and it changes between them, so neither the byline's standing title nor a new field is the answer: the fact was already recorded, in the one place that knows it. role_summary is the paragraph under it

The credit names the role and not the employer, unlike every other member of the teamThe organisations row two steps below already states it, and captions it as exactly the thing the comma-clause would say — "Interbrand · My employer". Setting it beside his name as well is the same fact twice in one section. It also does not fit: "UX/UI Designer & Front-end Developer, Cheerful Twentyfirst" runs 585px against the 504px the body measure leaves beside a large mark, so on Google and WSJ the line wrapped to a second line for no reason a reader could use. Inside TeamPanel the pair stays, because there is no organisations row under a list entry to carry it

Sections and people are both labelled in the label column, at .t-body-monoThe section label used to be .t-body-lg-mono — a 24px mono label against 16px serif prose, so it out-measured the thing it annotates, where home pairs a 16px mono label with 24px serif prose. The quote attribution briefly moved out of the column entirely, because a long role clipped there; it moved back once Identity started wrapping, which is what the clipping was actually about. One column, one type role, every label on the page

Lightbox opens only from elements with data-lightbox-triggerSet by Media.astro when its lightbox prop is true (the default for surface/fill variants)

Lightbox closes via Escape, backdrop click, or the close buttonThree redundant dismissal paths so no user gets stuck in the overlay

Lightbox is a modal <dialog>, opened with showModal()The platform supplies the modal contract: role and aria-modal, top-layer paint above all page chrome, an inert page behind it so focus is contained, focus to the close button on open, and back to the trigger on close

Lightbox videos autoplay muted and loop only when the source Media used playback="loop"Matches the inline playback behaviour so the lightbox doesn't surprise the viewer with sound or a frozen frame

System

The design behind a portfolio made to form connections. Intro explains the Gulbenkian aesthetic and typography; a reference index immediately after the welcome lets readers choose their route.

Foundations

Typography body-mono heading

Behaviour

Contains SystemLayout Intro

Rolemain

WhenChanging the /system overview — the intro block or the reference index.

Not whenChanging how entries render — that is System Section ([section].astro). Adding metadata for a single component — that belongs in the component's own export const system.

The reference index follows the welcome and precedes the design rationaleReaders can jump directly into reference content without scrolling through the why.

Reference sections are discovered, never hand-listedgetNavSections() derives the same destinations as the navigation.

Internal remains discoverable as implementation referenceThe tooling is useful depth, but it does not carry the primary portfolio story.

System Section

One route per design-system section — /system/foundations, the component groups derived from groupEntries(), patterns, views, and internal. Hosts every entry's full documentation: live specimens colocated with EntryCard rendering, metadata, and JSON-LD. The overview at /system links in; the section set is derived, never hand-listed.

Foundations

Typography body-mono heading-lg body

Spacing space-related space-blocks cell

Behaviour

Rolemain

WhenChanging how a section route renders — entry order, group headers, specimen mounts, or the per-section overview grid.

Not whenAdding metadata for a single component — that belongs in the component's own export const system. Changing the overview — that is /system (index.astro).

The route set derives from getSystemSections(), never a hand-written listComponent groups come from groupEntries() over discovered metadata — adding a group to a component is the only step needed to mint its route

Entry mounts stay colocated with EntryCard rendering in this fileOne place to look for how any specimen is mounted; unmatched slugs render the placeholder

Foundations share one routeDecided 2026-07-23: they read as one continuum (colour, type, spacing, grid); split one out only if it outgrows the page

Variant

Personalised home page for a specific company. The same composition as Home, from the same PageFlow component, with the headline, the addressed company and the selected projects coming from a variant YAML file. A new outreach page is that file and nothing else — no new components, no bespoke layout.

Foundations

Behaviour

Contains BaseLayout PageFlow

Rolemain

WhenA company-specific outreach link — reuses Home's composition with copy swapped in from a variant YAML file.

Not whenThe default landing page — use Home for that.

PreferHome for the un-personalised page

One static page per variants YAML entrygetStaticPaths() generates a route for every file in src/data/variants

The composition is PageFlow, identical to HomeWhat a variant changes is settled — the headline, the company, and which projects appear with what copy. Block order is not on that list, and sharing the component is what makes that structurally true rather than a rule two files have to keep agreeing on

Per-variant hiding goes through the block registry, never a literal stringvariant.hidden_sections is validated against HIDEABLE_BLOCKS in src/lib/blocks.ts, so a typo fails the build instead of silently hiding nothing — which is what comparing against a hardcoded name here used to do

The variant slug is threaded through as `from`Every project link carries the origin so initVariantOrigin() can send the visitor back to their own page rather than to /