Checkpoint 1.3 · JavaScript

Making Things Move

What I Built

Added JavaScript interactivity to the portfolio: a typing animation on the home page hero, scroll-reveal animations using IntersectionObserver, and the hamburger nav toggle. Also built the project filter tabs that dim non-selected checkpoint cards.

What I Learned

document.querySelectorAll() returns a NodeList — you can use forEach() directly on it in modern browsers.
IntersectionObserver is how modern scroll animations work — it's much better than listening to the scroll event.
The typing animation is just a setTimeout loop that slices strings. Once I understood that, it felt obvious.
Always check prefers-reduced-motion before applying animations — not everyone wants things moving on screen.

Code highlight — IntersectionObserver scroll reveal

if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
  const observer = new IntersectionObserver(
    entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible');
        }
      });
    },
    { threshold: 0.15 }
  );
  document.querySelectorAll('.reveal').forEach(el => {
    observer.observe(el);
  });
}

Challenge & Fix

Problem: My scroll reveal wasn't triggering. Elements stayed invisible forever. I spent an evening on it.

Fix: I had set threshold: 0.9, meaning the element had to be 90% visible before triggering. On mobile, some elements were taller than the viewport, so they never hit 90%. Changed to 0.15 — fire when 15% visible. Obvious in hindsight.

Skills Gained

JavaScript ES6+ DOM manipulation Event listeners IntersectionObserver setTimeout prefers-reduced-motion