tidy up

script.js

@@ -1,79 +1,73 @@
-// ─── Scroll reveal ─────────────────────────────────────────
-const reveals = document.querySelectorAll('.reveal');
-const revealObserver = new IntersectionObserver((entries, observer) => {
+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');
-        observer.unobserve(entry.target);
+            currentObserver.unobserve(entry.target);
         });
     }, {threshold: 0.1, rootMargin: '0px 0px -40px 0px'});
-reveals.forEach((element) => revealObserver.observe(element));
 
-// ─── Active nav link on scroll ──────────────────────────────
+    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 - 120) {
+            if (window.scrollY >= section.offsetTop - NAV_OFFSET) {
                 currentSectionId = section.id;
             }
         });
 
         navLinks.forEach((link) => {
-        const isActive = link.getAttribute('href') === `#${currentSectionId}`;
-        link.classList.toggle('is-active', isActive);
+            link.classList.toggle('is-active', link.getAttribute('href') === `#${currentSectionId}`);
         });
     };
+
     window.addEventListener('scroll', updateActiveNavLink, {passive: true});
     updateActiveNavLink();
+}
 
-// ─── Project card links + filters ───────────────────────────
-const filterChips = Array.from(document.querySelectorAll('.filter-chip'));
-const projectCards = Array.from(document.querySelectorAll('#project-grid .project-card'));
-const seeMoreButton = document.querySelector('#projects-see-more');
+function initProjectCardLinks() {
     const cardLinks = document.querySelectorAll('.card-link[data-href]');
-const DEFAULT_VISIBLE_PROJECTS = 9;
-const interactiveSelector = 'a, button, input, textarea, select, summary, [role="button"]';
-
-const isNestedInteractiveTarget = (card, target) => {
-    if (!(target instanceof Element)) {
-        return false;
-    }
-
-    const interactiveAncestor = target.closest(interactiveSelector);
-    return interactiveAncestor !== null && interactiveAncestor !== card;
-};
-
-const goToCardHref = (card, event) => {
-    const href = card.dataset.href;
-    if (!href) {
+    if (cardLinks.length === 0) {
         return;
     }
 
-    const openInNewTab = event.metaKey || event.ctrlKey || event.button === 1;
-    if (openInNewTab) {
-        window.open(href, '_blank', 'noopener');
-        return;
-    }
-
-    globalThis.location.href = href;
-};
-
     cardLinks.forEach((card) => {
         card.setAttribute('role', 'link');
         card.setAttribute('tabindex', '0');
 
         card.addEventListener('click', (event) => {
-        if (isNestedInteractiveTarget(card, event.target)) {
+            if (shouldIgnoreCardActivation(card, event.target)) {
                 return;
             }
 
-        goToCardHref(card, event);
+            navigateToCard(card, event);
         });
 
         card.addEventListener('keydown', (event) => {
@@ -81,50 +75,77 @@ cardLinks.forEach((card) => {
                 return;
             }
 
-        if (isNestedInteractiveTarget(card, event.target)) {
+            if (shouldIgnoreCardActivation(card, event.target)) {
                 return;
             }
 
             event.preventDefault();
-        goToCardHref(card, event);
+            navigateToCard(card, event);
         });
     });
+}
 
-if (filterChips.length > 0 && projectCards.length > 0) {
-    let selectedFilter = 'all';
-    let isExpanded = false;
+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 = () => {
-        const visibleCards = [];
+        let visibleCount = 0;
 
         projectCards.forEach((card) => {
             const tech = techByCard.get(card) || [];
-            const shouldShow = selectedFilter === 'all' || tech.includes(selectedFilter);
-            card.classList.toggle('is-hidden', !shouldShow);
+            const matchesFilter = selectedFilter === 'all' || tech.includes(selectedFilter);
 
-            if (!shouldShow) {
+            card.classList.toggle('is-hidden', !matchesFilter);
+            if (!matchesFilter) {
+                card.classList.remove('is-collapsed');
                 return;
             }
 
-            card.classList.remove('is-collapsed');
-            visibleCards.push(card);
+            const isCollapsed = !isExpanded && visibleCount >= DEFAULT_VISIBLE_PROJECTS;
+            card.classList.toggle('is-collapsed', isCollapsed);
+            visibleCount += 1;
         });
 
-        if (!isExpanded) {
-            visibleCards.slice(DEFAULT_VISIBLE_PROJECTS).forEach((card) => {
-                card.classList.add('is-collapsed');
-            });
-        }
-
         if (!seeMoreButton) {
             return;
         }
 
-        const canExpand = visibleCards.length > DEFAULT_VISIBLE_PROJECTS;
+        const canExpand = visibleCount > DEFAULT_VISIBLE_PROJECTS;
         seeMoreButton.hidden = !canExpand;
         seeMoreButton.setAttribute('aria-expanded', canExpand && isExpanded ? 'true' : 'false');
         seeMoreButton.textContent = isExpanded ? 'See less' : 'See more';