From 73afa9f5a6b6c8a0fead5eb5784266a5608c956b Mon Sep 17 00:00:00 2001
From: mahdiarghyani <mahdiarghyani12@gmail.com>
Date: Sat, 6 Dec 2025 11:28:45 +0330
Subject: [PATCH] feat(resume): enhance styling and improve visual hierarchy
 across components

- Update section spacing from mb-6 to mb-8 for better visual separation
- Enhance heading styles with text-blue-700, increased padding (pb-1.5), and letter-spacing
- Improve typography hierarchy by changing font-semibold to font-bold for titles
- Increase spacing between list items and skill categories for better readability
- Add font-medium styling to dates and institution names for improved emphasis
- Enhance bullet point styling with explicit color and font-weight in experience highlights
- Reorganize ResumeHeader contact section with improved link styling and layout
- Promote Portfolio website link with bold styling and blue color for better visibility
- Adjust print-specific spacing to maintain consistency across screen and print layouts
- Update resume data with refined content structure
- Archive outdated resume content technical specification document
---
 .../resume/ResumeAdditionalInfo.vue           | 11 +++----
 app/components/resume/ResumeEducation.vue     | 13 +++++----
 app/components/resume/ResumeExperience.vue    | 17 ++++++-----
 app/components/resume/ResumeHeader.vue        | 29 +++++++++----------
 app/components/resume/ResumeLanguages.vue     | 11 +++----
 app/components/resume/ResumePreview.vue       |  4 +--
 app/components/resume/ResumeSummary.vue       |  5 ++--
 app/data/resume.en.ts                         |  4 +--
 .../old-specs/resume-content-tech-spec.md     |  4 +--
 9 files changed, 51 insertions(+), 47 deletions(-)

diff --git a/app/components/resume/ResumeAdditionalInfo.vue b/app/components/resume/ResumeAdditionalInfo.vue
index 3a4cfd6..a2834d3 100644
--- a/app/components/resume/ResumeAdditionalInfo.vue
+++ b/app/components/resume/ResumeAdditionalInfo.vue
@@ -9,17 +9,18 @@ const props = defineProps<Props>()
 </script>
 
 <template>
-  <section class="mb-6 print:mb-4">
-    <h2 class="text-base font-bold text-blue-600 uppercase border-b-2 border-blue-600 pb-1 mb-3">
+  <section class="mb-8 print:mb-5">
+    <h2
+      class="text-base font-bold text-blue-700 uppercase border-b-2 border-blue-600 pb-1.5 mb-4 print:mb-2.5 tracking-wide">
       Skills & Qualifications
     </h2>
 
     <!-- Technical Skills (categorized) -->
     <div v-if="skills?.length">
-      <div class="space-y-0.5">
+      <div class="space-y-2">
         <div v-for="skill in skills" :key="skill.name" class="text-sm">
-          <span class="font-medium text-gray-800">{{ skill.name }}:</span>
-          <span class="text-gray-700"> {{ skill.keywords.join(', ') }}</span>
+          <span class="font-bold text-gray-900">{{ skill.name }}:&nbsp;</span><span class="text-gray-700">{{
+            skill.keywords.join(', ') }}</span>
         </div>
       </div>
     </div>
diff --git a/app/components/resume/ResumeEducation.vue b/app/components/resume/ResumeEducation.vue
index 0b270b2..877a229 100644
--- a/app/components/resume/ResumeEducation.vue
+++ b/app/components/resume/ResumeEducation.vue
@@ -16,18 +16,19 @@ function formatDateRange(start: string, end?: string): string {
 </script>
 
 <template>
-  <section class="mb-6 print:mb-4">
-    <h2 class="text-base font-bold text-blue-600 uppercase border-b-2 border-blue-600 pb-1 mb-3">
+  <section class="mb-8 print:mb-5">
+    <h2
+      class="text-base font-bold text-blue-700 uppercase border-b-2 border-blue-600 pb-1.5 mb-4 print:mb-2.5 tracking-wide">
       Education
     </h2>
 
-    <div v-for="edu in education" :key="edu.institution + edu.startDate" class="mb-3 last:mb-0">
+    <div v-for="edu in education" :key="edu.institution + edu.startDate" class="mb-4 last:mb-0">
       <div class="flex justify-between items-start">
         <div>
-          <h3 class="text-sm font-semibold text-gray-800">{{ edu.studyType }} in {{ edu.area }}</h3>
-          <p class="text-sm text-gray-600">{{ edu.institution }}</p>
+          <h3 class="text-sm font-bold text-gray-900">{{ edu.studyType }} in {{ edu.area }}</h3>
+          <p class="text-sm font-medium text-gray-600">{{ edu.institution }}</p>
         </div>
-        <span class="text-sm text-gray-500 whitespace-nowrap">
+        <span class="text-sm text-gray-500 whitespace-nowrap font-medium">
           {{ formatDateRange(edu.startDate, edu.endDate) }}
         </span>
       </div>
diff --git a/app/components/resume/ResumeExperience.vue b/app/components/resume/ResumeExperience.vue
index c79e937..e395e46 100644
--- a/app/components/resume/ResumeExperience.vue
+++ b/app/components/resume/ResumeExperience.vue
@@ -24,24 +24,25 @@ function formatDateRange(start: string, end?: string): string {
 </script>
 
 <template>
-  <section class="mb-6 print:mb-3">
-    <h2 class="text-base font-bold text-blue-600 uppercase border-b-2 border-blue-600 pb-1 mb-2 print:mb-1.5">
+  <section class="mb-8 print:mb-5">
+    <h2
+      class="text-base font-bold text-blue-700 uppercase border-b-2 border-blue-600 pb-1.5 mb-4 print:mb-2.5 tracking-wide">
       Work Experience
     </h2>
 
-    <div v-for="job in sortedWork" :key="job.company + job.startDate" class="mb-4 last:mb-0 print:mb-3">
+    <div v-for="job in sortedWork" :key="job.company + job.startDate" class="mb-5 last:mb-0 print:mb-4">
       <div class="flex justify-between items-start gap-4">
         <div class="flex-1 min-w-0">
-          <h3 class="text-sm font-semibold text-gray-800 break-words hyphens-none">{{ job.position }}</h3>
-          <p class="text-sm text-gray-600">{{ job.company }}</p>
+          <h3 class="text-sm font-bold text-gray-900 break-words hyphens-none">{{ job.position }}</h3>
+          <p class="text-sm font-medium text-gray-600">{{ job.company }}</p>
         </div>
-        <span class="text-sm text-gray-500 whitespace-nowrap flex-shrink-0">
+        <span class="text-sm text-gray-500 whitespace-nowrap flex-shrink-0 font-medium">
           {{ formatDateRange(job.startDate, job.endDate) }}
         </span>
       </div>
-      <ul class="mt-2 space-y-1 print:mt-1 print:space-y-0.5">
+      <ul class="mt-2.5 space-y-1.5 print:mt-1.5 print:space-y-1">
         <li v-for="(highlight, idx) in job.highlights" :key="idx"
-          class="text-sm text-gray-700 pl-4 relative before:content-['•'] before:absolute before:left-0 break-words hyphens-none">
+          class="text-sm text-gray-700 pl-4 relative before:content-['•'] before:absolute before:left-0 before:text-gray-500 before:font-bold print:before:text-gray-500 break-words hyphens-none">
           {{ highlight }}
         </li>
       </ul>
diff --git a/app/components/resume/ResumeHeader.vue b/app/components/resume/ResumeHeader.vue
index 5893242..2e6b2b0 100644
--- a/app/components/resume/ResumeHeader.vue
+++ b/app/components/resume/ResumeHeader.vue
@@ -9,7 +9,7 @@ defineProps<Props>()
 </script>
 
 <template>
-  <div class="flex gap-6 mb-6 print:mb-2 print:pb-0">
+  <div class="flex gap-6 mb-8 print:mb-4 print:pb-1">
     <!-- Profile Photo (if provided) -->
     <div v-if="basics.image" class="flex-shrink-0">
       <img :src="basics.image" :alt="basics.name" class="w-32 h-32 object-cover rounded-full print:w-24 print:h-24" />
@@ -20,7 +20,7 @@ defineProps<Props>()
       <h1 class="text-3xl font-bold text-gray-900 print:text-xl print:mb-0.5">{{ basics.name }}</h1>
       <p class="text-xl text-gray-600 mt-1 print:text-base print:mt-0">{{ basics.label }}</p>
 
-      <div class="mt-3 flex flex-wrap gap-x-4 gap-y-1.5 text-sm text-gray-700 print:mt-1.5 print:text-xs print:gap-x-3">
+      <div class="mt-3 flex flex-wrap gap-x-5 gap-y-2 text-sm text-gray-700 print:mt-2 print:text-xs print:gap-x-4">
         <!-- Location -->
         <span class="inline-flex items-center gap-1.5">
           <UIcon name="i-heroicons-map-pin" class="text-gray-500 flex-shrink-0" />
@@ -34,12 +34,19 @@ defineProps<Props>()
         </a>
 
         <!-- Email -->
-        <span class="inline-flex items-center gap-1.5">
+        <a :href="`mailto:${basics.email}`"
+          class="inline-flex items-center gap-1.5 hover:text-blue-600 transition-colors">
           <UIcon name="i-heroicons-envelope" class="text-gray-500 flex-shrink-0" />
-          <a :href="`mailto:${basics.email}`" class="hover:text-blue-600 transition-colors">
-            {{ basics.email }}
-          </a>
-        </span>
+          {{ basics.email }}
+        </a>
+
+        <!-- Website (Portfolio) - Bold & Colored -->
+        <a v-if="basics.profiles?.find(p => p.network === 'Portfolio')"
+          :href="basics.profiles.find(p => p.network === 'Portfolio')!.url" target="_blank"
+          class="inline-flex items-center gap-1.5 font-semibold text-blue-600 hover:text-blue-700 transition-colors print:text-blue-600">
+          <UIcon name="i-heroicons-globe-alt" class="text-blue-600 flex-shrink-0" />
+          Website
+        </a>
 
         <!-- LinkedIn -->
         <a v-if="basics.profiles?.find(p => p.network === 'LinkedIn')"
@@ -49,14 +56,6 @@ defineProps<Props>()
           LinkedIn
         </a>
 
-        <!-- Website (Portfolio) -->
-        <a v-if="basics.profiles?.find(p => p.network === 'Portfolio')"
-          :href="basics.profiles.find(p => p.network === 'Portfolio')!.url" target="_blank"
-          class="inline-flex items-center gap-1.5 hover:text-blue-600 transition-colors">
-          <UIcon name="i-heroicons-globe-alt" class="text-gray-500 flex-shrink-0" />
-          Website
-        </a>
-
         <!-- GitHub -->
         <a v-if="basics.profiles?.find(p => p.network === 'GitHub')"
           :href="basics.profiles.find(p => p.network === 'GitHub')!.url" target="_blank"
diff --git a/app/components/resume/ResumeLanguages.vue b/app/components/resume/ResumeLanguages.vue
index a3aaa96..67c0123 100644
--- a/app/components/resume/ResumeLanguages.vue
+++ b/app/components/resume/ResumeLanguages.vue
@@ -10,14 +10,15 @@ const props = defineProps<Props>()
 </script>
 
 <template>
-  <section class="mb-6 print:mb-4">
-    <h2 class="text-base font-bold text-blue-600 uppercase border-b-2 border-blue-600 pb-1 mb-3">
+  <section class="mb-8 print:mb-5">
+    <h2
+      class="text-base font-bold text-blue-700 uppercase border-b-2 border-blue-600 pb-1.5 mb-4 print:mb-2.5 tracking-wide">
       Languages & Certifications
     </h2>
 
     <!-- Languages -->
-    <div v-if="languages?.length" class="mb-2">
-      <span class="text-sm font-semibold text-gray-800">Languages: </span>
+    <div v-if="languages?.length" class="mb-3">
+      <span class="text-sm font-bold text-gray-900">Languages: </span>
       <span class="text-sm text-gray-700">
         <template v-for="(lang, idx) in languages" :key="lang.language">
           {{ lang.language }} ({{ lang.fluency }})<template v-if="idx < languages.length - 1">, </template>
@@ -27,7 +28,7 @@ const props = defineProps<Props>()
 
     <!-- Certifications -->
     <div v-if="certifications?.length">
-      <span class="text-sm font-semibold text-gray-800">Certifications: </span>
+      <span class="text-sm font-bold text-gray-900">Certifications: </span>
       <span class="text-sm text-gray-700">
         <template v-for="(cert, idx) in certifications" :key="cert.name">
           {{ cert.issuer }} - {{ cert.summary }}<template v-if="idx < certifications.length - 1">, </template>
diff --git a/app/components/resume/ResumePreview.vue b/app/components/resume/ResumePreview.vue
index 1fa7868..07308cd 100644
--- a/app/components/resume/ResumePreview.vue
+++ b/app/components/resume/ResumePreview.vue
@@ -48,7 +48,7 @@ const { resume } = useResumeData()
 .resume-content {
   display: flex;
   flex-direction: column;
-  padding: 1.5rem !important;
+  padding: 2rem !important;
 }
 
 @media print {
@@ -68,7 +68,7 @@ const { resume } = useResumeData()
   }
 
   .resume-content {
-    padding: 0.75rem !important;
+    padding: 1rem !important;
   }
 
   * {
diff --git a/app/components/resume/ResumeSummary.vue b/app/components/resume/ResumeSummary.vue
index 7ea8804..ad8c1f7 100644
--- a/app/components/resume/ResumeSummary.vue
+++ b/app/components/resume/ResumeSummary.vue
@@ -7,8 +7,9 @@ defineProps<Props>()
 </script>
 
 <template>
-  <section class="mb-6 print:mb-3">
-    <h2 class="text-base font-bold text-blue-600 uppercase border-b-2 border-blue-600 pb-1 mb-2 print:mb-1.5">
+  <section class="mb-8 print:mb-5">
+    <h2
+      class="text-base font-bold text-blue-700 uppercase border-b-2 border-blue-600 pb-1.5 mb-3 print:mb-2 tracking-wide">
       Summary
     </h2>
     <p class="text-sm text-gray-800 leading-relaxed print:leading-normal">{{ summary }}</p>
diff --git a/app/data/resume.en.ts b/app/data/resume.en.ts
index b906f02..2298d7d 100644
--- a/app/data/resume.en.ts
+++ b/app/data/resume.en.ts
@@ -42,7 +42,7 @@ export const resumeData: Resume = {
       },
     ],
     summary:
-      'Frontend Developer with 3+ years building high-performance Vue.js/Nuxt applications for international clients. AI-first engineer leveraging Cursor, GitHub Copilot, and AI-powered tools & methodologies to accelerate development by up to 50% while maintaining code quality. Specialized in performance optimization, scalable architecture (SSR, PWA, RBAC), and accessibility. Delivered 6+ production applications with focus on maintainability and distributed team collaboration. Fluent in English (6+ years in fully English-speaking environment at Huawei).',
+      'Frontend Developer with 3+ years building high-performance Vue.js/Nuxt applications for international clients. AI-first engineer leveraging Cursor, GitHub Copilot, and AI-powered tools & methodologies to accelerate development by up to 50% while maintaining code quality. Specialized in performance optimization, scalable architecture (SSR, PWA, RBAC), and accessibility. Delivered 4+ production applications with focus on maintainability and distributed team collaboration. Fluent in English (6+ years in fully English-speaking environment at Huawei).',
   },
 
   work: [
@@ -67,7 +67,7 @@ export const resumeData: Resume = {
       startDate: '2023-09',
       endDate: '2024-12',
       highlights: [
-        'Delivered 6+ production-grade web applications for international clients using Vue.js/Nuxt.js, consistently achieving strong performance metrics and high client satisfaction',
+        'Delivered 4+ production-grade web applications for international clients using Vue.js/Nuxt.js, consistently achieving strong performance metrics and high client satisfaction',
         'Leveraged AI development tools (Cursor and Github Copilot) to reduce development time by at least 40% across 6 projects, enabling faster client delivery and 100% on-time project completion rate',
         'Elara Medical - Medical tourism platform with RBAC system, i18n for 3 languages, PWA features, and optimized performance through code splitting and lazy loading',
         'Ideh - Idea evaluation platform with reusable component library reducing development time by 30% and scalable Vue.js architecture',
diff --git a/docs/archive/old-specs/resume-content-tech-spec.md b/docs/archive/old-specs/resume-content-tech-spec.md
index 353e542..e4deb6f 100644
--- a/docs/archive/old-specs/resume-content-tech-spec.md
+++ b/docs/archive/old-specs/resume-content-tech-spec.md
@@ -258,7 +258,7 @@ Frontend Developer | Freelance (Remote) | Sep 2023 – Dec 2024
 
 **Introduction Paragraph:**
 ```
-Delivered 6+ production-grade web applications for international clients, achieving 
+Delivered 4+ production-grade web applications for international clients, achieving 
 90+ Lighthouse performance scores and 99%+ uptime across all projects.
 ```
 
@@ -545,7 +545,7 @@ Spearheaded 40% performance improvement...
 **Summary Adjustment:**
 ```
 Versatile Senior Frontend Developer with 5+ years delivering production-grade 
-applications for international clients. Delivered 6+ projects as freelancer with 
+applications for international clients. Delivered 4+ projects as freelancer with 
 100% on-time delivery and 90+ Lighthouse scores. Architected reusable component 
 library reducing development time by 30%...
 ```