gabrielkaszewski-next/docs/superpowers/specs/2026-04-24-experience-timeline-design.md

Experience Section — Vertical Timeline Redesign

Overview

Replace the horizontal card carousel in the Experience section with a full-width vertical timeline. The new design surfaces job descriptions and sub-phase breakdowns directly from static data — no JavaScript required.

Constraints

• No client-side JavaScript. All content is statically rendered.
• Data lives in lib/data.ts; the Job type in lib/types.ts is extended to support the new fields.

Data Model Changes

lib/types.ts

Add JobSubPhase and extend Job:

export interface JobSubPhase {
  label: string;
  start_date: string;
  end_date: string | null; // null = present
  bullets: string[];
}

export interface Job {
  id: number;
  position: string;
  company: string;
  still_working: boolean;
  start_date: string;
  end_date: string | null;
  technologies: string[];
  summary?: string;        // optional one-liner shown below company name
  sub_phases?: JobSubPhase[];  // optional; if absent, no bullets shown
}

lib/data.ts

Update all three job entries:

WPP — add summary + two sub-phases:

• Backend & Infrastructure (Mar 2025 – Present)
• Frontend Architecture (Sep 2023 – Mar 2025)

digimonkeys.com — no changes to content (no summary, no sub_phases).

GIAP — add two sub-phases:

• Desktop / Backend (May 2021 – Feb 2022)
• Frontend (Feb 2022 – Feb 2023)

Bullet text sourced from CV verbatim (slightly trimmed for display).

Component Changes

Remove

• components/experience-card.tsx — replaced entirely.

Add

• components/experience-timeline.tsx — renders the full timeline list as a server component. Accepts jobs: Job[]. Renders each entry as a timeline card with dot, vertical line, header, optional sub-phases, and tech chips. Pure JSX, no useState/useEffect.

Update

• Wherever the Experience section renders ExperienceCard in a scroll container — replace with <ExperienceTimeline jobs={jobs} />. Remove the horizontal scroll wrapper.

Visual Design

• Vertical connecting line: left-aligned, gradient from accent color to transparent.
• Each entry: glassmorphism card (bg-white/5, border-white/10, rounded-2xl), matching the existing site style.
• Sub-phases rendered as nested cards inside the entry card (bg-white/[0.03], border-white/[0.07], rounded-xl).
• Sub-phase header: label in small uppercase accent color + date right-aligned.
• Bullets: <ul> with text-sm text-white/60.
• Tech chips: existing <Chip> component reused.
• Divider line between summary/phases and chips: border-t border-white/10.

Entries (final)

Job	Sub-phases	Bullets
WPP (Sep 2023–Present)	Backend & Infra, Frontend Arch	Yes
digimonkeys.com (May 2021–Present)	None	No
GIAP (May 2021–Feb 2023)	Desktop/Backend, Frontend	Yes

Freelance period (Feb 2023–Sep 2023) is intentionally excluded.