when clicking all button show both the columns, art and games beside each others, when clicking games button show only games column and have it centered on the screen, the art button works the same way but show the art column

index.html

@@ -378,45 +378,58 @@ View All Projects
             allBtn.classList.remove('bg-red-600', 'text-white');
             allBtn.classList.add('border', 'border-red-600', 'text-red-600');
             if (filter === 'games') {
-                gamesCol.innerHTML = `
-                    <h3 class="text-2xl font-bold mb-6 text-center col-span-full">Games</h3>
-                    ${gamesCol.querySelectorAll('.project-card')[0].outerHTML}
-                    ${gamesCol.querySelectorAll('.project-card')[1].outerHTML} 
-                    ${gamesCol.querySelectorAll('.project-card')[2].outerHTML}
-                `;
-gamesBtn.classList.add('bg-red-600', 'text-white');
+                // Show only games column centered
+                gamesCol.style.display = 'grid';
+                artCol.style.display = 'none';
+                projectsGrid.style.gridTemplateColumns = '1fr';
+                projectsGrid.style.maxWidth = '640px'; // Narrower width for single column
+                
+                // 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') {
+                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';
-artBtn.classList.add('bg-red-600', 'text-white');
+                artCol.style.display = 'grid';
+                projectsGrid.style.gridTemplateColumns = '1fr';
+                projectsGrid.style.maxWidth = '640px'; // Narrower width for single column
+                
+                // Update button styles
+                artBtn.classList.add('bg-red-600', 'text-white');
                 artBtn.classList.remove('border', 'border-red-600', 'text-red-600');
-            } else { // all
-                projectsGrid.style.display = 'grid';
-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');
+                allBtn.classList.remove('bg-red-600', 'text-white');
+                allBtn.classList.add('border', 'border-red-600', 'text-red-600');
                 
-                // Update column headings
-                gamesCol.innerHTML = `
-                    <h3 class="text-2xl font-bold mb-6 text-center col-span-full">Games</h3>
-${gamesCol.querySelectorAll('.project-card')[0].outerHTML}
-                    ${gamesCol.querySelectorAll('.project-card')[1].outerHTML} 
-                    ${gamesCol.querySelectorAll('.project-card')[2].outerHTML}
-                `;
+            } else { // all
+                // Show both columns side by side
+                gamesCol.style.display = 'grid';
+                artCol.style.display = 'grid';
+                projectsGrid.style.gridTemplateColumns = '1fr 1fr';
+                projectsGrid.style.maxWidth = '1024px'; // Wider width for two columns
                 
-                artCol.innerHTML = `
-                    <h3 class="text-2xl font-bold mb-6 text-center col-span-full">Art</h3>
-${artCol.querySelectorAll('.project-card')[0].outerHTML}
-                    ${artCol.querySelectorAll('.project-card')[1].outerHTML}
-                    ${artCol.querySelectorAll('.project-card')[2].outerHTML}
-                `;
+                // 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');
-// Remove grid classes initially
-filterProjects('all');
-});
+            projectsGrid.style.gridTemplateColumns = '1fr 1fr';
+            projectsGrid.style.maxWidth = '1024px';
+            filterProjects('all');
+        });
 // Scroll to section function
 function scrollToSection(sectionId) {
             if (sectionId === 'hero') {