feat(blog): enhance content styling and add new blog post with sharing capabilities

- Refine blog typography with optimized font sizes and line heights for better readability - Adjust heading margins and sizes (h1-h4) for improved visual hierarchy - Implement custom bullet styling with primary color indicators for lists - Add highlighted key phrases styling with left border accent for emphasized content - Create new BlogShare component for social sharing functionality - Add Callout and PullQuote content components for enhanced blog formatting - Introduce resume-button.css for improved button styling - Update blog post template with slug-based routing support - Add new blog post "Career Change: From Huawei to Frontend" in English and Persian - Enhance portfolio components (Hero, Skills, AIStack, etc.) with refined styling - Improve RTL language support with better spacing and alignment for Persian content - Add blog hero image asset (big-career-change.webp) - Update i18n translations for new blog content and UI improvements - Optimize code block and inline code styling with CSS variables for consistency - Refine blockquote styling with better contrast and spacing
2026-08-17 05:24:30 +03:30 · 2025-12-13 18:05:39 +03:30
parent eb6a4adef3
commit 13031465e3
21 changed files with 1339 additions and 327 deletions
@@ -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>

@@ -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>
@@ -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>
@@ -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>
@@ -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;
 }
@@ -20,86 +20,83 @@
        </p>
      </div>

-      <!-- GitHub Calendar Card using UCard -->
-      <UCard v-else-if="calendar">
-        <template #header>
-          <h3 class="text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
-            {{ t('portfolio.githubActivity.subtitle') }}
-          </h3>
+      <!-- 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>
-
-        <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>
-      </UCard>
+      </UAccordion>
    </UContainer>
  </section>
 </template>

 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, onUnmounted, computed } from 'vue'
 import type { GitHubContributionCalendar, GitHubContributionDay } from '@/types/github'

 const { t } = useI18n()
@@ -114,12 +111,44 @@ 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 => {
@@ -21,9 +21,9 @@
                <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">
+                <span class="font-semibold company-name">
                  <a v-if="currentRole.companyLink" :href="currentRole.companyLink" target="_blank" rel="noopener"
-                    class="hover:underline text-primary-600 dark:text-primary-300">
+                    class="hover:underline company-name">
                    {{ currentRole.company }}
                  </a>
                  <span v-else>{{ currentRole.company }}</span>
@@ -31,7 +31,7 @@
              </div>
              <!-- Resume Button - Desktop only -->
              <NuxtLink to="/resume" class="hidden sm:inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold
-                  bg-gradient-to-r from-primary-500 via-purple-500 to-pink-500 
+                  bg-gradient-to-r from-primary-500 via-purple-500 to-pink-500
                  hover:from-primary-600 hover:via-purple-600 hover:to-pink-600
                  text-white rounded-full shadow-lg shadow-primary-500/25
                  transition-all duration-300 hover:scale-105 hover:shadow-xl hover:shadow-primary-500/40
@@ -43,7 +43,7 @@
            </div>
            <!-- Resume Button - Mobile only -->
            <NuxtLink to="/resume" class="sm:hidden inline-flex items-center justify-center gap-2 mt-2 px-4 py-2 text-sm font-medium
-                bg-gradient-to-r from-primary-500 via-purple-500 to-pink-500 
+                bg-gradient-to-r from-primary-500 via-purple-500 to-pink-500
                hover:from-primary-600 hover:via-purple-600 hover:to-pink-600
                text-white rounded-full shadow-lg shadow-primary-500/25
                transition-all duration-300 hover:scale-105">
@@ -211,3 +211,35 @@ async function copyEmail() {
  }
 }
 </script>
+
+<style>
+.company-name {
+  color: var(--ui-color-primary-600);
+}
+
+.dark .company-name {
+  color: var(--ui-color-primary-300);
+}
+
+/* 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>
@@ -6,66 +6,61 @@
        <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',
@@ -82,4 +77,21 @@ const items = computed(() => [
    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>
@@ -5,75 +5,112 @@
        <UIcon name="i-twemoji-rocket" class="text-2xl" />
        <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-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>

-        <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)
 })
@@ -10,7 +10,7 @@
      </div>

      <UAccordion type="multiple" :unmount-on-hide="false" :items="skillSections" :default-value="openSkillSections"
-        :ui="accordionUi">
+        :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>
@@ -23,13 +23,28 @@
 </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 } 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
@@ -61,11 +76,11 @@ const openSkillSections = computed(() => skillSections.value.map(section => sect
 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',
-  trigger: 'group flex-1 items-center gap-2 py-3 text-left',
+  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',
+  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
@@ -6,25 +6,31 @@
        <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'
@@ -36,7 +42,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' },
@@ -50,7 +70,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,
@@ -60,4 +79,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>
@@ -5,34 +5,39 @@
        <UIcon name="i-twemoji-briefcase" class="text-2xl" />
        <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}` : ''}`,