From 7c566b57523c3c33b37c475f1c7ae1ed12c92f7f Mon Sep 17 00:00:00 2001
From: mahdiarghyani <mahdiarghyani12@gmail.com>
Date: Mon, 15 Dec 2025 13:15:12 +0330
Subject: [PATCH 1/2] feat: update theme color usage and enhance button styles
 across components

---
 app/assets/css/main.css                   | 219 +++++++++++++++------
 app/components/common/FooterCopyright.vue |   4 +-
 app/components/portfolio/Hero.vue         |  29 ++-
 docs/THEME-COLOR-GUIDE.md                 | 226 ++++++++++++++++++++++
 4 files changed, 409 insertions(+), 69 deletions(-)
 create mode 100644 docs/THEME-COLOR-GUIDE.md

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 28965b3..54f2c1f 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -21,18 +21,6 @@
 @theme {
   --font-sans: 'Geist', 'DM Sans', '-apple-system', 'ui-sans-serif', 'system-ui', 'sans-serif';
   --font-display: 'Space Grotesk', 'Geist', 'ui-sans-serif', 'sans-serif';
-
-  --color-primary-50: oklch(0.98 0.01 280);
-  --color-primary-100: oklch(0.95 0.03 280);
-  --color-primary-200: oklch(0.89 0.08 280);
-  --color-primary-300: oklch(0.80 0.15 280);
-  --color-primary-400: oklch(0.70 0.22 280);
-  --color-primary-500: oklch(0.60 0.25 280);
-  --color-primary-600: oklch(0.50 0.22 280);
-  --color-primary-700: oklch(0.42 0.18 280);
-  --color-primary-800: oklch(0.34 0.14 280);
-  --color-primary-900: oklch(0.28 0.10 280);
-  --color-primary-950: oklch(0.18 0.06 280);
 }
 
 @layer base {
@@ -213,7 +201,7 @@
   h2,
   h3 {
     @apply font-display tracking-tight font-bold;
-    background: linear-gradient(135deg, currentColor 0%, color-mix(in oklch, currentColor, violet 30%) 100%);
+    background: linear-gradient(135deg, currentColor 0%, color-mix(in oklch, currentColor, var(--ui-color-primary-500) 30%) 100%);
     -webkit-background-clip: text;
     background-clip: text;
   }
@@ -234,8 +222,31 @@
 }
 
 @layer utilities {
+  /**
+   * THEME COLOR USAGE GUIDE
+   * 
+   * Always use Nuxt UI CSS variables for primary colors:
+   * - var(--ui-color-primary-500) for main primary color
+   * - var(--ui-color-primary-400) for lighter shade
+   * - var(--ui-color-primary-600) for darker shade
+   * 
+   * Or use semantic Tailwind classes:
+   * - text-primary, bg-primary, border-primary
+   * 
+   * Never use hardcoded colors like:
+   * - purple-500, violet-600, #a855f7
+   * 
+   * For gradients, use CSS variables:
+   * background: linear-gradient(to right, 
+   *   var(--ui-color-primary-600),
+   *   var(--ui-color-primary-500)
+   * );
+   * 
+   * See docs/THEME-COLOR-GUIDE.md for detailed documentation.
+   */
+
   .primary-text {
-    @apply text-violet-600 dark:text-violet-400;
+    @apply text-primary;
   }
 
   .section-spacing {
@@ -255,7 +266,7 @@
   }
 
   .decorated {
-    @apply underline underline-offset-8 decoration-violet-500 dark:decoration-violet-400 decoration-2;
+    @apply underline underline-offset-8 decoration-primary decoration-2;
   }
 
   /* Soft text color helpers */
@@ -263,13 +274,70 @@
     @apply text-zinc-600 dark:text-zinc-300;
   }
 
-  /* Gradient text effect */
   .gradient-text {
-    @apply bg-gradient-to-r from-violet-600 via-purple-600 to-fuchsia-600 dark:from-violet-400 dark:via-purple-400 dark:to-fuchsia-400 bg-clip-text text-transparent;
+    background: linear-gradient(
+      to right,
+      var(--ui-color-primary-600),
+      var(--ui-color-primary-500),
+      var(--ui-color-primary-400)
+    );
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+
+  .dark .gradient-text {
+    background: linear-gradient(
+      to right,
+      var(--ui-color-primary-400),
+      var(--ui-color-primary-300),
+      var(--ui-color-primary-200)
+    );
+    -webkit-background-clip: text;
+    background-clip: text;
   }
 
   .chip-base {
-    @apply inline-flex items-center gap-1.5 rounded-2xl px-3 py-1.5 text-xs font-semibold ring-1 ring-violet-200/70 bg-gradient-to-br from-white/90 to-violet-50/60 text-violet-700 shadow-lg shadow-violet-500/10 backdrop-blur-md dark:from-violet-950/40 dark:to-violet-900/20 dark:text-violet-200 dark:ring-violet-800/50 dark:shadow-violet-500/5 transition-all hover:scale-105 hover:shadow-xl hover:shadow-violet-500/20;
+    @apply inline-flex items-center gap-1.5 rounded-2xl px-3 py-1.5 text-xs font-semibold ring-2 transition-all hover:scale-105 hover:shadow-xl backdrop-blur-md;
+    --tw-ring-color: color-mix(in oklch, var(--ui-color-primary-400) 60%, transparent);
+    background: linear-gradient(
+      to bottom right,
+      color-mix(in oklch, white 75%, transparent),
+      color-mix(in oklch, var(--ui-color-primary-100) 80%, transparent)
+    );
+    color: var(--ui-color-primary-700);
+    box-shadow: 
+      0 10px 15px -3px color-mix(in oklch, var(--ui-color-primary-500) 15%, transparent),
+      0 4px 6px -2px color-mix(in oklch, var(--ui-color-primary-500) 10%, transparent);
+    border: 1px solid color-mix(in oklch, var(--ui-color-primary-300) 40%, transparent);
+  }
+
+  .chip-base:hover {
+    --tw-ring-color: color-mix(in oklch, var(--ui-color-primary-500) 70%, transparent);
+    box-shadow: 
+      0 20px 25px -5px color-mix(in oklch, var(--ui-color-primary-500) 25%, transparent),
+      0 8px 10px -6px color-mix(in oklch, var(--ui-color-primary-500) 20%, transparent);
+  }
+
+  .dark .chip-base {
+    --tw-ring-color: color-mix(in oklch, var(--ui-color-primary-600) 50%, transparent);
+    background: linear-gradient(
+      to bottom right,
+      color-mix(in oklch, var(--ui-color-primary-950) 60%, transparent),
+      color-mix(in oklch, var(--ui-color-primary-900) 40%, transparent)
+    );
+    color: var(--ui-color-primary-200);
+    box-shadow: 
+      0 10px 15px -3px color-mix(in oklch, var(--ui-color-primary-500) 10%, transparent),
+      0 4px 6px -2px color-mix(in oklch, var(--ui-color-primary-500) 8%, transparent);
+    border: 1px solid color-mix(in oklch, var(--ui-color-primary-700) 40%, transparent);
+  }
+
+  .dark .chip-base:hover {
+    --tw-ring-color: color-mix(in oklch, var(--ui-color-primary-500) 60%, transparent);
+    box-shadow: 
+      0 20px 25px -5px color-mix(in oklch, var(--ui-color-primary-500) 15%, transparent),
+      0 8px 10px -6px color-mix(in oklch, var(--ui-color-primary-500) 12%, transparent);
   }
 
   /* Hide scrollbars for overflow containers */
@@ -292,9 +360,13 @@
     padding-bottom: env(safe-area-inset-bottom);
   }
 
-  /* Modern glassmorphic card */
   .glass-card {
-    @apply rounded-3xl bg-white/80 dark:bg-zinc-900/50 backdrop-blur-xl shadow-xl shadow-violet-500/5 dark:shadow-violet-500/10 border border-white/20 dark:border-zinc-800/50 transition-all duration-300;
+    @apply rounded-3xl bg-white/80 dark:bg-zinc-900/50 backdrop-blur-xl border border-white/20 dark:border-zinc-800/50 transition-all duration-300;
+    box-shadow: 0 20px 25px -5px color-mix(in oklch, var(--ui-color-primary-500) 5%, transparent);
+  }
+
+  .dark .glass-card {
+    box-shadow: 0 20px 25px -5px color-mix(in oklch, var(--ui-color-primary-500) 10%, transparent);
   }
 
   .glass-card:hover {
@@ -358,68 +430,97 @@
     box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--ui-color-primary-500) 5%, transparent);
   }
 
-  /* Modern button with gradient */
   .btn-modern {
-    @apply inline-flex items-center justify-center px-6 py-3 rounded-2xl font-semibold text-white bg-gradient-to-r from-violet-600 to-purple-600 hover:from-violet-700 hover:to-purple-700 shadow-lg shadow-violet-500/30 hover:shadow-xl hover:shadow-violet-500/40 transition-all duration-300 hover:scale-105;
+    @apply inline-flex items-center justify-center px-6 py-3 rounded-2xl font-semibold text-white transition-all duration-300 hover:scale-105;
+    background: linear-gradient(to right, var(--ui-color-primary-600), var(--ui-color-primary-500));
+    box-shadow: 0 10px 15px -3px color-mix(in oklch, var(--ui-color-primary-500) 30%, transparent);
+  }
+
+  .btn-modern:hover {
+    background: linear-gradient(to right, var(--ui-color-primary-700), var(--ui-color-primary-600));
+    box-shadow: 0 20px 25px -5px color-mix(in oklch, var(--ui-color-primary-500) 40%, transparent);
   }
 }
 
 @layer utilities {
 
-  /* Minimal outlined button: persistent subtle border and light background; hover handled separately */
   .btn-outline-minimal {
-    @apply border border-violet-200/60 dark:border-violet-800/50 bg-gradient-to-br from-white/60 to-violet-50/30 dark:from-white/5 dark:to-violet-950/20 backdrop-blur-sm transition-all duration-300 hover:shadow-lg hover:shadow-violet-500/10;
+    @apply backdrop-blur-sm transition-all duration-300 hover:shadow-lg;
+    border: 1px solid color-mix(in oklch, var(--ui-color-primary-200) 60%, transparent);
+    background: linear-gradient(
+      to bottom right,
+      color-mix(in oklch, white 60%, transparent),
+      color-mix(in oklch, var(--ui-color-primary-50) 30%, transparent)
+    );
+  }
+
+  .btn-outline-minimal:hover {
+    box-shadow: 0 10px 15px -3px color-mix(in oklch, var(--ui-color-primary-500) 10%, transparent);
+  }
+
+  .dark .btn-outline-minimal {
+    border-color: color-mix(in oklch, var(--ui-color-primary-800) 50%, transparent);
+    background: linear-gradient(
+      to bottom right,
+      color-mix(in oklch, white 5%, transparent),
+      color-mix(in oklch, var(--ui-color-primary-950) 20%, transparent)
+    );
   }
 }
 
 @layer utilities {
 
-  /* Chip-style icon button inspired by SkillGrid: subtle ring, soft bg, minimal hover */
   .chip-button {
-    @apply inline-flex items-center justify-center h-12 w-12 rounded-2xl ring-1 backdrop-blur-md transition-all duration-300 ease-out hover:scale-110;
-    
-    /* Dynamic theme colors using CSS variables */
-    ring-color: color-mix(in srgb, var(--ui-color-primary-200) 70%, transparent);
-    background: linear-gradient(to bottom right, 
-      color-mix(in srgb, white 90%, transparent),
-      color-mix(in srgb, var(--ui-color-primary-50) 50%, transparent)
+    @apply inline-flex items-center justify-center h-12 w-12 rounded-2xl ring-2 backdrop-blur-md transition-all duration-300 ease-out hover:scale-110;
+    --tw-ring-color: color-mix(in oklch, var(--ui-color-primary-400) 55%, transparent);
+    background: linear-gradient(
+      to bottom right,
+      color-mix(in oklch, white 70%, transparent),
+      color-mix(in oklch, var(--ui-color-primary-100) 75%, transparent)
     );
     color: var(--ui-color-primary-700);
     box-shadow: 
-      0 10px 15px -3px color-mix(in srgb, var(--ui-color-primary-500) 10%, transparent),
-      0 4px 6px -4px color-mix(in srgb, var(--ui-color-primary-500) 10%, transparent);
+      0 10px 15px -3px color-mix(in oklch, var(--ui-color-primary-500) 15%, transparent),
+      0 4px 6px -2px color-mix(in oklch, var(--ui-color-primary-500) 10%, transparent);
+    border: 1px solid color-mix(in oklch, var(--ui-color-primary-300) 35%, transparent);
   }
-  
+
   .chip-button:hover {
-    background: linear-gradient(to bottom right,
-      color-mix(in srgb, var(--ui-color-primary-50) 100%, transparent),
-      color-mix(in srgb, var(--ui-color-primary-100) 100%, transparent)
+    --tw-ring-color: color-mix(in oklch, var(--ui-color-primary-500) 70%, transparent);
+    background: linear-gradient(
+      to bottom right,
+      color-mix(in oklch, var(--ui-color-primary-50) 90%, transparent),
+      color-mix(in oklch, var(--ui-color-primary-100) 95%, transparent)
     );
     box-shadow: 
-      0 20px 25px -5px color-mix(in srgb, var(--ui-color-primary-500) 20%, transparent),
-      0 8px 10px -6px color-mix(in srgb, var(--ui-color-primary-500) 20%, transparent);
+      0 20px 25px -5px color-mix(in oklch, var(--ui-color-primary-500) 25%, transparent),
+      0 8px 10px -6px color-mix(in oklch, var(--ui-color-primary-500) 20%, transparent);
   }
-  
+
   .dark .chip-button {
-    ring-color: color-mix(in srgb, var(--ui-color-primary-800) 50%, transparent);
-    background: linear-gradient(to bottom right,
-      color-mix(in srgb, white 10%, transparent),
-      color-mix(in srgb, var(--ui-color-primary-950) 30%, transparent)
+    --tw-ring-color: color-mix(in oklch, var(--ui-color-primary-600) 45%, transparent);
+    background: linear-gradient(
+      to bottom right,
+      color-mix(in oklch, white 15%, transparent),
+      color-mix(in oklch, var(--ui-color-primary-950) 50%, transparent)
     );
     color: var(--ui-color-primary-200);
     box-shadow: 
-      0 10px 15px -3px color-mix(in srgb, var(--ui-color-primary-500) 5%, transparent),
-      0 4px 6px -4px color-mix(in srgb, var(--ui-color-primary-500) 5%, transparent);
+      0 10px 15px -3px color-mix(in oklch, var(--ui-color-primary-500) 10%, transparent),
+      0 4px 6px -2px color-mix(in oklch, var(--ui-color-primary-500) 8%, transparent);
+    border: 1px solid color-mix(in oklch, var(--ui-color-primary-700) 35%, transparent);
   }
-  
+
   .dark .chip-button:hover {
-    background: linear-gradient(to bottom right,
-      color-mix(in srgb, white 15%, transparent),
-      color-mix(in srgb, var(--ui-color-primary-900) 40%, transparent)
+    --tw-ring-color: color-mix(in oklch, var(--ui-color-primary-500) 60%, transparent);
+    background: linear-gradient(
+      to bottom right,
+      color-mix(in oklch, white 20%, transparent),
+      color-mix(in oklch, var(--ui-color-primary-900) 60%, transparent)
     );
     box-shadow: 
-      0 20px 25px -5px color-mix(in srgb, var(--ui-color-primary-500) 10%, transparent),
-      0 8px 10px -6px color-mix(in srgb, var(--ui-color-primary-500) 10%, transparent);
+      0 20px 25px -5px color-mix(in oklch, var(--ui-color-primary-500) 15%, transparent),
+      0 8px 10px -6px color-mix(in oklch, var(--ui-color-primary-500) 12%, transparent);
   }
 
   /* GitHub Activity Contribution Graph - Dynamic Primary Color */
@@ -526,13 +627,11 @@
     width: 100%;
     z-index: 1000;
     pointer-events: none;
-    /* Use primary color gradient; adapt in dark mode */
-    background-image: linear-gradient(to right,
-        rgb(99 102 241 / 0.9),
-        /* indigo-500 */
-        rgb(139 92 246 / 0.9)
-        /* violet-500 */
-      );
+    background-image: linear-gradient(
+      to right,
+      color-mix(in oklch, var(--ui-color-primary-500) 90%, transparent),
+      color-mix(in oklch, var(--ui-color-primary-600) 90%, transparent)
+    );
     transform-origin: left center;
     animation: locale-progress-grow 600ms ease-out forwards;
   }
diff --git a/app/components/common/FooterCopyright.vue b/app/components/common/FooterCopyright.vue
index 3186403..d2443aa 100644
--- a/app/components/common/FooterCopyright.vue
+++ b/app/components/common/FooterCopyright.vue
@@ -9,9 +9,9 @@
               class="h-12 w-12" loading="lazy" />
           </template>
         </ClientOnly>
-        <p>&copy; {{ currentYear }}, <span class="font-semibold text-gray-900 dark:text-gray-100">AliArghyani</span> -
+        <p>&copy; {{ currentYear }}, <span class="font-semibold text-gray-900 dark:text-gray-100">MahdiArghyani</span> -
           All rights reserved.</p>
-        <a href="https://github.com/aliarghyani" target="_blank" rel="noopener noreferrer"
+        <a href="https://github.com/mahdiarghyani" target="_blank" rel="noopener noreferrer"
           class="inline-flex items-center gap-2 text-sm font-medium text-primary-600 transition hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300">
           <UIcon name="i-mdi-github" class="text-base" />
           <span>GitHub</span>
diff --git a/app/components/portfolio/Hero.vue b/app/components/portfolio/Hero.vue
index 87c7274..b7d705a 100644
--- a/app/components/portfolio/Hero.vue
+++ b/app/components/portfolio/Hero.vue
@@ -31,10 +31,9 @@
               </div>
               <!-- Resume Button - Desktop only -->
               <NuxtLink to="/resume" class="hidden sm:inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold
-                  bg-gradient-to-r from-primary-500 via-purple-500 to-pink-500
-                  hover:from-primary-600 hover:via-purple-600 hover:to-pink-600
-                  text-white rounded-full shadow-lg shadow-primary-500/25
-                  transition-all duration-300 hover:scale-105 hover:shadow-xl hover:shadow-primary-500/40
+                  resume-button
+                  text-white rounded-full
+                  transition-all duration-300 hover:scale-105
                   animate-pulse hover:animate-none">
                 <UIcon name="i-heroicons-document-text" class="text-lg" />
                 <span>View Resume</span>
@@ -43,9 +42,8 @@
             </div>
             <!-- Resume Button - Mobile only -->
             <NuxtLink to="/resume" class="sm:hidden inline-flex items-center justify-center gap-2 mt-2 px-4 py-2 text-sm font-medium
-                bg-gradient-to-r from-primary-500 via-purple-500 to-pink-500
-                hover:from-primary-600 hover:via-purple-600 hover:to-pink-600
-                text-white rounded-full shadow-lg shadow-primary-500/25
+                resume-button
+                text-white rounded-full
                 transition-all duration-300 hover:scale-105">
               <UIcon name="i-heroicons-document-text" class="text-base" />
               <span>View My Resume</span>
@@ -221,6 +219,23 @@ async function copyEmail() {
   color: var(--ui-color-primary-300);
 }
 
+/* Resume button with primary color gradient */
+.resume-button {
+  background: linear-gradient(to right,
+      var(--ui-color-primary-600),
+      var(--ui-color-primary-500),
+      var(--ui-color-primary-400));
+  box-shadow: 0 10px 15px -3px color-mix(in oklch, var(--ui-color-primary-500) 25%, transparent);
+}
+
+.resume-button:hover {
+  background: linear-gradient(to right,
+      var(--ui-color-primary-700),
+      var(--ui-color-primary-600),
+      var(--ui-color-primary-500));
+  box-shadow: 0 20px 25px -5px color-mix(in oklch, var(--ui-color-primary-500) 40%, transparent);
+}
+
 /* Override Tailwind ring color variable for chip buttons */
 :deep(.chip-button) {
   --tw-ring-color: var(--ui-color-primary-500) !important;
diff --git a/docs/THEME-COLOR-GUIDE.md b/docs/THEME-COLOR-GUIDE.md
new file mode 100644
index 0000000..8ad0300
--- /dev/null
+++ b/docs/THEME-COLOR-GUIDE.md
@@ -0,0 +1,226 @@
+# Theme Color System Guide
+
+This guide explains how to use the dynamic theme color system in this portfolio.
+
+## Overview
+
+The portfolio uses Nuxt UI's CSS variable system to support multiple theme colors (green, blue, red, orange, etc.). All UI elements should adapt to the user-selected primary color.
+
+## CSS Variables
+
+### Available Variables
+
+```css
+/* Light mode defaults */
+--ui-color-primary-50   /* Very light tint - backgrounds */
+--ui-color-primary-100  /* Light tint */
+--ui-color-primary-200  /* Lighter shade - borders */
+--ui-color-primary-300  /* Light shade */
+--ui-color-primary-400  /* Medium-light shade - dark mode text */
+--ui-color-primary-500  /* Main primary color */
+--ui-color-primary-600  /* Medium-dark shade - hover states */
+--ui-color-primary-700  /* Dark shade - text */
+--ui-color-primary-800  /* Darker shade */
+--ui-color-primary-900  /* Very dark shade */
+--ui-color-primary-950  /* Darkest shade - dark mode backgrounds */
+```
+
+### Usage Patterns
+
+#### ✅ Correct Usage
+
+```css
+/* Using CSS variables */
+.my-button {
+  background: var(--ui-color-primary-500);
+  color: white;
+}
+
+.my-button:hover {
+  background: var(--ui-color-primary-600);
+}
+
+/* Using semantic Tailwind classes */
+<div class="text-primary bg-primary border-primary">
+
+/* Gradients with CSS variables */
+.gradient-bg {
+  background: linear-gradient(
+    to right,
+    var(--ui-color-primary-600),
+    var(--ui-color-primary-500)
+  );
+}
+
+/* Color mixing for transparency */
+.subtle-bg {
+  background: color-mix(in oklch, var(--ui-color-primary-50) 60%, transparent);
+}
+```
+
+#### ❌ Incorrect Usage
+
+```css
+/* Never use hardcoded colors */
+.my-button {
+  background: #a855f7;  /* ❌ Stays purple forever */
+}
+
+/* Never use Tailwind color classes */
+<div class="text-purple-500">  /* ❌ Doesn't respond to theme */
+<div class="bg-violet-600">    /* ❌ Bypasses theme system */
+```
+
+## Dark Mode Considerations
+
+- **Light mode**: Use darker shades (500, 600, 700) for better contrast
+- **Dark mode**: Use lighter shades (200, 300, 400) for better visibility
+- Always test both modes when adding new styles
+
+```css
+/* Example: Text color that works in both modes */
+.my-text {
+  color: var(--ui-color-primary-600);
+}
+
+.dark .my-text {
+  color: var(--ui-color-primary-400);
+}
+```
+
+## Common Patterns
+
+### Buttons
+
+```css
+/* Primary button */
+.btn-primary {
+  background: linear-gradient(to right, 
+    var(--ui-color-primary-600), 
+    var(--ui-color-primary-500)
+  );
+  box-shadow: 0 10px 15px -3px color-mix(
+    in oklch, 
+    var(--ui-color-primary-500) 30%, 
+    transparent
+  );
+}
+
+.btn-primary:hover {
+  background: linear-gradient(to right, 
+    var(--ui-color-primary-700), 
+    var(--ui-color-primary-600)
+  );
+}
+```
+
+### Cards with Hover Effects
+
+```css
+.card {
+  border: 1px solid var(--ui-color-primary-200);
+  box-shadow: 0 10px 15px -3px color-mix(
+    in oklch, 
+    var(--ui-color-primary-500) 5%, 
+    transparent
+  );
+}
+
+.card:hover {
+  border-color: var(--ui-color-primary-500);
+  box-shadow: 0 20px 25px -5px color-mix(
+    in oklch, 
+    var(--ui-color-primary-500) 15%, 
+    transparent
+  );
+}
+```
+
+### Focus Rings
+
+```css
+.interactive {
+  --tw-ring-color: var(--ui-color-primary-500);
+}
+
+.dark .interactive {
+  --tw-ring-color: var(--ui-color-primary-400);
+}
+```
+
+## Migration Checklist
+
+When adding new components or styles:
+
+1. ✅ Search for any purple/violet color references
+2. ✅ Replace with appropriate primary color variable
+3. ✅ Test with multiple primary colors (green, blue, red, orange)
+4. ✅ Test in both light and dark modes
+5. ✅ Verify hover/focus states use primary color
+6. ✅ Check contrast ratios for accessibility (WCAG AA minimum)
+
+## Examples from Codebase
+
+### Scrollbar
+
+```css
+:root {
+  --scrollbar-thumb: var(--ui-color-primary-500);
+  --scrollbar-thumb-hover: var(--ui-color-primary-600);
+}
+
+:root.dark {
+  --scrollbar-thumb: var(--ui-color-primary-400);
+  --scrollbar-thumb-hover: var(--ui-color-primary-300);
+}
+```
+
+### Chip Buttons (Social Icons)
+
+```css
+.chip-button {
+  --tw-ring-color: color-mix(in oklch, var(--ui-color-primary-200) 70%, transparent);
+  background: linear-gradient(
+    to bottom right,
+    color-mix(in oklch, white 90%, transparent),
+    color-mix(in oklch, var(--ui-color-primary-50) 50%, transparent)
+  );
+  color: var(--ui-color-primary-700);
+}
+```
+
+### Gradient Text
+
+```css
+.gradient-text {
+  background: linear-gradient(
+    to right,
+    var(--ui-color-primary-600),
+    var(--ui-color-primary-500),
+    var(--ui-color-primary-400)
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+```
+
+## Troubleshooting
+
+### Issue: Colors not updating when theme changes
+
+**Solution**: Make sure you're using CSS variables, not hardcoded colors or Tailwind color classes.
+
+### Issue: Poor contrast in dark mode
+
+**Solution**: Use lighter shades (200-400) in dark mode instead of darker shades (600-800).
+
+### Issue: Gradients look wrong
+
+**Solution**: Ensure all color stops in the gradient use primary color variables.
+
+## Resources
+
+- [Nuxt UI Color Documentation](https://ui.nuxt.com/getting-started/theme#colors)
+- [CSS color-mix() Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix)
+- [OKLCH Color Space](https://oklch.com/)

From 45b98f442ef5ca383e78b5138f46f83b7b891581 Mon Sep 17 00:00:00 2001
From: mahdiarghyani <mahdiarghyani12@gmail.com>
Date: Mon, 15 Dec 2025 13:32:08 +0330
Subject: [PATCH 2/2] feat: add current month and year tag to resume filename
 generation

---
 app/composables/useResumeData.ts | 12 ++++++++++--
 server/api/resume/pdf.get.ts     |  5 ++++-
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/app/composables/useResumeData.ts b/app/composables/useResumeData.ts
index 9c24cb4..640f677 100644
--- a/app/composables/useResumeData.ts
+++ b/app/composables/useResumeData.ts
@@ -10,6 +10,13 @@ export function useResumeData() {
   // Reactive reference to resume data
   const resume = computed(() => resumeData)
 
+  function getCurrentMonthYearTag(): string {
+    const now = new Date()
+    const year = now.getFullYear()
+    const monthName = now.toLocaleString('en-US', { month: 'long' })
+    return `${monthName.replace(/\s+/g, '')}_${year}`
+  }
+
   /**
    * Format YYYY-MM date string to readable format
    * @param date - Date string in YYYY-MM format (e.g., "2023-01")
@@ -36,12 +43,13 @@ export function useResumeData() {
 
   /**
    * Generate PDF filename from resume data
-   * @returns Filename in format "FirstName_LastName_Resume.pdf"
+   * Best practice: include a stable date tag so recipients can distinguish versions.
+   * @returns Filename in format "FirstName_LastName_Resume_December_2025.pdf"
    */
   function getPdfFilename(): string {
     const name = resumeData.basics.name
     const filename = name.replace(/\s+/g, '_')
-    return `${filename}_Resume.pdf`
+    return `${filename}_Resume_${getCurrentMonthYearTag()}.pdf`
   }
 
   return {
diff --git a/server/api/resume/pdf.get.ts b/server/api/resume/pdf.get.ts
index 03eba75..0909dad 100644
--- a/server/api/resume/pdf.get.ts
+++ b/server/api/resume/pdf.get.ts
@@ -160,7 +160,10 @@ export default defineEventHandler(async (event) => {
     })
 
     const query = getQuery(event)
-    const filename = (query.filename as string) || 'Ali_Arghyani_Resume.pdf'
+    const now = new Date()
+    const year = now.getFullYear()
+    const monthName = now.toLocaleString('en-US', { month: 'long' })
+    const filename = (query.filename as string) || `Ali_Arghyani_Resume_${monthName.replace(/\s+/g, '')}_${year}.pdf`
     const download = query.download === 'true'
 
     setResponseHeaders(event, {