feat: add experiences section with localization and update skills and writings components

app/components/chat/MessageFromArthur.vue

@@ -5,6 +5,7 @@ import ToolActivity from '~/components/tool/Activity.vue'
 import ToolContact from '~/components/tool/Contact.vue'
 import ToolCredits from '~/components/tool/Credits.vue'
 import ToolDuplicated from '~/components/tool/Duplicated.vue'
+import ToolExperiences from '~/components/tool/Experiences.vue'
 import ToolHobbies from '~/components/tool/Hobbies.vue'
 import ToolHomeLab from '~/components/tool/HomeLab.vue'
 import ToolLanguage from '~/components/tool/Language.vue'
@@ -43,7 +44,7 @@ const componentMap: Record<ChatType, Component | undefined> = {
   [ChatType.PROJECTS]: ToolProjects,
   [ChatType.WRITINGS]: ToolWritings,
   [ChatType.HOBBIES]: ToolHobbies,
-  [ChatType.EXPERIENCES]: undefined,
+  [ChatType.EXPERIENCES]: ToolExperiences,
   [ChatType.STATUS]: ToolHomeLab,
   [ChatType.CREDITS]: ToolCredits,
   [ChatType.RESUME]: ToolResume,

app/components/tool/Experiences.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+const { data: experiences } = await useAsyncData('experiences', async () => await queryCollection('experiences').all())
+
+const { t, locale } = useI18n()
+const formatDate = (date: string) => useDateFormat(new Date(date), 'MMM YYYY', { locales: locale.value ?? 'en' }).value
+function getLanguageForText(text: { en: string, es: string, fr: string }) {
+  return locale.value === 'en' ? text.en : locale.value === 'es' ? text.es : text.fr
+}
+</script>
+
+<template>
+  <section>
+    <div class="prose dark:prose-invert mb-16">
+      <p>{{ t('tool.experiences.main') }}</p>
+    </div>
+    <div v-if="experiences" class="space-y-16 m-1 my-4">
+      <div
+        v-for="experience in experiences.sort((a, b) => new Date(b.endDate ?? '').getTime() - new Date(a.endDate ?? '').getTime())"
+        :key="experience.id"
+        class="flex flex-col gap-2"
+      >
+        <div class="flex justify-between items-center gap-2 flex-wrap">
+          <UBadge variant="solid" size="lg" color="neutral">
+            {{ formatDate(experience.startDate) }} - {{ experience.endDate ? formatDate(experience.endDate) : t('tool.experiences.today') }}
+          </UBadge>
+          <div class="flex items-center gap-2">
+            <h1 class="text-xl">
+              {{ getLanguageForText(experience.title) }}
+            </h1>
+            <NuxtLink
+              :to="experience.companyUrl"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <h2 class="text-xl text-neutral-800 dark:text-neutral-200 font-semibold">
+                <span class="text-muted">@</span>{{ experience.company }}
+              </h2>
+            </NuxtLink>
+          </div>
+        </div>
+        <p class="text-justify">
+          {{ getLanguageForText(experience.description) }}
+        </p>
+        <div class="flex flex-wrap gap-2">
+          <UBadge
+            v-for="tag in experience.tags.sort((a: any, b: any) => a.localeCompare(b))"
+            :key="tag"
+            variant="soft"
+          >
+            {{ tag }}
+          </UBadge>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

app/components/tool/Skills.vue

@@ -7,7 +7,7 @@ const { t, locale } = useI18n()
 <template>
   <section>
     <div class="prose dark:prose-invert">
-      <p>{{ t('skills.main') }}</p>
+      <p>{{ t('tool.skills') }}</p>
     </div>
     <div v-if="skills" class="space-y-12 m-1 my-4">
       <div v-for="item in skills.body" :key="item.id" class="space-y-8">

app/components/tool/Writings.vue

@@ -2,7 +2,7 @@
 const { locale, t } = useI18n()
 
 const { data: writings } = await useAsyncData('writings-index', async () => await queryCollection('writings').order('publishedAt', 'DESC').select('title', 'description', 'id', 'publishedAt', 'tags', 'slug').limit(2).all())
-const date = (date: string) => useDateFormat(new Date(date), 'DD MMMM YYYY', { locales: locale.value ?? 'en' })
+const formatDate = (date: string) => useDateFormat(new Date(date), 'DD MMMM YYYY', { locales: locale.value ?? 'en' })
 </script>
 
 <template>
@@ -38,7 +38,7 @@ const date = (date: string) => useDateFormat(new Date(date), 'DD MMMM YYYY', { l
             </h3>
             <div class="flex items-center justify-between">
               <p class="text-sm text-muted-foreground">
-                {{ date(writing.publishedAt).value }}
+                {{ formatDate(writing.publishedAt).value }}
               </p>
               <div class="flex flex-wrap gap-2">
                 <UBadge