rework of experience

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

@@ -0,0 +1,87 @@
+# 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`:
+
+```typescript
+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.