script.js

document.addEventListener("DOMContentLoaded", () => {
  const navToggle = document.querySelector(".nav-toggle");
  const navMenu = document.querySelector(".nav-menu");
  const navLinks = document.querySelectorAll(".nav-menu a");
  const year = document.querySelector("#year");
  const scrollProgress = document.querySelector(".scroll-progress");
  const filterBar = document.querySelector(".filter-bar");
  const filterButtons = document.querySelectorAll(".filter-button");
  const projectCards = document.querySelectorAll(".project-card");
  const filterStatus = document.querySelector(".filter-status");
  const viewMoreProjects = document.querySelector(".view-more-projects");
  const cursorDot = document.querySelector(".cursor-dot");
  const cursorRing = document.querySelector(".cursor-ring");
  const finePointer = window.matchMedia("(pointer: fine)").matches;
  const collapsedProjectLimit = 4;
  let activeProjectFilter = "all";
  let projectsExpanded = false;

  if (year) {
    year.textContent = new Date().getFullYear();
  }

  const updateScrollProgress = () => {
    if (!scrollProgress) {
      return;
    }

    const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight;
    const progress = scrollableHeight > 0 ? window.scrollY / scrollableHeight : 0;
    scrollProgress.style.transform = `scaleX(${Math.min(Math.max(progress, 0), 1)})`;
  };

  updateScrollProgress();
  window.addEventListener("scroll", updateScrollProgress, { passive: true });
  window.addEventListener("resize", updateScrollProgress);

  if (finePointer && cursorDot && cursorRing) {
    const interactiveSelector = "a, button, .project-card, .skill-card, .timeline-item";

    window.addEventListener(
      "pointermove",
      (event) => {
        document.body.classList.add("cursor-ready");
        cursorDot.style.transform = `translate3d(${event.clientX}px, ${event.clientY}px, 0) translate(-50%, -50%)`;
        cursorRing.style.transform = `translate3d(${event.clientX}px, ${event.clientY}px, 0) translate(-50%, -50%)`;
        document.body.classList.toggle("cursor-hover", Boolean(event.target.closest(interactiveSelector)));
      },
      { passive: true }
    );

    document.addEventListener("pointerleave", () => {
      document.body.classList.remove("cursor-ready", "cursor-hover");
    });
  }

  if (navToggle && navMenu) {
    navToggle.addEventListener("click", () => {
      const isOpen = navToggle.getAttribute("aria-expanded") === "true";

      navToggle.setAttribute("aria-expanded", String(!isOpen));
      navMenu.classList.toggle("is-open", !isOpen);
      document.body.classList.toggle("nav-open", !isOpen);
    });

    navLinks.forEach((link) => {
      link.addEventListener("click", () => {
        navToggle.setAttribute("aria-expanded", "false");
        navMenu.classList.remove("is-open");
        document.body.classList.remove("nav-open");
      });
    });

    window.addEventListener("keydown", (event) => {
      if (event.key === "Escape" && navMenu.classList.contains("is-open")) {
        navToggle.setAttribute("aria-expanded", "false");
        navMenu.classList.remove("is-open");
        document.body.classList.remove("nav-open");
        navToggle.focus();
      }
    });
  }

  const sections = document.querySelectorAll("main section[id]");

  if ("IntersectionObserver" in window && sections.length > 0) {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          const activeLink = document.querySelector(`.nav-menu a[href="#${entry.target.id}"]`);

          if (entry.isIntersecting && activeLink) {
            navLinks.forEach((link) => link.classList.remove("active"));
            activeLink.classList.add("active");
          }
        });
      },
      {
        rootMargin: "-35% 0px -55% 0px",
        threshold: 0,
      }
    );

    sections.forEach((section) => observer.observe(section));
  }

  const filterLabels = {
    all: "all projects",
    qa: "QA projects",
    "machine-learning": "machine learning projects",
    "data-science": "data science projects",
    web: "web projects",
  };

  const applyProjectFilter = (selectedFilter, shouldExpand = false) => {
    let visibleCount = 0;
    const matchingCards = [...projectCards].filter(
      (card) => selectedFilter === "all" || card.dataset.category === selectedFilter
    );
    const shouldCollapse = selectedFilter === "all" && !shouldExpand && matchingCards.length > collapsedProjectLimit;

    filterButtons.forEach((button) => {
      const isActive = button.dataset.filter === selectedFilter;
      button.classList.toggle("active", isActive);
      button.setAttribute("aria-pressed", String(isActive));
    });

    projectCards.forEach((card) => {
      const matchesFilter = selectedFilter === "all" || card.dataset.category === selectedFilter;
      const cardIndex = matchingCards.indexOf(card);
      const shouldShow = matchesFilter && (!shouldCollapse || cardIndex < collapsedProjectLimit);
      card.classList.toggle("is-hidden", !shouldShow);

      if (shouldShow) {
        visibleCount += 1;
      }
    });

    if (filterStatus) {
      const label = filterLabels[selectedFilter] || "projects";
      const totalCount = matchingCards.length;
      filterStatus.textContent =
        visibleCount === totalCount ? `Showing ${visibleCount} ${label}` : `Showing ${visibleCount} of ${totalCount} ${label}`;
    }

    if (viewMoreProjects) {
      const canExpand = selectedFilter === "all" && matchingCards.length > collapsedProjectLimit;
      viewMoreProjects.classList.toggle("is-hidden", !canExpand);
      viewMoreProjects.setAttribute("aria-expanded", String(shouldExpand));
      viewMoreProjects.textContent = shouldExpand ? "Show fewer projects" : "View more projects";
    }
  };

  if (filterBar && filterButtons.length > 0 && projectCards.length > 0) {
    filterBar.addEventListener("click", (event) => {
      const button = event.target.closest(".filter-button");

      if (!button) {
        return;
      }

      activeProjectFilter = button.dataset.filter || "all";
      projectsExpanded = false;
      applyProjectFilter(activeProjectFilter, projectsExpanded);
    });

    if (viewMoreProjects) {
      viewMoreProjects.addEventListener("click", () => {
        projectsExpanded = !projectsExpanded;
        applyProjectFilter(activeProjectFilter, projectsExpanded);
      });
    }

    applyProjectFilter(activeProjectFilter, projectsExpanded);
  }
});