feat(ui): add technology badges to portfolio cards and enhance visual interactions

styles.css

@@ -275,10 +275,56 @@ footer {
 
 .tech-card:hover {
     transform: translateY(-5px);
-    box-shadow: var(--shadow-soft);
+    box-shadow: 0 10px 30px -5px color-mix(in srgb, var(--color-primary), transparent 85%);
     border-color: var(--color-secondary);
 }
 
+/* Portfolio Badges */
+.badge-coffee {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.4em 0.8em;
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-coffee-dark);
+    background-color: var(--bg-section-alt);
+    border: 1px solid var(--border-subtle);
+    border-radius: 50px;
+    transition: all 0.3s ease;
+    cursor: default;
+}
+
+.badge-coffee svg {
+    width: 12px;
+    height: 12px;
+    stroke-width: 2.5;
+    opacity: 0.8;
+}
+
+.badge-coffee:hover {
+    background-color: var(--color-coffee-medium);
+    color: var(--color-cream);
+    border-color: var(--color-coffee-medium);
+    transform: translateY(-1px);
+}
+
+@media (prefers-color-scheme: dark) {
+    .badge-coffee {
+        color: var(--color-cream);
+        background-color: rgba(255, 255, 255, 0.05);
+        border-color: rgba(255, 255, 255, 0.1);
+    }
+    
+    .badge-coffee:hover {
+        background-color: var(--color-secondary);
+        color: var(--color-coffee-dark);
+        border-color: var(--color-secondary);
+    }
+}
+
 .tech-icon-wrapper {
     width: 64px;
     height: 64px;