Project 25: Interactive Resume / Portfolio

📋 Project Brief

Build an interactive resume/portfolio that IS the project itself — a website showcasing your skills through its own implementation. Features scroll-spy navigation, animated skill bars, dark/light mode, a timeline view, and PDF export.

✅ Feature Requirements

Feature 1: Scroll-Spy Navigation

Acceptance Criteria:

• Navigation links highlight based on which section is currently in the viewport
• Use Intersection Observer to detect active sections
• Clicking a nav link smooth-scrolls to that section
• URL hash updates as user scrolls (e.g., #experience)

Feature 2: Animated Skill Bars

Acceptance Criteria:

• Skill bars animate from 0% to their value when they enter the viewport
• Animation triggers only once (not on every scroll past)
• Each bar shows the skill name and percentage
• Animation duration: ~1 second with ease-out curve

Feature 3: Dark/Light Toggle

Acceptance Criteria:

• Respects system preference via prefers-color-scheme on first load
• Manual toggle overrides system preference and persists in localStorage
• All colors use CSS Custom Properties for instant switching

Feature 4: Timeline View

Acceptance Criteria:

• Work experience displayed as a vertical timeline
• Each entry expands on click to show details
• Alternating left/right layout on desktop; single column on mobile

Feature 5: PDF Export

Acceptance Criteria:

• A "Download PDF" button generates a print-friendly version
• Uses @media print to remove interactive elements
• Fits on 1-2 A4 pages
• Typography optimized for paper (serif fonts, 12pt)

🧪 Testing Checklist

• Scroll-spy correctly highlights active section
• Skill bars animate only on first viewport entry
• Dark/light mode persists across refreshes
• Print stylesheet produces clean output
• Lighthouse scores: Performance 95+, Accessibility 100, SEO 100