Skip to content

Workshop

Entry

Primitives

Tokens
Focus ring
Label
Tag
Logo
Button
Link
Theme toggle
Nav link
Section label
Spotlight
Skip link

Composites

Experience row
Highlight tile
Skill group
Social links
Nav list
Intro column
Colophon

Sections

About
Experience
Highlights
Skills
Contact

About

The first section of the home page's right column: the About label and its paragraphs. On a phone the label sticks as a bar while the text scrolls under it.

Folder: src/sections/About/
Props: none; the label comes from sectionLabel("about") in src/content/nav.ts and the paragraphs from src/content/about.ts
Tokens: Paragraphs: text-body in Text 2, capped at the measure (36rem), 16 px apart
24 px between the label and the first paragraph, 16 px on phone
Label: SectionLabel, a sticky frosted bar on phone
Motion: none
Accessibility: section with id about and aria-labelledby about-label, so its accessible name is the h2's text, About
scroll-mt-24 phone:scroll-mt-14 set the landing offset of a hash jump: 96 px on desktop, 56 px on phone