Timeline

The work-experience rail: a vertical line with a company logo riding it at each stop, and a card beside each logo. Below is the real component fed placeholder entries — on the live page it carries the real employment record.

The rail

Anatomy

A logo circle sits on the rail at each company, ringed in green — 120 pixels on desktop, 92 on tablet, 48 on a phone. A green “Latest” tag caps the top. Each card carries the company in green, a monospace date range, the role, a short summary and a row of tech chips; a chevron marks it as a link. On a phone the card compacts to logo, company, role and date.

On a company's own page the logo dot anchors the page title directly — the one place a page heading drops its green bar, because the dot already marks it.

When to use

Do

Use the timeline for a sequence of dated entries on one rail.

Don’t

Reach for the timeline for unordered items; that is a list.

Do

Keep the newest at the top, under the Latest tag.

Don’t

2 positions
Show the positions badge on a company with a single role.

Do

Let each card be one link to the full entry.

Don’t

Keep the green bar on a detail page where the logo dot already anchors the title.

Where it lives

Timeline.astro and TimelineEntry.astro (.timeline, .timeline-card, .timeline-logo), fed from the work-experience data.

The rail language has two relatives. A series page runs a numbered vertical timeline of its parts — published parts link, planned parts sit dimmed with their dates. And the CV page closes with the education list: qualification rows with institution, dates and certificate links, divided by hairlines.

Spotted something wrong on this page? Email me