fix this

index.html

@@ -252,15 +252,16 @@ Download CV
             <h2 class="text-3xl font-bold text-center mb-6">Featured Projects</h2>
             <div class="flex justify-center space-x-4 mb-16">
                 <button id="all-btn" class="px-6 py-2 bg-red-600 text-white rounded-full font-medium" onclick="filterProjects('all')">All</button>
-                <button id="games-btn" class="px-6 py-2 rounded-full font-medium hover:bg-red-50 hovered-element bg-red-600 text-white" onclick="filterProjects('games')">Games</button>
-<button id="art-btn" class="px-6 py-2 border border-red-600 text-red-600 rounded-full font-medium hover:bg-red-50" onclick="filterProjects('art')">Art</button>
+                <button id="games-btn" class="px-6 py-2 border border-red-600 text-red-600 rounded-full font-medium hover:bg-red-50" onclick="filterProjects('games')">Games</button>
+                <button id="art-btn" class="px-6 py-2 border border-red-600 text-red-600 rounded-full font-medium hover:bg-red-50" onclick="filterProjects('art')">Art</button>
             </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-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">
-<img src="https://static.wixstatic.com/media/6588f2_d9fdecb14bfc48ac99bd5efed3e1b054~mv2.png" alt="Project 1" class="w-full h-48 object-cover">
+
+            <div id="projects-grid" class="w-full max-w-5xl mx-auto grid gap-8">
+                <!-- Games Column -->
+                <div id="games-col" class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                    <h3 class="text-2xl font-bold mb-6 text-center col-span-2">Games</h3>
+                    <div class="project-card bg-gray-50 rounded-xl overflow-hidden shadow-sm">
+                        <img src="https://static.wixstatic.com/media/6588f2_d9fdecb14bfc48ac99bd5efed3e1b054~mv2.png" alt="Bap Cat" 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>
@@ -271,10 +272,8 @@ Download CV
                             </a>
                         </div>
                     </div>
-                    </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="project-card bg-gray-50 rounded-xl overflow-hidden shadow-sm">
+                        <img src="http://static.photos/gaming/640x360/101" alt="Mech Warrior" 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>
@@ -285,12 +284,29 @@ Download CV
                             </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>
+
+                <!-- Art Column -->
+                <div id="art-col" class="grid grid-cols-1 md:grid-cols-2 gap-8" style="display:none;">
+                    <h3 class="text-2xl font-bold mb-6 text-center col-span-2">Art</h3>
+                    <div class="project-card bg-gray-50 rounded-xl overflow-hidden shadow-sm">
+                        <img src="https://static.wixstatic.com/media/6588f2_24e4126d37144f21863c7c78faba9f93~mv2.jpg" alt="The Fireflies Night" class="w-full h-48 object-cover">
+                        <div class="p-6">
+                            <h2 class="text-2xl font-bold mb-2">The Fireflies Night</h2>
+                            <h3 class="text-xl font-semibold mb-2">In the full moonlight, there is a house, where the fireflies lead weary travelers to its doors.</h3>
+                            <p class="text-gray-600 mb-4">Take control of a powerful mech and engage in intense combat scenarios</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">
+                        <img src="http://static.photos/art/640x360/42" alt="Concept Art Collection" 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>
+                            <h2 class="text-2xl font-bold mb-2">Concept Art Collection</h2>
+                            <h3 class="text-xl font-semibold mb-2">Stylized character designs</h3>
+                            <p class="text-gray-600 mb-4">A series of character concepts for fantasy RPG game</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>
@@ -298,6 +314,7 @@ Download CV
                         </div>
                     </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>
@@ -444,86 +461,43 @@ View All Projects
         });
         // Initialize feather icons
         feather.replace();
-        // Project filtering functionality
-        function filterProjects(filter) {
-            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');
-            const artColAll = document.getElementById('art-col-all');
-            const artColFiltered = document.getElementById('art-col-filtered');
-            
-            // 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 filtered games column centered
-                gamesColAll.style.display = 'none';
-                gamesColFiltered.style.display = 'grid';
-                artColAll.style.display = 'none';
-                artColFiltered.style.display = 'none';
-projectsGrid.style.gridTemplateColumns = '1fr 1fr';
-                projectsGrid.style.maxWidth = '1024px';
-                projectsGrid.style.gap = '2rem';
-projectsGrid.style.gap = '2rem';
-// Update button styles
-                gamesBtn.classList.add('bg-red-600', 'text-white');
-                gamesBtn.classList.remove('border', 'border-red-600', 'text-red-600');
-                
-            } else if (filter === 'art') {
-                // Show only filtered art column centered
-                gamesColAll.style.display = 'none';
-                gamesColFiltered.style.display = 'none';
-                artColAll.style.display = 'none';
-                artColFiltered.style.display = 'grid';
-projectsGrid.style.gridTemplateColumns = '1fr 1fr';
-                projectsGrid.style.maxWidth = '1024px';
-                projectsGrid.style.gap = '2rem';
-// Update button styles
-                artBtn.classList.add('bg-red-600', 'text-white');
-                artBtn.classList.remove('border', 'border-red-600', 'text-red-600');
-                
-            } else { // all
-                // Show both columns side by side
-                gamesColAll.style.display = 'grid';
-                gamesColFiltered.style.display = 'none';
-                artColAll.style.display = 'grid';
-                artColFiltered.style.display = 'none';
-projectsGrid.style.gridTemplateColumns = '1fr 1fr';
-                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');
-            }
-        }
-        // 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';
-            document.getElementById('games-col-all').style.display = 'grid';
-            document.getElementById('art-col-all').style.display = 'grid';
-        filterProjects('all');
+// Project filtering functionality
+function filterProjects(filter) {
+    const gamesCol = document.getElementById('games-col');
+    const artCol = document.getElementById('art-col');
+    const gamesBtn = document.getElementById('games-btn');
+    const artBtn = document.getElementById('art-btn');
+    const allBtn = document.getElementById('all-btn');
+    
+    // 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') {
+        gamesCol.style.display = 'grid';
+        artCol.style.display = 'none';
+        gamesBtn.classList.add('bg-red-600', 'text-white');
+        gamesBtn.classList.remove('border', 'border-red-600', 'text-red-600');
+    } else if (filter === 'art') {
+        gamesCol.style.display = 'none';
+        artCol.style.display = 'grid';
+        artBtn.classList.add('bg-red-600', 'text-white');
+        artBtn.classList.remove('border', 'border-red-600', 'text-red-600');
+    } else { // all
+        gamesCol.style.display = 'grid';
+        artCol.style.display = 'grid';
+        allBtn.classList.add('bg-red-600', 'text-white');
+        allBtn.classList.remove('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';
-            document.getElementById('games-col-all').style.display = 'grid';
-            document.getElementById('art-col-all').style.display = 'grid';
             filterProjects('all');
         });
-});
 // Scroll to section function
 function scrollToSection(sectionId) {
             if (sectionId === 'hero') {