feat: rewrite to Next.js v13 app directory

Improvements:
- Hide switch theme input (ugly little white square)
- i18n without subpath (e.g: /fr or /en), same url whatever the locale used

components/Skills/Skill.tsx

@@ -1,6 +1,8 @@
+'use client'
+
+import { useState, useEffect, useMemo } from 'react'
 import { useTheme } from 'next-themes'
 import Image from 'next/image'
-import { useMemo } from 'react'
 
 import type { SkillName } from './skills'
 import { skills } from './skills'
@@ -11,18 +13,31 @@ export interface SkillComponentProps {
 
 export const SkillComponent: React.FC<SkillComponentProps> = (props) => {
   const { skill } = props
+
   const skillProperties = skills[skill]
+  const [mounted, setMounted] = useState(false)
   const { theme } = useTheme()
 
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
   const image = useMemo(() => {
     if (typeof skillProperties.image === 'string') {
       return skillProperties.image
     }
+    if (!mounted) {
+      return skillProperties.image.dark
+    }
     if (theme === 'light') {
       return skillProperties.image.light
     }
     return skillProperties.image.dark
-  }, [skillProperties, theme])
+  }, [skillProperties, theme, mounted])
+
+  if (!mounted) {
+    return null
+  }
 
   return (
     <a

components/Skills/index.tsx

@@ -1,14 +1,14 @@
-import useTranslation from 'next-translate/useTranslation'
+import { getI18n } from '@/i18n/i18n.server'
 
 import { SkillComponent } from './Skill'
 import { SkillsSection } from './SkillsSection'
 
 export const Skills: React.FC = () => {
-  const { t } = useTranslation()
+  const i18n = getI18n()
 
   return (
     <>
-      <SkillsSection title={t('home:skills.languages')}>
+      <SkillsSection title={i18n.translate('home.skills.languages')}>
         <SkillComponent skill='TypeScript' />
         <SkillComponent skill='Python' />
         <SkillComponent skill='C/C++' />
@@ -29,7 +29,7 @@ export const Skills: React.FC = () => {
         <SkillComponent skill='PostgreSQL' />
       </SkillsSection>
 
-      <SkillsSection title={t('home:skills.software-tools')}>
+      <SkillsSection title={i18n.translate('home.skills.software-tools')}>
         <SkillComponent skill='GNU/Linux' />
         <SkillComponent skill='Arch Linux' />
         <SkillComponent skill='Visual Studio Code' />