Added notes to V1

script.js

@@ -32,6 +32,22 @@ const DEFAULT_VISIBLE_PROJECTS = 9;
 if (filterChips.length > 0 && projectCards.length > 0) {
     let selectedFilter = 'all';
     let isExpanded = false;
+    const interactiveSelector = 'a, button, input, textarea, select, summary, [role="button"]';
+
+    const goToCardHref = (card, event) => {
+        const href = card.dataset.href;
+        if (!href) {
+            return;
+        }
+
+        const openInNewTab = event.metaKey || event.ctrlKey || event.button === 1;
+        if (openInNewTab) {
+            window.open(href, '_blank', 'noopener');
+            return;
+        }
+
+        globalThis.location.href = href;
+    };
 
     const applyFilter = () => {
         const visibleCards = [];
@@ -81,6 +97,47 @@ if (filterChips.length > 0 && projectCards.length > 0) {
         });
     }
 
+    projectCards.forEach(card => {
+        if (!card.dataset.href) {
+            return;
+        }
+
+        card.setAttribute('role', 'link');
+        card.setAttribute('tabindex', '0');
+
+        card.addEventListener('click', event => {
+            const target = event.target;
+            if (!(target instanceof Element)) {
+                return;
+            }
+
+            // Let inline links and other controls inside the card handle their own clicks.
+            if (target.closest(interactiveSelector) && target.closest(interactiveSelector) !== card) {
+                return;
+            }
+
+            goToCardHref(card, event);
+        });
+
+        card.addEventListener('keydown', event => {
+            if (event.key !== 'Enter' && event.key !== ' ') {
+                return;
+            }
+
+            const target = event.target;
+            if (!(target instanceof Element)) {
+                return;
+            }
+
+            if (target.closest(interactiveSelector) && target.closest(interactiveSelector) !== card) {
+                return;
+            }
+
+            event.preventDefault();
+            goToCardHref(card, event);
+        });
+    });
+
     applyFilter();
 }