Timeline
Work and study in groups, each under its own colour: where on the left, what and when on the right. Server-rendered.
Work
A studio
Full timeEngineer
to
Builds the things in this library.
Study
A university
Degree
to
Features
- Groups (work, education, anything) under a heading in their own colour, set per group with tone.
- A row per role: where and an optional badge on the left; the title, the dates and a description on the right.
- One column in a container under 640px; no state, so it renders on the server.
Use it for
- A CV or an about page.
- Release history, project phases.
On this site
- Home: Work and educationWhere I have worked and studied, each group under its own colour.
Installation
- Get runets.
git clone https://github.com/ziyam-khan/runets - Copy these files into your project, keeping their folders.
- Install what they use.
pnpm add react - Load the styles once. Bring your own base tokens, or use runets’ default theme.
import 'runets/styles/theme.css' import 'runets/styles/kit.css'
API
| Prop | Type | What it does |
|---|---|---|
groups | { id, title, icon?, tone?, entries }[] | tone is any CSS colour. |
entries | { id, org, title, start, end?, badge?, description? }[] | No end reads as present. |
level | 2 | 3 | 4 | Heading level of the groups; entries take the next. |
present | string | The word for an open end. |
Accessibility
- Each group is a section labelled by its heading; entries are an ordered list.
- Dates are time elements.
Source
The code is in src/kit/timeline.tsx in runets, MIT licensed.