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

Experience row

One job in the experience list: dates, a linked title, place, a short summary and tools, lifting on hover and focus while its siblings dim.

Folder: src/components/ExperienceRow/
Props: ExperienceRow: entry (an Experience from src/content/experience.ts), target (Workshop dimmed state only)
ExperienceList: items, targetId (marks one row as the dimmed state's target)
Tokens: Date: mono label, column 1 of a 2fr 6fr grid, one column on phone
Title: text-title arrow link; place: 11 px label; body: text-small Text 2
Hover and focus layer: Surface Lift with shadow-lift, 6 px radius, 24 px past the row (16 px on phone)
48 px between rows
Motion: Layer background and shadow 150 ms standard; sibling rows fade to 50% opacity over 150 ms; under reduced motion the opacity changes at once
Accessibility: An ol of li rows; dates in a time element with datetime
The whole row is the title link's hit area through its after pseudo element, so the focus ring stays on the title
External titles open in a new tab
Pressed looks like hover (a press on the row is a hover), so the State control does not offer it