Gabriel Kaszewski
c34d069d54
All checks were successful
Build and Deploy Gabriel Kaszewski Portfolio / build-and-deploy-local (push) Successful in 1m8s
88 lines
2.9 KiB
Markdown
88 lines
2.9 KiB
Markdown
# 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.
|