workstations and light theme

js/stack.js

@@ -1,3 +1,5 @@
+let isStackExpanded = false;
+
 const getExperienceLevel = (years) => {
   if (years >= 7) return "Core";
   if (years >= 4) return "Strong";
@@ -17,21 +19,34 @@ const loadStackForProject = (keys) => {
 
 const loadStack = async () => {
   const stackContainer = document.getElementById("stack");
+  const stackToggle = document.getElementById("stack-toggle");
 
   if (!stackContainer) {
     return;
   }
 
   stackList = await fetchJson("./data/stack.json");
-  const stackCards = stackList.map(buildStackCard).filter(Boolean);
+  renderStack(stackContainer);
+
+  if (stackToggle && stackList.some((stack) => stack.hide === true)) {
+    stackToggle.hidden = false;
+    stackToggle.addEventListener("click", () => {
+      isStackExpanded = !isStackExpanded;
+      stackToggle.textContent = isStackExpanded ? "Show less" : "View all";
+      stackToggle.setAttribute("aria-expanded", String(isStackExpanded));
+      renderStack(stackContainer);
+    });
+  }
+};
+
+const renderStack = (stackContainer) => {
+  const stackCards = stackList
+    .filter((stack) => isStackExpanded || stack.hide !== true)
+    .map(buildStackCard);
   stackContainer.replaceChildren(...stackCards);
 };
 
 const buildStackCard = (stack) => {
-  if (stack?.hide === true) {
-    return null;
-  }
-
   const card = document.createElement("div");
   card.classList.add("stack-card", `tone-${stack.tone ?? "mint"}`);