feat: Implement initial portfolio website structure with components for various sections, i18n, and GitHub integration.

2026-02-07 00:07:08 +01:00 · 2025-12-13 12:59:24 +03:30
parent e11a59f02d
commit bda5f86a79
26 changed files with 547 additions and 82 deletions
--- 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=""
--- 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) */
--- 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',
--- 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>
--- 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"
--- 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"
--- 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">
--- a/app/components/portfolio/GitHubActivity.vue
+++ 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>
--- 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>
--- 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>
--- 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>
--- 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',
--- 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"
--- 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>
--- 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>
--- 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 }">
--- a/app/composables/useGitHubContributions.ts
+++ 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
+  }
+}
--- 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',
--- 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',
--- 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'))
--- a/app/types/github.ts
+++ 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
+  }
+}
--- 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"
+    }
  }
 }
--- 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": "خطا در بارگذاری مشارکت‌های گیت‌هاب"
+    }
  }
 }
--- 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
    },
  },

--- a/public/favicon/logo-nobg.svg
+++ b/public/favicon/logo-nobg.svg
--- a/server/api/github/contributions.ts
+++ 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'
+    })
+  }
+})