About page
The split hero, a bare stats row, the summary card, a career timeline, a checklist, the pull-quote and the quiet sponsor CTA.
The two-column hero — the case on the left, one framed thing on the right — then a résumé condensed to one card and the same career timeline the résumé page uses in full.
The split hero
The second of the four hero shapes: .hero-split, copy beside a stage. About is where a portrait belongs, and .frame (layer 1) does the chrome so the stage only reserves the ratio.
I build the system, then the site on it.
Tokens first, components second.
Desk, Berlin2026
.hero-split · .hero-split__stage · .frame-ink · .hero-split__caption
The bare stats row
.stats-bare — no chrome, hairline dividers only, for use directly under a hero where a bordered box would read as a second card.
.stats.stats-bare
The summary card
Name, role, one line, and the contact row — summary_block(), shared with the résumé page.
Swarnil Singhai
Senior Product Engineer
I build design systems and the sites that run on them.
.card + .col-meta-inline
Where the time went
A career history is the same spine a trip or a webseries season uses.
- 2023 — NowSenior Product Engineer · Northwind Studio
Owns the design system this page is built with: tokens, components and the collections that ship on top of them.
- 2021 — 2023Frontend Engineer · Fieldnote
Rebuilt the marketing site on a token-first stylesheet, cutting shipped CSS by two thirds with no framework underneath it.
.col-order
What I actually do
A tick native to the ARIA tree, not a bulleted list pretending to be one.
.col-checks · .col-check
The pull-quote
.pullquote is defined in 10-text.css and was used by nothing until this page. Note it is not .quote — that class was used in five collections and defined nowhere, working only by accident inside .content. It has been removed.
A design system is not a component library. It is the set of arguments you have already had, written down so you never have to have them again.
.pullquote · .pullquote__text · .pullquote__cite
The quiet CTA
.cta-sponsor — the only CTA shape that does not take the contrast, because money asks politely.
This is free and MIT-licensed.
.cta-sponsor — bordered, on the paper, not inverse