this block is called Games Column All State make it separate from the Games Column when pressing the games button and have that column be called Games Column Games State

index.html

@@ -217,9 +217,9 @@ Download CV
             </div>
 <div id="projects-grid" class="w-full max-w-5xl mx-auto grid grid-cols-1 gap-8">
 <!-- Game Column -->
-<div id="games-col" class="grid grid-cols-1 md:grid-cols-2 gap-8">
+<div id="games-col-all" class="grid grid-cols-1 md:grid-cols-2 gap-8" style="display: none;">
 <h3 class="text-2xl font-bold mb-6 text-center">Games</h3>
-                <div class="project-card bg-gray-50 rounded-xl overflow-hidden shadow-sm max-w-2xl mx-auto w-full">
+<div class="project-card bg-gray-50 rounded-xl overflow-hidden shadow-sm max-w-2xl mx-auto w-full">
 <img src="https://static.wixstatic.com/media/6588f2_d9fdecb14bfc48ac99bd5efed3e1b054~mv2.png" alt="Project 1" class="w-full h-48 object-cover">
                         <div class="p-6">
                             <h2 class="text-2xl font-bold mb-2">Bap Cat</h2>
@@ -256,6 +256,46 @@ Download CV
                         </div>
                     </div>
                 </div>
+<!-- Games Column (Filtered State) -->
+<div id="games-col-filtered" class="grid grid-cols-1 gap-8" style="display: none;">
+    <h3 class="text-2xl font-bold mb-6 text-center">Games</h3>
+    <div class="project-card bg-gray-50 rounded-xl overflow-hidden shadow-sm max-w-2xl mx-auto w-full">
+<img src="https://static.wixstatic.com/media/6588f2_d9fdecb14bfc48ac99bd5efed3e1b054~mv2.png" alt="Project 1" class="w-full h-48 object-cover">
+        <div class="p-6">
+            <h2 class="text-2xl font-bold mb-2">Bap Cat</h2>
+            <h3 class="text-xl font-semibold mb-2">A game about a cat spreading chaos in their owners cafe</h3>
+            <p class="text-gray-600 mb-4">Why? Simply because it wants to spend more time with their owner.</p>
+            <a href="#" class="text-red-600 hover:text-red-800 font-medium inline-flex items-center">
+                View Project
+                <i data-feather="arrow-right" class="ml-2"></i>
+            </a>
+        </div>
+    </div>
+    <div class="project-card bg-gray-50 rounded-xl overflow-hidden shadow-sm max-w-2xl mx-auto">
+<img src="http://static.photos/gaming/640x360/101" alt="Game Project 1" class="w-full h-48 object-cover">
+        <div class="p-6">
+            <h2 class="text-2xl font-bold mb-2">Mech Warrior</h2>
+            <h3 class="text-xl font-semibold mb-2">Epic mech battles in futuristic cities</h3>
+            <p class="text-gray-600 mb-4">Strategic combat game with customizable mech units</p>
+            <a href="#" class="text-red-600 hover:text-red-800 font-medium inline-flex items-center">
+                View Project
+                <i data-feather="arrow-right" class="ml-2"></i>
+            </a>
+        </div>
+    </div>
+    <div class="project-card bg-gray-50 rounded-xl overflow-hidden shadow-sm max-w-2xl mx-auto">
+<img src="http://static.photos/gaming/640x360/102" alt="Game Project 2" class="w-full h-48 object-cover">
+        <div class="p-6">
+            <h2 class="text-2xl font-bold mb-2">Pixel Adventure</h2>
+            <h3 class="text-xl font-semibold mb-2">Retro-style platformer with modern mechanics</h3>
+            <p class="text-gray-600 mb-4">Explore a vibrant pixel world full of secrets and challenges</p>
+            <a href="#" class="text-red-600 hover:text-red-800 font-medium inline-flex items-center">
+                View Project
+                <i data-feather="arrow-right" class="ml-2"></i>
+            </a>
+        </div>
+    </div>
+</div>
 <!-- Art Column -->
 <div id="art-col" class="flex flex-col items-center gap-8">
     <h3 class="text-2xl font-bold mb-6 text-center">Art</h3>
@@ -364,71 +404,67 @@ View All Projects
         feather.replace();
         // Project filtering functionality
         function filterProjects(filter) {
-            const gamesCol = document.getElementById('games-col');
+            const gamesColAll = document.getElementById('games-col-all');
+            const gamesColFiltered = document.getElementById('games-col-filtered');
             const artCol = document.getElementById('art-col');
             const gamesBtn = document.getElementById('games-btn');
             const artBtn = document.getElementById('art-btn');
             const allBtn = document.getElementById('all-btn');
             const projectsGrid = document.getElementById('projects-grid');
-// Reset all buttons
+            
+            // Reset all buttons
             gamesBtn.classList.remove('bg-red-600', 'text-white');
             gamesBtn.classList.add('border', 'border-red-600', 'text-red-600');
             artBtn.classList.remove('bg-red-600', 'text-white');
             artBtn.classList.add('border', 'border-red-600', 'text-red-600');
             allBtn.classList.remove('bg-red-600', 'text-white');
             allBtn.classList.add('border', 'border-red-600', 'text-red-600');
+            
             if (filter === 'games') {
-                // Show only games column centered
-                gamesCol.style.display = 'grid';
+                // Show only filtered games column centered
+                gamesColAll.style.display = 'none';
+                gamesColFiltered.style.display = 'grid';
                 artCol.style.display = 'none';
                 projectsGrid.style.gridTemplateColumns = '1fr';
-                projectsGrid.style.maxWidth = '640px'; // Narrower width for single column
+                projectsGrid.style.maxWidth = '640px';
                 
                 // Update button styles
                 gamesBtn.classList.add('bg-red-600', 'text-white');
                 gamesBtn.classList.remove('border', 'border-red-600', 'text-red-600');
-                artBtn.classList.remove('bg-red-600', 'text-white');
-                artBtn.classList.add('border', 'border-red-600', 'text-red-600');
-                allBtn.classList.remove('bg-red-600', 'text-white');
-                allBtn.classList.add('border', 'border-red-600', 'text-red-600');
                 
             } else if (filter === 'art') {
                 // Show only art column centered
-                gamesCol.style.display = 'none';
+                gamesColAll.style.display = 'none';
+                gamesColFiltered.style.display = 'none';
                 artCol.style.display = 'grid';
                 projectsGrid.style.gridTemplateColumns = '1fr';
-                projectsGrid.style.maxWidth = '640px'; // Narrower width for single column
+                projectsGrid.style.maxWidth = '640px';
                 
                 // Update button styles
                 artBtn.classList.add('bg-red-600', 'text-white');
                 artBtn.classList.remove('border', 'border-red-600', 'text-red-600');
-                gamesBtn.classList.remove('bg-red-600', 'text-white');
-                gamesBtn.classList.add('border', 'border-red-600', 'text-red-600');
-                allBtn.classList.remove('bg-red-600', 'text-white');
-                allBtn.classList.add('border', 'border-red-600', 'text-red-600');
                 
             } else { // all
                 // Show both columns side by side
-                gamesCol.style.display = 'grid';
+                gamesColAll.style.display = 'grid';
+                gamesColFiltered.style.display = 'none';
                 artCol.style.display = 'grid';
                 projectsGrid.style.gridTemplateColumns = '1fr 1fr';
-                projectsGrid.style.maxWidth = '1024px'; // Wider width for two columns
-// Update button styles
+                projectsGrid.style.maxWidth = '1024px';
+                
+                // Update button styles
                 allBtn.classList.add('bg-red-600', 'text-white');
                 allBtn.classList.remove('border', 'border-red-600', 'text-red-600');
-                gamesBtn.classList.remove('bg-red-600', 'text-white');
-                gamesBtn.classList.add('border', 'border-red-600', 'text-red-600');
-                artBtn.classList.remove('bg-red-600', 'text-white');
-                artBtn.classList.add('border', 'border-red-600', 'text-red-600');
             }
-}
+        }
         // Initialize with all shown by default
         document.addEventListener('DOMContentLoaded', function() {
             const projectsGrid = document.getElementById('projects-grid');
             projectsGrid.style.gridTemplateColumns = '1fr 1fr';
             projectsGrid.style.maxWidth = '1024px';
-            projectsGrid.style.gap = '2rem'; // Add some gap between columns
-filterProjects('all');
+            projectsGrid.style.gap = '2rem';
+            document.getElementById('games-col-all').style.display = 'grid';
+            filterProjects('all');
         });
 // Scroll to section function
 function scrollToSection(sectionId) {