# Experience Timeline Implementation Plan > **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. **Goal:** Replace the horizontal experience card carousel with a full-width vertical timeline that surfaces job descriptions and sub-phase breakdowns from static data. **Architecture:** Extend the `Job` type with optional `summary` and `sub_phases` fields, update `data.ts` with CV content, then replace the card carousel with a new `ExperienceTimeline` server component. No client-side JS — all content is statically rendered. **Tech Stack:** Next.js (App Router), TypeScript, TailwindCSS --- ## File Map | Action | File | Responsibility | |--------|------|---------------| | Modify | `lib/types.ts` | Add `JobSubPhase`, extend `Job` | | Modify | `lib/data.ts` | Add `summary` + `sub_phases` to WPP and GIAP entries | | Create | `components/experience-timeline.tsx` | Renders the full vertical timeline (server component) | | Modify | `components/experience.tsx` | Swap card loop for `` | | Delete | `components/experience-card.tsx` | Replaced by timeline component | --- ### Task 1: Extend types **Files:** - Modify: `lib/types.ts` - [ ] **Step 1: Add `JobSubPhase` and extend `Job`** Replace the entire contents of `lib/types.ts` with: ```typescript export interface Skill { name: string; } export interface JobSubPhase { label: string; start_date: string; end_date: string | null; 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; sub_phases?: JobSubPhase[]; } export interface Project { id: number; name: string; short_description: string; description: string; technologies: string[]; thumbnails: string[]; category: 'Web' | 'Mobile' | 'Desktop' | 'Api' | 'Game'; github_url?: string | null; visit_url?: string | null; download_url?: string | null; commercial?: boolean; } ``` - [ ] **Step 2: Verify TypeScript is happy** ```bash npx tsc --noEmit ``` Expected: no errors (existing job entries have no `sub_phases` yet, so optional fields are fine). - [ ] **Step 3: Commit** ```bash git add lib/types.ts git commit -m "feat: add JobSubPhase type and extend Job with summary and sub_phases" ``` --- ### Task 2: Update job data **Files:** - Modify: `lib/data.ts` - [ ] **Step 1: Update the WPP entry (id: 8)** Replace the WPP job object in the `jobs` array: ```typescript { id: 8, position: "Software Engineer", company: "WPP Media | Choreograph | Wavemaker", still_working: true, start_date: "2023-09-13", end_date: null, summary: "Advanced from frontend UI development to backend systems engineering, leading infrastructure-agnostic design initiatives.", sub_phases: [ { label: "Backend & Infrastructure", start_date: "2025-03-01", end_date: null, bullets: [ "Engineered and optimized backend applications and internal tools using Python, FastAPI, and Django.", "Streamlined CI/CD workflows and containerized applications with GitLab Pipelines, Docker, and Kubernetes across GCP and Azure environments.", ], }, { label: "Frontend Architecture", start_date: "2023-09-13", end_date: "2025-03-01", bullets: [ "Architected scalable microfrontends utilizing Angular and Module Federation, seamlessly integrating standalone internal tools into a unified enterprise shell application.", "Ensured seamless integration of UI components with Kubernetes-based deployments and Azure Pipelines.", ], }, ], technologies: [ "Angular", "Azure", "Azure Pipelines", "Django", "Docker", "FastAPI", "GCP", "Gitlab CI", "Gitlab Pipelines", "Kubernetes", "PostgreSQL", "Python", "React", "SCSS", "TailwindCSS", "Typescript", ], }, ``` - [ ] **Step 2: Update the GIAP entry (id: 2)** Replace the GIAP job object: ```typescript { id: 2, position: "Full Stack Developer", company: "GIAP", still_working: false, start_date: "2021-05-19", end_date: "2023-02-03", sub_phases: [ { label: "Desktop / Backend", start_date: "2021-05-19", end_date: "2022-02-01", bullets: [ "Architected and optimized complex PostGIS/PostgreSQL cross-database comparison queries utilizing Common Table Expressions (CTEs), drastically reducing execution time from over 5 minutes to under 15 seconds.", "Developed a robust GIS data assertion module using Python and Qt to automatically validate spatial data against strict compliance standards.", ], }, { label: "Frontend", start_date: "2022-02-01", end_date: "2023-02-03", bullets: [ "Engineered a comprehensive, public-facing web application for the City of Gdańsk (geogdansk.pl) leveraging React, TypeScript, Redux, and the ArcGIS JS API.", ], }, ], technologies: [ "Python", "React", "Typescript", "PostgreSQL", "PostGIS", "ArcGIS JS API", "Redux", "Qt", "QGIS", "Git", ], }, ``` - [ ] **Step 3: Verify TypeScript is happy** ```bash npx tsc --noEmit ``` Expected: no errors. - [ ] **Step 4: Commit** ```bash git add lib/data.ts git commit -m "feat: add sub_phases and summary to WPP and GIAP job entries" ``` --- ### Task 3: Create ExperienceTimeline component **Files:** - Create: `components/experience-timeline.tsx` - [ ] **Step 1: Create the component** ```tsx import { Job } from "@/lib/types"; import Chip from "./chip"; import formatDate from "@/utils/format-date"; const ExperienceTimeline = ({ jobs }: { jobs: Job[] }) => (
{jobs.map((job) => (

{job.position}

{formatDate(job.start_date)} –{" "} {job.still_working ? "Present" : formatDate(job.end_date!)}

{job.company}

{job.summary && (

{job.summary}

)} {job.sub_phases && job.sub_phases.length > 0 && (
{job.sub_phases.map((phase) => (
{phase.label} {formatDate(phase.start_date)} –{" "} {phase.end_date ? formatDate(phase.end_date) : "Present"}
    {phase.bullets.map((b) => (
  • {b}
    • ))}
))}
)}

Technologies

{job.technologies.map((tech) => ( ))}
))}
); export default ExperienceTimeline; ``` - [ ] **Step 2: Verify TypeScript is happy** ```bash npx tsc --noEmit ``` Expected: no errors. - [ ] **Step 3: Commit** ```bash git add components/experience-timeline.tsx git commit -m "feat: add ExperienceTimeline server component" ``` --- ### Task 4: Wire up timeline in Experience section and remove old card **Files:** - Modify: `components/experience.tsx` - Delete: `components/experience-card.tsx` - [ ] **Step 1: Replace `experience.tsx`** ```tsx import { Job } from "@/lib/types"; import ExperienceTimeline from "@/components/experience-timeline"; const Experience = ({ jobs }: { jobs: Job[] }) => (

Experience

); export default Experience; ``` - [ ] **Step 2: Delete the old card component** ```bash rm components/experience-card.tsx ``` - [ ] **Step 3: Verify no remaining imports of ExperienceCard** ```bash grep -r "experience-card\|ExperienceCard" /mnt/drive/dev/gabrielkaszewski-next --include="*.tsx" --include="*.ts" | grep -v node_modules ``` Expected: no output. - [ ] **Step 4: Verify TypeScript is happy** ```bash npx tsc --noEmit ``` Expected: no errors. - [ ] **Step 5: Start dev server and visually verify the timeline renders correctly** ```bash npm run dev ``` Open `http://localhost:3000` and scroll to the Experience section. Verify: - Vertical line and dots are visible - WPP shows summary + two sub-phase blocks with bullets - digimonkeys.com shows only dates + chips (no sub-phases) - GIAP shows two sub-phase blocks with bullets - Tech chips render under each entry - [ ] **Step 6: Commit** ```bash git add components/experience.tsx git commit -m "feat: replace experience card carousel with vertical timeline" ```