diff --git a/auto-imports.d.ts b/auto-imports.d.ts
index e0aeb8d..350c90f 100644
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -1,6 +1,7 @@
 // Generated by 'unplugin-auto-import'
 // We suggest you to commit this file into source control
 declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
   const afterAll: typeof import('vitest')['afterAll']
   const afterEach: typeof import('vitest')['afterEach']
   const assert: typeof import('vitest')['assert']
@@ -8,15 +9,18 @@ declare global {
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
   const beforeAll: typeof import('vitest')['beforeAll']
   const beforeEach: typeof import('vitest')['beforeEach']
-  const biSyncRef: typeof import('@vueuse/core')['biSyncRef']
   const chai: typeof import('vitest')['chai']
   const computed: typeof import('vue')['computed']
+  const computedAsync: typeof import('@vueuse/core')['computedAsync']
+  const computedEager: typeof import('@vueuse/core')['computedEager']
   const computedInject: typeof import('@vueuse/core')['computedInject']
+  const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
   const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
   const controlledRef: typeof import('@vueuse/core')['controlledRef']
   const createApp: typeof import('vue')['createApp']
   const createEventHook: typeof import('@vueuse/core')['createEventHook']
   const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
+  const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
   const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
   const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
   const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
@@ -28,7 +32,6 @@ declare global {
   const describe: typeof import('vitest')['describe']
   const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
   const effectScope: typeof import('vue')['effectScope']
-  const EffectScope: typeof import('vue')['EffectScope']
   const expect: typeof import('vitest')['expect']
   const extendRef: typeof import('@vueuse/core')['extendRef']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
@@ -37,9 +40,14 @@ declare global {
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
   const inject: typeof import('vue')['inject']
   const isDefined: typeof import('@vueuse/core')['isDefined']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
   const isReadonly: typeof import('vue')['isReadonly']
   const isRef: typeof import('vue')['isRef']
   const it: typeof import('vitest')['it']
+  const logicAnd: typeof import('@vueuse/core')['logicAnd']
+  const logicNot: typeof import('@vueuse/core')['logicNot']
+  const logicOr: typeof import('@vueuse/core')['logicOr']
   const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
   const markRaw: typeof import('vue')['markRaw']
   const nextTick: typeof import('vue')['nextTick']
@@ -70,13 +78,20 @@ declare global {
   const reactivePick: typeof import('@vueuse/core')['reactivePick']
   const readonly: typeof import('vue')['readonly']
   const ref: typeof import('vue')['ref']
+  const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
+  const refDebounced: typeof import('@vueuse/core')['refDebounced']
   const refDefault: typeof import('@vueuse/core')['refDefault']
+  const refThrottled: typeof import('@vueuse/core')['refThrottled']
+  const refWithControl: typeof import('@vueuse/core')['refWithControl']
   const resolveComponent: typeof import('vue')['resolveComponent']
+  const resolveRef: typeof import('@vueuse/core')['resolveRef']
+  const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
   const shallowReactive: typeof import('vue')['shallowReactive']
   const shallowReadonly: typeof import('vue')['shallowReadonly']
   const shallowRef: typeof import('vue')['shallowRef']
   const suite: typeof import('vitest')['suite']
   const syncRef: typeof import('@vueuse/core')['syncRef']
+  const syncRefs: typeof import('@vueuse/core')['syncRefs']
   const templateRef: typeof import('@vueuse/core')['templateRef']
   const test: typeof import('vitest')['test']
   const throttledRef: typeof import('@vueuse/core')['throttledRef']
@@ -86,6 +101,7 @@ declare global {
   const toRef: typeof import('vue')['toRef']
   const toRefs: typeof import('vue')['toRefs']
   const triggerRef: typeof import('vue')['triggerRef']
+  const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
   const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
   const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
   const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
@@ -99,6 +115,7 @@ declare global {
   const useAttrs: typeof import('vue')['useAttrs']
   const useBase64: typeof import('@vueuse/core')['useBase64']
   const useBattery: typeof import('@vueuse/core')['useBattery']
+  const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
   const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
   const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
   const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
@@ -111,11 +128,13 @@ declare global {
   const useCssModule: typeof import('vue')['useCssModule']
   const useCssVar: typeof import('@vueuse/core')['useCssVar']
   const useCssVars: typeof import('vue')['useCssVars']
+  const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
   const useCycleList: typeof import('@vueuse/core')['useCycleList']
   const useDark: typeof import('@vueuse/core')['useDark']
+  const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
   const useDebounce: typeof import('@vueuse/core')['useDebounce']
-  const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
   const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
+  const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
   const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
   const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
   const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
@@ -123,6 +142,7 @@ declare global {
   const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
   const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
   const useDraggable: typeof import('@vueuse/core')['useDraggable']
+  const useDropZone: typeof import('@vueuse/core')['useDropZone']
   const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
   const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
   const useElementHover: typeof import('@vueuse/core')['useElementHover']
@@ -134,13 +154,17 @@ declare global {
   const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
   const useFavicon: typeof import('@vueuse/core')['useFavicon']
   const useFetch: typeof import('@vueuse/core')['useFetch']
+  const useFileDialog: typeof import('@vueuse/core')['useFileDialog']
+  const useFileSystemAccess: typeof import('@vueuse/core')['useFileSystemAccess']
   const useFocus: typeof import('@vueuse/core')['useFocus']
   const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
   const useFps: typeof import('@vueuse/core')['useFps']
   const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
+  const useGamepad: typeof import('@vueuse/core')['useGamepad']
   const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
   const useHead: typeof import('@vueuse/head')['useHead']
   const useIdle: typeof import('@vueuse/core')['useIdle']
+  const useImage: typeof import('@vueuse/core')['useImage']
   const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
   const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
   const useInterval: typeof import('@vueuse/core')['useInterval']
@@ -162,6 +186,7 @@ declare global {
   const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
   const useNetwork: typeof import('@vueuse/core')['useNetwork']
   const useNow: typeof import('@vueuse/core')['useNow']
+  const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl']
   const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
   const useOnline: typeof import('@vueuse/core')['useOnline']
   const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
@@ -177,6 +202,7 @@ declare global {
   const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
   const useRoute: typeof import('vue-router')['useRoute']
   const useRouter: typeof import('vue-router')['useRouter']
+  const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
   const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
   const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
   const useScroll: typeof import('@vueuse/core')['useScroll']
@@ -186,28 +212,31 @@ declare global {
   const useSlots: typeof import('vue')['useSlots']
   const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
   const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
+  const useStepper: typeof import('@vueuse/core')['useStepper']
   const useStorage: typeof import('@vueuse/core')['useStorage']
   const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
   const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
   const useSwipe: typeof import('@vueuse/core')['useSwipe']
   const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
   const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
+  const useTextareaAutosize: typeof import('@vueuse/core')['useTextareaAutosize']
   const useThrottle: typeof import('@vueuse/core')['useThrottle']
-  const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
   const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
+  const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
   const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
   const useTimeout: typeof import('@vueuse/core')['useTimeout']
   const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
+  const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll']
   const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
   const useTitle: typeof import('@vueuse/core')['useTitle']
   const useToggle: typeof import('@vueuse/core')['useToggle']
   const useTransition: typeof import('@vueuse/core')['useTransition']
   const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
   const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
-  const useVibrate: typeof import('@vueuse/core')['useVibrate']
-  const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
   const useVModel: typeof import('@vueuse/core')['useVModel']
   const useVModels: typeof import('@vueuse/core')['useVModels']
+  const useVibrate: typeof import('@vueuse/core')['useVibrate']
+  const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
   const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
   const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
   const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
@@ -219,10 +248,17 @@ declare global {
   const vi: typeof import('vitest')['vi']
   const vitest: typeof import('vitest')['vitest']
   const watch: typeof import('vue')['watch']
+  const watchArray: typeof import('@vueuse/core')['watchArray']
   const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
+  const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
   const watchEffect: typeof import('vue')['watchEffect']
+  const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
   const watchOnce: typeof import('@vueuse/core')['watchOnce']
+  const watchPausable: typeof import('@vueuse/core')['watchPausable']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+  const watchThrottled: typeof import('@vueuse/core')['watchThrottled']
+  const watchTriggerable: typeof import('@vueuse/core')['watchTriggerable']
   const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
   const whenever: typeof import('@vueuse/core')['whenever']
 }
-export {}
diff --git a/components.d.ts b/components.d.ts
index 4ed22e4..8672dd9 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -22,6 +22,8 @@ declare module 'vue' {
     MoonIcon: typeof import('./src/components/icons/MoonIcon.vue')['default']
     Project: typeof import('./src/components/Project.vue')['default']
     ProjectSection: typeof import('./src/components/ProjectSection.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
     SectionPart: typeof import('./src/components/SectionPart.vue')['default']
     SectionTitle: typeof import('./src/components/SectionTitle.vue')['default']
     SocialList: typeof import('./src/components/SocialList.vue')['default']
@@ -33,5 +35,3 @@ declare module 'vue' {
     WorkSection: typeof import('./src/components/WorkSection.vue')['default']
   }
 }
-
-export { }
diff --git a/index.html b/index.html
index bcb23b6..3e8bd60 100644
--- a/index.html
+++ b/index.html
@@ -5,12 +5,12 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" href="/favicon.svg" type="image/svg+xml">
   <title>Arthur Danjou - My Résumé</title>
-  <meta name="description" content="Opinionated Vite Starter Template">
+  <meta name="description" content="My tech and development résumé">
 </head>
 <body>
   <div id="app"></div>
   <script>
-    (function() {
+    (function () {
       const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
       const setting = localStorage.getItem('color-schema') || 'auto'
       if (setting === 'dark' || (prefersDark && setting !== 'light'))
diff --git a/src/components/AboutSection.vue b/src/components/AboutSection.vue
index 1cabdbc..ffaa9a2 100644
--- a/src/components/AboutSection.vue
+++ b/src/components/AboutSection.vue
@@ -1,3 +1,9 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>
+
 <template>
   <SectionTitle title="about.title" />
   <SectionPart>
@@ -8,9 +14,3 @@
     </p>
   </SectionPart>
 </template>
-
-<script setup>
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-</script>
diff --git a/src/components/BackToSite.vue b/src/components/BackToSite.vue
index b4b057c..c870371 100644
--- a/src/components/BackToSite.vue
+++ b/src/components/BackToSite.vue
@@ -1,3 +1,9 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>
+
 <template>
   <a href="https://arthurdanjou.fr" target="_blank" class="flex items-center mb-4 text-gray-700 dark:text-gray-300 text-sm">
     <div class="group cursor-pointer flex items-center">
@@ -5,9 +11,3 @@
     </div>
   </a>
 </template>
-
-<script setup>
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-</script>
diff --git a/src/components/Education.vue b/src/components/Education.vue
index e118c8c..2280a36 100644
--- a/src/components/Education.vue
+++ b/src/components/Education.vue
@@ -1,24 +1,6 @@
-<template>
-  <div>
-    <div>
-      <h1 class="text-lg leading-5">
-        <strong>{{ t(title) }}</strong>, {{ location }}
-      </h1>
-      <h3 class="my-1 text-sm text-gray-500 dark:text-gray-400">
-        {{ t('date.from') }} {{ getBeginDate }} {{ t('date.to') }} {{ getEndDate }}
-      </h3>
-    </div>
-    <p class="text-justify text-md leading-5 dark:text-gray-300">
-      <slot />
-    </p>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 
-const { t } = useI18n()
-
 const props = defineProps({
   title: {
     type: String,
@@ -38,6 +20,8 @@ const props = defineProps({
   },
 })
 
+const { t } = useI18n()
+
 const getEndDate = computed(() => {
   return props.endDate === 'Today'
     ? t('date.today')
@@ -48,3 +32,19 @@ const getBeginDate = computed(() => {
   return `${t(`months.${props.beginDate.split('/')[0]}`)} ${props.beginDate.split('/')[1]}`
 })
 </script>
+
+<template>
+  <div>
+    <div>
+      <h1 class="text-lg leading-5">
+        <strong>{{ t(title) }}</strong>, {{ location }}
+      </h1>
+      <h3 class="my-1 text-sm text-gray-500 dark:text-gray-400">
+        {{ t('date.from') }} {{ getBeginDate }} {{ t('date.to') }} {{ getEndDate }}
+      </h3>
+    </div>
+    <p class="text-justify text-md leading-5 dark:text-gray-300">
+      <slot />
+    </p>
+  </div>
+</template>
diff --git a/src/components/EducationSection.vue b/src/components/EducationSection.vue
index a61b448..bf00fc4 100644
--- a/src/components/EducationSection.vue
+++ b/src/components/EducationSection.vue
@@ -1,3 +1,9 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>
+
 <template>
   <SectionTitle title="educations.title" />
   <SectionPart class="space-y-4">
@@ -33,9 +39,3 @@
     </Education>
   </SectionPart>
 </template>
-
-<script setup>
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-</script>
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 6ba5ad1..a68cc90 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,17 +1,3 @@
-<template>
-  <div class="mt-8 text-center">
-    <!-- <a class="leading-5 font-bold border-b-2 hover:(border-gray-700 dark:border-white) border-gray-300 dark:border-gray-700 dark:border-gray-800 duration-300 cursor-pointer">
-      {{ t('footer.pdf') }}
-    </a> -->
-    <p class="text-xs text-gray-700 dark:text-gray-300 mt-4">
-      {{ t('footer.updated', {date: updated}) }}
-    </p>
-    <p class="text-xs text-gray-700 dark:text-gray-300 mt-1">
-      {{ t('footer.copyright', {year}) }}
-    </p>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 
@@ -26,3 +12,17 @@ const updated = computed(() => {
     : 'February 28th 2022 at 16:22'
 })
 </script>
+
+<template>
+  <div class="mt-8 text-center">
+    <!-- <a class="leading-5 font-bold border-b-2 hover:(border-gray-700 dark:border-white) border-gray-300 dark:border-gray-700 dark:border-gray-800 duration-300 cursor-pointer">
+      {{ t('footer.pdf') }}
+    </a> -->
+    <p class="text-xs text-gray-700 dark:text-gray-300 mt-4">
+      {{ t('footer.updated', { date: updated }) }}
+    </p>
+    <p class="text-xs text-gray-700 dark:text-gray-300 mt-1">
+      {{ t('footer.copyright', { year }) }}
+    </p>
+  </div>
+</template>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index c7703c1..1b37fe7 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,3 +1,9 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>
+
 <template>
   <div class="my-4 text-center sm:text-left">
     <h1 class="font-black text-2xl">
@@ -11,9 +17,3 @@
     </h3>
   </div>
 </template>
-
-<script setup>
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-</script>
diff --git a/src/components/InterestSection.vue b/src/components/InterestSection.vue
index 7e5c1e1..6533d93 100644
--- a/src/components/InterestSection.vue
+++ b/src/components/InterestSection.vue
@@ -1,3 +1,9 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>
+
 <template>
   <SectionTitle title="interests.title" />
   <SectionPart>
@@ -6,9 +12,3 @@
     </p>
   </SectionPart>
 </template>
-
-<script setup>
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-</script>
diff --git a/src/components/LanguageSection.vue b/src/components/LanguageSection.vue
index 9a0ba3d..bb0d817 100644
--- a/src/components/LanguageSection.vue
+++ b/src/components/LanguageSection.vue
@@ -1,12 +1,12 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>
+
 <template>
   <SectionTitle title="languages.title" />
   <SectionPart>
     <p v-html="t('languages.content')" />
   </SectionPart>
 </template>
-
-<script setup>
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-</script>
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index 11a676f..341a973 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -1,30 +1,3 @@
-<template>
-  <div class="fixed top-2 right-1 sm:(top-4 right-4) grid grid-rows-2 gap-y-2 text-center">
-    <div
-      class="p-1 hover:bg-gray-300 dark:hover:bg-gray-800 duration-300 cursor-pointer rounded-full"
-      @click.prevent="toggleDark"
-    >
-      <SunIcon v-if="isDark" />
-      <MoonIcon v-else />
-    </div>
-    <div
-      class="p-1 hover:bg-gray-300 dark:hover:bg-gray-800 duration-300 cursor-pointer rounded-full transform"
-      :class="{'rotate-180': scrollPosition > 100}"
-      @click.prevent="teleport"
-    >
-      <DownArrowIcon />
-    </div>
-    <div @click.prevent="switchLanguage">
-      <div v-if="locale === 'fr'" class="text-right text-xl px-1 hover:bg-gray-300 dark:hover:bg-gray-800 duration-300 cursor-pointer rounded-full">
-        🇬🇧
-      </div>
-      <div v-else class="text-right text-xl px-1 hover:bg-gray-300 dark:hover:bg-gray-800 duration-300 cursor-pointer rounded-full">
-        🇫🇷
-      </div>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import { isDark, toggleDark } from '~/composables'
@@ -55,3 +28,30 @@ onUnmounted(() => {
   window.removeEventListener('scroll', updateScroll)
 })
 </script>
+
+<template>
+  <div class="fixed top-2 right-1 sm:(top-4 right-4) grid grid-rows-2 gap-y-2 text-center">
+    <div
+      class="p-1 hover:bg-gray-300 dark:hover:bg-gray-800 duration-300 cursor-pointer rounded-full"
+      @click.prevent="toggleDark"
+    >
+      <SunIcon v-if="isDark" />
+      <MoonIcon v-else />
+    </div>
+    <div
+      class="p-1 hover:bg-gray-300 dark:hover:bg-gray-800 duration-300 cursor-pointer rounded-full transform"
+      :class="{ 'rotate-180': scrollPosition > 100 }"
+      @click.prevent="teleport"
+    >
+      <DownArrowIcon />
+    </div>
+    <div @click.prevent="switchLanguage">
+      <div v-if="locale === 'fr'" class="text-right text-xl px-1 hover:bg-gray-300 dark:hover:bg-gray-800 duration-300 cursor-pointer rounded-full">
+        🇬🇧
+      </div>
+      <div v-else class="text-right text-xl px-1 hover:bg-gray-300 dark:hover:bg-gray-800 duration-300 cursor-pointer rounded-full">
+        🇫🇷
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/Project.vue b/src/components/Project.vue
index 53dcb0e..68966d7 100644
--- a/src/components/Project.vue
+++ b/src/components/Project.vue
@@ -1,3 +1,21 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+defineProps({
+  title: {
+    type: String,
+  },
+  url: {
+    type: String,
+  },
+  description: {
+    type: String,
+  },
+})
+
+const { t } = useI18n()
+</script>
+
 <template>
   <a
     class="w-full h-full"
@@ -15,21 +33,3 @@
     </div>
   </a>
 </template>
-
-<script setup lang="ts">
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-
-defineProps({
-  title: {
-    type: String,
-  },
-  url: {
-    type: String,
-  },
-  description: {
-    type: String,
-  },
-})
-</script>
diff --git a/src/components/ProjectSection.vue b/src/components/ProjectSection.vue
index 37dfe4e..33ddaca 100644
--- a/src/components/ProjectSection.vue
+++ b/src/components/ProjectSection.vue
@@ -1,3 +1,9 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>
+
 <template>
   <SectionTitle title="projects.title" />
   <SectionPart>
@@ -34,9 +40,3 @@
     </div>
   </SectionPart>
 </template>
-
-<script setup>
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-</script>
diff --git a/src/components/SectionTitle.vue b/src/components/SectionTitle.vue
index 6780598..22e4e0f 100644
--- a/src/components/SectionTitle.vue
+++ b/src/components/SectionTitle.vue
@@ -1,9 +1,3 @@
-<template>
-  <h3>
-    <span class="pl-1 pr-4 title py-1 font-bold text-xl relative bg-black text-white dark:(bg-white text-black)">{{ t(title) }}</span>
-  </h3>
-</template>
-
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 
@@ -17,3 +11,9 @@ defineProps({
 
 const { t } = useI18n()
 </script>
+
+<template>
+  <h3>
+    <span class="pl-1 pr-4 title py-1 font-bold text-xl relative bg-black text-white dark:(bg-white text-black)">{{ t(title) }}</span>
+  </h3>
+</template>
diff --git a/src/components/Stack.vue b/src/components/Stack.vue
index 437047d..3c2a041 100644
--- a/src/components/Stack.vue
+++ b/src/components/Stack.vue
@@ -1,14 +1,6 @@
-<template>
-  <div class="mb-2">
-    <strong class="mr-2">{{ t(title) }}</strong><span class="dark:text-gray-200">{{ content }}</span>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 
-const { t } = useI18n()
-
 defineProps({
   title: {
     default: 'Title',
@@ -19,4 +11,12 @@ defineProps({
     required: true,
   },
 })
+
+const { t } = useI18n()
 </script>
+
+<template>
+  <div class="mb-2">
+    <strong class="mr-2">{{ t(title) }}</strong><span class="dark:text-gray-200">{{ content }}</span>
+  </div>
+</template>
diff --git a/src/components/WorkExperience.vue b/src/components/WorkExperience.vue
index 6be7645..dbdc966 100644
--- a/src/components/WorkExperience.vue
+++ b/src/components/WorkExperience.vue
@@ -1,3 +1,42 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps({
+  title: {
+    type: String,
+  },
+  company: {
+    type: String,
+  },
+  location: {
+    type: String,
+  },
+  beginDate: {
+    type: String,
+    required: true,
+  },
+  endDate: {
+    type: String,
+    required: true,
+  },
+  url: {
+    type: String,
+  },
+})
+
+const { t } = useI18n()
+
+const getEndDate = computed(() => {
+  return props.endDate === 'Today'
+    ? t('date.today')
+    : `${t(`months.${props.endDate.split('/')[0]}`)} ${props.endDate.split('/')[1]}`
+})
+
+const getBeginDate = computed(() => {
+  return `${t(`months.${props.beginDate.split('/')[0]}`)} ${props.beginDate.split('/')[1]}`
+})
+</script>
+
 <template>
   <div>
     <div>
@@ -25,42 +64,3 @@
     </p>
   </div>
 </template>
-
-<script setup lang="ts">
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-
-const props = defineProps({
-  title: {
-    type: String,
-  },
-  company: {
-    type: String,
-  },
-  location: {
-    type: String,
-  },
-  beginDate: {
-    type: String,
-    required: true,
-  },
-  endDate: {
-    type: String,
-    required: true,
-  },
-  url: {
-    type: String,
-  },
-})
-
-const getEndDate = computed(() => {
-  return props.endDate === 'Today'
-    ? t('date.today')
-    : `${t(`months.${props.endDate.split('/')[0]}`)} ${props.endDate.split('/')[1]}`
-})
-
-const getBeginDate = computed(() => {
-  return `${t(`months.${props.beginDate.split('/')[0]}`)} ${props.beginDate.split('/')[1]}`
-})
-</script>
diff --git a/src/components/WorkSection.vue b/src/components/WorkSection.vue
index 032c12f..1a43120 100644
--- a/src/components/WorkSection.vue
+++ b/src/components/WorkSection.vue
@@ -1,3 +1,9 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>
+
 <template>
   <SectionTitle title="works.title" />
   <SectionPart class="space-y-4">
@@ -42,9 +48,3 @@
     </WorkExperience>
   </SectionPart>
 </template>
-
-<script setup>
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-</script>
diff --git a/src/components/icons/DownArrowIcon.vue b/src/components/icons/DownArrowIcon.vue
index 4963078..4dabbe6 100644
--- a/src/components/icons/DownArrowIcon.vue
+++ b/src/components/icons/DownArrowIcon.vue
@@ -1,3 +1,9 @@
+<script>
+export default {
+  name: 'DownArrowIcon',
+}
+</script>
+
 <template>
   <svg width="1.3em" height="1.3em" viewBox="0 0 256 256" focusable="false">
     <path
@@ -6,9 +12,3 @@
     />
   </svg>
 </template>
-
-<script>
-export default {
-  name: 'DownArrowIcon',
-}
-</script>
diff --git a/src/components/icons/GithubIcon.vue b/src/components/icons/GithubIcon.vue
index a3cc813..846f6cf 100644
--- a/src/components/icons/GithubIcon.vue
+++ b/src/components/icons/GithubIcon.vue
@@ -1,3 +1,9 @@
+<script>
+export default {
+  name: 'GithubIcon',
+}
+</script>
+
 <template>
   <svg width="1.3em" height="1.3em" viewBox="0 0 24 24" focusable="false">
     <path
@@ -6,9 +12,3 @@
     />
   </svg>
 </template>
-
-<script>
-export default {
-  name: 'GithubIcon',
-}
-</script>
diff --git a/src/components/icons/InstagramIcon.vue b/src/components/icons/InstagramIcon.vue
index 0472644..4689f23 100644
--- a/src/components/icons/InstagramIcon.vue
+++ b/src/components/icons/InstagramIcon.vue
@@ -1,3 +1,9 @@
+<script>
+export default {
+  name: 'InstagramIcon',
+}
+</script>
+
 <template>
   <svg width="1.2em" height="1.2em" viewBox="0 0 16 16" focusable="false">
     <path
@@ -6,9 +12,3 @@
     />
   </svg>
 </template>
-
-<script>
-export default {
-  name: 'InstagramIcon',
-}
-</script>
diff --git a/src/components/icons/LeftArrowIcon.vue b/src/components/icons/LeftArrowIcon.vue
index c63d1b8..c2b8d1f 100644
--- a/src/components/icons/LeftArrowIcon.vue
+++ b/src/components/icons/LeftArrowIcon.vue
@@ -1,3 +1,9 @@
+<script>
+export default {
+  name: 'LeftArrowIcon',
+}
+</script>
+
 <template>
   <svg width="1em" height="1em" viewBox="0 0 256 256" focusable="false">
     <path
@@ -6,9 +12,3 @@
     />
   </svg>
 </template>
-
-<script>
-export default {
-  name: 'LeftArrowIcon',
-}
-</script>
diff --git a/src/components/icons/LinkedInIcon.vue b/src/components/icons/LinkedInIcon.vue
index bc84661..619d498 100644
--- a/src/components/icons/LinkedInIcon.vue
+++ b/src/components/icons/LinkedInIcon.vue
@@ -1,3 +1,9 @@
+<script>
+export default {
+  name: 'LinkedInIcon',
+}
+</script>
+
 <template>
   <svg width="1.5em" height="1.5em" viewBox="0 0 24 24" focusable="false">
     <path
@@ -6,9 +12,3 @@
     />
   </svg>
 </template>
-
-<script>
-export default {
-  name: 'LinkedInIcon',
-}
-</script>
diff --git a/src/components/icons/MailIcon.vue b/src/components/icons/MailIcon.vue
index cea6112..fedf878 100644
--- a/src/components/icons/MailIcon.vue
+++ b/src/components/icons/MailIcon.vue
@@ -1,3 +1,9 @@
+<script>
+export default {
+  name: 'MailIcon',
+}
+</script>
+
 <template>
   <svg width="1.3em" height="1.3em" viewBox="0 0 24 24" focusable="false">
     <path
@@ -6,9 +12,3 @@
     />
   </svg>
 </template>
-
-<script>
-export default {
-  name: 'MailIcon',
-}
-</script>
diff --git a/src/components/icons/MoonIcon.vue b/src/components/icons/MoonIcon.vue
index 84d3c99..9965056 100644
--- a/src/components/icons/MoonIcon.vue
+++ b/src/components/icons/MoonIcon.vue
@@ -1,3 +1,9 @@
+<script>
+export default {
+  name: 'MoonIcon',
+}
+</script>
+
 <template>
   <svg width="1.3em" height="1.3em" viewBox="0 0 256 256" focusable="false">
     <path
@@ -5,9 +11,3 @@
     />
   </svg>
 </template>
-
-<script>
-export default {
-  name: 'MoonIcon',
-}
-</script>
diff --git a/src/components/icons/SunIcon.vue b/src/components/icons/SunIcon.vue
index e1acde6..b9f2326 100644
--- a/src/components/icons/SunIcon.vue
+++ b/src/components/icons/SunIcon.vue
@@ -1,3 +1,9 @@
+<script>
+export default {
+  name: 'SunIcon',
+}
+</script>
+
 <template>
   <svg width="1.3em" height="1.3em" viewBox="0 0 256 256" focusable="false">
     <path
@@ -5,9 +11,3 @@
     />
   </svg>
 </template>
-
-<script>
-export default {
-  name: 'SunIcon',
-}
-</script>
diff --git a/src/components/icons/TwitterIcon.vue b/src/components/icons/TwitterIcon.vue
index 4aa112d..3eea830 100644
--- a/src/components/icons/TwitterIcon.vue
+++ b/src/components/icons/TwitterIcon.vue
@@ -1,3 +1,9 @@
+<script>
+export default {
+  name: 'RiTwitterLine',
+}
+</script>
+
 <template>
   <svg width="1.5em" height="1.5em" viewBox="0 0 24 24">
     <path
@@ -6,9 +12,3 @@
     />
   </svg>
 </template>
-
-<script>
-export default {
-  name: 'RiTwitterLine',
-}
-</script>