Translate all portfolio

app/components/AppFooter.vue

@@ -20,6 +20,10 @@ const socials = [
     link: 'https://discordapp.com/users/179635349100691456'
   }
 ]
+
+const { t } = useI18n({
+  useScope: 'local'
+})
 </script>
 
 <template>
@@ -33,7 +37,7 @@ const socials = [
     </div>
     <div class="space-y-4">
       <div class="flex flex-col md:flex-row gap-2 md:items-center">
-        <h1>Find me on:</h1>
+        <h1>{{ t('find') }}</h1>
         <div class="flex gap-2 flex-wrap">
           <HomeLink
             v-for="social in socials.sort((a, b) => a.label.localeCompare(b.label))"
@@ -46,7 +50,7 @@ const socials = [
         </div>
       </div>
       <div class="flex flex-col md:flex-row gap-2 md:items-center">
-        <h1>Or send me an email:</h1>
+        <h1>{{ t('email') }}</h1>
         <div class="flex">
           <HomeLink
             blanked
@@ -57,7 +61,26 @@ const socials = [
       </div>
     </div>
     <div class="mt-8 w-full flex justify-center text-xs">
-      © {{ new Date().getFullYear() }} Arthur Danjou. All rights reserved.
+      {{
+        t('copyright', {
+          date: new Date().getFullYear()
+        })
+      }}
     </div>
   </footer>
 </template>
+
+<i18n lang="json">
+{
+  "en": {
+    "find": "Find me on:",
+    "email": "Or send me an email:",
+    "copyright": "© {date} Arthur Danjou. All rights reserved."
+  },
+  "fr": {
+    "find": "Retrouvez-moi sur :",
+    "email": "Ou envoyez-moi un email :",
+    "copyright": "© {date} Arthur Danjou. Tous droits réservés."
+  }
+}
+</i18n>

app/components/AppHeader.vue

@@ -8,67 +8,109 @@ watch(isDark, () => {
 const config = useRuntimeConfig()
 const navs = [
   {
-    label: 'home',
+    label: {
+      en: 'home',
+      fr: 'accueil'
+    },
     to: '/',
     icon: 'i-ph-house-line-duotone',
-    shortcut: 'h'
+    shortcut: {
+      en: 'h',
+      fr: 'a'
+    }
   },
   {
-    label: 'uses',
+    label: {
+      en: 'uses',
+      fr: 'usages'
+    },
     to: '/uses',
     icon: 'i-ph-backpack-duotone',
-    shortcut: 'u'
+    shortcut: {
+      en: 'u',
+      fr: 'u'
+    }
   },
   {
-    label: 'writings',
+    label: {
+      en: 'writings',
+      fr: 'écrits'
+    },
     to: '/writings',
     icon: 'i-ph-books-duotone',
-    shortcut: 'w'
+    shortcut: {
+      en: 'w',
+      fr: 'e'
+    }
   },
   {
-    label: 'resume',
+    label: {
+      en: 'resume',
+      fr: 'cv'
+    },
     to: config.public.cloud.resume,
     target: '_blank',
     icon: 'i-ph-address-book-duotone',
-    shortcut: 'r'
+    shortcut: {
+      en: 'r',
+      fr: 'c'
+    }
   }
 ]
 
 async function toggleTheme() {
-  document.body.style.animation = 'theme-switch-on .5s'
+  document.body.style.animation = 'switch-on .5s'
   await new Promise(resolve => setTimeout(resolve, 500))
 
   isDark.value = !isDark.value
-  document.body.style.animation = 'theme-switch-off .5s'
+  document.body.style.animation = 'switch-off .5s'
 
   await new Promise(resolve => setTimeout(resolve, 500))
   document.body.style.animation = ''
 }
 
+async function changeLocale() {
+  document.body.style.animation = 'switch-on .2s'
+  await new Promise(resolve => setTimeout(resolve, 200))
+
+  await setLocale(locale.value === 'en' ? 'fr' : 'en')
+  document.body.style.animation = 'switch-off .2s'
+
+  await new Promise(resolve => setTimeout(resolve, 200))
+  document.body.style.animation = ''
+}
+
 const router = useRouter()
+const { locale, setLocale, locales, t } = useI18n()
+const currentLocale = computed(() => locales.value.filter(l => l.code === locale.value)[0])
 defineShortcuts({
   h: () => router.push('/'),
+  a: () => router.push('/'),
   u: () => router.push('/uses'),
   w: () => router.push('/writings'),
+  e: () => router.push('/writings'),
   r: () => window.open(config.public.cloud.resume, '_blank'),
-  t: () => toggleTheme()
+  c: () => window.open(config.public.cloud.resume, '_blank'),
+  t: () => toggleTheme(),
+  l: () => changeLocale(),
+  backspace: () => router.back()
 })
 </script>
 
 <template>
   <header class="flex items-center justify-between my-8">
-    <NuxtLink
+    <NuxtLinkLocale
       class="handwriting text-lg sm:text-3xl flex gap-2 font-bold duration-300 text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white"
       to="/"
     >
       Arthur Danjou
-    </NuxtLink>
+    </NuxtLinkLocale>
     <nav class="flex gap-2 items-center">
       <UTooltip
         v-for="nav in navs"
-        :key="nav.label"
-        :text="nav.label"
-        :shortcuts="[nav.shortcut]"
+        :key="nav.label.en"
+        :shortcuts="[nav.shortcut[locale]]"
+        :text="nav.label[locale]"
       >
         <UButton
           :icon="nav.icon"
@@ -77,14 +119,13 @@ defineShortcuts({
           :aria-label="nav.label"
           color="white"
           size="sm"
-          label=""
           variant="solid"
         />
       </UTooltip>
       <ClientOnly>
         <UTooltip
           :shortcuts="['t']"
-          text="switch theme"
+          :text="t('theme')"
         >
           <UButton
             :icon="isDark ? 'i-ph-moon-duotone' : 'i-ph-sun-duotone'"
@@ -95,6 +136,19 @@ defineShortcuts({
             @click="toggleTheme()"
           />
         </UTooltip>
+        <UTooltip
+          :shortcuts="['l']"
+          :text="t('language')"
+        >
+          <UButton
+            :icon="currentLocale!.icon"
+            aria-label="switch language"
+            color="white"
+            size="sm"
+            variant="solid"
+            @click.prevent="changeLocale()"
+          />
+        </UTooltip>
       </ClientOnly>
     </nav>
   </header>
@@ -105,7 +159,7 @@ defineShortcuts({
   font-family: 'Dancing Script', cursive;
 }
 
-@keyframes theme-switch-on {
+@keyframes switch-on {
   0% {
     filter: blur(0);
     transform: scale(1);
@@ -116,7 +170,7 @@ defineShortcuts({
   }
 }
 
-@keyframes theme-switch-off {
+@keyframes switch-off {
   0% {
     transform: scale(0.98);
     filter: blur(3px);
@@ -127,3 +181,16 @@ defineShortcuts({
   }
 }
 </style>
+
+<i18n lang="json">
+{
+  "en": {
+    "theme": "switch theme",
+    "language": "change language"
+  },
+  "fr": {
+    "theme": "changer de thème",
+    "language": "changer de langue"
+  }
+}
+</i18n>

app/components/content/Activity.vue

@@ -1,20 +1,28 @@
 <script lang="ts" setup>
-import { type Activity, type CodingActivity, IDEs } from '~~/types'
+import { type Activity, IDEs } from '~~/types'
 
 const { data: activity, refresh } = await useAsyncData<Activity>('activity', () => $fetch('/api/activity'))
 useIntervalFn(async () => await refresh(), 5000)
 const codingActivity = computed(() => activity.value!.data.activities.filter(activity => IDEs.some(ide => ide.name === activity.name))[0])
 
-const getActivity = computed<CodingActivity | undefined>(() => {
+const { locale, locales } = useI18n()
+const currentLocale = computed(() => locales.value.filter(l => l.code === locale.value)[0])
+
+const getActivity = computed(() => {
   const activity = codingActivity.value
   if (!activity) return
 
   const active = activity.name === 'Visual Studio Code' ? !activity.details.includes('Idling') : activity.state.toLowerCase().includes('editing')
-  const project = activity.state ? activity.state.replace('Workspace:', '') : ''
-  const state = activity.details.charAt(0).toLowerCase() + activity.details.slice(1)
+  const project = activity.details ? activity.details.replace('Workspace:', '') : ''
+  const state = activity.state.split(' ')[1]
   const start = {
     ago: useTimeAgo(activity.timestamps.start).value,
-    formated: `${useDateFormat(activity.timestamps.start, 'DD MMM YYYY').value} at ${useDateFormat(activity.timestamps.start, 'HH:mm:ss').value}`
+    formated: `${useDateFormat(
+      activity.timestamps.start,
+      'DD MMM YYYY',
+      { locales: currentLocale.value!.code ?? 'en' }
+    ).value} ${t('separator')}
+    ${useDateFormat(activity.timestamps.start, 'HH:mm:ss', { locales: currentLocale.value!.code ?? 'en' }).value}`
   }
 
   return {
@@ -25,6 +33,10 @@ const getActivity = computed<CodingActivity | undefined>(() => {
     start
   }
 })
+
+const { t } = useI18n({
+  useScope: 'local'
+})
 </script>
 
 <template>
@@ -33,7 +45,7 @@ const getActivity = computed<CodingActivity | undefined>(() => {
       v-if="getActivity"
       class="flex items-start gap-2"
     >
-      <UTooltip :text="getActivity.active ? 'I\'m online 👋' : 'I\'m sleeping 😴'">
+      <UTooltip :text="getActivity.active ? t('tooltip.online') : t('tooltip.idling')">
         <div class="relative flex h-3 w-3 mt-2">
           <div
             v-if="getActivity.active"
@@ -45,45 +57,84 @@ const getActivity = computed<CodingActivity | undefined>(() => {
           />
         </div>
       </UTooltip>
-      <span
+      <i18n-t
         v-if="getActivity.active"
+        keypath="working"
+        tag="div"
         class="space-x-1"
       >
-        <span>I'm actually working on <strong>{{ getActivity.project }}</strong>, {{ getActivity.state }}, using</span>
-        <UIcon
-          :name="IDEs.find(ide => ide.name === getActivity!.name)!.icon"
-          size="16"
-        />
-        <span>
-          <strong>{{ getActivity.name }}</strong>.
-          I've started <strong>{{ getActivity.start.ago }}</strong>, the
-          <strong>{{ getActivity.start.formated }}</strong>.
-        </span>
-      </span>
-      <div
+        <template #project>
+          <strong>{{ getActivity.project }}</strong>
+        </template>
+        <template #state>
+          {{ getActivity.state }}
+        </template>
+        <template #editor>
+          <UIcon
+            :name="IDEs.find(ide => ide.name === getActivity!.name)!.icon"
+            size="16"
+          />
+          <strong>{{ getActivity.name }}</strong>
+        </template>
+        <template #start>
+          <strong>{{ getActivity.start.ago }}</strong>
+        </template>
+        <template #format>
+          <strong>{{ getActivity.start.formated }}</strong>
+        </template>
+      </i18n-t>
+      <i18n-t
         v-else
+        keypath="idling"
+        tag="div"
         class="space-x-1"
       >
-        <span>I'm Idling on my computer with</span>
-        <UIcon
-          :name="IDEs.find(ide => ide.name === getActivity!.name)!.icon"
-          size="16"
-        />
-        <span>
-          <strong>{{ getActivity.name }}</strong> running in background.
-        </span>
-      </div>
+        <template #editor>
+          <UIcon
+            :name="IDEs.find(ide => ide.name === getActivity!.name)!.icon"
+            size="16"
+          />
+          <strong>{{ getActivity.name }}</strong>
+        </template>
+      </i18n-t>
     </div>
     <div
       v-else
       class="my-5 flex md:items-start gap-2"
     >
-      <UTooltip text="I'm offline 🫥">
+      <UTooltip :text="t('tooltip.offline')">
         <span class="cursor-not-allowed h-3 w-3 inline-flex rounded-full bg-red-500 mt-2" />
       </UTooltip>
       <p class="not-prose">
-        I'm currently offline. Come back later to see what I'm working on.
+        {{ t('offline') }}
       </p>
     </div>
   </ClientOnly>
 </template>
+
+<i18n lang="json">
+{
+  "en": {
+    "offline": "I'm currently offline. Come back later to see what I'm working on.",
+    "working": "I'm actually working on {project}, editing {state}, using {editor}. I've started {start}, the {format}.",
+    "idling": "I'm idling on my computer with {editor} running in background.",
+    "tooltip": {
+      "online": "I'm online 👋",
+      "offline": "I'm offline 🫥",
+      "idling": "I'm sleeping 😴"
+    },
+    "separator": "at"
+  },
+  "fr": {
+    "offline": "Je suis actuellement hors ligne. Revenez plus tard pour voir sur quoi je travaille.",
+    "working": "Je travaille actuellement sur {project}, éditant {state}, en utilisant {editor}. J'ai commencé il y a {start}, le {format}.",
+    "idling": "Je suis en veille sur mon ordinateur avec {editor} en arrière-plan.",
+    "tooltip": {
+      "online": "Je suis connecté 👋",
+      "offline": "Je suis déconnecté 🫥",
+      "idling": "Je dors 😴"
+    },
+    "separator": "à"
+  }
+}
+</i18n>

app/components/content/CatchPhrase.vue

@@ -8,11 +8,25 @@
         class="transform -rotate-12 duration-300 group-hover:animate-wave"
         name="i-ph-hand-pointing-duotone"
       />
-      <p>Hover the bold texts to find out more about me.</p>
+      <p>{{ t('quote') }}</p>
     </div>
   </ClientOnly>
 </template>
 
 <script lang="ts" setup>
 const { width } = useWindowSize()
+const { t } = useI18n({
+  useScope: 'local'
+})
 </script>
+
+<i18n lang="json">
+{
+  "en": {
+    "quote": "Hover the bold texts to find out more about me."
+  },
+  "fr": {
+    "quote": "Survolez les textes en gras pour en savoir plus sur moi."
+  }
+}
+</i18n>

app/components/content/HoverText.vue

@@ -17,10 +17,12 @@ defineProps({
 </script>
 
 <template>
-  <UTooltip
-    :popper="{ placement: position }"
-    :text="hover"
-  >
-    <strong class="leading-3 cursor-help">{{ text }}</strong>
-  </UTooltip>
+  <ClientOnly>
+    <UTooltip
+      :popper="{ placement: position }"
+      :text="hover"
+    >
+      <strong class="leading-3 cursor-help">{{ text }}</strong>
+    </UTooltip>
+  </ClientOnly>
 </template>

app/components/content/ProseIcon.vue

@@ -8,7 +8,7 @@ defineProps({
 </script>
 
 <template>
-  <span class="inline">
+  <span class="inline-flex items-center">
     <UIcon
       class="mb-1 mr-1"
       :name="icon"

app/components/content/Quote.vue

@@ -5,15 +5,31 @@
         <div class="flex items-center w-12 h-12">
           <NuxtImg
             alt="Arthur Danjou picture"
-            class="w-full h-full"
+            class="w-full h-full hover:rotate-[360deg] duration-500 transform-gpu"
             src="/favicon.png"
           />
         </div>
       </UTooltip>
     </div>
     <p class="not-prose">
-      Hello everyone! Thanks for visiting my portfolio. Please leave whatever you like to say, such as suggestions,
-      appreciations, questions or anything!
+      {{ t('quote') }}
     </p>
   </div>
 </template>
+
+<script lang="ts" setup>
+const { t } = useI18n({
+  useScope: 'local'
+})
+</script>
+
+<i18n lang="json">
+{
+  "en": {
+    "quote": "Hello everyone! Thanks for visiting my portfolio. Please leave whatever you like to say, such as suggestions, appreciations, questions or anything!"
+  },
+  "fr": {
+    "quote": "Bonjour tout le monde ! Merci de visiter mon portfolio. N'hésitez pas à laisser ce que vous avez à dire, comme des suggestions, des appréciations, des questions ou autre chose !"
+  }
+}
+</i18n>

app/components/content/Stats.vue

@@ -2,30 +2,65 @@
 import type { Stats } from '~~/types'
 
 const { data: stats } = await useFetch<Stats>('/api/stats')
+const { t } = useI18n({
+  useScope: 'local'
+})
 </script>
 
 <template>
   <ClientOnly>
-    <p v-if="stats">
-      I collect some data for {{ useTimeAgo(new Date(stats.coding.data.range.start)).value }}, started the
-      <HoverText
-        :text="useDateFormat(new Date(stats.coding.data.range.start), 'Do MMMM YYYY').value"
-        hover="That was so long ago 🫣"
-      />
-      .
-      I've coded for a total of
-      <HoverText
-        :text="usePrecision(stats.coding.data.grand_total.total_seconds_including_other_language / 3600, 0).value"
-        hover="That's a lot 😮"
-      />
-      hours.
-      My best editors are
-      {{ stats.editors.data.slice(0, 2).map(editor => `${editor.name} (${editor.percent}%)`).join(' and ') }}.
-      <template v-if="stats.os.data[0]">
-        My best OS is {{ stats.os.data[0].name }} ({{ stats.os.data[0].percent }}%).
+    <i18n-t
+      v-if="stats"
+      keypath="stats"
+      tag="p"
+    >
+      <template #time>
+        {{ useTimeAgo(new Date(stats.coding.data.range.start)).value }}
       </template>
-      My top languages are
-      {{ stats.languages.data.slice(0, 2).map(language => `${language.name} (${language.percent}%)`).join(' and ') }}.
-    </p>
+      <template #date>
+        <HoverText
+          :hover="t('tooltip.date')"
+          :text="useDateFormat(new Date(stats.coding.data.range.start), 'Do MMMM YYYY').value"
+        />
+      </template>
+      <template #hours>
+        <HoverText
+          :hover="t('tooltip.hours')"
+          :text="usePrecision(stats.coding.data.grand_total.total_seconds_including_other_language / 3600, 0).value"
+        />
+      </template>
+      <template
+        v-if="stats.os.data[0]"
+        #os
+      >
+        {{ stats.os.data[0].name }} ({{ stats.os.data[0].percent }}%)
+      </template>
+      <template #languages>
+        {{
+          stats.languages.data.slice(0, 2).map(language => `${language.name} (${language.percent}%)`).join(t('separator'))
+        }}
+      </template>
+    </i18n-t>
   </ClientOnly>
 </template>
+
+<i18n lang="json">
+{
+  "en": {
+    "stats": "I collect some data for {time}, started the {date}. I've coded for a total of {hours} hours. My best editors are {editors}. My best OS is {os}. My top languages are {languages}.",
+    "separator": " and ",
+    "tooltip": {
+      "date": "That was so long ago 🫣",
+      "hours": "That's a lot 😮"
+    }
+  },
+  "fr": {
+    "stats": "Je collecte des données depuis {time}, commencé le {date}. J'ai codé un total de {hours} heures. Mes meilleurs éditeurs sont {editors}. Mon meilleur OS est {os}. Mes langages préférés sont {languages}.",
+    "separator": " et ",
+    "tooltip": {
+      "date": "C'était il y a si longtemps 🫣",
+      "hours": "C'est beaucoup 😮"
+    }
+  }
+}
+</i18n>

app/components/uses/Item.vue

@@ -8,6 +8,8 @@ defineProps({
     required: true
   }
 })
+
+const { locale } = useI18n()
 </script>
 
 <template>
@@ -16,7 +18,7 @@ defineProps({
       {{ item.name }}
     </p>
     <p class="text-sm">
-      {{ item.description }}
+      {{ locale === 'en' ? item.description.en : item.description.fr }}
     </p>
   </li>
 </template>