feat: update resume component with localized file names and add PDF files

app/components/tool/Resume.vue

@@ -1,6 +1,21 @@
 <script lang="ts" setup>
-const { t, locale } = useI18n()
+const { t } = useI18n()
-const date = (date: string) => useDateFormat(new Date(date), 'D MMM YYYY - hh:mm', { locales: locale.value ?? 'en' })
+
+interface ResumeFile {
+  name: string
+  file: string
+}
+
+const resumes = ref<ResumeFile[]>([
+  {
+    name: t('tool.resume.files.en'),
+    file: '/resumes/CV M1 2025.pdf',
+  },
+  {
+    name: t('tool.resume.files.fr'),
+    file: '/resumes/CV M1 2025 Français.pdf',
+  },
+])
 </script>
 
 <template>
@@ -8,29 +23,27 @@ const date = (date: string) => useDateFormat(new Date(date), 'D MMM YYYY - hh:mm
     <p class="prose dark:prose-invert">
       {{ t('tool.resume.main') }}
     </p>
-    <div class="flex gap-4 m-1">
+    <div class="flex flex-wrap gap-4 m-1">
-      <UCard variant="outline" class="md:max-w-1/2 shadow-sm bg-white dark:bg-neutral-900" :ui="{ body: 'flex justify-between items-center gap-4' }">
+      <NuxtLink
-        <UCard class="rounded-sm" :ui="{ body: 'p-2 sm:p-2 flex items-center justify-center' }">
+        v-for="resume in resumes"
-          <UIcon name="i-ph-file-pdf-duotone" size="48" />
+        :key="resume.file"
-        </UCard>
+        :to="resume.file"
-        <div>
+        target="_blank"
-          <p>File 1</p>
+        class="md:max-w-1/2"
-          <p class="text-muted">
+      >
-            {{ t('tool.resume.uploaded') }} {{ date('2025-01-01') }}
+        <UCard
+          variant="outline"
+          class="w-full shadow-sm bg-white dark:bg-neutral-900"
+          :ui="{ body: 'flex justify-between items-center gap-4' }"
+        >
+          <UCard class="rounded-sm" :ui="{ body: 'p-2 sm:p-2 flex items-center justify-center' }">
+            <UIcon name="i-ph-file-pdf-duotone" size="48" />
+          </UCard>
+          <p>
+            {{ resume.name }}
           </p>
-        </div>
-      </UCard>
-      <UCard variant="outline" class="md:max-w-1/2 shadow-sm bg-white dark:bg-neutral-900" :ui="{ body: 'flex justify-between items-center gap-4' }">
-        <UCard class="rounded-sm" :ui="{ body: 'p-2 sm:p-2 flex items-center justify-center' }">
-          <UIcon name="i-ph-file-pdf-duotone" size="48" />
         </UCard>
-        <div>
+      </NuxtLink>
-          <p>File 2</p>
-          <p class="text-muted">
-            {{ t('tool.resume.uploaded') }} {{ date('2025-01-01') }}
-          </p>
-        </div>
-      </UCard>
     </div>
   </section>
 </template>

locales/en.json

@@ -203,7 +203,11 @@
     },
     "resume": {
       "main": "Below are two versions of my résumé: one in French and one in English, tailored to suit different academic and professional contexts. {space} Feel free to choose the one that best fits your needs by clicking the corresponding button.",
-      "uploaded": "Uploaded"
+      "uploaded": "Uploaded",
+      "files": {
+        "en": "English version",
+        "fr": "French version"
+      }
     }
   },
   "error": {

locales/es.json

@@ -190,7 +190,11 @@
     },
     "resume": {
       "main": "A continuación encontrarás dos versiones de mi currículum: una en francés y otra en inglés, pensadas para distintos contextos académicos y profesionales. {space} Elige la que mejor se adapte a tus necesidades haciendo clic en el botón correspondiente.",
-      "uploaded": "Cargado"
+      "uploaded": "Cargado",
+      "files": {
+        "en": "Versión en inglés",
+        "fr": "Versión francesa"
+      }
     },
     "projects": {
       "main": "Una selección de mis proyectos realizados en R, Python y desarrollo web, cubriendo áreas variadas como análisis de datos, aprendizaje automático y aplicaciones web. Estos proyectos destacan mis habilidades en codificación, resolución de problemas y diseño de soluciones. {space} Aquí, presento los tres proyectos de los que estoy más orgulloso, pero puedes descubrir todos mis proyectos directamente en la página de {projects}.",

locales/fr.json

@@ -203,7 +203,11 @@
     },
     "resume": {
       "main": "Vous trouverez ci-dessous deux versions de mon CV : une en français et une en anglais, afin de répondre aux différents contextes académiques et professionnels.{space} Choisissez celle qui vous convient le mieux en cliquant sur le bouton correspondant.",
-      "uploaded": "Uploadé"
+      "uploaded": "Uploadé",
+      "files": {
+        "en": "Version anglaise",
+        "fr": "Version française"
+      }
     }
   },
   "error": {