feat(resume): enhance print styling and refactor component structure

- Add print media queries to main.css for proper PDF export formatting
- Ensure white background and light color scheme when printing
- Refactor ResumeAdditionalInfo component to display skills in categorized format
- Remove languages and certifications from additional info section
- Add ResumeLanguages component for dedicated language display
- Optimize spacing with print-specific margin utilities across all resume sections
- Improve text wrapping and hyphenation in ResumeExperience component
- Enhance ResumeHeader layout with print-optimized image sizing
- Update resume data structure to support new component organization
- Add research documentation on mentioning AI skills in resume
- Update PDF export endpoint to work with refactored component structure
- Remove outdated chat history file

app/components/resume/ResumeHeader.vue

@@ -9,23 +9,61 @@ defineProps<Props>()
 </script>
 
 <template>
-  <div class="flex gap-6 mb-6">
+  <div class="flex gap-6 mb-6 print:mb-2 print:pb-0">
     <!-- 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 " />
+      <img :src="basics.image" :alt="basics.name" class="w-32 h-32 object-cover rounded-full print:w-24 print:h-24" />
     </div>
 
     <!-- Name + Contact Info -->
     <div class="flex-1">
-      <h1 class="text-3xl font-bold text-gray-900">{{ basics.name }}</h1>
-      <p class="text-xl text-gray-600 mt-1">{{ basics.label }}</p>
+      <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 text-sm text-gray-700">
-        <span>{{ basics.location.city }}, {{ basics.location.country }}</span>
-        <a :href="`tel:${basics.phone}`" class="hover:text-blue-600">{{ basics.phone }}</a>
-        <a :href="`mailto:${basics.email}`" class="hover:text-blue-600">{{ basics.email }}</a>
-        <a v-if="basics.url" :href="basics.url" target="_blank" class="hover:text-blue-600">{{ basics.url }}</a>
+      <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">
+        <!-- Location -->
+        <span class="inline-flex items-center gap-1.5">
+          <UIcon name="i-heroicons-map-pin" class="text-gray-500 flex-shrink-0" />
+          {{ basics.location.city }}, {{ basics.location.country }}
+        </span>
+
+        <!-- Phone -->
+        <a :href="`tel:${basics.phone}`" class="inline-flex items-center gap-1.5 hover:text-blue-600 transition-colors">
+          <UIcon name="i-heroicons-phone" class="text-gray-500 flex-shrink-0" />
+          {{ basics.phone }}
+        </a>
+
+        <!-- Email -->
+        <span class="inline-flex items-center gap-1.5">
+          <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>
+
+        <!-- LinkedIn -->
+        <a v-if="basics.profiles?.find(p => p.network === 'LinkedIn')"
+          :href="basics.profiles.find(p => p.network === 'LinkedIn')!.url" target="_blank"
+          class="inline-flex items-center gap-1.5 hover:text-blue-600 transition-colors">
+          <UIcon name="i-mdi-linkedin" class="text-gray-500 flex-shrink-0" />
+          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"
+          class="inline-flex items-center gap-1.5 hover:text-blue-600 transition-colors">
+          <UIcon name="i-mdi-github" class="text-gray-500 flex-shrink-0" />
+          GitHub
+        </a>
       </div>
     </div>
   </div>