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

app/components/LanguageSwitcher.vue

@@ -3,9 +3,9 @@
     <!-- Nuxt UI Select-based language picker -->
     <USelect v-model="model" :items="items" value-key="value" size="sm" color="primary" variant="soft"
       :highlight="false" arrow :trailing="true" placeholder="Language"
-      class="px-1 w-[64px] sm:w-[76px] rounded-full ring-1 ring-gray-200/70 dark:ring-gray-700/60 backdrop-blur-md shadow-sm h-[25px] hover:ring-primary-500/50 hover:shadow-md transition-all duration-200"
+      class="cursor-pointer px-1 w-[64px] sm:w-[78px] rounded-full ring-1 ring-gray-200/70 dark:ring-gray-700/60 backdrop-blur-md shadow-sm h-[25px] hover:ring-primary-500/50 hover:shadow-md transition-all duration-200"
       :ui="{
-        base: 'rounded-full',
+        base: 'rounded-full cursor-pointer',
         trailingIcon: 'text-dimmed group-data-[state=open]:rotate-180 transition-transform duration-200',
         content: 'min-w-fit scale-fade-in'
       }" :aria-label="t('nav.languageSelector')">

app/components/VueSchoolBanner.vue

@@ -1,61 +0,0 @@
-<template>
-  <div class="bg-blue-950 backdrop-blur-md hover:cursor-pointer" v-show="open">
-    <div
-      class="plausible-event-name=VueSchoolBanner+click flex h-16 shrink-0 items-center justify-between px-4 text-white"
-      @click="navigate"
-    >
-      <div></div>
-      <div class="hidden lg:block">
-        <img src="/img/vueschool/vueschool.svg" alt="VueSchool Logo" class="h-6" />
-      </div>
-      <div
-        class="hidden bg-gradient-to-r from-amber-400 to-pink-500 bg-clip-text text-lg font-semibold tracking-wide text-transparent sm:inline-block"
-      >
-        New Vue Masterclass
-      </div>
-      <div class="hidden lg:flex lg:gap-x-2">
-        <img src="/img/vueschool/vue-with-hat.svg" alt="VueJS Logo" class="h-6" />
-        <img src="/img/vueschool/pinia.svg" alt="Pinia Logo" class="h-6" />
-        <img src="/img/vueschool/vite.svg" alt="Vite Logo" class="h-6" />
-        <img src="/img/vueschool/vitest.svg" alt="Vitest Logo" class="h-6" />
-      </div>
-      <div class="text-center leading-5">
-        <span
-          class="inline-block bg-gradient-to-r from-emerald-300 to-sky-300 bg-clip-text font-semibold tracking-wide text-transparent"
-        >
-          Vue.js Masterclass 2024 Edition
-        </span>
-        <span class="ml-2 hidden font-semibold sm:inline">LAUNCHED</span>
-        <br />
-        <span class="text-sm text-gray-300 sm:text-base">
-          Code a real world app using the latest Vue.js tech
-        </span>
-      </div>
-      <UButton
-        class="plausible-event-name=VueSchoolBanner+click hidden px-4 font-bold md:inline-flex rounded-full"
-        label="Buy Now"
-        icon="i-tabler-caret-right-filled"
-        variant="solid"
-        trailing
-        @click="navigate"
-      />
-      <UIcon
-        name="i-ph-x"
-        class="size-8 p-2 hover:opacity-80"
-        @click.stop="open = false"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const open = ref(true)
-const affiliateId = "UILIBPIC"
-const fullUrl = computed(
-  () => `https://vueschool.io/the-vuejs-3-master-class?friend=${affiliateId}`
-)
-
-const navigate = () => {
-  window.open(fullUrl.value, "_blank")
-}
-</script>

app/components/blog/BlogPost.vue

@@ -32,7 +32,7 @@ const handleImageError = () => {
       </div>
 
       <!-- Title -->
-      <h1 class="text-4xl md:text-5xl font-bold mb-4 text-gray-900 dark:text-gray-100">
+      <h1 class="text-2xl md:text-3xl lg:text-4xl font-bold mb-4 text-gray-900 dark:text-gray-100 leading-tight">
         {{ post.title }}
       </h1>
 

app/components/blog/BlogSearch.vue

@@ -1,6 +1,6 @@
 <template>
   <UInput :model-value="modelValue" :placeholder="t('blog.searchPlaceholder')" icon="i-heroicons-magnifying-glass"
-    size="lg" :ui="{ icon: { trailing: { pointer: '' } } }" @update:model-value="handleInput">
+    size="lg" @update:model-value="handleInput">
     <template v-if="modelValue" #trailing>
       <UButton color="gray" variant="link" icon="i-heroicons-x-mark-20-solid" :padded="false" @click="clearSearch" />
     </template>

app/components/blog/BlogShare.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+const props = defineProps<{
+  title: string
+  url: string
+}>()
+
+const { t } = useI18n()
+
+const shareLinks = computed(() => ({
+  twitter: `https://twitter.com/intent/tweet?text=${encodeURIComponent(props.title)}&url=${encodeURIComponent(props.url)}`,
+  linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(props.url)}`,
+  facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(props.url)}`,
+  telegram: `https://t.me/share/url?url=${encodeURIComponent(props.url)}&text=${encodeURIComponent(props.title)}`
+}))
+
+const toast = useToast()
+
+const copyToClipboard = async () => {
+  try {
+    if (navigator?.clipboard?.writeText) {
+      await navigator.clipboard.writeText(props.url)
+      toast.add({
+        title: t('blog.linkCopied') || 'Link copied!',
+        icon: 'i-heroicons-check-circle',
+        color: 'green'
+      })
+    } else {
+      // Fallback for older browsers
+      const textArea = document.createElement('textarea')
+      textArea.value = props.url
+      textArea.style.position = 'fixed'
+      textArea.style.left = '-999999px'
+      document.body.appendChild(textArea)
+      textArea.select()
+      document.execCommand('copy')
+      document.body.removeChild(textArea)
+      toast.add({
+        title: t('blog.linkCopied') || 'Link copied!',
+        icon: 'i-heroicons-check-circle',
+        color: 'green'
+      })
+    }
+  } catch (err) {
+    console.error('Failed to copy:', err)
+    toast.add({
+      title: t('blog.copyFailed') || 'Failed to copy link',
+      icon: 'i-heroicons-x-circle',
+      color: 'red'
+    })
+  }
+}
+</script>
+
+<template>
+  <div
+    class="blog-share my-8 p-6 bg-gray-50 dark:bg-gray-900/50 rounded-lg border border-gray-200 dark:border-gray-800">
+    <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+      <!-- Title -->
+      <div class="flex items-center gap-3">
+        <UIcon name="i-heroicons-share" class="w-5 h-5 text-primary-600 dark:text-primary-400" />
+        <span class="font-semibold text-gray-900 dark:text-gray-100">
+          {{ t('blog.sharePost') || 'Share this post' }}
+        </span>
+      </div>
+
+      <!-- Share Buttons -->
+      <div class="flex flex-wrap items-center gap-2">
+        <!-- Twitter -->
+        <UButton :to="shareLinks.twitter" target="_blank" rel="noopener noreferrer" color="gray" variant="ghost"
+          size="sm" icon="i-simple-icons-x" aria-label="Share on Twitter" />
+
+        <!-- LinkedIn -->
+        <UButton :to="shareLinks.linkedin" target="_blank" rel="noopener noreferrer" color="gray" variant="ghost"
+          size="sm" icon="i-simple-icons-linkedin" aria-label="Share on LinkedIn" />
+
+        <!-- Facebook -->
+        <UButton :to="shareLinks.facebook" target="_blank" rel="noopener noreferrer" color="gray" variant="ghost"
+          size="sm" icon="i-simple-icons-facebook" aria-label="Share on Facebook" />
+
+        <!-- Telegram -->
+        <UButton :to="shareLinks.telegram" target="_blank" rel="noopener noreferrer" color="gray" variant="ghost"
+          size="sm" icon="i-simple-icons-telegram" aria-label="Share on Telegram" />
+
+        <!-- Copy Link -->
+        <UButton @click="copyToClipboard" color="gray" variant="ghost" size="sm" icon="i-heroicons-link"
+          aria-label="Copy link" />
+      </div>
+    </div>
+  </div>
+</template>

app/components/blog/BlogTableOfContents.vue

@@ -26,6 +26,12 @@ const shouldShowToc = computed(() => {
   return countLinks(props.toc.links) >= 3
 })
 
+const setHashWithoutNavigation = (id: string) => {
+  const url = new URL(window.location.href)
+  url.hash = id
+  window.history.replaceState(window.history.state, '', url.toString())
+}
+
 // Smooth scroll to heading with offset for sticky header
 const scrollToHeading = (id: string) => {
   const element = document.getElementById(id)
@@ -40,11 +46,28 @@ const scrollToHeading = (id: string) => {
     })
 
     activeId.value = id
+    setHashWithoutNavigation(id)
   }
 }
 
 // Track active section with IntersectionObserver
 onMounted(() => {
+  // Handle initial hash (avoid full page navigation / transition)
+  const initialId = window.location.hash.replace(/^#/, '')
+  if (initialId) {
+    setTimeout(() => {
+      const el = document.getElementById(initialId)
+      if (!el) return
+
+      const offset = 100
+      const elementPosition = el.getBoundingClientRect().top + window.pageYOffset
+      const offsetPosition = elementPosition - offset
+
+      window.scrollTo({ top: offsetPosition, behavior: 'auto' })
+      activeId.value = initialId
+    }, 0)
+  }
+
   const headings = document.querySelectorAll('article h2, article h3, article h4')
 
   const observer = new IntersectionObserver(

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>

app/components/content/BlogCallout.vue

@@ -1,9 +1,7 @@
 <template>
   <UCard :ui="{
-    base: 'my-6',
-    body: { padding: 'p-4 sm:p-5' },
-    ring: 'ring-2',
-    divide: ''
+    root: 'my-6 ring-2',
+    body: 'p-4 sm:p-5'
   }" :class="cardClass">
     <div class="flex items-start gap-3">
       <UIcon :name="icon" :class="iconClass" class="mt-0.5 h-5 w-5 flex-shrink-0" />

app/components/content/Callout.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+const props = defineProps<{
+  type?: 'info' | 'warning' | 'success' | 'tip' | 'primary'
+  title?: string
+}>()
+
+const typeConfig = {
+  primary: {
+    icon: 'i-heroicons-light-bulb',
+    color: 'primary',
+    bgClass: 'bg-primary-50 dark:bg-primary-950/30 border-primary-200 dark:border-primary-800'
+  },
+  info: {
+    icon: 'i-heroicons-information-circle',
+    color: 'blue',
+    bgClass: 'bg-blue-50 dark:bg-blue-950/30 border-blue-200 dark:border-blue-800'
+  },
+  warning: {
+    icon: 'i-heroicons-exclamation-triangle',
+    color: 'yellow',
+    bgClass: 'bg-yellow-50 dark:bg-yellow-950/30 border-yellow-200 dark:border-yellow-800'
+  },
+  success: {
+    icon: 'i-heroicons-check-circle',
+    color: 'green',
+    bgClass: 'bg-green-50 dark:bg-green-950/30 border-green-200 dark:border-green-800'
+  },
+  tip: {
+    icon: 'i-heroicons-light-bulb',
+    color: 'purple',
+    bgClass: 'bg-purple-50 dark:bg-purple-950/30 border-purple-200 dark:border-purple-800'
+  }
+}
+
+const config = typeConfig[props.type || 'info']
+</script>
+
+<template>
+  <div :class="['callout-box', config.bgClass]" class="my-6 p-5 rounded-lg border-2 shadow-sm">
+    <div class="flex items-start gap-3">
+      <UIcon :name="config.icon" class="w-5 h-5 flex-shrink-0 mt-0.5"
+        :class="`text-${config.color}-600 dark:text-${config.color}-400`" />
+      <div class="flex-1 min-w-0">
+        <div v-if="title" class="font-semibold text-base mb-1.5"
+          :class="`text-${config.color}-900 dark:text-${config.color}-100`">
+          {{ title }}
+        </div>
+        <div class="prose prose-sm dark:prose-invert max-w-none">
+          <slot />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.callout-box {
+  transition: all 0.2s ease;
+}
+
+.callout-box:hover {
+  transform: translateY(-2px);
+  shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+}
+</style>

app/components/content/PullQuote.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+const props = defineProps<{
+  author?: string
+  highlight?: boolean
+}>()
+</script>
+
+<template>
+  <div class="pull-quote my-8 relative">
+    <div :class="[
+      'relative p-6 rounded-lg',
+      highlight
+        ? 'bg-gradient-to-br from-primary-50 to-primary-100 dark:from-primary-950/40 dark:to-primary-900/40 border-2 border-primary-200 dark:border-primary-800'
+        : 'bg-gray-50 dark:bg-gray-900/50 border-l-4 border-primary-500 dark:border-primary-400'
+    ]">
+      <!-- Quote Icon -->
+      <div class="absolute top-4 left-4 opacity-10 dark:opacity-5">
+        <UIcon name="i-heroicons-chat-bubble-left-right" class="w-16 h-16 text-primary-600" />
+      </div>
+
+      <!-- Content -->
+      <div class="relative z-10">
+        <blockquote class="text-lg md:text-xl font-medium leading-relaxed text-gray-900 dark:text-gray-100 italic">
+          <slot />
+        </blockquote>
+
+        <!-- Author -->
+        <div v-if="author" class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
+          <cite class="text-sm font-semibold text-primary-600 dark:text-primary-400 not-italic">
+            — {{ author }}
+          </cite>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.pull-quote {
+  animation: fadeInUp 0.6s ease-out;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>

app/components/portfolio/AIStack.vue

@@ -1,17 +1,17 @@
 <template>
-  <section id="ai-stack" class="py-6 scroll-mt-20">
+  <section id="ai-stack" class="section-spacing scroll-mt-20">
     <UContainer>
-      <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3 mb-4">
-        <div class="flex items-center gap-3">
+      <div class="section-header flex-nowrap justify-between">
+        <div class="flex items-center gap-3 min-w-0">
           <UIcon name="twemoji:robot" class="text-2xl" />
-          <h2 class="text-lg font-semibold">{{ t('skills.aiStack') }}</h2>
+          <h2 class="section-title">{{ t('skills.aiStack') }}</h2>
         </div>
 
         <div
-          class="ms-auto w-full md:w-auto flex flex-row-reverse items-center gap-1 overflow-x-auto no-scrollbar whitespace-nowrap px-1 py-1"
+          class="ms-auto flex flex-row-reverse items-center gap-1 overflow-x-auto no-scrollbar whitespace-nowrap px-1 py-1 min-w-0"
           role="toolbar" aria-label="AI Stack group filters">
           <UButton :icon="filterButtonIcon" size="xs" :variant="filterButtonVariant" :color="filterButtonColor"
-            class="filter-toggle rounded-full shrink-0 mx-1"
+            class="filter-toggle cursor-pointer rounded-full shrink-0 mx-1"
             :class="{ 'is-open': filtersOpen, 'has-selection': hasSelection }" :aria-label="filterButtonLabel"
             :aria-expanded="hasSelection ? undefined : filtersOpen" aria-controls="ai-group-filter-group"
             @click="handlePrimaryAction" />
@@ -23,7 +23,7 @@
                   <UTooltip :text="opt.label" :arrow="true" :delay-duration="0.5"
                     :content="{ side: 'bottom', sideOffset: 8, collisionPadding: 12 }">
                     <UButton :icon="opt.icon" size="xs" :variant="isSelected(opt.value) ? 'solid' : 'soft'"
-                      color="primary" class="rounded-full shrink-0" :aria-pressed="isSelected(opt.value)"
+                      color="primary" class="cursor-pointer rounded-full shrink-0" :aria-pressed="isSelected(opt.value)"
                       :aria-label="`Filter by ${opt.label}`" :title="opt.label" @click="toggleGroup(opt.value)" />
                   </UTooltip>
                 </div>
@@ -33,16 +33,9 @@
         </div>
       </div>
 
-      <div class="grid gap-4 md:grid-cols-3">
-        <UCard class="md:col-span-3">
-          <template #header>
-            <div class="flex items-center justify-between">
-              <h3 class="text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
-                {{ headerTitle }}
-              </h3>
-            </div>
-          </template>
-
+      <UAccordion type="single" :unmount-on-hide="false" :items="accordionItems" default-value="ai-stack"
+        :ui="accordionUi">
+        <template #body>
           <div class="flex flex-wrap gap-1.5">
             <div v-for="item in filtered" :key="item.id" class="inline-flex items-stretch">
               <UTooltip :arrow="true" :delay-duration="0.5" :text="item.shortWhy || item.name"
@@ -51,24 +44,36 @@
                   <span class="inline-flex items-center gap-1.5">
                     <UIcon v-if="item.icon" :name="item.icon" class="h-4 w-4 min-h-4 min-w-4 text-base" />
                     <span class="text-xs font-medium cursor-default">{{ item.name }}</span>
-                    <!-- <UBadge size="xs" color="neutral" variant="subtle" class="ml-1">{{ groupLabel(item.group) }}
-                    </UBadge> -->
                   </span>
                 </UBadge>
               </UTooltip>
             </div>
           </div>
-        </UCard>
-      </div>
+        </template>
+      </UAccordion>
     </UContainer>
   </section>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, onMounted, onUnmounted } from 'vue'
 import { AI_GROUPS, aiStackItems, type AiGroup } from '@/data/aiStack'
 const { t } = useI18n()
 
+// Detect mobile for accordion behavior (SSR-safe)
+const isMobile = ref(true)
+
+onMounted(() => {
+  const checkMobile = () => {
+    isMobile.value = window.innerWidth < 768
+  }
+  checkMobile()
+  window.addEventListener('resize', checkMobile)
+  onUnmounted(() => {
+    window.removeEventListener('resize', checkMobile)
+  })
+})
+
 type GroupMeta = { labelKey: string; icon: string }
 const GROUP_META: Record<AiGroup, GroupMeta> = {
   ide_dev: { labelKey: 'ai_stack.group.ide_dev', icon: 'i-mdi-laptop' },
@@ -128,17 +133,30 @@ const filtered = computed(() => {
   return aiStackItems.filter(i => selectedGroups.value.includes(i.group))
 })
 
-const groupLabel = (g: AiGroup) => t(GROUP_META[g].labelKey)
-
 const headerTitle = computed(() => {
-  if (selectedGroups.value.length === 1) return groupLabel(selectedGroups.value[0]!)
+  if (selectedGroups.value.length === 1) return t(GROUP_META[selectedGroups.value[0]!].labelKey)
   return t('ai_stack.subtitle', 'Methods, tools, rules, and MCPs that power my AI workflow')
 })
 
+const accordionItems = computed(() => [{
+  label: headerTitle.value,
+  value: 'ai-stack'
+}])
+
+const accordionUi = {
+  root: 'flex flex-col',
+  item: 'flex flex-col rounded-2xl border border-gray-200/70 dark:border-gray-700/50 bg-white/70 dark:bg-gray-900/40 shadow-sm',
+  header: 'px-4 data-[state=open]:border-b border-gray-200/70 dark:border-gray-700/50',
+  trigger: 'group flex-1 items-center gap-2 py-3 text-left cursor-pointer',
+  label: 'text-sm font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-300',
+  leadingIcon: 'shrink-0',
+  trailingIcon: 'ms-auto text-gray-500 dark:text-gray-400 transition-transform duration-200 group-data-[state=open]:rotate-180',
+  content: 'px-4 pb-4 pt-3 data-[state=closed]:hidden',
+  body: 'pt-1'
+} as const
 </script>
 
 <style scoped>
-/* Adopt SkillFilters transition styles for smooth group filter UX */
 .filter-toggle {
   transition: transform 200ms ease, box-shadow 220ms ease, filter 220ms ease;
 }

app/components/portfolio/EducationList.vue

@@ -1,9 +1,9 @@
 <template>
-  <section class="py-6">
+  <section class="section-spacing">
     <UContainer>
-      <div class="flex items-center gap-3 mb-3">
+      <div class="section-header">
         <UIcon name="i-twemoji-graduation-cap" class="text-2xl" />
-        <h2 class="text-lg font-semibold text-start">{{ t('sections.education') }}</h2>
+        <h2 class="section-title text-start">{{ t('sections.education') }}</h2>
       </div>
       <div class="space-y-4">
         <UCard v-for="(edu, i) in portfolio.education" :key="i"

app/components/portfolio/ExperienceList.vue

@@ -1,9 +1,9 @@
 <template>
-  <section class="py-6">
+  <section class="section-spacing">
     <UContainer>
-      <div class="flex items-center gap-3 mb-3">
+      <div class="section-header">
         <UIcon name="i-twemoji-briefcase" class="text-2xl" />
-        <h2 class="text-lg font-semibold text-start">{{ t('sections.work') }}</h2>
+        <h2 class="section-title text-start">{{ t('sections.work') }}</h2>
       </div>
 
       <div class="space-y-6">

app/components/portfolio/GitHubActivity.vue

@@ -0,0 +1,240 @@
+<template>
+  <section id="github-activity" class="section-spacing scroll-mt-20">
+    <UContainer>
+      <!-- Section Header (consistent with other sections) -->
+      <div class="section-header">
+        <UIcon name="i-twemoji-chart-increasing" class="text-2xl" />
+        <h2 class="section-title">{{ t('sections.githubActivity') }}</h2>
+      </div>
+
+      <!-- Loading State -->
+      <div v-if="loading" class="flex items-center justify-center py-20">
+        <UIcon name="i-mdi-loading" class="animate-spin text-4xl text-primary-500" />
+      </div>
+
+      <!-- Error State -->
+      <div v-else-if="error" class="text-center py-20">
+        <UIcon name="i-mdi-alert-circle" class="text-5xl text-red-500 mb-3" />
+        <p class="text-gray-600 dark:text-gray-400">
+          {{ t('portfolio.githubActivity.error') }}
+        </p>
+      </div>
+
+      <!-- GitHub Calendar Accordion -->
+      <UAccordion v-else-if="calendar" type="single" :unmount-on-hide="false" :items="accordionItems"
+        default-value="github" :ui="accordionUi">
+        <template #body>
+          <div class="flex flex-col gap-4">
+            <!-- Scrollable Graph Container (only the graph scrolls) -->
+            <div class="overflow-x-auto pb-4 lg:overflow-visible">
+              <div class="min-w-[940px] max-w-full w-fit mx-auto">
+                <!-- Month Labels Row -->
+                <div class="flex mb-2">
+                  <div class="w-8 flex-shrink-0"></div>
+                  <div class="flex flex-1">
+                    <div v-for="(month, index) in monthLabels" :key="index"
+                      class="text-xs text-gray-500 dark:text-gray-400" :style="{ flex: `0 0 ${month.width}%` }">
+                      {{ month.name }}
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Grid Container -->
+                <div class="flex gap-1">
+                  <!-- Day Labels -->
+                  <div class="flex flex-col gap-[3px] w-8 flex-shrink-0">
+                    <span class="h-[11px] text-[11px] text-gray-500 dark:text-gray-400 text-right pr-1"></span>
+                    <span class="h-[11px] text-[11px] text-gray-500 dark:text-gray-400 text-right pr-1">Mon</span>
+                    <span class="h-[11px] text-[11px] text-gray-500 dark:text-gray-400 text-right pr-1"></span>
+                    <span class="h-[11px] text-[11px] text-gray-500 dark:text-gray-400 text-right pr-1">Wed</span>
+                    <span class="h-[11px] text-[11px] text-gray-500 dark:text-gray-400 text-right pr-1"></span>
+                    <span class="h-[11px] text-[11px] text-gray-500 dark:text-gray-400 text-right pr-1">Fri</span>
+                    <span class="h-[11px] text-[11px] text-gray-500 dark:text-gray-400 text-right pr-1"></span>
+                  </div>
+
+                  <!-- Weeks Grid -->
+                  <div class="flex flex-1 justify-between gap-[3px]">
+                    <div v-for="(week, weekIndex) in calendar.weeks" :key="weekIndex" class="flex flex-col gap-[3px]">
+                      <div v-for="(day, dayIndex) in week.contributionDays" :key="dayIndex"
+                        class="w-[11px] h-[11px] rounded-[2px] cursor-pointer transition-transform hover:scale-110"
+                        :class="getContributionClass(day.contributionCount)" @mouseenter="hoveredDay = day"
+                        @mouseleave="hoveredDay = null" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Footer: Legend + Hover Info (always visible) -->
+            <div class="flex flex-wrap items-center justify-between gap-3">
+              <div class="flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400">
+                <span>Less</span>
+                <div class="flex gap-[3px] mx-1">
+                  <div v-for="(cls, idx) in legendClasses" :key="idx" class="w-[11px] h-[11px] rounded-[2px]"
+                    :class="cls" />
+                </div>
+                <span>More</span>
+              </div>
+
+              <div
+                class="text-xs text-gray-600 dark:text-gray-300 min-h-[32px] flex flex-col justify-center text-right">
+                <template v-if="hoveredDay">
+                  <span class="font-semibold text-gray-900 dark:text-white">
+                    {{ hoveredDay.contributionCount }} contribution{{ hoveredDay.contributionCount !== 1 ? 's' : '' }}
+                  </span>
+                  <span class="text-gray-500 dark:text-gray-400">
+                    {{ formatDateFull(hoveredDay.date) }}
+                  </span>
+                </template>
+              </div>
+            </div>
+          </div>
+        </template>
+      </UAccordion>
+    </UContainer>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, computed } from 'vue'
+import type { GitHubContributionCalendar, GitHubContributionDay } from '@/types/github'
+
+const { t } = useI18n()
+const { fetchContributions } = useGitHubContributions()
+
+// Props
+interface Props {
+  username: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  username: 'aliarghyani'
+})
+
+// Detect mobile for accordion behavior (SSR-safe)
+const isMobile = ref(true)
+
+onMounted(() => {
+  const checkMobile = () => {
+    isMobile.value = window.innerWidth < 768
+  }
+  checkMobile()
+  window.addEventListener('resize', checkMobile)
+  onUnmounted(() => {
+    window.removeEventListener('resize', checkMobile)
+  })
+})
+
+// State
+const calendar = ref<GitHubContributionCalendar | null>(null)
+const loading = ref(true)
+const error = ref(false)
+const hoveredDay = ref<GitHubContributionDay | null>(null)
+
+// Accordion config
+const accordionItems = computed(() => [{
+  label: t('portfolio.githubActivity.subtitle'),
+  value: 'github'
+}])
+
+const accordionUi = {
+  root: 'flex flex-col',
+  item: 'flex flex-col rounded-2xl border border-gray-200/70 dark:border-gray-700/50 bg-white/70 dark:bg-gray-900/40 shadow-sm',
+  header: 'px-4 data-[state=open]:border-b border-gray-200/70 dark:border-gray-700/50',
+  trigger: 'group flex-1 items-center gap-2 py-3 text-left cursor-pointer',
+  label: 'text-sm font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-300',
+  leadingIcon: 'shrink-0',
+  trailingIcon: 'ms-auto text-gray-500 dark:text-gray-400 transition-transform duration-200 group-data-[state=open]:rotate-180',
+  content: 'px-4 pb-4 pt-3 data-[state=closed]:hidden',
+  body: 'pt-1'
+} as const
+
+// Get contribution level class - uses CSS utility classes from main.css
+// that reference Nuxt UI's dynamic --ui-color-primary-* variables
+const getContributionClass = (count: number): string => {
+  if (count === 0) return 'contrib-level-0'
+  if (count <= 3) return 'contrib-level-1'
+  if (count <= 6) return 'contrib-level-2'
+  if (count <= 9) return 'contrib-level-3'
+  return 'contrib-level-4'
+}
+
+// Legend classes array for v-for
+const legendClasses = [
+  'contrib-level-0',
+  'contrib-level-1',
+  'contrib-level-2',
+  'contrib-level-3',
+  'contrib-level-4',
+]
+
+// Format date for hover display (full format like "Monday, October 6, 2025")
+const formatDateFull = (dateStr: string): string => {
+  const date = new Date(dateStr)
+  return date.toLocaleDateString('en-US', {
+    weekday: 'long',
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric'
+  })
+}
+
+// Generate month labels
+const monthLabels = computed(() => {
+  if (!calendar.value?.weeks) return []
+
+  const totalWeeks = calendar.value.weeks.length
+  const labels: Array<{ name: string; width: number }> = []
+  let currentMonth = -1
+  let startWeek = 0
+
+  calendar.value.weeks.forEach((week, index) => {
+    const firstDay = week.contributionDays[0]
+    if (!firstDay) return
+
+    const date = new Date(firstDay.date)
+    const month = date.getMonth()
+
+    if (month !== currentMonth) {
+      if (currentMonth !== -1) {
+        const monthName = new Date(2024, currentMonth).toLocaleDateString('en-US', { month: 'short' })
+        const weeksInMonth = index - startWeek
+        labels.push({
+          name: monthName,
+          width: (weeksInMonth / totalWeeks) * 100
+        })
+      }
+      currentMonth = month
+      startWeek = index
+    }
+  })
+
+  // Add last month
+  if (currentMonth !== -1) {
+    const monthName = new Date(2024, currentMonth).toLocaleDateString('en-US', { month: 'short' })
+    const weeksInMonth = calendar.value.weeks.length - startWeek
+    labels.push({
+      name: monthName,
+      width: (weeksInMonth / totalWeeks) * 100
+    })
+  }
+
+  return labels
+})
+
+// Fetch data on mount
+onMounted(async () => {
+  try {
+    const data = await fetchContributions(props.username)
+    if (data) {
+      calendar.value = data
+    } else {
+      error.value = true
+    }
+  } catch (e) {
+    error.value = true
+  } finally {
+    loading.value = false
+  }
+})
+</script>

app/components/portfolio/Hero.vue

@@ -10,23 +10,45 @@
             {{ portfolio.profile.summary }}
           </p>
           <div v-if="portfolio.profile.location || currentRole"
-            class="mb-6 flex flex-col items-center gap-2 text-sm text-gray-600 dark:text-gray-300 sm:items-start">
+            class="mb-6 flex flex-col items-center gap-3 text-sm text-gray-600 dark:text-gray-300 sm:items-start">
             <div v-if="portfolio.profile.location" class="flex items-center gap-2">
               <UIcon name="i-twemoji-round-pushpin" class="text-base text-primary-600 me-1 dark:text-primary-300" />
               <span class="leading-relaxed">{{ portfolio.profile.location }}</span>
             </div>
-            <div v-if="currentRole" class="flex items-center gap-1 text-base text-gray-700 dark:text-gray-200">
-              <img v-if="currentRole.companyLogo" :src="currentRole.companyLogo" :alt="`${currentRole.company} logo`"
-                class="h-7 w-7 rounded-md object-contain" loading="lazy" />
-              <span class="">{{ t('hero.currently') }}</span>
-              <span class="font-semibold text-primary-600 dark:text-primary-300">
-                <a v-if="currentRole.companyLink" :href="currentRole.companyLink" target="_blank" rel="noopener"
-                  class="hover:underline text-primary-600 dark:text-primary-300">
-                  {{ currentRole.company }}
-                </a>
-                <span v-else>{{ currentRole.company }}</span>
-              </span>
+            <div v-if="currentRole"
+              class="flex flex-col sm:flex-row items-center justify-center sm:justify-between w-full gap-2 text-base text-gray-700 dark:text-gray-200 text-center sm:text-left">
+              <div class="flex flex-wrap items-center justify-center sm:justify-start gap-1">
+                <img v-if="currentRole.companyLogo" :src="currentRole.companyLogo" :alt="`${currentRole.company} logo`"
+                  class="h-7 w-7 rounded-md object-contain" loading="lazy" />
+                <span class="">{{ t('hero.currently') }}</span>
+                <span class="font-semibold company-name">
+                  <a v-if="currentRole.companyLink" :href="currentRole.companyLink" target="_blank" rel="noopener"
+                    class="hover:underline company-name">
+                    {{ currentRole.company }}
+                  </a>
+                  <span v-else>{{ currentRole.company }}</span>
+                </span>
+              </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
+                  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>
+                <UIcon name="i-heroicons-sparkles" class="text-sm opacity-80" />
+              </NuxtLink>
             </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
+                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>
+              <UIcon name="i-heroicons-arrow-right" class="text-sm" />
+            </NuxtLink>
           </div>
           <div class="flex flex-wrap items-center justify-center gap-3 sm:justify-start">
             <ClientTooltip :text="emailTooltip">
@@ -187,3 +209,52 @@ async function copyEmail() {
   }
 }
 </script>
+
+<style>
+.company-name {
+  color: var(--ui-color-primary-600);
+}
+
+.dark .company-name {
+  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;
+}
+
+:deep(.dark .chip-button) {
+  --tw-ring-color: var(--ui-color-primary-400) !important;
+}
+
+/* Also override on hover and focus states */
+:deep(.chip-button:hover),
+:deep(.chip-button:focus),
+:deep(.chip-button:focus-visible) {
+  --tw-ring-color: var(--ui-color-primary-500) !important;
+}
+
+:deep(.dark .chip-button:hover),
+:deep(.dark .chip-button:focus),
+:deep(.dark .chip-button:focus-visible) {
+  --tw-ring-color: var(--ui-color-primary-400) !important;
+}
+</style>

app/components/portfolio/LanguageSkills.vue

@@ -1,71 +1,66 @@
 <template>
-  <section class="py-6">
+  <section class="section-spacing">
     <UContainer>
-      <div class="flex items-center gap-3 mb-4">
+      <div class="section-header flex-nowrap items-center gap-3 justify-start">
         <UIcon name="i-twemoji-globe-showing-europe-africa" class="text-2xl" />
-        <h2 class="text-lg font-semibold">{{ t('sections.language') }}</h2>
+        <h2 class="section-title">{{ t('sections.language') }}</h2>
       </div>
 
-      <UCard>
-        <div class="space-y-6">
-          <div class="flex flex-wrap items-center justify-between gap-4">
-            <p class="text-sm text-gray-600 dark:text-gray-300 max-w-3xl">
-              {{ t('languageSection.tagline') }}
-            </p>
-            <!-- <UBadge
-              size="lg"
-              color="primary"
-              variant="soft"
-              class="inline-flex items-center gap-2"
-            >
-              <UIcon
-                name="simple-icons:duolingo"
-                class="text-xl text-[#58CC02] dark:text-[#58CC02]"
-              />
-              <span>
-                {{ t('languageSection.duolingo.label') }}: {{ t('languageSection.duolingo.value') }}
-              </span>
-            </UBadge> -->
-          </div>
+      <UAccordion type="single" :unmount-on-hide="false" :items="accordionItems" default-value="language"
+        :ui="accordionUi">
+        <template #body>
+          <div class="space-y-6">
+            <div class="flex justify-center">
+              <!-- `<UBadge size="lg" color="primary" variant="soft" class="inline-flex items-center gap-2">
+                <UIcon name="simple-icons:duolingo" class="text-xl text-[#58CC02] dark:text-[#58CC02]" />
+                <span>
+                  {{ t('languageSection.duolingo.label') }}: {{ t('languageSection.duolingo.value') }}
+                </span>
+              </UBadge>` -->
+            </div>
 
-          <div class="grid gap-4 md:grid-cols-2">
-            <div
-              v-for="item in items"
-              :key="item.key"
-              class="flex flex-col gap-2 rounded-lg border border-slate-200/80 p-3 dark:border-slate-700/60"
-            >
-              <div class="flex items-center gap-2">
-                <img
-                  v-if="item.iconType === 'image'"
-                  :src="item.icon"
-                  :alt="item.title"
-                  class="h-6 w-6 object-contain"
-                />
-                <UIcon
-                  v-else
-                  :name="item.icon"
-                  class="text-lg text-primary-500 dark:text-primary-400"
-                />
-                <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">
-                  {{ item.title }}
-                </h3>
+            <div class="grid gap-4 md:grid-cols-2">
+              <div v-for="item in items" :key="item.key"
+                class="flex flex-col gap-2 rounded-lg border border-slate-200/80 p-3 dark:border-slate-700/60">
+                <div class="flex items-center gap-2">
+                  <img v-if="item.iconType === 'image'" :src="item.icon" :alt="item.title"
+                    class="h-6 w-6 object-contain" />
+                  <UIcon v-else :name="item.icon" class="text-lg text-primary-500 dark:text-primary-400" />
+                  <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">
+                    {{ item.title }}
+                  </h3>
+                </div>
+                <p class="text-sm text-gray-600 dark:text-gray-300">
+                  {{ item.description }}
+                </p>
               </div>
-              <p class="text-sm text-gray-600 dark:text-gray-300">
-                {{ item.description }}
-              </p>
             </div>
           </div>
-        </div>
-      </UCard>
+        </template>
+      </UAccordion>
     </UContainer>
   </section>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 
 const { t } = useI18n()
 
+// Detect mobile for accordion behavior (SSR-safe)
+const isMobile = ref(true)
+
+onMounted(() => {
+  const checkMobile = () => {
+    isMobile.value = window.innerWidth < 768
+  }
+  checkMobile()
+  window.addEventListener('resize', checkMobile)
+  onUnmounted(() => {
+    window.removeEventListener('resize', checkMobile)
+  })
+})
+
 const items = computed(() => [
   {
     key: 'ielts',
@@ -78,8 +73,25 @@ const items = computed(() => [
     key: 'ttc',
     iconType: 'icon' as const,
     icon: 'i-twemoji-globe-with-meridians',
-    title: t('languageSection.items.ttc.title'),
-    description: t('languageSection.items.ttc.desc'),
+    title: t('languageSection.items.huawei.title'),
+    description: t('languageSection.items.huawei.desc'),
   },
 ])
+
+const accordionItems = computed(() => [{
+  label: t('languageSection.accordionLabel'),
+  value: 'language'
+}])
+
+const accordionUi = {
+  root: 'flex flex-col',
+  item: 'flex flex-col rounded-2xl border border-gray-200/70 dark:border-gray-700/50 bg-white/70 dark:bg-gray-900/40 shadow-sm',
+  header: 'px-4 data-[state=open]:border-b border-gray-200/70 dark:border-gray-700/50',
+  trigger: 'group flex-1 items-center gap-2 py-3 text-left cursor-pointer',
+  label: 'text-sm font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-300',
+  leadingIcon: 'shrink-0',
+  trailingIcon: 'ms-auto text-gray-500 dark:text-gray-400 transition-transform duration-200 group-data-[state=open]:rotate-180',
+  content: 'px-4 pb-4 pt-3 data-[state=closed]:hidden',
+  body: 'pt-1'
+} as const
 </script>

app/components/portfolio/ProjectsList.vue

@@ -1,79 +1,116 @@
 <template>
-  <section id="projects" class="py-6 scroll-mt-20">
+  <section id="projects" class="section-spacing scroll-mt-20">
     <UContainer>
-      <div class="flex items-center gap-3 mb-3">
+      <div class="section-header">
         <UIcon name="i-twemoji-rocket" class="text-2xl" />
-        <h2 class="text-lg font-semibold text-start">{{ t('sections.projects') }}</h2>
+        <h2 class="section-title text-start">{{ t('sections.projects') }}</h2>
       </div>
-      <div v-for="g in nonEmptyCategoryList" :key="g.cat" class="space-y-3 mb-6">
-        <div class="flex items-center gap-2">
-          <UIcon name="i-twemoji-open-book" class="text-xl" />
-          <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">{{ tCategory(g.cat) }}</h3>
-        </div>
 
-        <div class="grid gap-4 md:grid-cols-2">
-          <UCard v-for="(p, i) in g.items" :key="`${g.cat}-${i}-${p.name}`"
-            class="flex h-full flex-col border border-gray-200/60 shadow-none transition hover:-translate-y-1 hover:shadow-lg dark:border-gray-700/40">
-            <div class="flex h-full flex-col gap-4">
-              <div class="flex gap-3">
-                <NuxtImg v-if="p.thumbnail" :src="p.thumbnail" :alt="`${p.name} logo`"
-                  class="h-12 w-12 rounded-xl border border-gray-200/70 bg-white object-cover shadow-sm dark:border-gray-700/40 dark:bg-slate-900"
-                  width="96" height="96" sizes="96px" format="webp" loading="lazy" />
-                <div v-else
-                  class="flex h-12 w-12 items-center justify-center rounded-xl border border-gray-200/70 bg-primary-500/10 text-primary-600 shadow-sm dark:border-gray-700/40 dark:bg-primary-400/10 dark:text-primary-200">
-                  <UIcon :name="getProjectIcon(p)" class="text-2xl" />
-                </div>
-                <div class="flex flex-1 flex-col gap-3">
-                  <div>
-                    <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">{{ p.name }}</h3>
-                    <div v-if="p.status || p.opensource" class="mt-2 flex flex-wrap items-center gap-2">
-                      <UBadge v-if="p.status" color="primary" variant="soft" class="rounded-full capitalize">
-                        {{ p.status }}
-                      </UBadge>
-                      <UBadge v-if="p.opensource" color="emerald" variant="soft" class="rounded-full">
-                        <UIcon name="i-mdi-source-branch" class="mr-1" />
-                        {{ t('projectLabels.openSource') }}
-                      </UBadge>
-                    </div>
-                  </div>
-                  <p class="text-sm text-gray-700 dark:text-gray-200">{{ p.description }}</p>
-                  <div class="flex flex-1 flex-col gap-3 pt-1">
-                    <div v-if="p.icons?.length"
-                      class="flex flex-wrap items-center gap-2 text-primary-500 dark:text-primary-300">
-                      <UIcon v-for="(ic, k) in p.icons" :key="k" :name="ic" class="text-xl" />
-                    </div>
-                    <div v-if="p.links?.length" class="mt-auto flex flex-wrap gap-2">
-                      <UButton v-for="(l, j) in p.links" :key="j" :to="l.to" target="_blank" size="xs" color="primary"
-                        variant="soft" trailing-icon="i-mdi-arrow-top-right-thin" class="hover-ring-tint"
-                        :aria-label="l.label">
-                        <UIcon v-if="l.icon" :name="l.icon" class="mr-1" />
-                        {{ l.label }}
-                      </UButton>
-                    </div>
-                  </div>
-                </div>
-              </div>
+      <UAccordion type="single" :unmount-on-hide="false" :items="accordionItems" default-value="projects"
+        :ui="accordionUi">
+        <template #body>
+          <div v-for="g in nonEmptyCategoryList" :key="g.cat" class="space-y-3 mb-5">
+            <div class="flex items-center gap-2">
+              <UIcon name="i-twemoji-open-book" class="text-xl" />
+              <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">{{ tCategory(g.cat) }}</h3>
             </div>
-          </UCard>
-        </div>
-      </div>
+
+            <div class="grid gap-4 md:grid-cols-2">
+              <UCard v-for="(p, i) in g.items" :key="`${g.cat}-${i}-${p.name}`"
+                class="flex h-full flex-col border border-gray-200/60 shadow-none transition hover:-translate-y-1 hover:shadow-lg dark:border-gray-700/40">
+                <div class="flex h-full flex-col gap-4">
+                  <div class="flex gap-3">
+                    <NuxtImg v-if="p.thumbnail" :src="p.thumbnail" :alt="`${p.name} logo`"
+                      class="h-12 w-12 rounded-xl border border-gray-200/70 bg-white object-cover shadow-sm dark:border-gray-700/40 dark:bg-slate-900"
+                      width="96" height="96" sizes="96px" format="webp" loading="lazy" />
+                    <div v-else
+                      class="flex h-12 w-12 items-center justify-center rounded-xl border border-gray-200/70 bg-primary-500/10 text-primary-600 shadow-sm dark:border-gray-700/40 dark:bg-primary-400/10 dark:text-primary-200">
+                      <UIcon :name="getProjectIcon(p)" class="text-2xl" />
+                    </div>
+                    <div class="flex flex-1 flex-col gap-3">
+                      <div>
+                        <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">{{ p.name }}</h3>
+                        <div v-if="p.status || p.opensource" class="mt-2 flex flex-wrap items-center gap-2">
+                          <UBadge v-if="p.status" color="primary" variant="soft" class="rounded-full capitalize">
+                            {{ p.status }}
+                          </UBadge>
+                          <UBadge v-if="p.opensource" color="emerald" variant="soft" class="rounded-full">
+                            <UIcon name="i-mdi-source-branch" class="mr-1" />
+                            {{ t('projectLabels.openSource') }}
+                          </UBadge>
+                        </div>
+                      </div>
+                      <p class="text-sm text-gray-700 dark:text-gray-200">{{ p.description }}</p>
+                      <div class="flex flex-1 flex-col gap-3 pt-1">
+                        <div v-if="p.icons?.length"
+                          class="flex flex-wrap items-center gap-2 text-primary-500 dark:text-primary-300">
+                          <UIcon v-for="(ic, k) in p.icons" :key="k" :name="ic" class="text-xl" />
+                        </div>
+                        <div v-if="p.links?.length" class="mt-auto flex flex-wrap gap-2">
+                          <UButton v-for="(l, j) in p.links" :key="j" :to="l.to" target="_blank" size="xs"
+                            color="primary" variant="soft" trailing-icon="i-mdi-arrow-top-right-thin"
+                            class="hover-ring-tint" :aria-label="l.label">
+                            <UIcon v-if="l.icon" :name="l.icon" class="mr-1" />
+                            {{ l.label }}
+                          </UButton>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </UCard>
+            </div>
+          </div>
+        </template>
+      </UAccordion>
     </UContainer>
   </section>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { usePortfolio } from '@/composables/usePortfolio'
 import type { Project } from '@/types/portfolio.types'
 
 const portfolio = usePortfolio()
 const { t } = useI18n()
 
+// Detect mobile for accordion behavior (SSR-safe)
+const isMobile = ref(true)
+
+onMounted(() => {
+  const checkMobile = () => {
+    isMobile.value = window.innerWidth < 768
+  }
+  checkMobile()
+  window.addEventListener('resize', checkMobile)
+  onUnmounted(() => {
+    window.removeEventListener('resize', checkMobile)
+  })
+})
+
+// Accordion config
+const accordionItems = computed(() => [{
+  label: t('sections.projectsAccordion'),
+  value: 'projects'
+}])
+
+const accordionUi = {
+  root: 'flex flex-col',
+  item: 'flex flex-col rounded-2xl border border-gray-200/70 dark:border-gray-700/50 bg-white/70 dark:bg-gray-900/40 shadow-sm',
+  header: 'px-4 data-[state=open]:border-b border-gray-200/70 dark:border-gray-700/50',
+  trigger: 'group flex-1 items-center gap-2 py-3 text-left cursor-pointer',
+  label: 'text-sm font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-300',
+  leadingIcon: 'shrink-0',
+  trailingIcon: 'ms-auto text-gray-500 dark:text-gray-400 transition-transform duration-200 group-data-[state=open]:rotate-180',
+  content: 'px-4 pb-4 pt-3 data-[state=closed]:hidden',
+  body: 'pt-1'
+} as const
+
 type Category = NonNullable<Project['category']>
 const categories: Category[] = ['current', 'freelance', 'public']
 
 const projectsByCategory = computed<Record<Category, Project[]>>(() => {
-  // Initialize with all categories to preserve order and allow skipping empty ones
   const acc: Record<Category, Project[]> = { current: [], freelance: [], public: [] }
   for (const p of portfolio.value.projects) {
     const cat = (p.category ?? 'freelance') as Category
@@ -81,9 +118,11 @@ const projectsByCategory = computed<Record<Category, Project[]>>(() => {
   }
   return acc
 })
+
 const categoryList = computed<Array<{ cat: Category; items: Project[] }>>(() => {
   return categories.map((c) => ({ cat: c as Category, items: projectsByCategory.value[c as Category] }))
 })
+
 const nonEmptyCategoryList = computed<Array<{ cat: Category; items: Project[] }>>(() => {
   return categoryList.value.filter(g => g.items.length > 0)
 })

app/components/portfolio/RecommendationsCarousel.vue

@@ -1,13 +1,13 @@
 <template>
-  <section ref="sectionEl" class="py-8" v-if="recs.length > 0">
+  <section ref="sectionEl" class="section-spacing">
     <UContainer>
-      <div class="flex flex-wrap items-center gap-3 mb-8">
+      <div class="section-header">
         <!-- <div
           class="p-2 rounded-lg bg-gradient-to-br from-blue-500/10 to-indigo-500/10 dark:from-blue-400/20 dark:to-indigo-400/20">
         </div> -->
         <div class="flex items-center gap-3 flex-1 min-w-0">
           <UIcon name="i-twemoji-left-speech-bubble" class="text-2xl" />
-          <h2 class="text-2xl font-bold flex items-center gap-2 truncate">
+          <h2 class="section-title flex items-center gap-2 truncate">
             <span>{{ t('sections.recommendations') }}</span>
           </h2>
         </div>
@@ -111,7 +111,7 @@ const sectionEl = ref<HTMLElement | null>(null)
 const hasEntered = ref(false)
 const reduceMotion = import.meta.client ? usePreferredReducedMotion() : ref<'no-preference'>('no-preference')
 const carouselUi = {
-  root: 'relative overflow-hidden pb-12 select-none',
+  root: 'relative overflow-hidden  select-none',
   viewport: 'overflow-visible',
   container: 'py-2 !ms-0 gap-3 ps-3 sm:ps-4 pe-3 sm:pe-4 items-stretch',
   item: 'basis-full sm:basis-1/2 lg:basis-1/3 flex',

app/components/portfolio/SkillFilters.vue

@@ -1,9 +1,9 @@
 <template>
   <div
-    class="ms-auto w-full md:w-auto flex flex-row-reverse items-center gap-1 overflow-x-auto no-scrollbar whitespace-nowrap px-1 py-1"
+    class="ms-auto flex flex-row-reverse items-center gap-1 overflow-x-auto no-scrollbar whitespace-nowrap px-1 py-1 min-w-0"
     role="toolbar" aria-label="Skill filters">
     <UButton :icon="filterButtonIcon" size="xs" :variant="filterButtonVariant" :color="filterButtonColor"
-      class="filter-toggle rounded-full shrink-0 mx-1"
+      class="filter-toggle cursor-pointer rounded-full shrink-0 mx-1"
       :class="{ 'is-open': filtersOpen, 'has-selection': hasSelection }" :aria-label="filterButtonLabel"
       :aria-expanded="hasSelection ? undefined : filtersOpen" aria-controls="skill-filter-group"
       @click="handlePrimaryAction" />
@@ -15,7 +15,7 @@
             <UTooltip :text="meta(type).label" :arrow="true" :delay-duration="0.5"
               :content="{ side: 'bottom', sideOffset: 8, collisionPadding: 12 }">
               <UButton :icon="meta(type).icon" size="xs" :variant="isSelected(type) ? 'solid' : 'soft'" color="primary"
-                class="rounded-full shrink-0" :aria-pressed="isSelected(type)"
+                class="cursor-pointer rounded-full shrink-0" :aria-pressed="isSelected(type)"
                 :aria-label="`Filter by ${meta(type).label}`" :title="meta(type).label" @click="toggle(type)" />
             </UTooltip>
           </div>

app/components/portfolio/Skills.vue

@@ -1,59 +1,52 @@
 <template>
-  <section id="skills" class="py-6 scroll-mt-20">
+  <section id="skills" class="section-spacing scroll-mt-20">
     <UContainer>
-      <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3 mb-4">
-        <div class="flex items-center gap-3">
+      <div class="section-header flex-nowrap justify-between">
+        <div class="flex items-center gap-3 min-w-0">
           <UIcon name="i-twemoji-hammer-and-wrench" class="text-2xl" />
-          <h2 class="text-lg font-semibold">{{ t('sections.skills') }}</h2>
+          <h2 class="section-title">{{ t('sections.skills') }}</h2>
         </div>
         <SkillFilters v-model="selectedTypes" />
       </div>
 
-      <div class="grid gap-4 md:grid-cols-3">
-        <UCard>
-          <template #header>
-            <h3 class="text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">{{
-              t('skills.expert') }}</h3>
-          </template>
-          <SkillGrid :items="filteredExpert" />
-        </UCard>
-
-        <UCard>
-          <template #header>
-            <h3 class="text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">{{
-              t('skills.proficient') }}</h3>
-          </template>
-          <SkillGrid :items="filteredProficient" />
-        </UCard>
-
-        <UCard>
-          <template #header>
-            <h3 class="text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">{{
-              t('skills.usedBefore') }}</h3>
-          </template>
-          <SkillGrid :items="filteredUsedBefore" />
-        </UCard>
-
-        <UCard v-if="showAiStack" class="md:col-span-3">
-          <template #header>
-            <h3 class="text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">{{
-              t('skills.aiStack') }}</h3>
-          </template>
-          <SkillGrid :items="aiStack" />
-        </UCard>
-      </div>
+      <UAccordion type="multiple" :unmount-on-hide="false" :items="skillSections" :default-value="openSkillSections"
+        :ui="accordionUi" :disabled="!isMobile">
+        <template #leading="{ item }">
+          <UIcon v-if="item.icon" :name="item.icon" class="text-base text-primary-500 dark:text-primary-300" />
+        </template>
+        <template #body="{ item }">
+          <SkillGrid :items="sectionItems[item.value as SkillSectionKey] || []" />
+        </template>
+      </UAccordion>
     </UContainer>
   </section>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import type { Tag, SkillType } from '@/types/portfolio.types'
-import { expert, proficient, usedBefore, aiStack } from '@/data/skills'
+import { expert, proficient, usedBefore } from '@/data/skills'
 import SkillGrid from '@/components/portfolio/SkillGrid.vue'
 import SkillFilters from '@/components/portfolio/SkillFilters.vue'
+
 const { t } = useI18n()
 
+// Detect mobile for accordion behavior (SSR-safe)
+const isMobile = ref(true)
+
+onMounted(() => {
+  const checkMobile = () => {
+    isMobile.value = window.innerWidth < 768
+  }
+  checkMobile()
+  window.addEventListener('resize', checkMobile)
+  onUnmounted(() => {
+    window.removeEventListener('resize', checkMobile)
+  })
+})
+
+type SkillSectionKey = 'expert' | 'proficient' | 'usedBefore'
+
 // Multi-select filters for Skill types
 const selectedTypes = ref<SkillType[]>([])
 
@@ -66,5 +59,29 @@ const filteredExpert = computed(() => filterByType(expert))
 const filteredProficient = computed(() => filterByType(proficient))
 const filteredUsedBefore = computed(() => filterByType(usedBefore))
 
-const showAiStack = false
+const sectionItems = computed<Record<SkillSectionKey, Tag[]>>(() => ({
+  expert: filteredExpert.value,
+  proficient: filteredProficient.value,
+  usedBefore: filteredUsedBefore.value
+}))
+
+const skillSections = computed(() => ([
+  { label: t('skills.expert'), value: 'expert', icon: 'i-twemoji-military-medal' },
+  { label: t('skills.proficient'), value: 'proficient', icon: 'i-twemoji-rocket' },
+  { label: t('skills.usedBefore'), value: 'usedBefore', icon: 'i-twemoji-toolbox' }
+]))
+
+const openSkillSections = computed(() => skillSections.value.map(section => section.value))
+
+const accordionUi = {
+  root: 'flex flex-col gap-3 md:grid md:grid-cols-3 md:gap-4 md:items-stretch',
+  item: 'flex flex-col rounded-2xl border border-gray-200/70 dark:border-gray-700/50 bg-white/70 dark:bg-gray-900/40 shadow-sm md:self-stretch data-[state=closed]:md:self-start md:h-full data-[state=open]:md:h-full data-[state=closed]:md:h-auto data-[state=open]:md:min-h-[320px] data-[state=closed]:md:min-h-[64px]',
+  header: 'px-4 border-b border-gray-200/70 dark:border-gray-700/50',
+  trigger: 'group flex-1 items-center gap-2 py-3 text-left md:cursor-default',
+  label: 'text-sm font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-300',
+  leadingIcon: 'shrink-0',
+  trailingIcon: 'ms-auto text-gray-500 dark:text-gray-400 transition-transform duration-200 group-data-[state=open]:rotate-180 md:hidden',
+  content: 'px-4 pb-4 pt-1 data-[state=closed]:hidden',
+  body: 'pt-1'
+} as const
 </script>

app/components/portfolio/SoftSkills.vue

@@ -1,30 +1,36 @@
 <template>
-  <section class="py-6">
+  <section class="section-spacing">
     <UContainer>
-      <div class="flex items-center gap-3 mb-4">
+      <div class="section-header flex-nowrap items-center gap-3 justify-start">
         <UIcon name="i-twemoji-brain" class="text-2xl" />
-        <h2 class="text-lg font-semibold">{{ t('sections.softSkills') }}</h2>
+        <h2 class="section-title">{{ t('sections.softSkills') }}</h2>
       </div>
 
-      <UCard>
-        <div class="flex flex-wrap gap-1.5">
-          <template v-for="(s, i) in resolved" :key="s.key">
-            <UTooltip :arrow="true" :delay-duration="0.5" :text="s.description">
-              <UBadge variant="soft" class="chip-base select-none" :class="chipClass(i)">
-                <span class="inline-flex items-center gap-1.5">
-                  <UIcon :name="s.icon" class="text-sm" />
-                  <span class="text-xs">{{ s.label }}</span>
-                </span>
-              </UBadge>
-            </UTooltip>
-          </template>
-        </div>
-      </UCard>
+      <UAccordion type="single" :unmount-on-hide="false" :items="accordionItems" default-value="soft-skills"
+        :ui="accordionUi">
+        <template #body>
+          <div class="flex flex-wrap gap-1.5">
+            <template v-for="(s, i) in resolved" :key="s.key">
+              <UTooltip :arrow="true" :delay-duration="0.5" :text="s.description">
+                <UBadge variant="soft" class="chip-base select-none" :class="chipClass(i)">
+                  <span class="inline-flex items-center gap-1.5">
+                    <UIcon :name="s.icon" class="text-sm" />
+                    <span class="text-xs">{{ s.label }}</span>
+                  </span>
+                </UBadge>
+              </UTooltip>
+            </template>
+          </div>
+        </template>
+      </UAccordion>
     </UContainer>
   </section>
 </template>
 
 <script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { chipTones } from '@/utils/chipTones'
+
 type SoftKey =
   | 'problemSolving'
   | 'attentionToDetail'
@@ -34,7 +40,21 @@ type SoftKey =
   | 'projectManagement'
   | 'adaptability'
 
-import { chipTones } from '@/utils/chipTones'
+const { t } = useI18n()
+
+// Detect mobile for accordion behavior (SSR-safe)
+const isMobile = ref(true)
+
+onMounted(() => {
+  const checkMobile = () => {
+    isMobile.value = window.innerWidth < 768
+  }
+  checkMobile()
+  window.addEventListener('resize', checkMobile)
+  onUnmounted(() => {
+    window.removeEventListener('resize', checkMobile)
+  })
+})
 
 const base: { key: SoftKey; icon: string }[] = [
   { key: 'problemSolving', icon: 'i-twemoji-light-bulb' },
@@ -48,7 +68,6 @@ const base: { key: SoftKey; icon: string }[] = [
   { key: 'adaptability', icon: 'i-twemoji-counterclockwise-arrows-button' },
 ]
 
-const { t } = useI18n()
 const resolved = computed(() =>
   base.map(s => ({
     ...s,
@@ -58,4 +77,21 @@ const resolved = computed(() =>
 )
 
 const chipClass = (i: number) => chipTones[i % chipTones.length]
+
+const accordionItems = computed(() => [{
+  label: t('softSkillsAccordion.label'),
+  value: 'soft-skills'
+}])
+
+const accordionUi = {
+  root: 'flex flex-col',
+  item: 'flex flex-col rounded-2xl border border-gray-200/70 dark:border-gray-700/50 bg-white/70 dark:bg-gray-900/40 shadow-sm',
+  header: 'px-4 data-[state=open]:border-b border-gray-200/70 dark:border-gray-700/50',
+  trigger: 'group flex-1 items-center gap-2 py-3 text-left cursor-pointer',
+  label: 'text-sm font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-300',
+  leadingIcon: 'shrink-0',
+  trailingIcon: 'ms-auto text-gray-500 dark:text-gray-400 transition-transform duration-200 group-data-[state=open]:rotate-180',
+  content: 'px-4 pb-4 pt-3 data-[state=closed]:hidden',
+  body: 'pt-1'
+} as const
 </script>

app/components/portfolio/WorkExperience.vue

@@ -1,38 +1,43 @@
 <template>
-  <section id="work" class="py-6 scroll-mt-20">
+  <section id="work" class="section-spacing scroll-mt-20">
     <UContainer>
-      <div class="flex items-center gap-3 mb-6">
+      <div class="section-header">
         <UIcon name="i-twemoji-briefcase" class="text-2xl" />
-        <h2 class="text-lg font-semibold">{{ t('sections.work') }}</h2>
+        <h2 class="section-title">{{ t('sections.work') }}</h2>
       </div>
-      <UTimeline :items="experiences" :default-value="0" color="primary" size="md" class="max-w-3xl">
-        <template #indicator="{ item }">
-          <img v-if="item.logo" :src="item.logo" :alt="`${item.company} logo`" class="h-10 w-10 object-contain"
-            loading="lazy" />
+
+      <UAccordion type="single" :unmount-on-hide="false" :items="accordionItems" default-value="work" :ui="accordionUi">
+        <template #body>
+          <UTimeline :items="experiences" :default-value="0" color="primary" size="md" class="max-w-3xl">
+            <template #indicator="{ item }">
+              <img v-if="item.logo" :src="item.logo" :alt="`${item.company} logo`" class="h-10 w-10 object-contain"
+                loading="lazy" />
+            </template>
+            <template #title="{ item }">
+              <div class="flex flex-col gap-1">
+                <span class="font-semibold">{{ item.title }}</span>
+                <span class="text-sm text-gray-600 dark:text-gray-400">{{ item.company }}</span>
+              </div>
+            </template>
+            <template #description="{ item }">
+              <ul v-if="item.descriptions?.length"
+                class="mt-2 list-disc space-y-1 text-sm text-gray-700 dark:text-gray-300 pl-5">
+                <li v-for="(desc, i) in item.descriptions" :key="i">{{ desc }}</li>
+              </ul>
+              <div v-if="item.icons?.length" class="mt-3 flex flex-wrap gap-2">
+                <UIcon v-for="(icon, i) in item.icons" :key="i" :name="icon"
+                  class="text-xl text-primary-500 dark:text-primary-400" />
+              </div>
+            </template>
+          </UTimeline>
         </template>
-        <template #title="{ item }">
-          <div class="flex flex-col gap-1">
-            <span class="font-semibold">{{ item.title }}</span>
-            <span class="text-sm text-gray-600 dark:text-gray-400">{{ item.company }}</span>
-          </div>
-        </template>
-        <template #description="{ item }">
-          <ul v-if="item.descriptions?.length"
-            class="mt-2 list-disc space-y-1 text-sm text-gray-700 dark:text-gray-300 pl-5">
-            <li v-for="(desc, i) in item.descriptions" :key="i">{{ desc }}</li>
-          </ul>
-          <div v-if="item.icons?.length" class="mt-3 flex flex-wrap gap-2">
-            <UIcon v-for="(icon, i) in item.icons" :key="i" :name="icon"
-              class="text-xl text-primary-500 dark:text-primary-400" />
-          </div>
-        </template>
-      </UTimeline>
+      </UAccordion>
     </UContainer>
   </section>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { usePortfolio } from '@/composables/usePortfolio'
 import type { TimelineItem } from '@nuxt/ui'
 import type { CompanyExperience, Experience } from '@/types/portfolio.types'
@@ -41,6 +46,38 @@ const { t } = useI18n()
 const portfolio = usePortfolio()
 const presentText = computed(() => t('common.present'))
 
+// Detect mobile for accordion behavior (SSR-safe)
+const isMobile = ref(true)
+
+onMounted(() => {
+  const checkMobile = () => {
+    isMobile.value = window.innerWidth < 768
+  }
+  checkMobile()
+  window.addEventListener('resize', checkMobile)
+  onUnmounted(() => {
+    window.removeEventListener('resize', checkMobile)
+  })
+})
+
+// Accordion config
+const accordionItems = computed(() => [{
+  label: t('sections.workAccordion'),
+  value: 'work'
+}])
+
+const accordionUi = {
+  root: 'flex flex-col',
+  item: 'flex flex-col rounded-2xl border border-gray-200/70 dark:border-gray-700/50 bg-white/70 dark:bg-gray-900/40 shadow-sm',
+  header: 'px-4 data-[state=open]:border-b border-gray-200/70 dark:border-gray-700/50',
+  trigger: 'group flex-1 items-center gap-2 py-3 text-left cursor-pointer',
+  label: 'text-sm font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-300',
+  leadingIcon: 'shrink-0',
+  trailingIcon: 'ms-auto text-gray-500 dark:text-gray-400 transition-transform duration-200 group-data-[state=open]:rotate-180',
+  content: 'px-4 pb-4 pt-3 data-[state=closed]:hidden',
+  body: 'pt-1'
+} as const
+
 type RichTimelineItem = TimelineItem & {
   company: string
   descriptions?: string[]
@@ -54,7 +91,6 @@ const experiences = computed<RichTimelineItem[]>(() => {
 
   list.forEach((exp: any, index: number) => {
     if (Array.isArray(exp.positions)) {
-      // CompanyExperience with multiple positions
       const company = exp as CompanyExperience
       company.positions.forEach((pos, posIndex) => {
         items.push({
@@ -69,7 +105,6 @@ const experiences = computed<RichTimelineItem[]>(() => {
         })
       })
     } else {
-      // Single Experience
       const single = exp as Experience
       items.push({
         date: `${single.start}${single.ongoing ? ` - ${presentText.value}` : single.end ? ` - ${single.end}` : ''}`,

app/components/resume/ResumeAdditionalInfo.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { Skill } from '~/types/resume'
+
+interface Props {
+  skills: Skill[]
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <section class="mb-12 print:mb-12">
+    <h2
+      class="text-base font-bold text-blue-700 uppercase border-b-2 border-blue-600 pb-2 mb-6 print:mb-6 tracking-wide">
+      Skills & Qualifications
+    </h2>
+
+    <!-- Technical Skills (categorized) -->
+    <div v-if="skills?.length">
+      <div class="space-y-3 print:space-y-3">
+        <div v-for="skill in skills" :key="skill.name" class="text-sm">
+          <span class="font-bold text-gray-900">{{ skill.name }}:&nbsp;</span><span class="text-gray-700">{{
+            skill.keywords.join(', ') }}</span>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

app/components/resume/ResumeDownloadButton.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+interface Props {
+  isPrintMode?: boolean
+}
+
+defineProps<Props>()
+
+const { isGenerating, downloadPdf } = useResumePdf()
+</script>
+
+<template>
+  <UButton v-if="!isPrintMode" icon="i-heroicons-arrow-down-tray" size="lg" color="primary" :loading="isGenerating"
+    :disabled="isGenerating" class="fixed bottom-6 right-6 shadow-lg no-print z-50" @click="downloadPdf">
+    <span class="hidden sm:inline">Download PDF</span>
+  </UButton>
+</template>
+
+<style scoped>
+@media print {
+  .no-print {
+    display: none !important;
+  }
+}
+</style>

app/components/resume/ResumeEducation.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { Education } from '~/types/resume'
+
+interface Props {
+  education: Education[]
+}
+
+defineProps<Props>()
+const { formatDate } = useResumeData()
+
+function formatDateRange(start: string, end?: string): string {
+  const startFormatted = formatDate(start)
+  const endFormatted = end ? formatDate(end) : 'Present'
+  return `${startFormatted} - ${endFormatted}`
+}
+</script>
+
+<template>
+  <section class="mb-12 print:mb-12">
+    <h2
+      class="text-base font-bold text-blue-700 uppercase border-b-2 border-blue-600 pb-2 mb-6 print:mb-6 tracking-wide">
+      Education
+    </h2>
+
+    <div v-for="edu in education" :key="edu.institution + edu.startDate" class="mb-4 last:mb-0 print:mb-4">
+      <div class="flex justify-between items-start">
+        <div>
+          <h3 class="text-sm font-bold text-gray-900">{{ edu.studyType }} in {{ edu.area }}</h3>
+          <p class="text-sm font-medium text-gray-600">{{ edu.institution }}</p>
+        </div>
+        <span class="text-sm text-gray-500 whitespace-nowrap font-medium">
+          {{ formatDateRange(edu.startDate, edu.endDate) }}
+        </span>
+      </div>
+    </div>
+  </section>
+</template>

app/components/resume/ResumeExperience.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { WorkExperience } from '~/types/resume'
+import { parseMarkdownBold } from '~/composables/useMarkdownText'
+
+interface Props {
+  work: WorkExperience[]
+}
+
+const props = defineProps<Props>()
+const { formatDate } = useResumeData()
+
+const sortedWork = computed(() => {
+  return [...props.work].sort((a, b) => {
+    const dateA = a.startDate || ''
+    const dateB = b.startDate || ''
+    return dateB.localeCompare(dateA)
+  })
+})
+
+function formatDateRange(start: string, end?: string): string {
+  const startFormatted = formatDate(start)
+  const endFormatted = end ? formatDate(end) : 'Present'
+  return `${startFormatted} - ${endFormatted}`
+}
+</script>
+
+<template>
+  <section class="mb-12 print:mb-12">
+    <h2
+      class="text-base font-bold text-blue-700 uppercase border-b-2 border-blue-600 pb-2 mb-6 print:mb-6 tracking-wide">
+      Work Experience
+    </h2>
+
+    <div v-for="job in sortedWork" :key="job.company + job.startDate" class="mb-8 last:mb-0 print:mb-8">
+      <div class="flex justify-between items-start gap-4">
+        <div class="flex-1 min-w-0">
+          <h3 class="text-sm font-bold text-gray-900 break-words hyphens-none">{{ job.position }}</h3>
+          <p class="text-sm font-medium text-gray-600">{{ job.company }}</p>
+        </div>
+        <span class="text-sm text-gray-500 whitespace-nowrap flex-shrink-0 font-medium">
+          {{ formatDateRange(job.startDate, job.endDate) }}
+        </span>
+      </div>
+      <ul class="mt-4 space-y-2.5 print:mt-4 print:space-y-2.5">
+        <li v-for="(highlight, idx) in job.highlights" :key="idx"
+          class="text-sm text-gray-700 pl-4 relative before:content-['•'] before:absolute before:left-0 before:text-gray-500 before:font-bold print:before:text-gray-500 break-words hyphens-none leading-relaxed"
+          v-html="parseMarkdownBold(highlight)" />
+      </ul>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.hyphens-none {
+  hyphens: none;
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+}
+
+.break-words {
+  word-break: normal;
+  overflow-wrap: break-word;
+}
+</style>

app/components/resume/ResumeHeader.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type { ResumeBasics } from '~/types/resume'
+
+interface Props {
+  basics: ResumeBasics
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="flex gap-6 mb-8 print:mb-8 print:pb-2">
+    <!-- Profile Photo (if provided) -->
+    <div v-if="basics.image" class="flex-shrink-0">
+      <img :src="basics.image" :alt="basics.name" class="w-32 h-32 object-cover rounded-full print:w-24 print:h-24" />
+    </div>
+
+    <!-- Name + Contact Info -->
+    <div class="flex-1">
+      <h1 class="text-3xl font-bold text-gray-900 print:text-xl print:mb-0.5">{{ basics.name }}</h1>
+      <p class="text-xl text-gray-600 mt-1 print:text-base print:mt-0">{{ basics.label }}</p>
+
+      <!-- Line 1: Location, Phone, Email, LinkedIn, GitHub -->
+      <div class="mt-3 flex flex-wrap gap-x-4 gap-y-1.5 text-sm text-gray-700 print:mt-2 print:text-xs print:gap-x-4">
+        <!-- Location -->
+        <span class="inline-flex items-center gap-1.5 whitespace-nowrap">
+          <UIcon name="i-heroicons-map-pin" class="text-red-500 flex-shrink-0 w-4 h-4" />
+          {{ basics.location.city }}, {{ basics.location.country }}
+        </span>
+
+        <!-- Phone -->
+        <a :href="`tel:${basics.phone}`"
+          class="inline-flex items-center gap-1.5 hover:text-blue-600 transition-colors whitespace-nowrap">
+          <UIcon name="i-heroicons-phone" class="text-green-600 flex-shrink-0 w-4 h-4" />
+          {{ basics.phone }}
+        </a>
+
+        <!-- Email -->
+        <a :href="`mailto:${basics.email}`"
+          class="inline-flex items-center gap-1.5 hover:text-blue-600 transition-colors whitespace-nowrap">
+          <UIcon name="i-heroicons-envelope" class="text-amber-500 flex-shrink-0 w-4 h-4" />
+          {{ basics.email }}
+        </a>
+
+        <!-- LinkedIn -->
+        <a v-if="basics.profiles?.find(p => p.network === 'LinkedIn')"
+          :href="basics.profiles.find(p => p.network === 'LinkedIn')!.url" target="_blank"
+          class="inline-flex items-center gap-1.5 hover:text-blue-600 transition-colors whitespace-nowrap">
+          <UIcon name="i-mdi-linkedin" class="text-[#0A66C2] flex-shrink-0 w-4 h-4" />
+          LinkedIn
+        </a>
+
+        <!-- GitHub -->
+        <a v-if="basics.profiles?.find(p => p.network === 'GitHub')"
+          :href="basics.profiles.find(p => p.network === 'GitHub')!.url" target="_blank"
+          class="inline-flex items-center gap-1.5 hover:text-blue-600 transition-colors whitespace-nowrap">
+          <UIcon name="i-mdi-github" class="text-gray-800 flex-shrink-0 w-4 h-4" />
+          GitHub
+        </a>
+      </div>
+
+      <!-- Line 2: Website Only - Larger & Bolder -->
+      <div class="mt-1.5 flex items-center print:mt-1.5">
+        <!-- Website (Portfolio) - Prominent Display -->
+        <a v-if="basics.profiles?.find(p => p.network === 'Portfolio')"
+          :href="basics.profiles.find(p => p.network === 'Portfolio')!.url" target="_blank"
+          class="inline-flex items-center gap-1.5 text-md font-bold text-blue-600 hover:text-blue-700 transition-colors print:text-md print:font-bold">
+          <UIcon name="i-heroicons-globe-alt" class="text-blue-600 flex-shrink-0 w-4 h-4 print:w-4 print:h-4" />
+          Website
+        </a>
+      </div>
+    </div>
+  </div>
+</template>

app/components/resume/ResumeLanguages.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { Language, Certification } from '~/types/resume'
+
+interface Props {
+  languages?: Language[]
+  certifications?: Certification[]
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <section class="mb-12 print:mb-12">
+    <h2
+      class="text-base font-bold text-blue-700 uppercase border-b-2 border-blue-600 pb-2 mb-6 print:mb-6 tracking-wide">
+      Languages & Certifications
+    </h2>
+
+    <!-- Languages -->
+    <div v-if="languages?.length" class="mb-2 print:mb-2">
+      <span class="text-sm font-bold text-gray-900">Languages: </span>
+      <span class="text-sm text-gray-700">
+        <template v-for="(lang, idx) in languages" :key="lang.language">
+          {{ lang.language }} ({{ lang.fluency }})<template v-if="idx < languages.length - 1">, </template>
+        </template>
+      </span>
+    </div>
+
+    <!-- Certifications -->
+    <div v-if="certifications?.length">
+      <span class="text-sm font-bold text-gray-900">Certifications: </span>
+      <span class="text-sm text-gray-700">
+        <template v-for="(cert, idx) in certifications" :key="cert.name">
+          {{ cert.issuer }} - {{ cert.summary }}<template v-if="idx < certifications.length - 1">, </template>
+        </template>
+      </span>
+    </div>
+  </section>
+</template>

app/components/resume/ResumePreview.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+const { resume } = useResumeData()
+</script>
+
+<template>
+  <div class="resume-wrapper">
+    <!-- A4 Container -->
+    <div class="resume-container">
+      <!-- Single-column vertical stack -->
+      <div class="resume-content">
+        <!-- Header with Photo + Name + Contact -->
+        <ResumeHeader :basics="resume.basics" />
+
+        <!-- Summary -->
+        <ResumeSummary :summary="resume.basics.summary" />
+
+        <!-- Skills & Qualifications -->
+        <ResumeAdditionalInfo :skills="resume.skills" />
+
+        <!-- Experience -->
+        <ResumeExperience :work="resume.work" />
+
+        <!-- Education -->
+        <ResumeEducation :education="resume.education" />
+
+        <!-- Languages & Certifications -->
+        <ResumeLanguages :languages="resume.languages" :certifications="resume.certificates" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.resume-wrapper {
+  background: #f3f4f6;
+  display: flex;
+  justify-content: center;
+  padding: 2rem 1rem;
+  min-height: 100vh;
+}
+
+.resume-container {
+  background: white;
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  width: 210mm;
+  max-width: 210mm;
+}
+
+.resume-content {
+  display: flex;
+  flex-direction: column;
+  padding: 2rem !important;
+}
+
+@media print {
+  .resume-wrapper {
+    background: white !important;
+    padding: 0 !important;
+    display: block !important;
+  }
+
+  .resume-container {
+    width: 210mm !important;
+    max-width: none !important;
+    box-shadow: none !important;
+    border: none !important;
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+
+  .resume-content {
+    padding: 1rem !important;
+  }
+
+  * {
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+    hyphens: none !important;
+    -webkit-hyphens: none !important;
+  }
+
+  section {
+    break-inside: avoid;
+  }
+}
+</style>

app/components/resume/ResumeSummary.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { parseMarkdownBold } from '~/composables/useMarkdownText'
+
+interface Props {
+  summary: string
+}
+
+const props = defineProps<Props>()
+
+const parsedSummary = computed(() => parseMarkdownBold(props.summary))
+</script>
+
+<template>
+  <section class="mb-12 print:mb-12">
+    <h2
+      class="text-base font-bold text-blue-700 uppercase border-b-2 border-blue-600 pb-2 mb-5 print:mb-5 tracking-wide">
+      Summary
+    </h2>
+    <p class="text-sm text-gray-800 leading-loose print:leading-loose" v-html="parsedSummary" />
+  </section>
+</template>