curio.
no. 19 · projects

Project timeline

Projects grouped by year with a line and a dot per project.

Preview
2026
Lumen A reading app that turns long articles into calm, paginated chapters.Next.jsPostgresTidepool A realtime collaborative whiteboard built on CRDTs and websockets.ReactYjs
2025
Pocketlog A CLI that logs what you worked on, in ten seconds a day.RustCLI

Install

npx shadcn@latest add https://curio-components.vercel.app/r/project-timeline.json

First curio component? Also add @import "./curio.css"; to your global CSS. See installation.

Usage

import { ProjectTimeline } from '@/components/curio/projects/project-timeline'

const projects = [
  { name: 'lumen', description: 'A calm reading app.', url: 'https://...', year: '2026', tags: ['next.js'] },
  { name: 'pocketlog', description: 'A cli for daily logs.', url: 'https://...', year: '2025', tags: ['rust'] },
]

export function Work() {
  return <ProjectTimeline items={projects} />
}

Props

PropTypeDefaultDescription
itemsProject[]-Name, description, url, year, tags?, image?, status?

Source

This is exactly what the command copies into your project.

components/curio/projects/project-timeline.tsx
import type { Project } from '../lib/types'
import { Arrow, external, ProjectTags } from './project-parts'

// grouped by year with a line and a dot per project, like a changelog
export function ProjectTimeline({ items }: { items: Project[] }) {
  const years = [...new Set(items.map((p) => p.year))]
  return (
    <div className="flex flex-col">
      {years.map((year) => (
        <div key={year} className="grid grid-cols-[48px_1fr] gap-3 sm:grid-cols-[56px_1fr] sm:gap-4">
          <div className="pt-[3px] text-xs" style={{ color: 'var(--curio-muted)' }}>
            {year}
          </div>
          <div className="relative border-l pb-6 pl-5" style={{ borderColor: 'var(--curio-border)' }}>
            {items
              .filter((p) => p.year === year)
              .map((p) => (
                <a key={p.name} {...external(p)} className="group relative mb-4 block last:mb-0">
                  <span
                    className="absolute -left-[25px] top-[7px] h-[9px] w-[9px] rounded-full border-2 transition-colors group-hover:bg-[var(--curio-accent)]"
                    style={{ borderColor: 'var(--curio-accent)', background: 'var(--curio-bg)' }}
                  />
                  <span className="flex items-center gap-1.5 text-[15px] transition-colors group-hover:text-[var(--curio-accent)]" style={{ color: 'var(--curio-fg)' }}>
                    {p.name} <Arrow />
                  </span>
                  <span className="mt-0.5 block text-[14px] leading-snug" style={{ color: 'var(--curio-muted)' }}>
                    {p.description}
                  </span>
                  <ProjectTags project={p} className="mt-2" />
                </a>
              ))}
          </div>
        </div>
      ))}
    </div>
  )
}
components/curio/projects/project-parts.tsx
import type { Project } from '../lib/types'

export function ProjectThumb({ project: p, className = '' }: { project: Project; className?: string }) {
  if (p.image) {
    // eslint-disable-next-line @next/next/no-img-element
    return <img src={p.image} alt="" className={`object-cover object-top ${className}`} />
  }
  return (
    <span
      className={`flex items-center justify-center text-[28px] font-medium ${className}`}
      style={{ background: 'var(--curio-accent)', color: 'var(--curio-on-accent)' }}
    >
      {p.name[0]}
    </span>
  )
}

export function ProjectTags({ project: p, className = '' }: { project: Project; className?: string }) {
  if (!p.tags?.length) return null
  return (
    <span className={`flex flex-wrap gap-1.5 text-[11px] ${className}`} style={{ color: 'var(--curio-muted)' }}>
      {p.tags.map((t) => (
        <span key={t} className="rounded-md border px-1.5 py-px" style={{ borderColor: 'var(--curio-border)' }}>
          {t}
        </span>
      ))}
    </span>
  )
}

export const external = (p: Project) => ({ href: p.url, target: '_blank', rel: 'noopener noreferrer' })

export function Arrow() {
  return (
    <svg viewBox="0 0 10 10" width={10} height={10} fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden="true">
      <path d="M2.5 7.5 7.5 2.5M3.5 2.5h4v4" />
    </svg>
  )
}
← Gradient sliderProject sentence →