Project page touch up

src/styles/components/Projects.module.scss

@@ -66,6 +66,29 @@
   }
 }
 
+.cardTop {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: $space-2;
+}
+
+.cardLinks {
+  display: flex;
+  gap: $space-2;
+}
+
+.sourceLink {
+  font-size: $text-xl;
+  color: $color-text-muted;
+  transition: color $transition-fast, transform $transition-fast;
+
+  &:hover {
+    color: $color-accent;
+    transform: translate(2px, -2px);
+  }
+}
+
 .featuredBadge {
   position: absolute;
   top: $space-4;
@@ -79,13 +102,6 @@
   padding: 2px $space-3;
 }
 
-.cardTop {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: $space-2;
-}
-
 .folderIcon {
   font-size: $text-2xl;
   color: $color-accent;
@@ -121,13 +137,58 @@
   flex-wrap: wrap;
   gap: $space-2;
   margin-top: $space-2;
-
-  li {
-    font-family: $font-mono;
-    font-size: $text-xs;
-    color: $color-text-dim;
-    background: rgb(var(--color-primary) / 0.15);
-    border-radius: $radius-sm;
-    padding: 2px $space-3;
-  }
+  padding: 0;
+}
+
+.tagItem {
+  list-style: none;
+}
+
+.tagPill {
+  font-family: $font-mono;
+  font-size: $text-xs;
+  border-radius: $radius-sm;
+  padding: 2px $space-3;
+  display: inline-block;
+}
+
+// Tag color variants
+.tagReact {
+  background: rgb(97, 218, 251);
+  color: rgb(0, 0, 0);
+}
+
+.tagDotnet {
+  background: rgb(102, 51, 153);
+  color: rgb(255, 255, 255);
+}
+
+.tagSqlite {
+  background: rgb(70, 130, 180);
+  color: rgb(255, 255, 255);
+}
+
+.tagApache {
+  background: rgb(204, 102, 51);
+  color: rgb(255, 255, 255);
+}
+
+.tagUbuntu {
+  background: rgb(220, 100, 40);
+  color: rgb(255, 255, 255);
+}
+
+.tagNextcloud {
+  background: rgb(0, 150, 200);
+  color: rgb(255, 255, 255);
+}
+
+.tagVite {
+  background: rgb(150, 50, 200);
+  color: rgb(255, 255, 255);
+}
+
+.tagDefault {
+  background: rgb(var(--color-primary) / 0.15);
+  color: $color-text-dim;
 }