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/ResumeExperience.vue

@@ -24,27 +24,40 @@ function formatDateRange(start: string, end?: string): string {
 </script>
 
 <template>
-  <section class="mb-6">
-    <h2 class="text-base font-bold text-blue-600 uppercase border-b-2 border-blue-600 pb-1 mb-3">
+  <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">
       Work Experience
     </h2>
 
-    <div v-for="job in sortedWork" :key="job.company + job.startDate" class="mb-4 last:mb-0">
-      <div class="flex justify-between items-start">
-        <div>
-          <h3 class="text-sm font-semibold text-gray-800">{{ job.position }}</h3>
+    <div v-for="job in sortedWork" :key="job.company + job.startDate" class="mb-4 last:mb-0 print:mb-3">
+      <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>
         </div>
-        <span class="text-sm text-gray-500 whitespace-nowrap">
+        <span class="text-sm text-gray-500 whitespace-nowrap flex-shrink-0">
           {{ formatDateRange(job.startDate, job.endDate) }}
         </span>
       </div>
-      <ul class="mt-2 space-y-1">
+      <ul class="mt-2 space-y-1 print:mt-1 print:space-y-0.5">
         <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">
+          class="text-sm text-gray-700 pl-4 relative before:content-['•'] before:absolute before:left-0 break-words hyphens-none">
           {{ highlight }}
         </li>
       </ul>
     </div>
   </section>
 </template>
+
+<style scoped>
+.hyphens-none {
+  hyphens: none;
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+}
+
+.break-words {
+  word-break: normal;
+  overflow-wrap: break-word;
+}
+</style>