Fix header styling and add tab filtering debugging

Author: ThomasJButler

projects.html

@@ -54,6 +54,14 @@
             text-shadow: 0 0 10px #00ff00;
         }
 
+        header h3 {
+            color: rgba(0, 255, 0, 0.8);
+            font-size: 1rem;
+            margin: 0.5rem 0 0 0;
+            font-weight: normal;
+            letter-spacing: 1px;
+        }
+        
         header nav ul {
             list-style: none;
             display: flex;
@@ -444,7 +452,7 @@
             <a href="index.html" style="text-decoration: none;">
                 <h1>Thomas J Butler</h1>
             </a>
-            <h3>Project Stack</h3>
+            <h3>Full Stack Software Developer</h3>
             <nav>
                 <div class="menu-toggle">
                     <span></span>

src/js/projects-matrix-animations.js

@@ -530,6 +530,15 @@ function setupTabFiltering() {
     const tabs = document.querySelectorAll('.matrix-tab-button');
     const cards = document.querySelectorAll('.matrix-project-card');
 
+    console.log(`📑 Setting up tab filtering with ${tabs.length} tabs and ${cards.length} cards`);
+    
+    // Ensure all cards are visible initially
+    cards.forEach(card => {
+        card.classList.remove('matrix-hidden');
+        card.style.opacity = '1';
+        card.style.transform = 'none';
+    });
+    
     tabs.forEach(tab => {
         tab.addEventListener('click', () => {
             const category = tab.dataset.category;
@@ -538,32 +547,41 @@ function setupTabFiltering() {
             tabs.forEach(t => t.classList.remove('active'));
             tab.classList.add('active');
 
-            // Disintegration effect for non-matching cards
+            console.log(`🎯 Tab clicked: ${category}`);
+            
+            // Filter cards with animation
             cards.forEach((card, index) => {
                 const cardCategory = card.dataset.category;
                 const shouldShow = category === 'all' || cardCategory === category;
 
-                if (shouldShow && card.classList.contains('matrix-hidden')) {
-                    // Materialize card
-                    card.classList.remove('matrix-hidden');
-                    
-                    anime({
-                        targets: card,
-                        opacity: [0, 1],
-                        scale: [0, 1],
-                        rotateY: [-180, 0],
-                        duration: 600,
-                        delay: index * 50,
-                        easing: 'easeOutBack',
-                        begin: () => {
-                            createDigitalRain(card);
-                        }
-                    });
-                } else if (!shouldShow && !card.classList.contains('matrix-hidden')) {
-                    // Disintegrate card
-                    disintegrateCard(card, () => {
-                        card.classList.add('matrix-hidden');
-                    });
+                console.log(`Card ${index}: category=${cardCategory}, shouldShow=${shouldShow}`);
+                
+                if (shouldShow) {
+                    // Show card
+                    if (card.classList.contains('matrix-hidden')) {
+                        card.classList.remove('matrix-hidden');
+                        
+                        anime({
+                            targets: card,
+                            opacity: [0, 1],
+                            scale: [0, 1],
+                            rotateY: [-180, 0],
+                            duration: 600,
+                            delay: index * 50,
+                            easing: 'easeOutBack',
+                            begin: () => {
+                                createDigitalRain(card);
+                            }
+                        });
+                    }
+                } else {
+                    // Hide card
+                    if (!card.classList.contains('matrix-hidden')) {
+                        // Disintegrate card
+                        disintegrateCard(card, () => {
+                            card.classList.add('matrix-hidden');
+                        });
+                    }
                 }
             });
         });