Merge remote-tracking branch 'upstream/main' into feature/sync-with-upstream

app/components/common/FooterCopyright.vue

@@ -1,13 +1,13 @@
 <template>
-  <footer class="py-10">
+  <footer class=" pb-10  sm:pb-12">
     <UContainer>
       <div class="flex flex-col items-center gap-4 text-center text-sm text-gray-600 dark:text-gray-400">
         <ClientOnly>
           <NuxtImg :src="logoSrc" alt="Mahdium logo" width="64" height="64" class="h-12 w-12" format="png"
             loading="lazy" />
           <template #fallback>
-            <NuxtImg src="/favicon/favicon.png" alt="Mahdium logo" width="64" height="64" class="h-12 w-12"
-              format="png" loading="lazy" />
+            <NuxtImg src="/favicon/favicon.png" alt="Mahdium logo" width="64" height="64" class="h-12 w-12" format="png"
+              loading="lazy" />
           </template>
         </ClientOnly>
         <p>&copy; {{ currentYear }}, <span class="font-semibold text-gray-900 dark:text-gray-100">Mahdium</span> -

app/components/common/ThemeCustomizer.vue

@@ -18,6 +18,7 @@
             <div class="flex items-center gap-2">
               <UTooltip :text="t('theme.mode.system')">
                 <UButton :color="isModeActive('system') ? 'primary' : 'neutral'" variant="soft" size="sm" square
+                  class="cursor-pointer"
                   :class="isModeActive('system') ? 'ring-1 ring-primary-400/40 bg-primary-500/10 dark:bg-primary-400/10' : ''"
                   icon="i-twemoji-desktop-computer" :aria-label="t('theme.mode.system')"
                   @click="setMode($event, 'system')" />
@@ -25,12 +26,14 @@
 
               <UTooltip :text="t('theme.mode.light')">
                 <UButton :color="isModeActive('light') ? 'primary' : 'neutral'" variant="soft" size="sm" square
+                  class="cursor-pointer"
                   :class="isModeActive('light') ? 'ring-1 ring-primary-400/40 bg-primary-500/10 dark:bg-primary-400/10' : ''"
                   icon="i-twemoji-sun" :aria-label="t('theme.mode.light')" @click="setMode($event, 'light')" />
               </UTooltip>
 
               <UTooltip :text="t('theme.mode.dark')">
                 <UButton :color="isModeActive('dark') ? 'primary' : 'neutral'" variant="soft" size="sm" square
+                  class="cursor-pointer"
                   :class="isModeActive('dark') ? 'ring-1 ring-primary-400/40 bg-primary-500/10 dark:bg-primary-400/10' : ''"
                   icon="i-twemoji-crescent-moon" :aria-label="t('theme.mode.dark')" @click="setMode($event, 'dark')" />
               </UTooltip>
@@ -44,7 +47,7 @@
             <div class="grid grid-cols-3 gap-2">
               <UButton v-for="p in primaryItems" :key="p.key" :color="isPrimaryActive(p.key) ? 'primary' : 'neutral'"
                 variant="soft" size="sm"
-                :class="['justify-start', isPrimaryActive(p.key) ? 'ring-1 ring-primary-400/40 bg-primary-500/10 dark:bg-primary-400/10' : '']"
+                :class="['cursor-pointer justify-start', isPrimaryActive(p.key) ? 'ring-1 ring-primary-400/40 bg-primary-500/10 dark:bg-primary-400/10' : '']"
                 :aria-label="`Primary: ${p.label}`" @click="setPrimary($event, p.key)">
                 <span class="inline-flex items-center gap-2">
                   <span class="size-3 rounded-full" :class="colorClassMap[p.key]" />

app/components/common/TopNav.vue

@@ -12,7 +12,8 @@
                   :class="[isActive('hero') ? activeClass : inactiveClass]" variant="soft" square icon="i-twemoji-house"
                   :aria-label="t('nav.home')" @click="goTo('hero')" />
               </UTooltip>
-              <button type="button" class="hidden lg:inline-flex text-sm font-medium transition-colors duration-200"
+              <button type="button"
+                class="hidden lg:inline-flex cursor-pointer text-sm font-medium transition-colors duration-200"
                 :class="[isActive('hero') ? labelActiveClass : labelInactiveClass]" @click="goTo('hero')">
                 {{ t('nav.home') }}
               </button>
@@ -25,7 +26,8 @@
                   :class="[isActive('skills') ? activeClass : inactiveClass]" variant="soft" square
                   icon="i-twemoji-hammer-and-wrench" :aria-label="t('sections.skills')" @click="goTo('skills')" />
               </UTooltip>
-              <button type="button" class="hidden lg:inline-flex text-sm font-medium transition-colors duration-200"
+              <button type="button"
+                class="hidden lg:inline-flex cursor-pointer text-sm font-medium transition-colors duration-200"
                 :class="[isActive('skills') ? labelActiveClass : labelInactiveClass]" @click="goTo('skills')">
                 {{ t('sections.skills') }}
               </button>
@@ -38,7 +40,8 @@
                   :class="[isActive('work') ? activeClass : inactiveClass]" variant="soft" square
                   icon="i-twemoji-briefcase" :aria-label="t('sections.work')" @click="goTo('work')" />
               </UTooltip>
-              <button type="button" class="hidden lg:inline-flex text-sm font-medium transition-colors duration-200"
+              <button type="button"
+                class="hidden lg:inline-flex cursor-pointer text-sm font-medium transition-colors duration-200"
                 :class="[isActive('work') ? labelActiveClass : labelInactiveClass]" @click="goTo('work')">
                 {{ t('sections.work') }}
               </button>
@@ -51,7 +54,8 @@
                   :class="[isActive('projects') ? activeClass : inactiveClass]" variant="soft" square
                   icon="i-twemoji-rocket" :aria-label="t('sections.projects')" @click="goTo('projects')" />
               </UTooltip>
-              <button type="button" class="hidden lg:inline-flex text-sm font-medium transition-colors duration-200"
+              <button type="button"
+                class="hidden lg:inline-flex cursor-pointer text-sm font-medium transition-colors duration-200"
                 :class="[isActive('projects') ? labelActiveClass : labelInactiveClass]" @click="goTo('projects')">
                 {{ t('sections.projects') }}
               </button>
@@ -60,14 +64,15 @@
             <!-- Blog -->
             <div class="flex items-center gap-1.5">
               <UTooltip :text="t('sections.blog')">
-                <NuxtLink :to="localePath('/blog')">
-                  <UButton class="cursor-pointer transition-all duration-200"
-                    :class="[isBlogActive ? activeClass : inactiveClass]" variant="soft" square icon="i-twemoji-memo"
-                    :aria-label="t('sections.blog')" />
-                </NuxtLink>
+              <NuxtLink :to="localePath('/blog')" class="cursor-pointer">
+                <UButton class="cursor-pointer transition-all duration-200"
+                  :class="[isBlogActive ? activeClass : inactiveClass]" variant="soft" square icon="i-twemoji-memo"
+                  :aria-label="t('sections.blog')" />
+              </NuxtLink>
               </UTooltip>
-              <NuxtLink :to="localePath('/blog')">
-                <button type="button" class="hidden lg:inline-flex text-sm font-medium transition-colors duration-200"
+              <NuxtLink :to="localePath('/blog')" class="cursor-pointer">
+                <button type="button"
+                  class="hidden lg:inline-flex cursor-pointer text-sm font-medium transition-colors duration-200"
                   :class="[isBlogActive ? labelActiveClass : labelInactiveClass]">
                   {{ t('sections.blog') }}
                 </button>