From bda5f86a793e752db7ea351aea7a8d4068dafc30 Mon Sep 17 00:00:00 2001
From: mahdiarghyani <mahdiarghyani12@gmail.com>
Date: Sat, 13 Dec 2025 12:59:24 +0330
Subject: [PATCH] feat: Implement initial portfolio website structure with
 components for various sections, i18n, and GitHub integration.

---
 .env.example                                  |   5 +
 app/assets/css/main.css                       |  87 ++++++++
 app/components/LanguageSwitcher.vue           |   2 +-
 app/components/common/FooterCopyright.vue     |   4 +-
 app/components/portfolio/AIStack.vue          |  10 +-
 app/components/portfolio/EducationList.vue    |   6 +-
 app/components/portfolio/ExperienceList.vue   |   6 +-
 app/components/portfolio/GitHubActivity.vue   | 211 ++++++++++++++++++
 app/components/portfolio/Hero.vue             |   6 +-
 app/components/portfolio/LanguageSkills.vue   |   6 +-
 app/components/portfolio/ProjectsList.vue     |   8 +-
 .../portfolio/RecommendationsCarousel.vue     |   8 +-
 app/components/portfolio/SkillFilters.vue     |   2 +-
 app/components/portfolio/Skills.vue           |  80 +++----
 app/components/portfolio/SoftSkills.vue       |   6 +-
 app/components/portfolio/WorkExperience.vue   |   6 +-
 app/composables/useGitHubContributions.ts     |  33 +++
 app/data/portfolio.fa.ts                      |   4 +-
 app/data/portfolio.ts                         |   4 +-
 app/pages/index.vue                           |   4 +-
 app/types/github.ts                           |  32 +++
 i18n/locales/en.json                          |  10 +-
 i18n/locales/fa.json                          |  10 +-
 nuxt.config.ts                                |   3 +-
 public/favicon/logo-nobg.svg                  |   1 +
 server/api/github/contributions.ts            |  75 +++++++
 26 files changed, 547 insertions(+), 82 deletions(-)
 create mode 100644 app/components/portfolio/GitHubActivity.vue
 create mode 100644 app/composables/useGitHubContributions.ts
 create mode 100644 app/types/github.ts
 create mode 100644 public/favicon/logo-nobg.svg
 create mode 100644 server/api/github/contributions.ts

diff --git a/.env.example b/.env.example
index 4b85f25..450d9b4 100644
--- a/.env.example
+++ b/.env.example
@@ -1 +1,6 @@
 NUXT_PUBLIC_LOAD_PLAUSIBLE="no"
+
+# GitHub API Token for contribution graph
+# Create a token at: https://github.com/settings/tokens
+# Required scopes: read:user (optional but recommended for higher rate limits)
+NUXT_PUBLIC_GITHUB_TOKEN=""
diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index d147ba6..9cc724c 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -145,6 +145,44 @@
     font-family: var(--font-sans);
   }
 
+  :root {
+    --scrollbar-track: color-mix(in oklch, #e0e7ff 35%, transparent);
+    --scrollbar-thumb: color-mix(in oklch, #7c3aed 65%, #6d28d9 35%);
+    --scrollbar-thumb-hover: color-mix(in oklch, #7c3aed 80%, #a855f7 20%);
+  }
+
+  :root.dark {
+    --scrollbar-track: color-mix(in oklch, #0b1020 80%, #7c3aed 20%);
+    --scrollbar-thumb: color-mix(in oklch, #a855f7 65%, #7c3aed 35%);
+    --scrollbar-thumb-hover: color-mix(in oklch, #c084fc 75%, #8b5cf6 25%);
+  }
+
+  /* Global scrollbar styling */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+  }
+
+  *::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  *::-webkit-scrollbar-track {
+    background: var(--scrollbar-track);
+    border-radius: 9999px;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background: linear-gradient(135deg, var(--scrollbar-thumb), color-mix(in oklch, var(--scrollbar-thumb), black 10%));
+    border-radius: 9999px;
+    border: 2px solid color-mix(in oklch, var(--scrollbar-track), transparent 50%);
+  }
+
+  *::-webkit-scrollbar-thumb:hover {
+    background: var(--scrollbar-thumb-hover);
+  }
+
   /* In Persian/RTL, prefer Vazirmatn for both body and headings via variables */
   html[dir="rtl"],
   html[lang^="fa"] {
@@ -199,6 +237,18 @@
     @apply text-violet-600 dark:text-violet-400;
   }
 
+  .section-spacing {
+    @apply pt-5 pb-8 sm:pt-8 sm:pb-12;
+  }
+
+  .section-title {
+    @apply text-xl sm:text-2xl font-semibold leading-tight text-gray-900 dark:text-gray-100;
+  }
+
+  .section-header {
+    @apply flex flex-wrap items-center gap-3 mb-5 sm:mb-6;
+  }
+
   .primary-text-muted {
     @apply text-zinc-500 dark:text-zinc-400;
   }
@@ -287,6 +337,43 @@
   .chip-button {
     @apply inline-flex items-center justify-center h-12 w-12 rounded-2xl ring-1 ring-violet-200/70 dark:ring-violet-800/50 bg-gradient-to-br from-white/90 to-violet-50/50 dark:from-white/10 dark:to-violet-950/30 text-violet-700 dark:text-violet-200 shadow-lg shadow-violet-500/10 backdrop-blur-md transition-all duration-300 ease-out hover:scale-110 hover:shadow-xl hover:shadow-violet-500/20 hover:from-violet-50 hover:to-violet-100 dark:hover:from-white/15 dark:hover:to-violet-900/40;
   }
+
+  /* GitHub Activity Contribution Graph - Dynamic Primary Color */
+  /* Level 0: No contributions - very neutral/muted color */
+  .contrib-level-0 {
+    background-color: var(--ui-color-neutral-100);
+  }
+  /* Levels 1-4: More contributions = darker/more vibrant primary */
+  .contrib-level-1 {
+    background-color: var(--ui-color-primary-200);
+  }
+  .contrib-level-2 {
+    background-color: var(--ui-color-primary-400);
+  }
+  .contrib-level-3 {
+    background-color: var(--ui-color-primary-600);
+  }
+  .contrib-level-4 {
+    background-color: var(--ui-color-primary-800);
+  }
+
+  /* Dark mode overrides for contribution graph */
+  /* In dark mode: brighter = more contributions (same visual logic as light) */
+  .dark .contrib-level-0 {
+    background-color: var(--ui-color-neutral-800);
+  }
+  .dark .contrib-level-1 {
+    background-color: var(--ui-color-primary-950);
+  }
+  .dark .contrib-level-2 {
+    background-color: var(--ui-color-primary-800);
+  }
+  .dark .contrib-level-3 {
+    background-color: var(--ui-color-primary-600);
+  }
+  .dark .contrib-level-4 {
+    background-color: var(--ui-color-primary-400);
+  }
 }
 
 /* View Transitions ripple for theme switch (best-practice) */
diff --git a/app/components/LanguageSwitcher.vue b/app/components/LanguageSwitcher.vue
index 958a4a6..0f2fcd1 100644
--- a/app/components/LanguageSwitcher.vue
+++ b/app/components/LanguageSwitcher.vue
@@ -3,7 +3,7 @@
     <!-- 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-[77px] 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="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',
         trailingIcon: 'text-dimmed group-data-[state=open]:rotate-180 transition-transform duration-200',
diff --git a/app/components/common/FooterCopyright.vue b/app/components/common/FooterCopyright.vue
index ca8d326..d8aab54 100644
--- a/app/components/common/FooterCopyright.vue
+++ b/app/components/common/FooterCopyright.vue
@@ -1,5 +1,5 @@
 <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>
@@ -31,7 +31,7 @@ const colorMode = useColorMode()
 const currentYear = computed(() => new Date().getFullYear())
 const logoSrc = computed(() => {
   return colorMode.value === 'dark'
-    ? '/favicon/android-chrome-192x192-dark.png'
+    ? '/favicon/logo-nobg.svg'
     : '/favicon/android-chrome-192x192.png'
 })
 </script>
diff --git a/app/components/portfolio/AIStack.vue b/app/components/portfolio/AIStack.vue
index 133d6bf..72db6dc 100644
--- a/app/components/portfolio/AIStack.vue
+++ b/app/components/portfolio/AIStack.vue
@@ -1,14 +1,14 @@
 <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"
diff --git a/app/components/portfolio/EducationList.vue b/app/components/portfolio/EducationList.vue
index 5b0032c..4a59944 100644
--- a/app/components/portfolio/EducationList.vue
+++ b/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"
diff --git a/app/components/portfolio/ExperienceList.vue b/app/components/portfolio/ExperienceList.vue
index 9d339cb..c9e127e 100644
--- a/app/components/portfolio/ExperienceList.vue
+++ b/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">
diff --git a/app/components/portfolio/GitHubActivity.vue b/app/components/portfolio/GitHubActivity.vue
new file mode 100644
index 0000000..bc3eaa2
--- /dev/null
+++ b/app/components/portfolio/GitHubActivity.vue
@@ -0,0 +1,211 @@
+<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 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>
+        </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>
+    </UContainer>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, 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'
+})
+
+// State
+const calendar = ref<GitHubContributionCalendar | null>(null)
+const loading = ref(true)
+const error = ref(false)
+const hoveredDay = ref<GitHubContributionDay | null>(null)
+
+// 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>
diff --git a/app/components/portfolio/Hero.vue b/app/components/portfolio/Hero.vue
index 69fcf57..3343e81 100644
--- a/app/components/portfolio/Hero.vue
+++ b/app/components/portfolio/Hero.vue
@@ -10,14 +10,14 @@
             {{ 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 justify-between w-full text-base text-gray-700 dark:text-gray-200">
-              <div class="flex items-center gap-1">
+              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>
diff --git a/app/components/portfolio/LanguageSkills.vue b/app/components/portfolio/LanguageSkills.vue
index d08d585..c79c933 100644
--- a/app/components/portfolio/LanguageSkills.vue
+++ b/app/components/portfolio/LanguageSkills.vue
@@ -1,9 +1,9 @@
 <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>
diff --git a/app/components/portfolio/ProjectsList.vue b/app/components/portfolio/ProjectsList.vue
index c07627c..30457fe 100644
--- a/app/components/portfolio/ProjectsList.vue
+++ b/app/components/portfolio/ProjectsList.vue
@@ -1,11 +1,11 @@
 <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 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>
diff --git a/app/components/portfolio/RecommendationsCarousel.vue b/app/components/portfolio/RecommendationsCarousel.vue
index abc145f..444f998 100644
--- a/app/components/portfolio/RecommendationsCarousel.vue
+++ b/app/components/portfolio/RecommendationsCarousel.vue
@@ -1,13 +1,13 @@
 <template>
-  <section ref="sectionEl" class="py-8">
+  <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',
diff --git a/app/components/portfolio/SkillFilters.vue b/app/components/portfolio/SkillFilters.vue
index 4217fd0..c04e663 100644
--- a/app/components/portfolio/SkillFilters.vue
+++ b/app/components/portfolio/SkillFilters.vue
@@ -1,6 +1,6 @@
 <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"
diff --git a/app/components/portfolio/Skills.vue b/app/components/portfolio/Skills.vue
index 4701fe8..3b21d69 100644
--- a/app/components/portfolio/Skills.vue
+++ b/app/components/portfolio/Skills.vue
@@ -1,47 +1,23 @@
 <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">
+        <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>
@@ -49,11 +25,13 @@
 <script setup lang="ts">
 import { ref, computed } 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()
 
+type SkillSectionKey = 'expert' | 'proficient' | 'usedBefore'
+
 // Multi-select filters for Skill types
 const selectedTypes = ref<SkillType[]>([])
 
@@ -66,5 +44,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',
+  trigger: 'group flex-1 items-center gap-2 py-3 text-left',
+  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-1 data-[state=closed]:hidden',
+  body: 'pt-1'
+} as const
 </script>
diff --git a/app/components/portfolio/SoftSkills.vue b/app/components/portfolio/SoftSkills.vue
index 6bc4e30..95bea9d 100644
--- a/app/components/portfolio/SoftSkills.vue
+++ b/app/components/portfolio/SoftSkills.vue
@@ -1,9 +1,9 @@
 <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>
diff --git a/app/components/portfolio/WorkExperience.vue b/app/components/portfolio/WorkExperience.vue
index 0735d4d..fed19ce 100644
--- a/app/components/portfolio/WorkExperience.vue
+++ b/app/components/portfolio/WorkExperience.vue
@@ -1,9 +1,9 @@
 <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 }">
diff --git a/app/composables/useGitHubContributions.ts b/app/composables/useGitHubContributions.ts
new file mode 100644
index 0000000..5dde08e
--- /dev/null
+++ b/app/composables/useGitHubContributions.ts
@@ -0,0 +1,33 @@
+import type { GitHubApiResponse, GitHubContributionCalendar } from '@/types/github'
+
+/**
+ * Composable for fetching GitHub contribution calendar data
+ * Based on: https://github.com/yuichkun/github-contribution-graph-example
+ * Uses server-side API to avoid CORS and token exposure issues
+ */
+export const useGitHubContributions = () => {
+  const fetchContributions = async (username: string): Promise<GitHubContributionCalendar | null> => {
+    try {
+      // Use our server API endpoint instead of calling GitHub directly
+      const response = await $fetch<GitHubApiResponse>('/api/github/contributions', {
+        params: { username }
+      })
+
+      // Extract contribution calendar from response
+      // Structure: { data: { user: { contributionsCollection: { contributionCalendar: {...} } } } }
+      if (response?.data?.user?.contributionsCollection?.contributionCalendar) {
+        return response.data.user.contributionsCollection.contributionCalendar
+      }
+
+      console.error('Invalid response structure:', response)
+      return null
+    } catch (error) {
+      console.error('Failed to fetch GitHub contributions:', error)
+      return null
+    }
+  }
+
+  return {
+    fetchContributions
+  }
+}
diff --git a/app/data/portfolio.fa.ts b/app/data/portfolio.fa.ts
index 6016b71..716a79b 100644
--- a/app/data/portfolio.fa.ts
+++ b/app/data/portfolio.fa.ts
@@ -271,12 +271,12 @@ const portfolioFa: PortfolioData = {
       category: 'current',
     },
     {
-      name: 'NuxtUi-Portfolio-Ali',
+      name: 'nuxt-portfolio',
       description: 'پورتفولیو من با Nuxt 3 و Nuxt UI v4، شامل پروژه‌ها، مهارت‌ها و سوابق.',
       status: 'فعال',
       opensource: true,
       links: [
-        { label: 'GitHub', to: 'https://github.com/aliarghyani/NuxtUi-Portfolio-Ali', icon: 'i-mdi-github' },
+        { label: 'GitHub', to: 'https://github.com/aliarghyani/nuxt-portfolio', icon: 'i-mdi-github' },
       ],
       icons: ['i-logos-nuxt-icon', 'i-logos-vue', 'i-logos-typescript-icon', 'i-logos-tailwindcss-icon'],
       category: 'public',
diff --git a/app/data/portfolio.ts b/app/data/portfolio.ts
index 32e9715..81a7d30 100644
--- a/app/data/portfolio.ts
+++ b/app/data/portfolio.ts
@@ -270,12 +270,12 @@ export const portfolio: PortfolioData = {
       category: 'current',
     },
     {
-      name: 'NuxtUi-Portfolio-Ali',
+      name: 'nuxt-portfolio',
       description: 'My portfolio built with Nuxt 3 and Nuxt UI v4, showcasing projects, skills, and experiences.',
       status: 'Active',
       opensource: true,
       links: [
-        { label: 'GitHub', to: 'https://github.com/aliarghyani/NuxtUi-Portfolio-Ali', icon: 'i-mdi-github' },
+        { label: 'GitHub', to: 'https://github.com/aliarghyani/nuxt-portfolio', icon: 'i-mdi-github' },
       ],
       icons: ['i-logos-nuxt-icon', 'i-logos-vue', 'i-logos-typescript-icon', 'i-logos-tailwindcss-icon'],
       category: 'public',
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 911c7b4..97871a1 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="max-w-6xl mx-auto pt-24">
+  <div class="max-w-6xl mx-auto pt-12 md:pt-24">
     <!-- Above-the-fold content only (improves LCP by reducing initial render work) -->
     <Hero />
 
@@ -9,6 +9,7 @@
     <AIStack />
     <SoftSkills />
     <LanguageSkills />
+    <GitHubActivity username="mahdiarghyani" />
     <WorkExperience />
     <EducationList />
     <RecommendationsCarousel />
@@ -24,6 +25,7 @@ const Skills = defineAsyncComponent(() => import('@/components/portfolio/Skills.
 const AIStack = defineAsyncComponent(() => import('@/components/portfolio/AIStack.vue'))
 const SoftSkills = defineAsyncComponent(() => import('@/components/portfolio/SoftSkills.vue'))
 const LanguageSkills = defineAsyncComponent(() => import('@/components/portfolio/LanguageSkills.vue'))
+const GitHubActivity = defineAsyncComponent(() => import('@/components/portfolio/GitHubActivity.vue'))
 const WorkExperience = defineAsyncComponent(() => import('@/components/portfolio/WorkExperience.vue'))
 const EducationList = defineAsyncComponent(() => import('@/components/portfolio/EducationList.vue'))
 const RecommendationsCarousel = defineAsyncComponent(() => import('@/components/portfolio/RecommendationsCarousel.vue'))
diff --git a/app/types/github.ts b/app/types/github.ts
new file mode 100644
index 0000000..2072e26
--- /dev/null
+++ b/app/types/github.ts
@@ -0,0 +1,32 @@
+/**
+ * GitHub GraphQL API Types
+ * Based on: https://github.com/yuichkun/github-contribution-graph-example
+ */
+
+export interface GitHubContributionDay {
+  date: string
+  contributionCount: number
+}
+
+export interface GitHubContributionWeek {
+  contributionDays: GitHubContributionDay[]
+}
+
+export interface GitHubContributionCalendar {
+  totalContributions: number
+  weeks: GitHubContributionWeek[]
+}
+
+export interface GitHubContributionsCollection {
+  contributionCalendar: GitHubContributionCalendar
+}
+
+export interface GitHubUser {
+  contributionsCollection: GitHubContributionsCollection
+}
+
+export interface GitHubApiResponse {
+  data: {
+    user: GitHubUser
+  }
+}
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 649c7ed..2e4fc65 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -11,7 +11,8 @@
     "values": "Values",
     "skills": "Skills",
     "softSkills": "Values & Soft Skills",
-    "language": "Language Proficiency"
+    "language": "Language Proficiency",
+    "githubActivity": "GitHub Activity"
   },
   "skills": {
     "expert": "Expert",
@@ -199,5 +200,12 @@
     "current": "Current",
     "freelance": "Freelance Projects",
     "public": "Public Repositories"
+  },
+  "portfolio": {
+    "githubActivity": {
+      "title": "GitHub Activity",
+      "subtitle": "My contributions over the past year",
+      "error": "Failed to load GitHub contributions"
+    }
   }
 }
diff --git a/i18n/locales/fa.json b/i18n/locales/fa.json
index ee7ea29..6fb55d9 100644
--- a/i18n/locales/fa.json
+++ b/i18n/locales/fa.json
@@ -11,7 +11,8 @@
     "values": "ارزش‌ها",
     "skills": "مهارت‌ها",
     "softSkills": "ارزش‌ها و مهارت‌های نرم",
-    "language": "مهارت‌های زبانی"
+    "language": "مهارت‌های زبانی",
+    "githubActivity": "فعالیت گیت‌هاب"
   },
   "skills": {
     "expert": "حرفه‌ای",
@@ -199,5 +200,12 @@
     "current": "جاری",
     "freelance": "پروژه‌های فریلنسری",
     "public": "پروژه‌های عمومی"
+  },
+  "portfolio": {
+    "githubActivity": {
+      "title": "فعالیت گیت‌هاب",
+      "subtitle": "مشارکت‌های من در سال گذشته",
+      "error": "خطا در بارگذاری مشارکت‌های گیت‌هاب"
+    }
   }
 }
diff --git a/nuxt.config.ts b/nuxt.config.ts
index c358e6e..6249169 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -83,7 +83,8 @@ export default defineNuxtConfig({
   runtimeConfig: {
     public: {
       loadPlausible: "", // overrided by env,
-      siteUrl: 'https://aliarghyani.vercel.app' // Used for sitemap and RSS generation
+      siteUrl: 'https://aliarghyani.vercel.app', // Used for sitemap and RSS generation
+      githubToken: '' // GitHub API token - set via NUXT_PUBLIC_GITHUB_TOKEN env variable
     },
   },
 
diff --git a/public/favicon/logo-nobg.svg b/public/favicon/logo-nobg.svg
new file mode 100644
index 0000000..2d8b1f9
--- /dev/null
+++ b/public/favicon/logo-nobg.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="192" zoomAndPan="magnify" viewBox="0 0 144 143.999998" height="192" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><filter x="0%" y="0%" width="100%" height="100%" id="9d04a32ce5"><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" color-interpolation-filters="sRGB"/></filter><filter x="0%" y="0%" width="100%" height="100%" id="9f49cc4bbf"><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.2126 0.7152 0.0722 0 0" color-interpolation-filters="sRGB"/></filter><mask id="1cceecc123"><g filter="url(#9d04a32ce5)"><g filter="url(#9f49cc4bbf)" transform="matrix(0.75, 0, 0, 0.75, 0.00000125, 0.000002)"><image x="0" y="0" width="192" xlink:href="data:image/png;base64,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" height="192" preserveAspectRatio="xMidYMid meet"/></g></g></mask></defs><g mask="url(#1cceecc123)"><g transform="matrix(0.75, 0, 0, 0.75, 0.00000125, 0.000002)"><image x="0" y="0" width="192" xlink:href="data:image/png;base64,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" height="192" preserveAspectRatio="xMidYMid meet"/></g></g></svg>
\ No newline at end of file
diff --git a/server/api/github/contributions.ts b/server/api/github/contributions.ts
new file mode 100644
index 0000000..065a211
--- /dev/null
+++ b/server/api/github/contributions.ts
@@ -0,0 +1,75 @@
+import type { GitHubApiResponse } from '@/types/github'
+
+/**
+ * GitHub Contributions API Endpoint
+ * Based on: https://github.com/yuichkun/github-contribution-graph-example
+ * 
+ * Fetches contribution calendar data using GitHub GraphQL API
+ * EXACTLY as shown in the reference implementation
+ */
+export default defineEventHandler(async (event): Promise<GitHubApiResponse> => {
+  const config = useRuntimeConfig()
+  const query = getQuery(event)
+  const username = query.username as string
+
+  if (!username) {
+    throw createError({
+      statusCode: 400,
+      message: 'Username is required'
+    })
+  }
+
+  // GraphQL query - EXACTLY as in reference (no date range!)
+  const graphqlQuery = `
+query($userName:String!) {
+  user(login: $userName){
+    contributionsCollection {
+      contributionCalendar {
+        totalContributions
+        weeks {
+          contributionDays {
+            contributionCount
+            date
+          }
+        }
+      }
+    }
+  }
+}
+`
+
+  try {
+    const headers: Record<string, string> = {}
+
+    // Add authorization token (EXACTLY as in reference)
+    if (config.public.githubToken) {
+      headers['Authorization'] = `Bearer ${config.public.githubToken}`
+    }
+
+    // Make GraphQL request (EXACTLY as in reference)
+    const response = await $fetch<GitHubApiResponse>('https://api.github.com/graphql', {
+      method: 'POST',
+      headers,
+      body: JSON.stringify({
+        query: graphqlQuery,
+        variables: `
+  {
+    "userName": "${username}"
+  }
+`
+      })
+    })
+
+    console.log(`Fetched contributions for ${username}:`, response.data?.user?.contributionsCollection?.contributionCalendar?.totalContributions)
+
+    // Return the response (structure: { data: { user: { contributionsCollection: ... } } })
+    return response
+  } catch (error: any) {
+    console.error('GitHub API Error:', error)
+
+    throw createError({
+      statusCode: error.statusCode || 500,
+      message: error.message || 'Failed to fetch GitHub contributions'
+    })
+  }
+})