havox/script.js

const NAV_OFFSET = 120;
const DEFAULT_VISIBLE_PROJECTS = 9;
const INTERACTIVE_SELECTOR =
  'a, button, input, textarea, select, summary, [role="button"]';

initRevealOnScroll();
initActiveNavLink();
initProjectCardLinks();
initProjectFilters();

function initRevealOnScroll() {
  const revealTargets = document.querySelectorAll('.reveal');
  if (revealTargets.length === 0) {
    return;
  }

  const observer = new IntersectionObserver(
    (entries, currentObserver) => {
      entries.forEach((entry) => {
        if (!entry.isIntersecting) {
          return;
        }

        entry.target.classList.add('visible');
        currentObserver.unobserve(entry.target);
      });
    },
    { threshold: 0.1, rootMargin: '0px 0px -40px 0px' }
  );

  revealTargets.forEach((target) => observer.observe(target));
}

function initActiveNavLink() {
  const sections = Array.from(document.querySelectorAll('section[id]'));
  const navLinks = Array.from(document.querySelectorAll('.nav-links a'));
  if (sections.length === 0 || navLinks.length === 0) {
    return;
  }

  const updateActiveNavLink = () => {
    let currentSectionId = '';

    sections.forEach((section) => {
      if (window.scrollY >= section.offsetTop - NAV_OFFSET) {
        currentSectionId = section.id;
      }
    });

    navLinks.forEach((link) => {
      link.classList.toggle(
        'is-active',
        link.getAttribute('href') === `#${currentSectionId}`
      );
    });
  };

  window.addEventListener('scroll', updateActiveNavLink, { passive: true });
  updateActiveNavLink();
}

function initProjectCardLinks() {
  const cardLinks = document.querySelectorAll('.card-link[data-href]');
  if (cardLinks.length === 0) {
    return;
  }

  cardLinks.forEach((card) => {
    card.setAttribute('role', 'link');
    card.setAttribute('tabindex', '0');

    card.addEventListener('click', (event) => {
      if (shouldIgnoreCardActivation(card, event.target)) {
        return;
      }

      navigateToCard(card, event);
    });

    card.addEventListener('keydown', (event) => {
      if (event.key !== 'Enter' && event.key !== ' ') {
        return;
      }

      if (shouldIgnoreCardActivation(card, event.target)) {
        return;
      }

      event.preventDefault();
      navigateToCard(card, event);
    });
  });
}

function shouldIgnoreCardActivation(card, target) {
  if (!(target instanceof Element)) {
    return false;
  }

  const interactiveAncestor = target.closest(INTERACTIVE_SELECTOR);
  return interactiveAncestor !== null && interactiveAncestor !== card;
}

function navigateToCard(card, event) {
  const href = card.dataset.href;
  if (!href) {
    return;
  }

  if (event.metaKey || event.ctrlKey || event.button === 1) {
    window.open(href, '_blank', 'noopener');
    return;
  }

  window.location.assign(href);
}

function initProjectFilters() {
  const filterChips = Array.from(document.querySelectorAll('.filter-chip'));
  const projectCards = Array.from(
    document.querySelectorAll('#project-grid .project-card')
  );
  if (filterChips.length === 0 || projectCards.length === 0) {
    return;
  }

  const seeMoreButton = document.querySelector('#projects-see-more');
  const techByCard = new Map(
    projectCards.map((card) => [
      card,
      (card.dataset.tech || '').split(/\s+/).filter(Boolean),
    ])
  );

  let selectedFilter = 'all';
  let isExpanded = false;

  const applyFilter = () => {
    let visibleCount = 0;

    projectCards.forEach((card) => {
      const tech = techByCard.get(card) || [];
      const matchesFilter =
        selectedFilter === 'all' || tech.includes(selectedFilter);

      card.classList.toggle('is-hidden', !matchesFilter);
      if (!matchesFilter) {
        card.classList.remove('is-collapsed');
        return;
      }

      const isCollapsed =
        !isExpanded && visibleCount >= DEFAULT_VISIBLE_PROJECTS;
      card.classList.toggle('is-collapsed', isCollapsed);
      visibleCount += 1;
    });

    if (!seeMoreButton) {
      return;
    }

    const canExpand = visibleCount > DEFAULT_VISIBLE_PROJECTS;
    seeMoreButton.hidden = !canExpand;
    seeMoreButton.setAttribute(
      'aria-expanded',
      canExpand && isExpanded ? 'true' : 'false'
    );
    seeMoreButton.textContent = isExpanded ? 'See less' : 'See more';
  };

  filterChips.forEach((chip) => {
    chip.addEventListener('click', () => {
      selectedFilter = chip.dataset.filter || 'all';
      isExpanded = false;

      filterChips.forEach((otherChip) => {
        otherChip.classList.toggle('active', otherChip === chip);
      });

      applyFilter();
    });
  });

  if (seeMoreButton) {
    seeMoreButton.addEventListener('click', () => {
      isExpanded = !isExpanded;
      applyFilter();
    });
  }

  applyFilter();
}