Restructuración de portfolio: nuevo hero, manifiesto, laboratorio y página de huella

js/main.js

@@ -105,6 +105,43 @@ function closeModal(projectId) {
   }
 }
 
+// ============================================
+// Laboratorio Tabs Management
+// ============================================
+
+/**
+ * Initialize tabs behavior for the Laboratorio section
+ */
+function initTabs() {
+  const tabButtons = document.querySelectorAll(".tab-btn");
+  const tabPanes = document.querySelectorAll(".tab-pane");
+
+  tabButtons.forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const targetTab = btn.getAttribute("data-tab");
+
+      // Update button styles to reflect active/inactive state
+      tabButtons.forEach((b) => {
+        b.classList.remove("bg-primary", "text-white", "shadow-md", "shadow-primary/25");
+        b.classList.add("text-slate-600", "dark:text-slate-400", "hover:bg-slate-100", "dark:hover:bg-white/5");
+      });
+      btn.classList.add("bg-primary", "text-white", "shadow-md", "shadow-primary/25");
+      btn.classList.remove("text-slate-600", "dark:text-slate-400", "hover:bg-slate-100", "dark:hover:bg-white/5");
+
+      // Show the selected tab content and hide the others
+      tabPanes.forEach((pane) => {
+        if (pane.id === `tab-${targetTab}`) {
+          pane.classList.remove("hidden");
+          pane.classList.add("block");
+        } else {
+          pane.classList.remove("block");
+          pane.classList.add("hidden");
+        }
+      });
+    });
+  });
+}
+
 // ============================================
 // Event Listeners
 // ============================================
@@ -125,6 +162,7 @@ document.addEventListener("keydown", function (event) {
 });
 
 /**
- * Initialize theme as early as possible
+ * Initialize theme and tabs
  */
 initTheme();
+initTabs();