Slice 5: Scroll Animations

[vittorpeli]

Parent

#1

What to build

Add subtle scroll-triggered fade-in-up animations to all sections on the portfolio page. Implement a custom useIntersectionObserver hook that observes a ref and adds an is-visible CSS class when the element enters the viewport. Define a CSS @keyframes fadeInUp animation and a utility class that applies it when the is-visible class is present. Apply the hook to each section (Introduction, Skills, Experience, Education, Projects).

The animation should be subtle: translateY(20px) → translateY(0), opacity 0 → 1, duration ~0.5s with a slight stagger delay per section.

This is a progressive enhancement — the page is fully functional without JavaScript; animations only activate after hydration.

Acceptance criteria

• useIntersectionObserver hook exists and returns a ref + isVisible boolean
• Hook uses a single IntersectionObserver instance (reuses it for all observed elements)
• CSS @keyframes fadeInUp defined with translateY(20px)→translateY(0) and opacity 0→1
• CSS utility class applies the animation when section has is-visible class
• Each section (Introduction, Skills, Experience, Education, Projects) uses the hook
• Sections have staggered animation delay (e.g., 0ms, 100ms, 200ms per section)
• Animations only play once per section (not re-trigger on scroll away and back)
• Page is fully readable without JavaScript (progressive enhancement)
• npm run typecheck passes
• Tests exist: mocked IntersectionObserver triggers class addition/removal correctly

Blocked by

• Slice 2: Static Content Sections (Introduction, Skills, Experience, Education) #3 (Static Content Sections)