Skip to content

Data display

Timeline

A vertical career or project timeline.

import { Timeline } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Career
  1. May 2021 – Present

    Principal Engineer, AI

    Independent

    Agentic systems and document pipelines for an HR-tech SaaS.

  2. 2018 – 2020

    Senior JavaScript Developer

    Tokenized

    Electron wallet with local key management.

  3. 2014

    Founded JSON Resume

    Open source

Show code
timeline/career.tsx
import { Timeline } from '@jsonresume/ui';

export default function TimelineCareer() {
  return (
    <Timeline
      label="Career"
      items={[
        {
          date: 'May 2021 – Present',
          title: 'Principal Engineer, AI',
          subtitle: 'Independent',
          description:
            'Agentic systems and document pipelines for an HR-tech SaaS.',
          current: true,
        },
        {
          date: '2018 – 2020',
          title: 'Senior JavaScript Developer',
          subtitle: 'Tokenized',
          description: 'Electron wallet with local key management.',
        },
        { date: '2014', title: 'Founded JSON Resume', subtitle: 'Open source' },
      ]}
    />
  );
}

Accessibility

  • An ordered list; each entry has a heading.

Props

<Timeline>

Also accepts the attributes of the element Timeline renders.
PropTypeDefaultDescription
items requiredTimelineEntry[]–
headingLevel2343
labelstringTimeline