give each project a tag, a small symbol that indicates that it is, game or art

projects.html

@@ -19,9 +19,12 @@
                 
                 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                     <!-- Game Projects -->
-                    <div class="project-card bg-white rounded-xl overflow-hidden shadow-lg h-full">
+                    <div class="project-card bg-white rounded-xl overflow-hidden shadow-lg h-full relative">
+                        <div class="absolute top-4 right-4 bg-red-500 text-white px-3 py-1 rounded-full text-xs font-bold flex items-center">
+                            <i data-feather="cpu" class="w-3 h-3 mr-1"></i> Game
+                        </div>
                         <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">
+<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</h3>
                             <p class="text-gray-600 mb-4">Why? Simply because it wants to spend more time with their owner.</p>
@@ -31,10 +34,12 @@
                             </a>
                         </div>
                     </div>
-
-                    <div class="project-card bg-white rounded-xl overflow-hidden shadow-lg h-full">
+                    <div class="project-card bg-white rounded-xl overflow-hidden shadow-lg h-full relative">
+                        <div class="absolute top-4 right-4 bg-red-500 text-white px-3 py-1 rounded-full text-xs font-bold flex items-center">
+                            <i data-feather="cpu" class="w-3 h-3 mr-1"></i> Game
+                        </div>
                         <img src="http://static.photos/gaming/640x360/101" alt="Mech Warrior" class="w-full h-48 object-cover">
-                        <div class="p-6">
+<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</h3>
                             <p class="text-gray-600 mb-4">Strategic combat game with customizable mech units</p>
@@ -44,10 +49,12 @@
                             </a>
                         </div>
                     </div>
-
-                    <div class="project-card bg-white rounded-xl overflow-hidden shadow-lg h-full">
+                    <div class="project-card bg-white rounded-xl overflow-hidden shadow-lg h-full relative">
+                        <div class="absolute top-4 right-4 bg-red-500 text-white px-3 py-1 rounded-full text-xs font-bold flex items-center">
+                            <i data-feather="cpu" class="w-3 h-3 mr-1"></i> Game
+                        </div>
                         <img src="http://static.photos/gaming/640x360/102" alt="Pixel Adventure" class="w-full h-48 object-cover">
-                        <div class="p-6">
+<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</h3>
                             <p class="text-gray-600 mb-4">Explore a vibrant pixel world full of secrets</p>
@@ -59,9 +66,12 @@
                     </div>
 
                     <!-- Art Projects -->
-                    <div class="project-card bg-white rounded-xl overflow-hidden shadow-lg h-full">
+                    <div class="project-card bg-white rounded-xl overflow-hidden shadow-lg h-full relative">
+                        <div class="absolute top-4 right-4 bg-blue-500 text-white px-3 py-1 rounded-full text-xs font-bold flex items-center">
+                            <i data-feather="image" class="w-3 h-3 mr-1"></i> Art
+                        </div>
                         <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">
+<div class="p-6">
                             <h2 class="text-2xl font-bold mb-2">The Fireflies Night</h2>
                             <h3 class="text-xl font-semibold mb-2">Moonlight house illustration</h3>
                             <p class="text-gray-600 mb-4">Where fireflies lead weary travelers to its doors.</p>
@@ -71,10 +81,12 @@
                             </a>
                         </div>
                     </div>
-
-                    <div class="project-card bg-white rounded-xl overflow-hidden shadow-lg h-full">
+                    <div class="project-card bg-white rounded-xl overflow-hidden shadow-lg h-full relative">
+                        <div class="absolute top-4 right-4 bg-blue-500 text-white px-3 py-1 rounded-full text-xs font-bold flex items-center">
+                            <i data-feather="image" class="w-3 h-3 mr-1"></i> Art
+                        </div>
                         <img src="http://static.photos/art/640x360/42" alt="Concept Art Collection" class="w-full h-48 object-cover">
-                        <div class="p-6">
+<div class="p-6">
                             <h2 class="text-2xl font-bold mb-2">Concept Art</h2>
                             <h3 class="text-xl font-semibold mb-2">Stylized characters</h3>
                             <p class="text-gray-600 mb-4">Character concepts for fantasy RPG</p>
@@ -84,10 +96,12 @@
                             </a>
                         </div>
                     </div>
-
-                    <div class="project-card bg-white rounded-xl overflow-hidden shadow-lg h-full">
+                    <div class="project-card bg-white rounded-xl overflow-hidden shadow-lg h-full relative">
+                        <div class="absolute top-4 right-4 bg-blue-500 text-white px-3 py-1 rounded-full text-xs font-bold flex items-center">
+                            <i data-feather="image" class="w-3 h-3 mr-1"></i> Art
+                        </div>
                         <img src="http://static.photos/art/640x360/43" alt="Environment Art" class="w-full h-48 object-cover">
-                        <div class="p-6">
+<div class="p-6">
                             <h2 class="text-2xl font-bold mb-2">Environment Art</h2>
                             <h3 class="text-xl font-semibold mb-2">Fantasy landscapes</h3>
                             <p class="text-gray-600 mb-4">Magical environments and world-building</p>