feat: update theme color usage and enhance button styles across components

This commit is contained in:
mahdiarghyani
2025-12-15 13:15:12 +03:30
parent 4141593875
commit 7c566b5752
4 changed files with 409 additions and 69 deletions
+2 -2
View File
@@ -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>
+22 -7
View File
@@ -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;