# 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.