Updated occupation sentences

Merge pull request #1 from LJ5O/dependabot/npm_and_yarn/rollup-4.59.0
Bump rollup from 4.45.0 to 4.59.0
2026-08-11 14:44:46 +02:00 · 2026-05-05 16:35:26 +02:00 · 2026-03-01 11:19:19 +01:00 · 2026-03-01 10:17:51 +00:00 · 2025-10-21 18:42:46 +02:00 · 2025-10-21 18:40:42 +02:00
61 changed files with 3088 additions and 810 deletions
--- a/.github/workflows/pages.yml
+++ b/.github/workflows/pages.yml
@@ -0,0 +1,53 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ['main']
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
+      - name: Build
+        run: npm run build
+      - name: Fix 404 bug
+        run: cd dist && cp index.html 404.html && cd ..
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload dist folder
+          path: './dist'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,4 @@
 /node_modules
+
+# No backup or temp files
+/src/assets/svg/*[0-9].svg
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+    "i18n-ally.localesPaths": [
+        "src/assets/svg/language"
+    ]
+}
--- a/14
+++ b/14
@@ -0,0 +1,14 @@
+Hi ! Thanks for your interest !
+
+I really love open sourcing and MIT licenses, but as this project is my very own personnal website, I would feel a little sad if someone just duplicate and reuse it.
+If you like it, please, feel free to look at the code and take some parts for you !
+
+Unless stated otherwise, picture and assets are my own creation, so please don't take them.
+( The brain svg was sourced from Pixabay, thanks to them ! )
+( And Google Maps helped to get some pictures ( 1st,2nd and 4th ) in /education, thanks ! )
+
+As long I don't see the same style everywhere, and assets are not reused, I don't care about the code being used for AI training.
+
+Have a nice day !
+( I love licenses easy to understand and headache free )
+( By the way, a huge THANKS to the creators of all the dependancies and tools I'm using to build this ! Without their hard work, Internet would not be the same )
--- a/README.md
+++ b/README.md
@@ -1,29 +1,3 @@
-# website
+# TODO

-This template should help get you started developing with Vue 3 in Vite.
-
-## Recommended IDE Setup
-
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vite.dev/config/).
-
-## Project Setup
-
-```sh
-npm install
-```
-
-### Compile and Hot-Reload for Development
-
-```sh
-npm run dev
-```
-
-### Compile and Minify for Production
-
-```sh
-npm run build
-```
+[Website is here](https://kevin.taccoen.fr/)
--- a/index.html
+++ b/index.html
@@ -4,7 +4,13 @@
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">
+
+    <title>Kévin Taccoen</title>
  </head>
  <body id="app">
    <script type="module" src="/src/main.js"></script>
--- a/package-lock.json
+++ b/package-lock.json
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,12 +7,16 @@ import GOLbackground from '@/components/GOLbackground.vue';
 <template>
  <GOLbackground />
  
+  <main>
    <RouterView/>
+  </main>

  <app_footer />

 </template>

 <style scoped>
-
+  main{
+    flex:1;
+  }
 </style>
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -1,7 +1,7 @@
-* {
+/** {
  overflow-y: hidden;
  overflow-x: hidden;
-}
+}*/
 html{
  background-color: #1E1E1E;
 }
@@ -10,3 +10,6 @@ html, body{
  overflow-x: hidden;
  overflow-y: scroll !important;
 }
+body{
+  min-height: 100vh;
+}
--- a/src/assets/img/assistant_new_talk.png
+++ b/src/assets/img/assistant_new_talk.png
--- a/src/assets/img/me/full.png
+++ b/src/assets/img/me/full.png
--- a/src/assets/img/me/icon.png
+++ b/src/assets/img/me/icon.png
--- a/src/assets/img/potato.png
+++ b/src/assets/img/potato.png
--- a/src/assets/img/projects/fukushima_exp1.jpg
+++ b/src/assets/img/projects/fukushima_exp1.jpg
--- a/src/assets/img/projects/fukushima_exp2.jpg
+++ b/src/assets/img/projects/fukushima_exp2.jpg
--- a/src/assets/img/projects/fukushima_kosen.jpg
+++ b/src/assets/img/projects/fukushima_kosen.jpg
--- a/src/assets/img/projects/hachinohe_kosen.png
+++ b/src/assets/img/projects/hachinohe_kosen.png
--- a/src/assets/img/projects/video_editor.png
+++ b/src/assets/img/projects/video_editor.png
--- a/src/assets/img/projects/yolov5_test.png
+++ b/src/assets/img/projects/yolov5_test.png
--- a/src/assets/img/schools/high.png
+++ b/src/assets/img/schools/high.png
--- a/src/assets/img/schools/iut.png
+++ b/src/assets/img/schools/iut.png
--- a/src/assets/img/schools/middle.png
+++ b/src/assets/img/schools/middle.png
--- a/src/assets/img/schools/ulco.png
+++ b/src/assets/img/schools/ulco.png
--- a/src/assets/img/this_website.png
+++ b/src/assets/img/this_website.png
--- a/src/assets/img/video_sample.png
+++ b/src/assets/img/video_sample.png
--- a/src/assets/localization/en/localization.json
+++ b/src/assets/localization/en/localization.json
@@ -2,12 +2,12 @@
  "home":{
    "greeting": "Hello ! I'm Kévin Taccoen !",
    "occupation": {
-      "ai":"AI enthusiast",
-      "fullstack":"Full-Stack Developer",
+      "international":"Internationally inspired",
+      "research":"Studying Multi-Objectives Optimization algorithms",
      "student":"Master's degree student"
    },
    "presentationTitle":"Thanks for visiting !",
-    "presentationText": "Hi ! I'm Kévin Taccoen, a Computer Science student currently pursuing a Master's degree at <a href=\"\" target=\"_blank\" rel=\"noopener\">Opal Coast University</a>, France. I'm studying a lot about new technologies, and their potential to shape the Future.<br>Also often playing with Artificial Intelligence, and working on projects using my skills in full-stack development, software conception or data analysis.",
+    "presentationText": "Hi ! I'm Kévin Taccoen, a Computer Science student currently pursuing a Master's degree at <a href=\"https://www.univ-littoral.fr/en/\" target=\"_blank\" rel=\"noopener\">Opal Coast University</a>, France. I'm studying a lot about new technologies, and their potential to shape the Future.<br>Also often playing with Artificial Intelligence, and working on projects using my skills in full-stack development, software conception or data analysis.",
    "contactMe": "Are you looking to send me a message ?",
    "contactButton": "Contact",
    "features": {
@@ -20,6 +20,11 @@
        "title": "Knowledge and Skills",
        "desc": "As part of my projects, I have to master a lot of different fields, like website creation, data analysis, artificial intelligence, or software creation.",
        "buttonText": "More about skills"
+      },
+      "education":{
+        "title": "Education and certifications",
+        "desc": "I always enjoys learning and discovering new things and concepts. School gave me a lot of precious knowledge which is often useful in my works.",
+        "buttonText": "More about education"
      }
    },
    "projects":{
@@ -29,16 +34,16 @@
        "disblock":{
          "title": "Disblock",
          "desc": "Disblock is a project about a Discord bot. A large number of users want to customize their Discord servers with bots, but lacks the coding skills. Disblock is a way to assemble easily his own bot using blocks that can describe what to do, and when.",
-          "button_text": "Open the project",
+          "button_text": "Open the archive",
          "button2_text": "See on Github",
-          "date": "Since 2021"
+          "date": "From 2021 to 2025"
        },
        "portfolio":{
          "title": "Three.js personal website",
          "desc": "As I was a third year student, I was tasked to create a website about everything I had done so far. I decided to use every skill I had to build this project, making myself 3D models and animations using Blender, while three.js is used to render it. Currently, it's not up-to-date !",
          "button_text": "Open the project",
          "button2_text": "See on Github",
-          "date": "Since November 2023"
+          "date": "From November 2023 to July 2025"
        },
        "semantic_segmentation":{
          "title": "Semantic Segmentation",
@@ -54,9 +59,27 @@
        },
        "trading_ai":{
          "title": "Prices prediction AI",
-          "desc": "As part of my Master's degree studies, I am working on a research project, about stock market price prediction. This project is still ongoing, with encouraging results obtained for now.",
+          "desc": "As part of my Master's degree studies, I was working on a research project, about stock market price prediction. This project concluded with interesting results.",
          "button_text": "More about it",
          "date": "From November 2024 to May 2025"
+        },
+        "this_website":{
+          "title": "This website",
+          "desc": "A personal website is a must-have when working with Computer Science, so I created one. When people are wondering what I'm working on, or how to send me a message, they can always find here up-to-date information.",
+          "button_text": "See on Github",
+          "date": "Since February 2025"
+        },
+        "ia_assistant":{
+          "title": "Personal Assistant",
+          "desc": "This project aims to create an AI agent with tools embedded, as a personal assistant. Built using Ollama, LangGraph, ... Paused for now.",
+          "button_text": "See on Github",
+          "date": "Since June 2025"
+        },
+        "potato_research":{
+          "title": "Research project based on potatoes",
+          "desc": "Details are not yet available, but a Potatoes-related software is under active development !",
+          "button_text": "See on Github",
+          "date": "Since October 2025"
        }
      },
      "tags":{
@@ -94,5 +117,105 @@
        "desc": "When working with AI, creating a high-quality dataset for training is vital. Many operations and transformations need to be executed, which require a solid understanding of data management. Some infrasctructures also come with databases containing valuable information, that should be extracted and analysed to extract the best from it."
      }
    }
+  },
+  "education": {
+    "title": "Education and certifications",
+    "subtitle": "The steps for my learning journey",
+    "introduction": "Before reaching my current level, I had a long time learning various concepts in some nice institutions who accepted me as a student. I'm really grateful towards all of them, as I wouldn't be like I am without their help.",
+    "schools": {
+      "middle": {
+        "name": "Middle school : Ensemble Scolaire de La Salle",
+        "desc": "Middle school was were my interest for IT and computers first awaken. Back then, I had a Mathematics teacher deeply involved in the network administration who made really interesting coding introductions."
+      },
+      "high": {
+        "name": "High school : EPID",
+        "desc": "At EPID, I had lectures about IT twice a week, where I learnt the bacics of web development, Python, Mysql and some simple algorithms. This is where I really learned how to code and use a computer."
+      },
+      "bachelor": {
+        "name": "Calais IUT",
+        "desc": "As I was pretty good with computers, I headed for a Computer Science bachelor at Calais IUT. I was delighted to learn so much about this field everyday, and also got the chance to go twite to Japan for internships in research labs."
+      },
+      "master": {
+        "name": "ULCO University, Computer Science department",
+        "desc": "My current formation, and the logic next step. I'm discovering there the basics to Artificial Intelligence, data scientist things and optimizing algorithms and problem solving systems."
+      }
+    },
+    "diplomas": {
+      "junior_high_school": "Junior High School Diploma",
+      "high_school": "High School Diploma",
+      "bachelor": "Bachelor's degree ( Computer Science )",
+      "master": "Soon : Master's degree ( Computer Science )"
+    }
+  },
+  "contact": {
+    "title": "Send me a message !",
+    "subtitle": "Thanks for your interest ! If you want to contact me, the easiest way is by Email.",
+    "emails": {
+      "research": {
+        "title": "About studies or research",
+        "desc": "If you want to talk about school or research made as part of my studies, please use {user}<email>{domain}."
+      },
+      "work": {
+        "title": "Work, jobs, others",
+        "desc": "All of these can go directly here : {user}<email>{domain}"
+      }
+    }
+  },
+  "projects":{
+    "semantic_segmentation":{
+      "title": "Semantic Segmentation",
+      "subtitle": "My first internship in Japan, at Hachinohe National Institute of Technology.",
+      "content": {
+        "context": {
+          "title": "Some context before begining...",
+          "text": "The picture you can see next to this text is Hachinohe Kosen, the place where I had the chance to go for my very first research internship. I was sent there for a 3 months stay, with some other French students."
+        },
+        "semantic": {
+          "title": "Semantic Segmentation models study",
+          "text": "I installed three models on my laptop, Unet, Segnet and DeeplabV3, and trained them using the \"oxford_iiit_pet\" dataset ( from which the cat picture on this page comes from ). I searched about them and obtained various statistics and results, that I analysed and used to determine which one was the best Semantic Segmentation model back then.",
+          "table": {
+            "model": "Model",
+            "accuracy": "Accuracy",
+            "loss": "Loss",
+            "process_time": "Processing time for one frame",
+            "year": "Release year"
+          },
+          "result": "According to this table, the best model among those I tested was DeeplabV3. It was the one giving the best results according to Accuracy, but is a little slower than Unet."
+        },
+        "human_recognition": {
+          "title": "Human detection",
+          "text": "Alongside with the Semantic Segmentation, I was asked to find a way to recognize an human from a webcam stream. I chose the model YoloV5 to implement this functionality, and got some nice results."
+        }
+      }
+    },
+    "video_editor":{
+      "title": "Video Editor creation",
+      "subtitle": "My second internship in Japan, at Fukushima National Institute of Technology.",
+      "fukushima_kosen": {
+        "title": "About the place",
+        "text": "For this internship, I was accepted at Fukushima Kosen as an help for a research team. I was accompanied by some others French and Finnish students, and hosted in the school dormitory for a 3 months stay."
+      },
+      "perception": {
+        "title": "Research about the perception of temporal seriality with the naked eye",
+        "text": "One of my tasks was to help the research team by imaginating new ways to create sequences that can be easily used in this study. Sequences consisted mainly in videos of small balls falling or waterfalls.",
+        "text2": "Those experiments are filmed using a normal and a slow motion camera. The resulting files are then passed to a small program I made in order to work on the frames."
+      },
+      "software": {
+        "title": "Frames editing software",
+        "text": "I created a simple software that allowed researchers to edit quickly the experiments videos. The program was basically a GUI over ffmpeg, allowing users to alter the temporality by reversing or randomizing frames order, and recreating the edited file.",
+        "text2": "Here is an example of a frame coming from some files we worked on. Once assembled into a video file again, we were able to conduct some experiments about the perception of temporal seriality using the naked eye."
+      },
+      "data_recovery": {
+        "title": "Data recovery",
+        "text": "Unfortunately, at some point, the laptop containing a part of the research data broke, and I did by best to recover the lost files. Working tirelessly, I tried a lot of different recovery tools, until realizing the hard drive is encrypted using Microsoft's Bitlocker. This security is enabled by default on a large part of new laptops using Windows, and nobody in the team ever heard about it. Without any recovery key (not saved in Microsoft account !), the files were sadly definitively lost. This is the reason why I removed Windows from all my computers, and started using Linux daily."
+      }
+    }
+  },
+  "footer": {
+    "social": "Social networks",
+    "sitemap": "Sitemap",
+    "contact": "Contact",
+    "contact_button": "Contact",
+    "contact_text": "Want to contact me ? Let's have a talk !"
  }
 }
--- a/src/assets/localization/fr/localization.json
+++ b/src/assets/localization/fr/localization.json
@@ -1,5 +1,220 @@
 {
-    "message": {
-      "hello": "BONJOUR"
+  "home":{
+    "greeting": "Bonjour ! Je suis Kévin Taccoen !",
+    "occupation": {
+      "international":"Inspiré par l'International",
+      "research":"Étudie l'Optimisation multi-objectifs",
+      "student":"Etudiant en Master Informatique"
+    },
+    "presentationTitle":"Merci pour la visite !",
+    "presentationText": "Salut ! Je suis Kévin Taccoen, un étudiant en Master informatique au sein de l'<a href=\"https://www.univ-littoral.fr/\" target=\"_blank\" rel=\"noopener\">Université du Litoral Côte d'Opale</a>. Je m'intéresse beaucoup aux nouvelles technologies, et leur potentiel de forger l'Avenir.<br>Je fais souvent des expériences avec de l'Intelligence Artificielle, ainsi que de nombreux projets en utilisant mes compétences en développement full-stack, conception de logiciel ou analyse de données.",
+    "contactMe": "Une question ? Vous pouvez m'envoyer un message par ici !",
+    "contactButton": "Contact",
+    "features": {
+      "projects":{
+        "title": "Toujours occupé sur des projets innovants !",
+        "desc": "Que ce soit pour mes études ou sur mon temps libre, je travaille toujours sur de nouveaux projets. J'aime voir comment ces lignes de code peuvent contribuer à améliorer le quotidien, ou faire progresser la Science, et je m'attèle à toujours imaginer, créer et maintenir des choses utiles.",
+        "buttonText": "Vers les projets"
+      },
+      "skills":{
+        "title": "Compétences et capacités techniques",
+        "desc": "Dans le cadre de mes projets, je dois maîtriser tout un ensemble de technologies, comme la création de sites web, l'analyse de données, l'IA, ou la création de logiciels...",
+        "buttonText": "Technologies que j'utilise"
+      },
+      "education":{
+        "title": "Parcours d'apprentissage",
+        "desc": "J'apprécie beaucoup découvrir et comprendre de nouvelles choses et concepts. Les différentes formations que j'ai suivies m'ont apportées un savoir précieux dans le cadre de mon travail.",
+        "buttonText": "Plus sur mon parcours"
+      }
+    },
+    "projects":{
+      "title": "Projets",
+      "desc": "Je développe toujours sur quelque chose de nouveau ! Voici une liste de tous les principaux projets sur lesquels j'ai travaillé :",
+      "project":{
+        "disblock":{
+          "title": "Disblock",
+          "desc": "Disblock est un projet à la base d'un bot sur Discord. Beaucoup d'utilisateurs veulent personnaliser leur serveur, mais n'ont pas les compétences de codage. Disblock est un moyen de rapidement assembler son propre agent automatisé, en emboîtant des blocs qui décrivent que faire, et quand.",
+          "button_text": "Archive du projet",
+          "button2_text": "Voir sur GitHub",
+          "date": "De 2021 à 2025"
+        },
+        "portfolio":{
+          "title": "Portfolio Three.js",
+          "desc": "Lors de ma troisième année d'informatique, j'ai été chargé de créer un site web présentant tout ce que j'avais réalisé jusqu'ici. J'ai décidé de mobiliser l'ensemble de mes capacités, en créant moi-même les modèles 3D et animations via Blender, tout en utilisant three.js pour les afficher à l'écran. Ce n'est pas à jour de mes dernières activités !",
+          "button_text": "Site web du projet",
+          "button2_text": "Voir sur GitHub",
+          "date": "De novembre 2023 à Juillet 2025"
+        },
+        "semantic_segmentation":{
+          "title": "Segmentation sémantique",
+          "desc": "Lors de mon stage à l'Institut National de Technologie de Hachinohe, Japon, il m'a été demandé de faire quelques recherches sur la segmentation sémantique, en utilisant le jeu de données \"Oxford-IIIT Pet Dataset\", et des modèles d'IA comme SegNet, U-Net, et DeepLabV3, ce qui m'a apporté beaucoup de savoir-faire au passage.",
+          "button_text": "En savoir plus",
+          "date": "D'avril à juillet 2023"
+        },
+        "video_editor":{
+          "title": "Logiciel d'édition vidéo",
+          "desc": "Je suis allé faire un second stage au Japon, cette fois à l'Institut National de Technologie de Fukushima. J'ai accompagné l'équipe de recherche dans ses travaux sur la perception de la sérialité temporelle à l'œil nu. Mon objectif principal a été de faire un logiciel capable de faire diverses transformations sur des fichiers vidéo.",
+          "button_text": "En savoir plus",
+          "date": "D'avril à juillet 2024"
+        },
+        "trading_ai":{
+          "title": "Prédiction des cours avec l'Intelligence Artificielle",
+          "desc": "Dans le cadre de mon Master, j'ai travaillé sur un projet concernant la prédiction des prix futurs des marchés boursiers. Ce projet est maintenant terminé, avec des résultats intéressants.",
+          "button_text": "En savoir plus",
+          "date": "De novembre 2024 à mai 2025"
+        },
+        "this_website":{
+          "title": "Ce site web",
+          "desc": "Il est indispensable d'avoir un site personnel en évoluant dans le milieu de l'Informatique. Pour voir sur quoi je travaille, ou comment m'envoyer un message, il y aura toujours ici des informations à jour.",
+          "button_text": "Voir sur Github",
+          "date": "Depuis février 2025"
+        },
+        "ia_assistant":{
+          "title": "Assistant personnel",
+          "desc": "Le but de ce projet est d'avoir un moyen d'utiliser un agent IA ayant accès à de nombreux outils comme un assistant personnel. Construit en utilisant Ollama, LangGraph, ect... En pause pour le moment.",
+          "button_text": "Voir sur Github",
+          "date": "Depuis juin 2025"
+        },
+        "potato_research":{
+          "title": "Projet de recherche lié aux pommes de terres",
+          "desc": "Les détails ne sont pas encore publics, mais un logiciel lié aux pommes de terres est en cours de dévelopement !",
+          "button_text": "Voir sur Github",
+          "date": "Depuis Octobre 2025"
+        }
+      },
+      "tags":{
+        "home": "Projet personnel",
+        "school": "Dans le cadre de mes études",
+        "research": "Projet de recherche",
+        "active": "Développement actif",
+        "bugs_only": "Corrections seulement",
+        "archived": "Archivé"
+      }
+    }
+  },
+  "skills": {
+    "title": "Compétences et capacités techniques",
+    "subtitle": "A force de travailler sur différents sujets, j'ai appris à me servir de nombreuses technologies. Comme les années et les missions passent, je m'efforce à toujours en découvrir plus et de faire bon usage de mes compétences. Voici quelques exemples de technologies auxquelles j'ai déjà eu affaire :",
+    "skills":{
+      "ai":{
+        "title": "Intelligence Artificielle",
+        "desc":"L'IA est un sujet très actif en informatique, et tout en restant informé des dernières découvertes, je passe beaucoup de temps sur des projets IA, en utilisant principalement Tensorflow et des modèles de langage."
+      },
+      "web":{
+        "title": "Développement sites & applications Web",
+        "desc": "Les sites et les APIs sont des outils essentiels pour communiquer et partager de l'information entre personnes et services. Maîtriser la création et la maintenance de telles applications est essentiel dans mes travaux."
+      },
+      "low_level":{
+        "title": "Programmation bas niveau",
+        "desc": "Certaines applications et algorithmes ont besoin d'être optimisés et rapides. C'est là que les languages comme C, C++ ou Rust sont pratiques. J'écris par moment des programmes conçus pour donner des résultats rapides quand j'étudie des algorithmes."
+      },
+      "devops":{
+        "title": "DevOps et déploiement",
+        "desc": "Aussi bien qu'un site ou une application soit développée, si ce n'est pas hébergé et accessible sur Internet, c'est tout de même inutile ! Une bonne compréhension des meilleures pratiques de la mise en ligne est vitale pour créer quelque chose, de la page blanche au serveur de production."
+      },
+      "data":{
+        "title": "Analyse des données",
+        "desc": "En travaillant avec des IAs, créer un jeu de données de haute qualité pour l'entraînement est vital. Beaucoup d'opérations et de transformations ont besoin d'être éxécutées, ce qui requiert une solide compréhension de la gestion de données. Certaines infrastructures utilisent aussi des bases de données, contenant de précieuses informations, qui doivent être extraites et analysées pour en tirer le meilleur."
+      }
+    }
+  },
+  "education": {
+    "title": "Parcours d'apprentissage",
+    "subtitle": "Mon parcours d'apprentissage",
+    "introduction": "Avant d'atteindre mon niveau actuel, j'ai longtemps appris au sein de diversese institutions qui m'ont acceptées en tant qu'étudiant. Je leur en suis très reconnaissant, car je n'aurai jamais pu découvrir autant sans leur aide.",
+    "schools": {
+      "middle": {
+        "name": "Ensemble Scolaire de La Salle",
+        "desc": "Le collège a été là où j'ai découvert mon intérêt pour l'informatique. A ce moment, j'ai un eu professeur de mathématiques très impliqué dans le milieu informatique qui a fait des introductions passionnantes au développement."
+      },
+      "high": {
+        "name": "EPID",
+        "desc": "A l'EPID, j'ai eu des cours d'informatique deux fois par semaine, où j'ai appris les bases du développement web, Python, Mysql et quelques algorithmes de base. C'est là que j'ai réellement appris à coder, et à me servir de l'outil informatique."
+      },
+      "bachelor": {
+        "name": "IUT de Calais",
+        "desc": "J'ai ensuite rejoint l'IUT de Calais pour un BUT Informatique. J'étais ravis d'en découvrir autant chaque jour, et d'avoir la chance d'aller par deux fois au Japon pour des stages en labo de recherche."
+      },
+      "master": {
+        "name": "ULCO, département Informatique",
+        "desc": "La prochaine étape logique, et ma formation actuelle. J'y découvre les grandes lignes de l'Intelligence Artificielle, la gestion et analyse des données, ainsi que l'optimisation d'algorithmes et la résolution de problèmes."
+      }
+    },
+    "diplomas": {
+      "junior_high_school": "Brevet des collèges",
+      "high_school": "BAC, options Mathématiques expertes et Sciences de l'Informatique",
+      "bachelor": "BUT Informatique",
+      "master": "Prochainement : Master informatique"
+    }
+  },
+  "contact": {
+    "title": "Envoyez-moi un message !",
+    "subtitle": "Merci pour votre intérêt ! Le meilleur moyen de me contacter est par e-mail.",
+    "emails": {
+      "research": {
+        "title": "Études & Recherche",
+        "desc": "Pour tout ce qui concerne mon parcours académique ou la recherche, merci de passer par {user}<Email>{domain}."
+      },
+      "work": {
+        "title": "Pro, entreprises et autres",
+        "desc": "Toutes les demandes peuvent aller ici : {user}<Email>{domain}"
+      }
+    }
+  },
+  "projects":{
+    "semantic_segmentation":{
+      "title": "Segmentation sémantique",
+      "subtitle": "Mon premier stage au Japon, à l'Institut National de technologie d'Hachinohe.",
+      "content": {
+        "context": {
+          "title": "Un peu de contexte sur ce stage...",
+          "text": "La photo juste à côté de ce texte est le Kosen d'Hachinohe, l'endroit où j'ai eu la chance d'aller faire mon tout premier stage de recherche. J'y ai été envoyé pour un stage de 3 mois, avec d'autres étudiants Français."
+        },
+        "semantic": {
+          "title": "Étude des modèles de segmentation sémantique",
+          "text": "J'ai installé trois modèles sur mon ordinateur, Unet, Segnet et DeeplabV3, puis je les ai entraînés avec le jeu de données \"oxford_iiit_pet\" ( d'où provient l'image du chat de cette page ). J'ai étudié et testé ces modèles puis ai pu en tirer des statistiques et résultats, que j'ai analysés pour en conclure lequel était le meilleur à ce moment.",
+          "table": {
+            "model": "Modèle",
+            "accuracy": "Précision",
+            "loss": "Perte",
+            "process_time": "Temps de calcul pour une image",
+            "year": "Année"
+          },
+          "result": "Comme le montre ce tableau, le meilleur modèle parmi ceux testés était DeeplabV3. Il a eu le meilleur score de précision, bien qu'il soit un peu plus lent que Unet."
+        },
+        "human_recognition": {
+          "title": "Reconnaissance d'Humains",
+          "text": "A côté de la segmentation sémantique, il m'a été demandé de trouver un moyen de détecter un humain depuis un flux vidéo d'une caméra. J'ai choisi le modèle YoloV5 pour implémenter cette fonctionnalité, et j'ai pu obtenir quelques résultats intéréssants."
+        }
+      }
+    },
+    "video_editor":{
+      "title": "Logiciel d'édition vidéo",
+      "subtitle": "Mon deuxième stage au Japon, à l'Institut National de technologie de Fukushima.",
+      "fukushima_kosen": {
+        "title": "A propos de l'endroit",
+        "text": "Pour ce stage, j'ai été accepté au Kosen de Fukushima pour assister l'équipe de recherche locale. J'ai été accompagné par quelques étudiants Français et Finlandais, et hébergé dans le dortoir de l'école pour les 3 mois de mon séjour."
+      },
+      "perception": {
+        "title": "Recherches sur la perception de la sérialité temporelle à l'œil nu",
+        "text": "L'une de mes missions a été d'aider l'équipe de recherche à imaginer de nouveaux moyens de créer des séquences pouvant être exploitées dans cette recherche. Les séquences étaient principalement des vidéos de petites billes en chute, ou de cascade.",
+        "text2": "Ces expériences étaient filmées avec une caméra classique, et une autre à haute vitesse. Les vidéos créées étaient ensuite passées à un petit programme que j'ai conçu pour travailler sur les frames de ces fichiers."
+      },
+      "software": {
+        "title": "Logiciel d'édition des frames",
+        "text": "J'ai créé un logiciel simple permettant aux chercheurs de mofifier rapidement la temporalité des vidéos. Le programme consistait principalement en une interface graphique au-dessus de Ffmpeg, permettant aux utilisateurs de modifier la temporalité en inversant ou réorganisant aléatoirement les images des vidéos, et de réassembler ces frames en un nouveau fichier.",
+        "text2": "Voici un exemple d'image extraite de vidéos sur lesquelles nous avons travaillés. Une fois réassemblées de nouveau en fichier vidéo, nous avons pu réaliser quelques expériences sur la perception de la sérialité temporelle."
+      },
+      "data_recovery": {
+        "title": "Récupération de données",
+        "text": "Malheureusement, au bout d'un moment, l'ordinateur contenant une partie des données de recherche s'est cassé, et j'ai immédiatement fait tout mon possible pour en récupérer les données perdues. Travaillant sans relâche, j'ai essayé tout un ensemble d'outils de récupération, avant de réaliser que le disque dur était chiffré avec BitLocker, le système de chiffrement de Microsoft. Cette sécurité est activée par défaut sur un grand nombre d'ordinateurs neufs utilisant Windows, et personne dans l'équipe n'en a jamais entendu parler. Sans la clé de secours ( Non sauvegardée dans le compte Microsoft !), les fichiers ont malheureusement été définitivement perdus. C'est pour cette raison que j'ai supprimé Windows de tous mes appareils, et que j'utilise maintenant Linux au quotidien."
+      }
+    }
+  },
+  "footer": {
+    "social": "Réseaux",
+    "sitemap": "Plan du site",
+    "contact": "Contact",
+    "contact_text": "Vous souhaitez me contacter ? C'est par ici !"
  }
 }
--- a/src/assets/localization/ja/localization.json
+++ b/src/assets/localization/ja/localization.json
@@ -1,5 +1,5 @@
 {
-    "message": {
-      "hello": "こんにちは、世界"
+  "home":{
+    "greeting": "こんにちは！タコ−ン•ケビンです！"
  }
 }
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,8 +1,20 @@
@import './base.css';

-h1,h2,h3,h4,h5,p{
+h1,h2,h3,h4,h5,p,td,th{
  color: #EAEAEA;
-  /*Family Roboto or Atma ?*/
+  /*font-family: "Noto Sans JP", "Montserrat", sans-serif;*/
+}
+
+body{
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+body.fr,body.en{
+  font-family: "Montserrat", Arial, Helvetica, sans-serif;
+}
+
+body.ja{
+  font-family: "Noto Sans JP", sans-serif;
 }

 a{
@@ -28,3 +40,14 @@ a:visited{
  cursor: pointer;
  text-align: center;
 }
+
+.subtitle{
+  font-size: 1.3em;
+}
+
+#app{
+  height: 100%;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+}
--- a/src/assets/svg/arrow_down.svg
+++ b/src/assets/svg/arrow_down.svg
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="34.673023mm"
+   height="50.686279mm"
+   viewBox="0 0 34.673023 50.686279"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="arrow_down.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="1.5994523"
+     inkscape:cx="48.141481"
+     inkscape:cy="77.213933"
+     inkscape:window-width="1854"
+     inkscape:window-height="1011"
+     inkscape:window-x="66"
+     inkscape:window-y="32"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2" />
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-75.303856,-63.523312)">
+    <g
+       id="g999">
+      <rect
+         style="fill:#f9f9f9;stroke-width:0.264583"
+         id="rect788"
+         width="7.649694"
+         height="45.184273"
+         x="88.815521"
+         y="63.523312"
+         ry="2.2692552" />
+      <path
+         id="rect790"
+         style="fill:#f9f9f9;stroke-width:0.264583"
+         d="M 77.573111,91.995148 92.640366,106.11721 107.70762,91.995148 c 0.91726,-0.859718 2.26926,1.01209 2.26926,2.26926 v 3.55386 c -0.0116,0.03878 -17.336514,16.391322 -17.336514,16.391322 L 75.303856,97.818268 v -3.55386 c 0,-1.25717 1.351999,-3.128975 2.269255,-2.26926 z"
+         sodipodi:nodetypes="scsscccss" />
+    </g>
+  </g>
+</svg>
--- a/src/assets/svg/education.svg
+++ b/src/assets/svg/education.svg
@@ -0,0 +1,191 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="104.09995mm"
+   height="67.814293mm"
+   viewBox="0 0 104.09995 67.814293"
+   version="1.1"
+   id="svg5064"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="education.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview5066"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="1.2195925"
+     inkscape:cx="81.994603"
+     inkscape:cy="182.43799"
+     inkscape:window-width="1854"
+     inkscape:window-height="1011"
+     inkscape:window-x="66"
+     inkscape:window-y="32"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer17" />
+  <defs
+     id="defs5061" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer18"
+     inkscape:label="Layer 1"
+     transform="translate(24.772335,-5.7683123)">
+    <g
+       inkscape:groupmode="layer"
+       id="layer16"
+       inkscape:label="GraduationCap"
+       transform="matrix(0.38155516,0.05407025,-0.05407025,0.38155516,-133.73227,-67.513442)">
+      <rect
+         style="fill:#4c4c4c;stroke-width:0.228318"
+         id="rect2425"
+         width="76.727303"
+         height="76.727303"
+         x="405.28546"
+         y="-61.389141"
+         ry="0.43097061"
+         transform="matrix(0.81941904,0.57319494,-0.81941904,0.57319494,0,0)" />
+      <path
+         id="rect2535"
+         style="fill:#4c4c4c;stroke-width:0.177071"
+         d="m 329.47916,250.71587 52.92289,38.28674 52.9229,-38.28674 c 0.21657,-0.15667 0.4825,0.10326 0.4825,0.23153 v 26.13608 c 0,0.12827 -0.26593,0.0749 -0.4825,0.23153 0,0 -30.14569,14.59405 -52.9229,38.28674 -24.89778,-23.10732 -52.92289,-38.28674 -52.92289,-38.28674 -0.21657,-0.15667 -0.4825,-0.10326 -0.4825,-0.23153 V 250.9474 c 0,-0.12827 0.2152,-0.23153 0.4825,-0.23153 z"
+         sodipodi:nodetypes="scsssscssss" />
+      <path
+         id="rect4275"
+         style="fill:#4c4c4c;stroke-width:0.264583"
+         d="m 440.94962,248.35109 2.63265,-2.11667 c 0.18607,-0.1496 0.43097,0.19221 0.43097,0.43097 v 37.41363 c 1.53098,0.87023 1.51345,4.62464 1.38547,4.75389 -3.17159,2.87854 -3.16205,2.89051 -6.41832,0.006 -0.14316,-0.1357 0.0843,-4.25383 1.53826,-4.76024 v -35.29696 c 0,-0.23876 0.24489,-0.28137 0.43097,-0.43097 z"
+         sodipodi:nodetypes="sssccccsss" />
+    </g>
+    <g
+       inkscape:groupmode="layer"
+       id="layer17"
+       inkscape:label="Diploma"
+       transform="matrix(0.32906653,-0.04196016,0.04196016,0.32906653,-144.97306,-24.682823)">
+      <rect
+         style="fill:#fff6d5;stroke-width:0.264583"
+         id="rect5970"
+         width="159.23848"
+         height="98.414795"
+         x="487.94751"
+         y="174.68039"
+         ry="3.2035432" />
+      <rect
+         style="fill:#454837;stroke-width:0.277784"
+         id="rect7851"
+         width="122.22212"
+         height="7.4638681"
+         x="493.69971"
+         y="181.26762"
+         ry="3.2035432" />
+      <rect
+         style="fill:#536c67;stroke-width:0.1893"
+         id="rect7851-3"
+         width="107.51003"
+         height="3.9405153"
+         x="501.05573"
+         y="201.69247"
+         ry="1.6912961" />
+      <rect
+         style="fill:#939dac;stroke-width:0.168628"
+         id="rect7851-3-6"
+         width="85.311623"
+         height="3.9405153"
+         x="512.15491"
+         y="210.38097"
+         ry="1.6912961" />
+      <rect
+         style="fill:#37483e;stroke-width:0.127644"
+         id="rect7851-3-6-7"
+         width="48.881725"
+         height="3.9405153"
+         x="492.86826"
+         y="236.44052"
+         ry="1.6912961" />
+      <rect
+         style="fill:#8a916f;stroke-width:0.127644"
+         id="rect7851-3-6-7-6"
+         width="48.881725"
+         height="3.9405153"
+         x="536.98535"
+         y="261.30219"
+         ry="1.6912961" />
+      <rect
+         style="fill:#6f916f;stroke-width:0.127644"
+         id="rect7851-3-6-7-6-2"
+         width="48.881725"
+         height="3.9405153"
+         x="590.09088"
+         y="261.30219"
+         ry="1.6912961" />
+      <rect
+         style="fill:#9dac93;stroke-width:0.105245"
+         id="rect7851-3-6-7-5"
+         width="33.231369"
+         height="3.9405153"
+         x="546.35278"
+         y="236.42688"
+         ry="1.6912961" />
+      <rect
+         style="fill:#918a6f;stroke-width:0.132549"
+         id="rect7851-3-6-7-5-3"
+         width="52.710571"
+         height="3.9405153"
+         x="586.36078"
+         y="236.42688"
+         ry="1.6912961" />
+      <g
+         id="g8231"
+         inkscape:label="medaille">
+        <path
+           id="rect8198"
+           style="fill:#216778;stroke-width:0.220013"
+           d="m 624.8011,193.0331 5.67099,3.35426 -7.20474,14.16253 -1.14144,-4.609 -4.52955,1.25474 z"
+           sodipodi:nodetypes="cccccc" />
+        <path
+           id="rect8198-5"
+           style="fill:#216778;stroke-width:0.220071"
+           d="m 636.20276,192.95551 -5.674,3.35426 7.20857,14.16253 1.14204,-4.609 4.53196,1.25474 z"
+           sodipodi:nodetypes="cccccc" />
+        <circle
+           style="fill:#ffd42a;stroke-width:0.264583"
+           id="path8196"
+           cx="630.65381"
+           cy="189.82104"
+           r="7.7457604" />
+      </g>
+      <g
+         id="g8477"
+         inkscape:label="noeud">
+        <path
+           id="rect8198-5-2"
+           style="fill:#ff5555;stroke-width:0.180532"
+           d="m 511.88414,255.16587 -4.88113,2.62391 6.20126,11.0788 0.98246,-3.60544 3.89867,0.98153 z"
+           sodipodi:nodetypes="cccccc" />
+        <path
+           id="rect8198-5-2-7"
+           style="fill:#ff5555;stroke-width:0.173822"
+           d="m 508.46986,255.51709 4.70188,2.52525 -5.97353,10.66219 -0.94638,-3.46986 -3.7555,0.94462 z"
+           sodipodi:nodetypes="cccccc" />
+        <path
+           id="path8340"
+           style="fill:#ff5555;stroke-width:0.0918128"
+           d="m 506.32764,244.45652 c -4.20587,10e-6 -7.61541,3.00399 -7.6155,6.70964 -3e-5,3.70572 3.40955,6.70982 7.6155,6.70982 4.20595,0 7.61554,-3.0041 7.61551,-6.70982 -9e-5,-3.70565 -3.40964,-6.70964 -7.61551,-6.70964 z m 0,2.72956 c 3.23989,-4e-5 5.86635,1.71751 5.86635,4.7737 0,3.05619 -2.62646,5.5337 -5.86635,5.53366 -3.23982,-5e-5 -4.7012,-2.47754 -4.7012,-5.53366 0,-3.05612 1.46138,-4.77365 4.7012,-4.7737 z"
+           sodipodi:nodetypes="ssssssssss" />
+        <path
+           id="path8340-1"
+           style="fill:#ff5555;stroke-width:0.0918128"
+           d="m 513.9064,244.47979 c -4.20587,0 -7.61542,3.00398 -7.61551,6.70964 -3e-5,3.70572 3.40955,6.70982 7.61551,6.70983 4.20595,-1e-5 7.61554,-3.00411 7.6155,-6.70983 -8e-5,-3.70566 -3.40963,-6.70964 -7.6155,-6.70964 z m 0,2.72957 c 3.23989,-5e-5 4.35829,1.71751 4.35829,4.77369 0,3.05619 -1.1184,5.5337 -4.35829,5.53366 -3.23983,-4e-5 -5.86619,-2.47754 -5.86619,-5.53366 0,-3.05612 2.62637,-4.77365 5.86619,-4.77369 z"
+           sodipodi:nodetypes="ssssssssss" />
+      </g>
+    </g>
+  </g>
+</svg>
--- a/src/assets/svg/education/diploma.svg
+++ b/src/assets/svg/education/diploma.svg
@@ -0,0 +1,166 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="159.23848mm"
+   height="98.414795mm"
+   viewBox="0 0 159.23848 98.414795"
+   version="1.1"
+   id="svg2556"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="diploma.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview2558"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="0.7500982"
+     inkscape:cx="345.9547"
+     inkscape:cy="356.61997"
+     inkscape:window-width="1854"
+     inkscape:window-height="1011"
+     inkscape:window-x="66"
+     inkscape:window-y="32"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer17" />
+  <defs
+     id="defs2553" />
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-13.85463,-54.848419)">
+    <g
+       inkscape:groupmode="layer"
+       id="layer17"
+       inkscape:label="Diploma"
+       transform="translate(-474.09288,-119.83197)">
+      <rect
+         style="fill:#fff6d5;stroke-width:0.264583"
+         id="rect5970"
+         width="159.23848"
+         height="98.414795"
+         x="487.94751"
+         y="174.68039"
+         ry="3.2035432" />
+      <rect
+         style="fill:#454837;stroke-width:0.277784"
+         id="rect7851"
+         width="122.22212"
+         height="7.4638681"
+         x="493.69971"
+         y="181.26762"
+         ry="3.2035432" />
+      <rect
+         style="fill:#536c67;stroke-width:0.1893"
+         id="rect7851-3"
+         width="107.51003"
+         height="3.9405153"
+         x="501.05573"
+         y="201.69247"
+         ry="1.6912961" />
+      <rect
+         style="fill:#939dac;stroke-width:0.168628"
+         id="rect7851-3-6"
+         width="85.311623"
+         height="3.9405153"
+         x="512.15491"
+         y="210.38097"
+         ry="1.6912961" />
+      <rect
+         style="fill:#37483e;stroke-width:0.127644"
+         id="rect7851-3-6-7"
+         width="48.881725"
+         height="3.9405153"
+         x="492.86826"
+         y="236.44052"
+         ry="1.6912961" />
+      <rect
+         style="fill:#8a916f;stroke-width:0.127644"
+         id="rect7851-3-6-7-6"
+         width="48.881725"
+         height="3.9405153"
+         x="536.98535"
+         y="261.30219"
+         ry="1.6912961" />
+      <rect
+         style="fill:#6f916f;stroke-width:0.127644"
+         id="rect7851-3-6-7-6-2"
+         width="48.881725"
+         height="3.9405153"
+         x="590.09088"
+         y="261.30219"
+         ry="1.6912961" />
+      <rect
+         style="fill:#9dac93;stroke-width:0.105245"
+         id="rect7851-3-6-7-5"
+         width="33.231369"
+         height="3.9405153"
+         x="546.35278"
+         y="236.42688"
+         ry="1.6912961" />
+      <rect
+         style="fill:#918a6f;stroke-width:0.132549"
+         id="rect7851-3-6-7-5-3"
+         width="52.710571"
+         height="3.9405153"
+         x="586.36078"
+         y="236.42688"
+         ry="1.6912961" />
+      <g
+         id="g8231"
+         inkscape:label="medaille">
+        <path
+           id="rect8198"
+           style="fill:#216778;stroke-width:0.220013"
+           d="m 624.8011,193.0331 5.67099,3.35426 -7.20474,14.16253 -1.14144,-4.609 -4.52955,1.25474 z"
+           sodipodi:nodetypes="cccccc" />
+        <path
+           id="rect8198-5"
+           style="fill:#216778;stroke-width:0.220071"
+           d="m 636.20276,192.95551 -5.674,3.35426 7.20857,14.16253 1.14204,-4.609 4.53196,1.25474 z"
+           sodipodi:nodetypes="cccccc" />
+        <circle
+           style="fill:#ffd42a;stroke-width:0.264583"
+           id="path8196"
+           cx="630.65381"
+           cy="189.82104"
+           r="7.7457604" />
+      </g>
+      <g
+         id="g8477"
+         inkscape:label="noeud">
+        <path
+           id="rect8198-5-2"
+           style="fill:#ff5555;stroke-width:0.180532"
+           d="m 511.88414,255.16587 -4.88113,2.62391 6.20126,11.0788 0.98246,-3.60544 3.89867,0.98153 z"
+           sodipodi:nodetypes="cccccc" />
+        <path
+           id="rect8198-5-2-7"
+           style="fill:#ff5555;stroke-width:0.173822"
+           d="m 508.46986,255.51709 4.70188,2.52525 -5.97353,10.66219 -0.94638,-3.46986 -3.7555,0.94462 z"
+           sodipodi:nodetypes="cccccc" />
+        <path
+           id="path8340"
+           style="fill:#ff5555;stroke-width:0.0918128"
+           d="m 506.32764,244.45652 c -4.20587,10e-6 -7.61541,3.00399 -7.6155,6.70964 -3e-5,3.70572 3.40955,6.70982 7.6155,6.70982 4.20595,0 7.61554,-3.0041 7.61551,-6.70982 -9e-5,-3.70565 -3.40964,-6.70964 -7.61551,-6.70964 z m 0,2.72956 c 3.23989,-4e-5 5.86635,1.71751 5.86635,4.7737 0,3.05619 -2.62646,5.5337 -5.86635,5.53366 -3.23982,-5e-5 -4.7012,-2.47754 -4.7012,-5.53366 0,-3.05612 1.46138,-4.77365 4.7012,-4.7737 z"
+           sodipodi:nodetypes="ssssssssss" />
+        <path
+           id="path8340-1"
+           style="fill:#ff5555;stroke-width:0.0918128"
+           d="m 513.9064,244.47979 c -4.20587,0 -7.61542,3.00398 -7.61551,6.70964 -3e-5,3.70572 3.40955,6.70982 7.61551,6.70983 4.20595,-1e-5 7.61554,-3.00411 7.6155,-6.70983 -8e-5,-3.70566 -3.40963,-6.70964 -7.6155,-6.70964 z m 0,2.72957 c 3.23989,-5e-5 4.35829,1.71751 4.35829,4.77369 0,3.05619 -1.1184,5.5337 -4.35829,5.53366 -3.23983,-4e-5 -5.86619,-2.47754 -5.86619,-5.53366 0,-3.05612 2.62637,-4.77365 5.86619,-4.77369 z"
+           sodipodi:nodetypes="ssssssssss" />
+      </g>
+    </g>
+  </g>
+</svg>
--- a/src/assets/svg/language/FR_flag.svg
+++ b/src/assets/svg/language/FR_flag.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 1062.99 708.661" xmlns="http://www.w3.org/2000/svg">
+ <path d="m0 0h1063v708.66h-1063z" fill="#fff" fill-rule="evenodd"/>
+ <path d="m0 0h354.33v708.66h-354.33z" fill="#00267f" fill-rule="evenodd"/>
+ <path d="m708.66 0h354.33v708.66h-354.33z" fill="#f31830" fill-rule="evenodd"/>
+</svg>
--- a/src/assets/svg/language/JP_flag.svg
+++ b/src/assets/svg/language/JP_flag.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
+ <path d="m0 0h300v200h-300z" fill="#fff" stroke="#000"/>
+ <path d="m210 100a60 60 0 1 1 -120 0 60 60 0 1 1 120 0z" fill="#be0026"/>
+</svg>
--- a/src/assets/svg/language/UK_flag.svg
+++ b/src/assets/svg/language/UK_flag.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg enable-background="new 0 0 341.59 203.057" viewBox="0 0 341.59 203.057" xmlns="http://www.w3.org/2000/svg">
+ <path d="m0.063 0h341.47v202.17h-341.47z" fill="#fff"/>
+ <path d="m.063,12" fill="#ffffbd"/>
+ <path d="m36.323 49.445" fill="#f00"/>
+ <path d="m.063,20v56.5h96z" fill="#13135f"/>
+ <path d="m109.91 76.5h19.652l-129.5-76.5v12z" fill="#f00"/>
+ <path d="m37.916 0 109.65 67.486v-67.486z" fill="#12145b"/>
+ <path d="m341.56 182v-56h-95z" fill="#13135f"/>
+ <path d="m232.72 126h-19.652l128.5 76.125v-12.125z" fill="#f00"/>
+ <path d="m304.68 203-109.65-67.486v67.486z" fill="#12145b"/>
+ <path d="m341.56 20.513v55.987l-95-0.068z" fill="#13135f"/>
+ <path d="m195.06 76.5h22.298l124.2-76.5h-22.554z" fill="#f00"/>
+ <path d="m303.75 0-108.69 66.986v-66.986z" fill="#12145b"/>
+ <path d="m0.071 182.48v-56.5h96z" fill="#13135f"/>
+ <path d="m147.52 125.97h-22.299l-125.22 77.088h22.572z" fill="#f00"/>
+ <path d="m37.87 202.97 109.65-67.486v67.486z" fill="#12145b"/>
+ <path d="m156.72 0h28.874v203h-28.874z" fill="#f00"/>
+ <path d="m0.063 85.252h341.53v32.672h-341.53z" fill="#f00"/>
+</svg>
--- a/src/assets/svg/language/US_flag.svg
+++ b/src/assets/svg/language/US_flag.svg
@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 247 130" xmlns="http://www.w3.org/2000/svg">
+ <g fill="#bf0a30" fill-rule="evenodd" font-size="12">
+  <path d="m0 0h247v10h-247z"/>
+  <path d="m0 20h247v10h-247z"/>
+  <path d="m0 40h247v10h-247z"/>
+  <path d="m0 60h247v10h-247z"/>
+  <path d="m0 80h247v10h-247z"/>
+  <path d="m0 100h247v10h-247z"/>
+  <path d="m0 120h247v10h-247z"/>
+ </g>
+ <g fill="#fff" fill-rule="evenodd" font-size="12">
+  <path d="m0 10h247v10h-247z"/>
+  <path d="m0 30h247v10h-247z"/>
+  <path d="m0 50h247v10h-247z"/>
+  <path d="m0 70h247v10h-247z"/>
+  <path d="m0 90h247v10h-247z"/>
+  <path d="m0 110h247v10h-247z"/>
+ </g>
+ <path d="m0 0h98.8v70h-98.8z" fill="#002868" fill-rule="evenodd"/>
+ <path transform="translate(8.2333 7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z" fill="#fff" fill-rule="evenodd"/>
+ <path transform="translate(24.7,7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z" fill="#fff" fill-rule="evenodd"/>
+ <path transform="translate(41.167 7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z" fill="#fff" fill-rule="evenodd"/>
+ <path transform="translate(57.633 7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z" fill="#fff" fill-rule="evenodd"/>
+ <path transform="translate(74.1,7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z" fill="#fff" fill-rule="evenodd"/>
+ <path transform="translate(90.567 7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z" fill="#fff" fill-rule="evenodd"/>
+ <path transform="translate(16.467 14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z" fill="#fff" fill-rule="evenodd"/>
+ <path transform="translate(32.933 14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z" fill="#fff" fill-rule="evenodd"/>
+ <path transform="translate(49.4,14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z" fill="#fff" fill-rule="evenodd"/>
+ <path transform="translate(65.867 14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z" fill="#fff" fill-rule="evenodd"/>
+ <path transform="translate(82.333 14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z" fill="#fff" fill-rule="evenodd"/>
+ <g transform="translate(0,14)" fill="#fff" fill-rule="evenodd">
+  <path transform="translate(8.2333 7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
+  <path transform="translate(24.7,7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
+  <path transform="translate(41.167 7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
+  <path transform="translate(57.633 7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
+  <path transform="translate(74.1,7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
+  <path transform="translate(90.567 7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
+  <path transform="translate(16.467 14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
+  <path transform="translate(32.933 14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
+  <path transform="translate(49.4,14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
+  <path transform="translate(65.867 14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
+  <path transform="translate(82.333 14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
+ </g>
+ <g transform="translate(0,28)" fill="#fff" fill-rule="evenodd">
+  <path transform="translate(8.2333 7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
+  <path transform="translate(24.7,7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
+  <path transform="translate(41.167 7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
+  <path transform="translate(57.633 7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
+  <path transform="translate(74.1,7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
+  <path transform="translate(90.567 7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
+  <path transform="translate(16.467 14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
+  <path transform="translate(32.933 14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
+  <path transform="translate(49.4,14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
+  <path transform="translate(65.867 14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
+  <path transform="translate(82.333 14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
+ </g>
+ <g transform="translate(0,42)" fill="#fff" fill-rule="evenodd">
+  <path transform="translate(8.2333 7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
+  <path transform="translate(24.7,7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
+  <path transform="translate(41.167 7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
+  <path transform="translate(57.633 7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
+  <path transform="translate(74.1,7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
+  <path transform="translate(90.567 7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
+  <path transform="translate(16.467 14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
+  <path transform="translate(32.933 14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
+  <path transform="translate(49.4,14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
+  <path transform="translate(65.867 14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
+  <path transform="translate(82.333 14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
+ </g>
+ <path transform="translate(8.2333 63)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z" fill="#fff" fill-rule="evenodd"/>
+ <path transform="translate(24.7,63)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z" fill="#fff" fill-rule="evenodd"/>
+ <path transform="translate(41.167 63)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z" fill="#fff" fill-rule="evenodd"/>
+ <path transform="translate(57.633 63)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z" fill="#fff" fill-rule="evenodd"/>
+ <path transform="translate(74.1,63)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z" fill="#fff" fill-rule="evenodd"/>
+ <path transform="translate(90.567 63)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z" fill="#fff" fill-rule="evenodd"/>
+</svg>
--- a/src/assets/svg/music.svg
+++ b/src/assets/svg/music.svg
@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="90.607475mm"
+   height="102.22284mm"
+   viewBox="0 0 90.607475 102.22284"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="music.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="0.63865954"
+     inkscape:cx="-120.56502"
+     inkscape:cy="204.33422"
+     inkscape:window-width="1854"
+     inkscape:window-height="1011"
+     inkscape:window-x="66"
+     inkscape:window-y="32"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2" />
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-39.87485,-57.044674)">
+    <path
+       id="path788"
+       style="fill:#3771c8;stroke-width:0.195141"
+       d="m 78.948269,129.73358 c -3.465112,7.07483 -8.711062,15.36494 -21.723973,15.36494 -13.012911,0 -17.349444,-6.00237 -17.349446,-15.36494 2e-6,-9.36257 4.336535,-14.30661 17.349446,-14.30661 6.506456,0 10.558968,-0.74837 14.822833,2.31942 1.065969,0.76695 7.12088,-29.869385 1.429436,-58.586696 -0.337768,-1.704276 4.926253,-2.062253 5.211917,-0.344745 4.742491,28.513406 2.00881,59.255881 0.259791,70.918631 -10e-7,0 -4e-6,0 -4e-6,0 z"
+       sodipodi:nodetypes="sssssssss" />
+    <path
+       id="path788-7"
+       style="fill:#3771c8;stroke-width:0.195141"
+       d="m 126.9141,143.90257 c -3.02067,8.32474 -5.53606,15.36494 -18.54897,15.36494 -13.012914,0 -17.349447,-6.00237 -17.349449,-15.36494 2e-6,-9.36257 4.336535,-14.30661 17.349449,-14.30661 6.50646,0 10.34323,0.1641 14.60709,3.23189 1.06597,0.76695 4.16162,-38.190188 -1.52982,-66.907499 -0.33777,-1.704276 4.92625,-2.062253 5.21192,-0.344745 4.74249,28.513406 5.35944,60.579124 0.25979,78.326964 0,1e-5 -10e-6,0 -10e-6,0 z"
+       sodipodi:nodetypes="sssssssss" />
+    <path
+       id="rect1127"
+       style="fill:#3771c8;stroke-width:0.270264"
+       d="m 75.90309,57.058875 c 0,0 29.15884,11.305229 47.93163,7.540315 0.91772,-0.184049 1.96695,1.218314 1.96695,2.731644 v 1.14875 c 0,1.51333 -0.87883,2.650438 -1.96695,2.731643 -22.33567,1.666882 -47.93163,-7.540315 -47.93163,-7.540315 -1.082769,-0.170335 -1.966956,-1.218314 -1.966956,-2.731644 v -1.14875 c 0,-1.51333 0.884187,-2.901978 1.966956,-2.731643 z"
+       sodipodi:nodetypes="sssssssss" />
+    <path
+       id="rect1127-6"
+       style="fill:#3771c8;stroke-width:0.275359"
+       d="m 78.250172,74.132736 c 0,0 28.263098,12.107473 46.459198,8.075392 0.88952,-0.197109 1.90653,1.304768 1.90653,2.925487 v 1.230268 c 0,1.620719 -0.85184,2.83852 -1.90653,2.925487 C 103.05984,91.074537 78.250172,81.213977 78.250172,81.213977 77.200666,81.031555 76.34364,79.909209 76.34364,78.28849 v -1.230268 c 0,-1.620719 0.857026,-3.107908 1.906532,-2.925486 z"
+       sodipodi:nodetypes="sssssssss" />
+  </g>
+</svg>
--- a/src/assets/svg/props.svg
+++ b/src/assets/svg/props.svg
@@ -25,15 +25,15 @@
     inkscape:deskcolor="#d1d1d1"
     inkscape:document-units="mm"
     showgrid="false"
-     inkscape:zoom="0.55770161"
-     inkscape:cx="575.57661"
-     inkscape:cy="639.23072"
+     inkscape:zoom="0.64006495"
+     inkscape:cx="2371.6343"
+     inkscape:cy="692.89843"
     inkscape:window-width="1854"
     inkscape:window-height="1011"
     inkscape:window-x="66"
     inkscape:window-y="32"
     inkscape:window-maximized="1"
-     inkscape:current-layer="layer11" /><defs
+     inkscape:current-layer="layer17" /><defs
     id="defs2"><linearGradient
       inkscape:collect="always"
       id="linearGradient2391"><stop
@@ -6190,4 +6190,123 @@
       stroke="#1a171b"
       stroke-width="6.1744"
       id="path4121"
-       inkscape:label="path4121" /></g></svg>
+       inkscape:label="path4121" /></g><g
+     inkscape:groupmode="layer"
+     id="layer16"
+     inkscape:label="GraduationCap"
+     sodipodi:insensitive="true"><rect
+       style="fill:#4c4c4c;stroke-width:0.228318"
+       id="rect2425"
+       width="76.727303"
+       height="76.727303"
+       x="405.28546"
+       y="-61.389141"
+       ry="0.43097061"
+       transform="matrix(0.81941904,0.57319494,-0.81941904,0.57319494,0,0)" /><path
+       id="rect2535"
+       style="fill:#4c4c4c;stroke-width:0.177071"
+       d="m 329.47916,250.71587 52.92289,38.28674 52.9229,-38.28674 c 0.21657,-0.15667 0.4825,0.10326 0.4825,0.23153 v 26.13608 c 0,0.12827 -0.26593,0.0749 -0.4825,0.23153 0,0 -30.14569,14.59405 -52.9229,38.28674 -24.89778,-23.10732 -52.92289,-38.28674 -52.92289,-38.28674 -0.21657,-0.15667 -0.4825,-0.10326 -0.4825,-0.23153 V 250.9474 c 0,-0.12827 0.2152,-0.23153 0.4825,-0.23153 z"
+       sodipodi:nodetypes="scsssscssss" /><path
+       id="rect4275"
+       style="fill:#4c4c4c;stroke-width:0.264583"
+       d="m 440.94962,248.35109 2.63265,-2.11667 c 0.18607,-0.1496 0.43097,0.19221 0.43097,0.43097 v 37.41363 c 1.53098,0.87023 1.51345,4.62464 1.38547,4.75389 -3.17159,2.87854 -3.16205,2.89051 -6.41832,0.006 -0.14316,-0.1357 0.0843,-4.25383 1.53826,-4.76024 v -35.29696 c 0,-0.23876 0.24489,-0.28137 0.43097,-0.43097 z"
+       sodipodi:nodetypes="sssccccsss" /></g><g
+     inkscape:groupmode="layer"
+     id="layer17"
+     inkscape:label="Diploma"><rect
+       style="fill:#fff6d5;stroke-width:0.264583"
+       id="rect5970"
+       width="159.23848"
+       height="98.414795"
+       x="487.94751"
+       y="174.68039"
+       ry="3.2035432" /><rect
+       style="fill:#454837;stroke-width:0.277784"
+       id="rect7851"
+       width="122.22212"
+       height="7.4638681"
+       x="493.69971"
+       y="181.26762"
+       ry="3.2035432" /><rect
+       style="fill:#536c67;stroke-width:0.1893"
+       id="rect7851-3"
+       width="107.51003"
+       height="3.9405153"
+       x="501.05573"
+       y="201.69247"
+       ry="1.6912961" /><rect
+       style="fill:#939dac;stroke-width:0.168628"
+       id="rect7851-3-6"
+       width="85.311623"
+       height="3.9405153"
+       x="512.15491"
+       y="210.38097"
+       ry="1.6912961" /><rect
+       style="fill:#37483e;stroke-width:0.127644"
+       id="rect7851-3-6-7"
+       width="48.881725"
+       height="3.9405153"
+       x="492.86826"
+       y="236.44052"
+       ry="1.6912961" /><rect
+       style="fill:#8a916f;stroke-width:0.127644"
+       id="rect7851-3-6-7-6"
+       width="48.881725"
+       height="3.9405153"
+       x="536.98535"
+       y="261.30219"
+       ry="1.6912961" /><rect
+       style="fill:#6f916f;stroke-width:0.127644"
+       id="rect7851-3-6-7-6-2"
+       width="48.881725"
+       height="3.9405153"
+       x="590.09088"
+       y="261.30219"
+       ry="1.6912961" /><rect
+       style="fill:#9dac93;stroke-width:0.105245"
+       id="rect7851-3-6-7-5"
+       width="33.231369"
+       height="3.9405153"
+       x="546.35278"
+       y="236.42688"
+       ry="1.6912961" /><rect
+       style="fill:#918a6f;stroke-width:0.132549"
+       id="rect7851-3-6-7-5-3"
+       width="52.710571"
+       height="3.9405153"
+       x="586.36078"
+       y="236.42688"
+       ry="1.6912961" /><g
+       id="g8231"
+       inkscape:label="medaille"><path
+         id="rect8198"
+         style="fill:#216778;stroke-width:0.220013"
+         d="m 624.8011,193.0331 5.67099,3.35426 -7.20474,14.16253 -1.14144,-4.609 -4.52955,1.25474 z"
+         sodipodi:nodetypes="cccccc" /><path
+         id="rect8198-5"
+         style="fill:#216778;stroke-width:0.220071"
+         d="m 636.20276,192.95551 -5.674,3.35426 7.20857,14.16253 1.14204,-4.609 4.53196,1.25474 z"
+         sodipodi:nodetypes="cccccc" /><circle
+         style="fill:#ffd42a;stroke-width:0.264583"
+         id="path8196"
+         cx="630.65381"
+         cy="189.82104"
+         r="7.7457604" /></g><g
+       id="g8477"
+       inkscape:label="noeud"><path
+         id="rect8198-5-2"
+         style="fill:#ff5555;stroke-width:0.180532"
+         d="m 511.88414,255.16587 -4.88113,2.62391 6.20126,11.0788 0.98246,-3.60544 3.89867,0.98153 z"
+         sodipodi:nodetypes="cccccc" /><path
+         id="rect8198-5-2-7"
+         style="fill:#ff5555;stroke-width:0.173822"
+         d="m 508.46986,255.51709 4.70188,2.52525 -5.97353,10.66219 -0.94638,-3.46986 -3.7555,0.94462 z"
+         sodipodi:nodetypes="cccccc" /><path
+         id="path8340"
+         style="fill:#ff5555;stroke-width:0.0918128"
+         d="m 506.32764,244.45652 c -4.20587,10e-6 -7.61541,3.00399 -7.6155,6.70964 -3e-5,3.70572 3.40955,6.70982 7.6155,6.70982 4.20595,0 7.61554,-3.0041 7.61551,-6.70982 -9e-5,-3.70565 -3.40964,-6.70964 -7.61551,-6.70964 z m 0,2.72956 c 3.23989,-4e-5 5.86635,1.71751 5.86635,4.7737 0,3.05619 -2.62646,5.5337 -5.86635,5.53366 -3.23982,-5e-5 -4.7012,-2.47754 -4.7012,-5.53366 0,-3.05612 1.46138,-4.77365 4.7012,-4.7737 z"
+         sodipodi:nodetypes="ssssssssss" /><path
+         id="path8340-1"
+         style="fill:#ff5555;stroke-width:0.0918128"
+         d="m 513.9064,244.47979 c -4.20587,0 -7.61542,3.00398 -7.61551,6.70964 -3e-5,3.70572 3.40955,6.70982 7.61551,6.70983 4.20595,-1e-5 7.61554,-3.00411 7.6155,-6.70983 -8e-5,-3.70566 -3.40963,-6.70964 -7.6155,-6.70964 z m 0,2.72957 c 3.23989,-5e-5 4.35829,1.71751 4.35829,4.77369 0,3.05619 -1.1184,5.5337 -4.35829,5.53366 -3.23983,-4e-5 -5.86619,-2.47754 -5.86619,-5.53366 0,-3.05612 2.62637,-4.77365 5.86619,-4.77369 z"
+         sodipodi:nodetypes="ssssssssss" /></g></g></svg>
--- a/src/components/doubleRowHolder.vue
+++ b/src/components/doubleRowHolder.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="doubleRowHolder">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style scoped>
+    .doubleRowHolder{
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 20px;
+    }
+    .doubleRowHolder > *{
+        min-width: 150px;
+        flex-basis: 45%;
+        flex: 1;
+        max-width: 49%;
+    }
+</style>
--- a/src/components/education/diploma.vue
+++ b/src/components/education/diploma.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="line">
+    <p>
+        <span><img class="diploma_svg" :src="diplomaSvg"/></span>
+        {{ text }}</p>
+  </div>
+</template>
+
+<script setup>
+    defineProps({
+        text:{
+            type:String,
+            required:true
+        }
+    });
+
+    import diplomaSvg from "@/assets/svg/education/diploma.svg";
+</script>
+
+<style scoped>
+    .line{
+        border-bottom: 2px solid white;
+    }
+    .diploma_svg{
+        width: 64px;
+    }
+    p{
+        color: white;
+        position: relative;
+        text-align: center;
+        justify-content: center;
+        font-size: 1.4em;
+        margin-bottom: 10px;
+    }
+</style>
--- a/src/components/education/schoolDisplay.vue
+++ b/src/components/education/schoolDisplay.vue
@@ -0,0 +1,88 @@
+<template>
+    <div class="school_display">
+        <div class="school_picture">
+            <img :src="img"/>
+        </div>
+
+        <div class="school_info">
+            <p class="school_name">{{ name }}</p>
+            <p class="school_about">{{ desc }}</p>
+            <a :href="link" v-if="link!=undefined" target="__blank"><button class="button">Website</button></a>
+        </div>
+    </div>
+</template>
+
+<script setup>
+    defineProps({
+        name:{
+            type:String,
+            required:true
+        },
+        desc:{
+            type:String,
+            required:true
+        },
+        img:{
+            type:String,
+            required:true
+        },
+        link:{
+            type:String,
+            required:false
+        }
+    })
+</script>
+
+<style scoped>
+    .school_display{
+        width: 100%; /*Should be in a <article> covering 80% of vw*/
+        max-width: 1000px;
+        background-color: rgb(61, 61, 61);
+        margin: auto;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        /*align-items: center;*/
+        justify-content: center;
+        border-radius: 8px;
+    }
+
+    .school_picture{
+        width: fit-content;
+        height: fit-content;
+        flex: 1 1 30%;
+        margin: 15px;
+        overflow: hidden;
+    }
+    .school_picture img{
+        width: 100%;
+    }
+
+    .school_info{
+        height: 80%;
+        width: 60%;
+        margin-left: 10px;
+        margin-right: 10px;
+        display: flex;
+        flex-direction: column;
+    }
+    .school_name{
+        font-size: 1.5em;
+        margin-top: 15px;
+        margin-bottom: 5px;
+    }
+    .school_about{
+        margin: 0;
+    }
+    .school_info a{
+        width: 150px;
+        margin-top: 15px;
+        margin-block: 15px;
+    }
+    .school_info button{
+        background-color: rgb(51, 143, 230);
+        font-size: 1.1em;
+        width: 100%;
+        color:black;
+    }
+</style>
--- a/src/components/footer.vue
+++ b/src/components/footer.vue
@@ -3,15 +3,15 @@
    <div id="footer_content">

      <div id="footer_social_networks">
-        <h1>Social networks</h1>
+        <h1>{{$t("footer.social")}}</h1>

        <social v-for="(e,i) in networks" :key="i" :img="e.img" 
          :routerLink="e.routerLink" :link="e.link" class="footer_social_network_item" />

      </div>
      
-      <nav id="footer_content_links">
-        <h1>Sitemap</h1>
+      <!--<nav id="footer_content_links">
+        <h1>{{$t("footer.sitemap")}}</h1>

        <div class="footer_links_box">
          <h2 class="footer_links_box_title">Projects</h2>
@@ -22,43 +22,74 @@
          </ul>
        </div>

-      </nav> <!-- Footer content links -->
+      </nav>--> <!-- Footer content links -->

      <div id="footer_contact_div">
-        <h1>Contact</h1>
-        <p>Want to contact me ? Let's have a talk !</p>
-        <div id="footer_contact_button" class="button">Contact</div>
+        <h1>{{$t("footer.contact")}}</h1>
+        <p>{{$t("footer.contact_text")}}</p>
+        <router-link :to="{ name: 'contact'}" id="footer_contact_button_link">
+          <div id="footer_contact_button" class="button">{{$t("footer.contact_button")}}</div>
+        </router-link>
      </div>

+      <div id="footer_right_div">
        <div id="footer_picture">
-        <img src="https://picsum.photos/50/50">
+          <img :src="meImg">
+        </div>
+        <div id="language_selection_div">
+          <img :src="frFlagSvg" @click="changeLanguage('fr')"/>
+          <img :src="ukFlagSvg" @click="changeLanguage('en')"/>
+          <!--<img :src="usFlagSvg" @click="changeLanguage('en')"/>
+          <img :src="jpFlagSvg" @click="changeLanguage('ja')"/>-->
+        </div>
      </div>

    </div> <!-- Footer content -->
-    <p id="footer_little_text">&lt;/&gt; with &lt;3 by Kévin. Copyright...</p>
+    <div id="footer_bottom"><!-- Footer bottom -->
+      <p id="footer_little_text">&lt;/&gt; with &lt;3 myself.<br>© 2025 Kévin Taccoen. All rights reserved.</p>
+      <music id="music_button"/>
+    </div>
  </footer>
 </template>

 <script setup>
+  import { RouterLink } from 'vue-router';
+
  import social from './home/libs/social.vue';
+  import music from './footer/music.vue';
+
+  import meImg from '@/assets/img/me/full.png'

  import mailSvg from '@/assets/img/mail.svg';
  import lineImg from '@/assets/img/line.png';
  import githubSvg from '@/assets/img/github.svg';

+  import frFlagSvg from '@/assets/svg/language/FR_flag.svg';
+  import jpFlagSvg from '@/assets/svg/language/JP_flag.svg';
+  import ukFlagSvg from '@/assets/svg/language/UK_flag.svg';
+  import usFlagSvg from '@/assets/svg/language/US_flag.svg';
+
+  import {useI18n} from 'vue-i18n';
+  const i18n = useI18n();
+
  const networks = [{
    img:githubSvg,
    routerLink:false,
-    link:"#"
-  },{
+    link:"https://github.com/LJ5O"
+  },/*{
    img:lineImg,
    routerLink:false,
    link:"#"
-  },{
+  },*/{
    img:mailSvg,
    routerLink:true,
-    link:"#"
+    link:"contact"
  }];
+
+  const changeLanguage = (lang)=>{
+    document.cookie = "localeCookie="+lang;
+    location.reload(); // So everything can reload with the new cookie, and a new display language
+  }
 </script>

 <style scoped>
@@ -139,7 +170,7 @@
    }

    #footer_contact_div{
-        width: 15%;
+        width: 16%;
        min-width: 160px;
    }
    #footer_contact_div h1{
@@ -152,26 +183,64 @@
        margin-bottom: 12px;
        text-align: center;
    }
-    #footer_contact_button{
-        background-color: rgb(65, 185, 61);
-        font-size: 1.1em;
+    #footer_contact_button_link{
+      display: block;
      width: 50%;
      margin: auto;
    }
+    #footer_contact_button{
+        background-color: rgb(65, 185, 61);
+        font-size: 1.1em;
+        width: 100%;
+        color:black;
+    }
+    #footer_right_div{
+        width: fit-content;
+        min-width: 100px;
+        min-height: 100px;
+        margin-left: auto;
+        display: flex;
+        flex-direction: row; /* Change here to restore row of flags under the picture */
+        justify-content: center;
+        gap: 20px;
+    }
+    #footer_picture{
+      text-align: center;
+    }
+    #footer_picture > img{
+        /*height: 100px;*/
+        width: 100px;
+    }
+    #language_selection_div{
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      /*min-width: fit-content;*/
+      width: 120px;/* Change here to restore row of flags under the picture */
+      gap: 7px;
+      max-height: 100px;/* Change here to restore row of flags under the picture */
+      align-items: center;
+    }
+    #language_selection_div img{
+      width: 50px;
+      cursor: pointer;
+    }

+    #footer_bottom{
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      width: 100%;
+      justify-content: space-between;
+      align-items: flex-end;
+    }
    #footer_little_text{
        font-size: 0.8em;
        margin: 0;
        margin-left: 20px;
    }
-    #footer_picture{
-        width: 100px;
-        height: 100px;
-        margin-left: auto;
-        border: 2px green dotted;
-    }
-    #footer_picture img{
-        width: 100%;
-        height: 100%;
+    #music_button{
+      margin-right: 15px;
+      margin-bottom: 5px;
    }
 </style>
--- a/src/components/footer/music.vue
+++ b/src/components/footer/music.vue
@@ -0,0 +1,41 @@
+<template>
+  <img :src="musicSvg" @click="open_music"/>
+</template>
+
+<script setup>
+    import musicSvg from "@/assets/svg/music.svg";
+
+    const musics = [ // This is just a list of nice musics I listened at least once while working
+        "https://gensokyoradio.net/", // Will updated from times to times to remove deleted songs or add some new ones
+        "https://musicforprogramming.net/",
+        "https://youtu.be/KPTALvwccME",
+        "https://www.youtube.com/watch?v=I-FqKYGK5_M",
+        "https://www.youtube.com/watch?v=YUUFtUjiblk",
+        //"https://www.youtube.com/watch?v=wEwnEeq23SY",
+        "https://youtu.be/s28KGdOVaZ0",
+        "https://youtu.be/esofirhSD-o",
+        "https://youtu.be/5lrseDtxX_E",
+        "https://www.youtube.com/watch?v=dQw4w9WgXcQ", // Never gonna give you up :]
+        "https://youtu.be/5-sfG8BV8wU",
+        "https://youtu.be/rarpN863WlE",
+        "https://youtu.be/VA7rto4XuV0",
+        "https://youtu.be/d1d6vPTwoKU",
+        "https://www.youtube.com/watch?v=ibvGROS0LwY",
+        "https://www.youtube.com/playlist?list=PL8DD873BF6A3E56E5",
+        "https://www.youtube.com/watch?v=8yISocSYXvc"
+
+    ];
+
+    const open_music = ()=>{
+        const link = musics[Math.floor(Math.random() * musics.length)];
+        window.open(link, '_blank').focus();
+    }
+</script>
+
+<style scoped>
+    img{
+        width: 30px;
+        height: 30px;
+        cursor: pointer;
+    }
+</style>
--- a/src/components/header.vue
+++ b/src/components/header.vue
@@ -3,7 +3,7 @@
    <div id="header_content">
        <RouterLink to="/">
            <div id="header_picture">
-                <img src="https://picsum.photos/50/50"/>
+                <img :src="meIcon"/>
            </div>
        </RouterLink>
    </div>
@@ -12,6 +12,7 @@

 <script setup>
    import { RouterLink } from 'vue-router';
+    import meIcon from '@/assets/img/me/icon.png';
 </script>

 <style scoped>
--- a/src/components/home/dynamicOccupation.vue
+++ b/src/components/home/dynamicOccupation.vue
@@ -1,5 +1,5 @@
 <template>
-  <h2>{{ displayedWorld }}</h2>
+  <h2>{{ displayedWorld }}<span id="cursor"/></h2>
 </template>

 <script setup>
@@ -53,12 +53,20 @@
 <style scoped>

    h2{
-        height: 1.5em;
+        height: fit-content;
        font-size: 1.5em;
        margin-top: 10px;
        margin-bottom: 5px;
        width: fit-content;
+        /*min-height: 3em;*/
+    }
+    #cursor{
        border-right: 2px solid #EAEAEA;
+        animation: blink 1s step-end infinite;
+    }
+
+    @keyframes blink {
+    50%{opacity: 0;}
    }

 </style>
--- a/src/components/home/featuresDisplay.vue
+++ b/src/components/home/featuresDisplay.vue
@@ -18,6 +18,7 @@

    import projectsSvg from '@/assets/svg/projets.svg';
    import skillsSvg from '@/assets/svg/skills.svg'
+    import educationSvg from '@/assets/svg/education.svg'

    const features = [{
        title: i18n.t("home.features.projects.title"),
@@ -31,6 +32,12 @@
        buttonText: i18n.t("home.features.skills.buttonText"),
        picture: skillsSvg,
        link: "skills"
+    },{
+        title: i18n.t("home.features.education.title"),
+        desc: i18n.t("home.features.education.desc"),
+        buttonText: i18n.t("home.features.education.buttonText"),
+        picture: educationSvg,
+        link: "education"
    }];
 </script>

--- a/src/components/home/intersection.vue
+++ b/src/components/home/intersection.vue
@@ -1,15 +1,17 @@
 <template>
  <div class="intersection_div">
-      <div class="intersection_content test">
-        <h2 class="test">{{ props.text }}</h2>
-        <a :href="props.buttonLink"><div class="button intersection_button_div test">
+      <div class="intersection_content">
+        <h2 class="">{{ props.text }}</h2>
+        <RouterLink :to="buttonLink" @click="goToTop"><div class="button intersection_button_div">
            <p>{{buttonText}}</p>
-        </div></a>
+        </div></RouterLink>
      </div>
    </div>
 </template>

 <script setup>
+import { RouterLink } from 'vue-router';
+
 const props = defineProps({
        text:{
            type: String,
@@ -24,6 +26,10 @@ const props = defineProps({
            required: true
        }
    });
+
+    function goToTop(){
+        window.scrollTo(0, 0);
+    }
 </script>

 <style scoped>
--- a/src/components/home/libs/social.vue
+++ b/src/components/home/libs/social.vue
@@ -1,6 +1,6 @@
 <template>
    <div class="network">
-        <RouterLink v-if="routerLink" :to="link">
+        <RouterLink v-if="routerLink" :to="{name:link}">
            <img :src="img">
        </RouterLink>
        <a v-else :href="link" target="_blank">
--- a/src/components/home/projects.vue
+++ b/src/components/home/projects.vue
@@ -20,7 +20,8 @@
                <article>
                    <p>{{ e.desc }}</p>
                </article>
-                <a :href="e.buttonLink" target="_blank" v-if="e.buttonLink"><button class="button project_button">{{ e.buttonText }}</button></a>
+                <a :href="e.buttonLink" target="_blank" v-if="e.buttonLink && !e.localButton"><button class="button project_button">{{ e.buttonText }}</button></a>
+                <RouterLink :to="{name:e.buttonLink}" v-if="e.buttonLink && e.localButton" @click="goToTop"><button class="button project_button">{{ e.buttonText }}</button></RouterLink>
                <a :href="e.button2Link" target="_blank" v-if="e.button2Link"><button class="button project_button_secondary">{{ e.button2Text }}</button></a>
            </div>
            <p v-if="e.date" class="project_date">{{ e.date }}</p>
@@ -31,13 +32,17 @@
 </template>

 <script setup>
+    import { RouterLink } from 'vue-router';
    import projectTag from './libs/projectTag.vue';

    import disblockSvg from "@/assets/svg/projects/disblock.svg";
    import portfolioImg from "@/assets/img/portfolio.png";
    import semanticSegmentationImg from '@/assets/img/semantic_segmentation.png';
-    import videoEditorSegmentationImg from '@/assets/img/video_editor.png';
+    import videoEditorImg from '@/assets/img/video_sample.png';
    import tradingAiImg from '@/assets/img/trading_ai.png';
+    import thisWebsiteImg from '@/assets/img/this_website.png';
+    import assistantImg from '@/assets/img/assistant_new_talk.png';
+    import potatoImg from '@/assets/img/potato.png';

    import {useI18n} from 'vue-i18n';
    const i18n = useI18n();
@@ -56,12 +61,13 @@
        title: i18n.t("home.projects.project.disblock.title"),
        desc:i18n.t("home.projects.project.disblock.desc"),
        buttonText:i18n.t("home.projects.project.disblock.button_text"),
-        buttonLink:"https://disblock.xyz",
-        button2Text:i18n.t("home.projects.project.disblock.button2_text"),
+        buttonLink:"https://web.archive.org/web/20250403090231/https://disblock.xyz/",
+        localButton:false,
+        button2Text:i18n.t("home.projects.project.disblock.button2_text"), // button2Text => buttonText to change the color.
        button2Link:"https://github.com/Disblock/WebApp",
        tags:[
            {title:i18n.t("home.projects.tags.home"), colour:tagsColours.home},
-            {title:i18n.t("home.projects.tags.bugs_only"), colour:tagsColours.bugs_only}
+            {title:i18n.t("home.projects.tags.archived"), colour:tagsColours.archived}
        ],
        date: i18n.t("home.projects.project.disblock.date")
    },{
@@ -70,51 +76,96 @@
        desc:i18n.t("home.projects.project.portfolio.desc"),
        buttonText:i18n.t("home.projects.project.portfolio.button_text"),
        buttonLink:"https://portfolio.taccoen.dev/",
+        localButton:false,
        button2Text:i18n.t("home.projects.project.portfolio.button2_text"),
        button2Link:"https://github.com/LJ5O/portfolio",
        tags:[
            {title:i18n.t("home.projects.tags.home"), colour:tagsColours.home},
            {title:i18n.t("home.projects.tags.school"), colour:tagsColours.school},
-            {title:i18n.t("home.projects.tags.bugs_only"), colour:tagsColours.bugs_only}
+            {title:i18n.t("home.projects.tags.archived"), colour:tagsColours.archived}
        ],
        date: i18n.t("home.projects.project.portfolio.date")
+    },{
+        picture: thisWebsiteImg,
+        title: i18n.t("home.projects.project.this_website.title"),
+        desc:i18n.t("home.projects.project.this_website.desc"),
+        buttonText:i18n.t("home.projects.project.this_website.button_text"),
+        buttonLink:"https://github.com/LJ5O/website",
+        localButton:false,
+        tags:[
+            {title:i18n.t("home.projects.tags.active"), colour:tagsColours.active},
+            {title:i18n.t("home.projects.tags.home"), colour:tagsColours.home}
+        ],
+        date: i18n.t("home.projects.project.this_website.date")
    },{
        picture: tradingAiImg,
        title: i18n.t("home.projects.project.trading_ai.title"),
        desc:i18n.t("home.projects.project.trading_ai.desc"),
        buttonText:i18n.t("home.projects.project.trading_ai.button_text"),
+        localButton:false,
        //buttonLink:"#",
        tags:[
-            {title:i18n.t("home.projects.tags.active"), colour:tagsColours.active},
+            {title:i18n.t("home.projects.tags.archived"), colour:tagsColours.archived},
            {title:i18n.t("home.projects.tags.research"), colour:tagsColours.research},
            {title:i18n.t("home.projects.tags.school"), colour:tagsColours.school}
        ],
        date: i18n.t("home.projects.project.trading_ai.date")
    },{
-        picture: semanticSegmentationImg,
-        title: i18n.t("home.projects.project.semantic_segmentation.title"),
-        desc:i18n.t("home.projects.project.semantic_segmentation.desc"),
-        buttonText:i18n.t("home.projects.project.semantic_segmentation.button_text"),
-        buttonLink:"#",
+        picture: potatoImg,
+        title: i18n.t("home.projects.project.potato_research.title"),
+        desc:i18n.t("home.projects.project.potato_research.desc"),
+        //buttonText:i18n.t("home.projects.project.potato_research.button_text"),
+        //buttonLink:"https://github.com/LJ5O/", // Todo
+        localButton:false,
        tags:[
+            {title:i18n.t("home.projects.tags.active"), colour:tagsColours.active},
            {title:i18n.t("home.projects.tags.research"), colour:tagsColours.research},
-            {title:i18n.t("home.projects.tags.school"), colour:tagsColours.school},
-            {title:i18n.t("home.projects.tags.archived"), colour:tagsColours.archived}
+            {title:i18n.t("home.projects.tags.school"), colour:tagsColours.school}
        ],
-        date: i18n.t("home.projects.project.semantic_segmentation.date")
+        date: i18n.t("home.projects.project.potato_research.date")
    },{
-        picture: videoEditorSegmentationImg,
+        picture: assistantImg,
+        title: i18n.t("home.projects.project.ia_assistant.title"),
+        desc:i18n.t("home.projects.project.ia_assistant.desc"),
+        buttonText:i18n.t("home.projects.project.ia_assistant.button_text"),
+        buttonLink:"https://github.com/LJ5O/Assistant",
+        localButton:false,
+        tags:[
+            //{title:i18n.t("home.projects.tags.active"), colour:tagsColours.active},
+            {title:i18n.t("home.projects.tags.home"), colour:tagsColours.home}
+        ],
+        date: i18n.t("home.projects.project.ia_assistant.date")
+    },{
+        picture: videoEditorImg,
        title: i18n.t("home.projects.project.video_editor.title"),
        desc:i18n.t("home.projects.project.video_editor.desc"),
        buttonText:i18n.t("home.projects.project.video_editor.button_text"),
-        buttonLink:"#",
+        buttonLink:"video_editor",
+        localButton:true,
        tags:[
            {title:i18n.t("home.projects.tags.research"), colour:tagsColours.research},
            {title:i18n.t("home.projects.tags.school"), colour:tagsColours.school},
            {title:i18n.t("home.projects.tags.archived"), colour:tagsColours.archived}
        ],
        date: i18n.t("home.projects.project.video_editor.date")
+    },{
+        picture: semanticSegmentationImg,
+        title: i18n.t("home.projects.project.semantic_segmentation.title"),
+        desc:i18n.t("home.projects.project.semantic_segmentation.desc"),
+        buttonText:i18n.t("home.projects.project.semantic_segmentation.button_text"),
+        buttonLink:"semantic_segmentation",
+        localButton:true,
+        tags:[
+            {title:i18n.t("home.projects.tags.research"), colour:tagsColours.research},
+            {title:i18n.t("home.projects.tags.school"), colour:tagsColours.school},
+            {title:i18n.t("home.projects.tags.archived"), colour:tagsColours.archived}
+        ],
+        date: i18n.t("home.projects.project.semantic_segmentation.date")
    }];
+
+    function goToTop(){
+        window.scrollTo(0, 0);
+    }
 </script>

 <style scoped>
--- a/src/components/home/welcome.vue
+++ b/src/components/home/welcome.vue
@@ -2,19 +2,23 @@
    <div class="" id="welcome_div">
      <!--<p id="random_citation">Random Sentence</p>-->

-        <div class="test" id="name_div">
-            <div id="profile_picture"><img src="https://picsum.photos/200" height="100%" width="100%"></div>
+        <div class="" id="name_div">
+            <div id="profile_picture"><img :src="meIcon" height="100%" width="100%"></div>
           
            <div id="name_div_right_container">
-              <div class="test" id="welcome_text_div">
+              <div class="" id="welcome_text_div">
                <h1> {{ $t('home.greeting') }} </h1>
                <dynamicOccupation id="dynamic_occupation" :sentences="occupations" />
              </div>
-              <div id="social_networks" class="test">
+              <div id="social_networks" class="">
                <social v-for="(e,i) in networks" :key="i" :img="e.img" :routerLink="e.routerLink" :link="e.link" />
              </div>
            </div>
        </div> <!-- Name div -->
+
+        <div id="scroll_arrow">
+            <img :src="arrowSvg"/>
+        </div>
    </div> <!-- Welcome Div -->
 </template>

@@ -26,26 +30,28 @@
  import mailSvg from '@/assets/img/mail.svg';
  import lineImg from '@/assets/img/line.png';
  import githubSvg from '@/assets/img/github.svg';
+  import arrowSvg from '@/assets/svg/arrow_down.svg';
+  import meIcon from '@/assets/img/me/icon.png';

  const i18n = useI18n();

  const occupations = [
-  i18n.t('home.occupation.ai'), i18n.t('home.occupation.fullstack'),
+  i18n.t('home.occupation.international'), i18n.t('home.occupation.research'),
  i18n.t('home.occupation.student')
  ]

  const networks = [{
      img:githubSvg,
      routerLink:false,
-      link:"#"
-    },{
+      link:"https://github.com/LJ5O"
+    }/*,{
      img:lineImg,
      routerLink:false,
      link:"#"
-  },{
+  }*/,{
      img:mailSvg,
      routerLink:true,
-      link:"#"
+      link:"contact"
    }];
 </script>

@@ -74,6 +80,10 @@
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
+    gap: 15px;
+    justify-content: center; 
+    align-items: center;
+    
 }

 #profile_picture{
@@ -95,7 +105,7 @@
    width: fit-content;
 }
 #welcome_text_div h1{
-    margin-top: 100px;
+    margin-top: 2%;
    margin-bottom: 10px;
    font-size: 2em;
 }
@@ -106,4 +116,59 @@
    flex-direction: row;
 }

+@media (height < 750px) {
+  #scroll_arrow {
+    display: none;
+    animation-name: none;
+  }
+}
+
+@media (max-width: 900px) {
+  #name_div {
+    margin-top: 30px;
+    margin-left: auto;
+    margin-right: auto;
+    flex-direction: column;
+    text-align: center;
+    gap: 20px;
+  }
+  #name_div_right_container {
+    align-items: center;
+    width: 80vw;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  #welcome_text_div h1 {
+    margin-top: 0px; /* name_div's gap replaces it */
+  }
+  #dynamic_occupation{
+    height: fit-content;
+  }
+  #social_networks {
+    justify-content: center;
+  }
+}
+
+#scroll_arrow{
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 40px;
+    height: 65px;
+    bottom: 5%;
+    animation-name: arrow_floating;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+}
+#scroll_arrow img{
+    width: 100%;
+    height: 100%;
+}
+
+@keyframes arrow_floating {
+  from {bottom:5%;}
+  to {bottom: 8%;}
+}
+
 </style>
--- a/src/main.js
+++ b/src/main.js
@@ -11,24 +11,41 @@ import fr from "./assets/localization/fr/localization.json";
 import en from "./assets/localization/en/localization.json";
 import ja from "./assets/localization/ja/localization.json";

-let userLanguage = navigator.language || navigator.userLanguage;
+function getCookie(cname) {
+  // Thanks https://www.w3schools.com/js/js_cookies.asp
+  let name = cname + "=";
+  let decodedCookie = decodeURIComponent(document.cookie);
+  let ca = decodedCookie.split(';');
+  for(let i = 0; i <ca.length; i++) {
+    let c = ca[i];
+    while (c.charAt(0) == ' ') {
+      c = c.substring(1);
+    }
+    if (c.indexOf(name) == 0) {
+      return c.substring(name.length, c.length);
+    }
+  }
+  return "";
+}
+
+let userLanguage = getCookie("localeCookie") || navigator.language || navigator.userLanguage;

 if(userLanguage.split("-")[0] == "fr") userLanguage = "fr";
 else if(userLanguage.split("-")[0] == "jp" || userLanguage.split("-")[0] == "ja") userLanguage = "ja";
 else userLanguage = "en";

-console.warn("Locale forced to english !");
-
 const i18n = createI18n({
    legacy:false,
-    locale: 'en',//userLanguage,
+    locale: userLanguage,//'en',
    fallbackLocale: 'en',
    messages: {
      en: en,
      ja: ja,
      fr: fr
    }
-})
+});
+
+document.body.classList.add(userLanguage);

 // Creating App

--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 import BaseArticle from '@/views/BaseArticle.vue'
 import SkillsView from '@/views/SkillsView.vue'
+import ContactView from '@/views/ContactView.vue'

 const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
@@ -22,13 +23,28 @@ const router = createRouter({
      component: SkillsView
    },
    {
-      path: '/about',
-      name: 'about',
+      path: '/education',
+      name: 'education',
+      component: () => import('../views/EducationView.vue')
+    },
+    {
+      path: '/contact',
+      name: 'contact',
+      component: ContactView
+    },
+    {
+      path: '/project/semantic-segmentation',
+      name: 'semantic_segmentation',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
-      component: () => import('../views/AboutView.vue'),
+      component: () => import('../views/projects/semanticSegmentationView.vue'),
    },
+    {
+      path: '/project/video-editor',
+      name: 'video_editor',
+      component: () => import('../views/projects/videoEditorView.vue'),
+    }
  ],
 })

--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -1,15 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
-
-<style>
-@media (min-width: 1024px) {
-  .about {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-  }
-}
-</style>
--- a/src/views/ContactView.vue
+++ b/src/views/ContactView.vue
@@ -0,0 +1,47 @@
+<template>
+    <Header/>
+    <div id="contact_page">
+      <div id="contact_content">
+        <img :src="ContactSvg"/>
+        
+        <div id="contact_content_text">
+          <h1>{{ $t("contact.title") }}</h1>
+          <p class="subtitle">{{ $t("contact.subtitle") }}</p>
+          <h2>{{ $t("contact.emails.research.title") }}</h2>
+          <p>{{ $t("contact.emails.research.desc", {user:"k.sailly", domain:"etu.univ-littoral.fr"}) }}</p>
+          <h2>{{ $t("contact.emails.work.title") }}</h2>
+          <p>{{ $t("contact.emails.work.desc", {user:"kevin", domain:"taccoen.fr"}) }}</p>
+        </div>
+      </div>
+    </div>
+  </template>
+
+<script setup>
+    import Header from '@/components/header.vue';
+
+    import ContactSvg from '@/assets/svg/contact.svg';
+</script>
+  
+<style scoped>
+  #contact_content{
+    width: 80%;
+    margin: auto;
+    margin-top: 20px;
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: center;
+    /*align-items: center;
+    text-align: center;*/
+    flex-wrap: wrap;
+  }
+  #contact_content img{
+    width: 30%;
+    min-width: 200px;
+    margin-left: 30px;
+  }
+  #contact_content_text{
+    width: 60%;
+    min-width: 300px;
+  }
+</style>
+  
--- a/src/views/EducationView.vue
+++ b/src/views/EducationView.vue
@@ -0,0 +1,113 @@
+<template>
+    <Header/>
+    <h1 class="center">{{ $t("education.title") }}</h1>
+    <p class="center content subtitle">{{ $t("education.subtitle") }}</p>
+
+    <article>
+      <p>{{ $t("education.introduction") }}</p> 
+
+        <schoolDisplay :name="schools[0].name" :desc="schools[0].desc" :img="schools[0].img" :link="schools[0].link"/>
+        <diploma :text='i18n.t("education.diplomas.junior_high_school")' class="diploma_display"/>
+
+        <schoolDisplay :name="schools[1].name" :desc="schools[1].desc" :img="schools[1].img" :link="schools[1].link"/>
+        <diploma :text='i18n.t("education.diplomas.high_school")' class="diploma_display"/>
+
+        <schoolDisplay :name="schools[2].name" :desc="schools[2].desc" :img="schools[2].img" :link="schools[2].link"/>
+        <diploma :text='i18n.t("education.diplomas.bachelor")' class="diploma_display"/>
+
+        <schoolDisplay :name="schools[3].name" :desc="schools[3].desc" :img="schools[3].img" :link="schools[3].link"/>
+        <diploma :text='i18n.t("education.diplomas.master")' class="diploma_display"/>
+
+    </article>
+
+  </template>
+
+<script setup>
+  import { useI18n } from 'vue-i18n';
+
+  import Header from '@/components/header.vue';
+  import schoolDisplay from '@/components/education/schoolDisplay.vue';
+  import diploma from '@/components/education/diploma.vue';
+  import SkillsList from '@/components/skills/skillsList.vue';
+
+  import iutImg from '@/assets/img/schools/iut.png';
+  import middleImg from '@/assets/img/schools/middle.png';
+  import highImg from '@/assets/img/schools/high.png';
+  import ulcoImg from '@/assets/img/schools/ulco.png';
+
+  const i18n = useI18n();
+
+  const schools = [{
+    name: i18n.t("education.schools.middle.name"),
+    desc: i18n.t("education.schools.middle.desc"),
+    img: middleImg,
+    link: "https://lasallecoudekerque.com/"
+  },{
+    name: i18n.t("education.schools.high.name"),
+    desc: i18n.t("education.schools.high.desc"),
+    img: highImg,
+    link: "https://www.epid-vauban.fr/"
+  },{
+    name: i18n.t("education.schools.bachelor.name"),
+    desc: i18n.t("education.schools.bachelor.desc"),
+    img: iutImg,
+    link: "https://www.iut-littoral.fr/"
+  },{
+    name: i18n.t("education.schools.master.name"),
+    desc: i18n.t("education.schools.master.desc"),
+    img: ulcoImg,
+    link: "https://www.univ-littoral.fr/"
+  }];
+
+  /*const skills = [{
+    title: i18n.t("skills.skills.ai.title"),
+    desc: i18n.t("skills.skills.ai.desc"),
+    picture: aIsvg
+  },{
+    title: i18n.t("skills.skills.web.title"),
+    desc: i18n.t("skills.skills.web.desc"),
+    buttonText: "Click me",
+    picture: webSvg,
+    link: "google.com"
+  },{
+    title: i18n.t("skills.skills.low_level.title"),
+    desc: i18n.t("skills.skills.low_level.desc"),
+    buttonText: "Click me",
+    picture: lowlevelSvg,
+    link: "google.com"
+  },{
+    title: i18n.t("skills.skills.devops.title"),
+    desc: i18n.t("skills.skills.devops.desc"),
+    buttonText: "Click me",
+    picture: devopsSvg,
+    link: "google.com"
+  },{
+    title: i18n.t("skills.skills.data.title"),
+    desc: i18n.t("skills.skills.data.desc"),
+    buttonText: "Click me",
+    picture: analysisSvg,
+    link: "google.com"
+  }]*/
+</script>
+  
+<style scoped>
+  .center{
+    text-align: center;
+  }
+
+  .content{
+    width:80%;
+    margin: auto;
+    margin-bottom: 20px;
+  }
+
+  article{
+    width: 80%;
+    margin: auto;
+  }
+  .diploma_display{
+    margin-bottom: 30px;
+  }
+  
+</style>
+  
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -15,13 +15,13 @@

    <welcome/>

-    <intersection :text="i18n.t('home.contactMe')" :button-text="i18n.t('home.contactButton')" button-link="#"/>
+    <intersection :text="i18n.t('home.contactMe')" :button-text="i18n.t('home.contactButton')" button-link="contact"/>

    <presentation/>

    <featuresDisplay/>

-    <intersection style="margin-top: 20px;" text="Lorem ipsum dolor sit amet" button-text="En savoir plus" button-link="#" />
+    <!--<intersection style="margin-top: 20px;" text="Lorem ipsum dolor sit amet" button-text="En savoir plus" button-link="#" />-->

    <projects/>

--- a/src/views/SkillsView.vue
+++ b/src/views/SkillsView.vue
@@ -1,7 +1,7 @@
 <template>
    <Header/>
    <h1 class="center">{{ $t("skills.title") }}</h1>
-    <p class="center content">{{ $t("skills.subtitle") }}</p>
+    <p class="center content subtitle">{{ $t("skills.subtitle") }}</p>

    <SkillsList v-for="(e,i) in skills" :key="i" :title="e.title" :desc="e.desc" :buttonText="e.buttonText" :link="e.link" :picture="e.picture" class="factList"/>
  </template>
@@ -27,27 +27,27 @@
  },{
    title: i18n.t("skills.skills.web.title"),
    desc: i18n.t("skills.skills.web.desc"),
-    buttonText: "Click me",
+    //buttonText: "Click me",
    picture: webSvg,
-    link: "google.com"
+    //link: "google.com"
  },{
    title: i18n.t("skills.skills.low_level.title"),
    desc: i18n.t("skills.skills.low_level.desc"),
-    buttonText: "Click me",
+    //buttonText: "Click me",
    picture: lowlevelSvg,
-    link: "google.com"
+    //link: "google.com"
  },{
    title: i18n.t("skills.skills.devops.title"),
    desc: i18n.t("skills.skills.devops.desc"),
-    buttonText: "Click me",
+    //buttonText: "Click me",
    picture: devopsSvg,
-    link: "google.com"
+    //link: "google.com"
  },{
    title: i18n.t("skills.skills.data.title"),
    desc: i18n.t("skills.skills.data.desc"),
-    buttonText: "Click me",
+    //buttonText: "Click me",
    picture: analysisSvg,
-    link: "google.com"
+    //link: "google.com"
  }]
 </script>
  
--- a/src/views/projects/semanticSegmentationView.vue
+++ b/src/views/projects/semanticSegmentationView.vue
@@ -0,0 +1,124 @@
+<template>
+    <Header/>
+    <div id="title_div">
+      <h1>{{ $t("projects.semantic_segmentation.title") }}</h1>
+      <p class="subtitle">{{ $t("projects.semantic_segmentation.subtitle") }}</p>
+      <img :src="semanticSegmentationCover"/> 
+    </div>
+    <article>
+      <h2>{{ $t("projects.semantic_segmentation.content.context.title") }}</h2>
+      <doubleRowHolder class="doubleRowHolder">
+        <p>{{ $t("projects.semantic_segmentation.content.context.text") }}</p>
+        <img :src="hachinoheKosenImg"/>
+      </doubleRowHolder>
+      <h2>{{ $t("projects.semantic_segmentation.content.semantic.title") }}</h2>
+      <p>{{ $t("projects.semantic_segmentation.content.semantic.text") }}</p>
+
+      <div id="table_wrapper">
+        <table>
+          <thead>
+            <tr>
+              <th>{{ $t("projects.semantic_segmentation.content.semantic.table.model") }}</th>
+              <th>{{ $t("projects.semantic_segmentation.content.semantic.table.accuracy") }}</th>
+              <th>{{ $t("projects.semantic_segmentation.content.semantic.table.loss") }}</th>
+              <th>{{ $t("projects.semantic_segmentation.content.semantic.table.process_time") }}</th>
+              <th>{{ $t("projects.semantic_segmentation.content.semantic.table.year") }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Unet</td>
+              <td>0.9233</td>
+              <td>0.1898</td>
+              <td>10 ms</td>
+              <td>2015</td>
+            </tr>
+            <tr>
+              <td>Segnet</td>
+              <td>0.9681</td>
+              <td>0.07575</td>
+              <td>100 ms</td>
+              <td>2016</td>
+            </tr>
+            <tr>
+              <td>DeeplabV3</td>
+              <td>0.9708</td>
+              <td>0.06759</td>
+              <td>15 ms</td>
+              <td>2017</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <p>{{ $t("projects.semantic_segmentation.content.semantic.result") }}</p>
+
+      <h2>{{ $t("projects.semantic_segmentation.content.human_recognition.title") }}</h2>
+      <p>{{ $t("projects.semantic_segmentation.content.human_recognition.text") }}</p>
+      <img :src="yolov5TestImg" id="yolo_img"/>
+    </article>
+  </template>
+
+<script setup>
+    import Header from '@/components/header.vue';
+    import doubleRowHolder from '@/components/doubleRowHolder.vue';
+
+    import semanticSegmentationCover from "@/assets/img/semantic_segmentation.png";
+    import hachinoheKosenImg from "@/assets/img/projects/hachinohe_kosen.png";
+    import yolov5TestImg from "@/assets/img/projects/yolov5_test.png";
+</script>
+
+<style scoped>
+  #title_div img{
+    width:100%;
+    max-width: 800px;
+    margin-top: 15px;
+  }
+
+  article, #title_div{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    width: 80%;
+    margin: auto;
+    margin-top: 20px;
+  }
+
+  p,h1{
+    margin: 0;
+  }
+  .doubleRowHolder p{
+    min-width: 200px;
+  }
+  .doubleRowHolder img{
+    min-width: 200px;
+    max-width: 400px;
+  }
+
+  #table_wrapper{
+    margin-top: 20px;
+    margin-bottom: 15px;
+    width: 80%;
+    min-width: 250px;
+    overflow-x: auto !important;
+  }
+  th{
+    font-size:1.3em;
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+  table,th,td{
+    border: solid 1px white;
+    border-collapse: collapse;
+  }
+  table{
+    margin: auto;
+  }
+
+  #yolo_img{
+    width: 80%;
+    max-width: 600px;
+  }
+</style>
+  
--- a/src/views/projects/videoEditorView.vue
+++ b/src/views/projects/videoEditorView.vue
@@ -0,0 +1,77 @@
+<template>
+    <Header/>
+    <div id="title_div">
+      <h1>{{ $t("projects.video_editor.title") }}</h1>
+      <p class="subtitle">{{ $t("projects.video_editor.subtitle") }}</p>
+    </div>
+    <article>
+      <h2>{{ $t("projects.video_editor.fukushima_kosen.title") }}</h2>
+      <doubleRowHolder>
+        <p>{{ $t("projects.video_editor.fukushima_kosen.text") }}</p>
+        <img :src="fukushimaKosenImg"/>
+      </doubleRowHolder>
+
+      <h2>{{ $t("projects.video_editor.perception.title") }}</h2>
+      <p>{{ $t("projects.video_editor.perception.text") }}</p>
+      <doubleRowHolder class="space_around">
+        <img :src="fukushimaKosenExp1Img"/>
+        <img :src="fukushimaKosenExp2Img"/>
+      </doubleRowHolder>
+      <p>{{ $t("projects.video_editor.perception.text2") }}</p>
+
+      <h2>{{ $t("projects.video_editor.software.title") }}</h2>
+      <doubleRowHolder>
+        <p>{{ $t("projects.video_editor.software.text") }}</p>
+        <img :src="videoEditorImg"/>
+      </doubleRowHolder>
+      <doubleRowHolder class="space_around">
+        <p>{{ $t("projects.video_editor.software.text2") }}</p>
+        <img :src="videoSampleImg"/>
+      </doubleRowHolder>
+
+      <h2>{{ $t("projects.video_editor.data_recovery.title") }}</h2>
+      <p>{{ $t("projects.video_editor.data_recovery.text") }}</p>
+
+    </article>
+  </template>
+
+<script setup>
+    import Header from '@/components/header.vue';
+    import doubleRowHolder from '@/components/doubleRowHolder.vue';
+
+    import videoSampleImg from '@/assets/img/video_sample.png';
+    import videoEditorImg from '@/assets/img/projects/video_editor.png';
+    import fukushimaKosenImg from '@/assets/img/projects/fukushima_kosen.jpg';
+    import fukushimaKosenExp1Img from '@/assets/img/projects/fukushima_exp1.jpg';
+    import fukushimaKosenExp2Img from '@/assets/img/projects/fukushima_exp2.jpg';
+</script>
+
+<style scoped>
+
+  article, #title_div{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    width: 80%;
+    margin: auto;
+    margin-top: 20px;
+  }
+
+  p,h1{
+    margin: 0;
+  }
+  .doubleRowHolder p{
+    min-width: 200px;
+  }
+  .doubleRowHolder img{
+    min-width: 200px;
+    max-width: 400px;
+  }
+  .space_around{
+    margin-top: 15px;
+    margin-bottom: 15px;
+  }
+</style>
+  
--- a/vue.config.js
+++ b/vue.config.js
@@ -0,0 +1,3 @@
+module.exports = {// https://learnvue.co/articles/deploy-vue-to-github-pages
+    publicPath: "/", // Custom domain in prod, local in dev.. Always the same
+  };
Author	SHA1	Message	Date
LJ5O	37684863b8	Updated occupation sentences	2026-05-05 16:35:26 +02:00
Kévin Taccoen	0c24abaf64	Merge pull request #1 from LJ5O/dependabot/npm_and_yarn/rollup-4.59.0 Bump rollup from 4.45.0 to 4.59.0	2026-03-01 11:19:19 +01:00
dependabot[bot]	8d891bf435	Bump rollup from 4.45.0 to 4.59.0 Bumps [rollup](https://github.com/rollup/rollup) from 4.45.0 to 4.59.0. - [Release notes](https://github.com/rollup/rollup/releases) - [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md) - [Commits](https://github.com/rollup/rollup/compare/v4.45.0...v4.59.0) --- updated-dependencies: - dependency-name: rollup dependency-version: 4.59.0 dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>	2026-03-01 10:17:51 +00:00
LJ5O	dea167117a	Audit fix	2025-10-21 18:42:46 +02:00
LJ5O	bbde4609fe	October 2025 update	2025-10-21 18:40:42 +02:00
LJ5O	76d463213b	Npm update	2025-07-14 15:06:49 +02:00
LJ5O	278bfb3866	New songs	2025-07-14 15:05:33 +02:00
LJ5O	11503a9a70	Updates for AI prices prediction project	2025-07-14 15:05:33 +02:00
LJ5O	bedb8dc778	New Assitant project	2025-07-14 15:05:33 +02:00
LJ5O	c1869038cf	Updates about projects	2025-07-14 15:05:33 +02:00
Kévin Taccoen	a6411d690b	Update README.md	2025-06-05 10:16:36 +02:00
Kévin Taccoen	1fdd486cc2	Fixed typos	2025-05-08 20:30:16 +02:00
LJ5O	f979ec0c09	Disabled JP flag I'm still working on JP localization, will be back soon !	2025-05-08 16:27:55 +02:00
LJ5O	d1403a7137	Added link to school	2025-05-08 16:23:02 +02:00
LJ5O	c9057381ab	Added this website as a project	2025-05-08 16:21:14 +02:00
LJ5O	e35bedb679	New favicon	2025-05-08 16:02:21 +02:00
LJ5O	170dd050c7	Fixed footer contact button <a> was too large	2025-05-08 15:51:37 +02:00
LJ5O	a345b13373	Added my own picture The final piece to complete everything	2025-05-08 15:41:54 +02:00
LJ5O	7c629ddda3	Small edit to license Thanks	2025-05-08 15:39:56 +02:00
LJ5O	f7908ba6fe	Removed useless buttons	2025-05-08 15:12:57 +02:00
LJ5O	c7fb67b0cc	Fixed welcome div display on phones	2025-05-08 15:09:34 +02:00
LJ5O	6d1913e0e5	Fix of 404 error	2025-05-08 14:44:25 +02:00
LJ5O	4789f58da8	Scroll arrow is no longer shown on small phones	2025-05-08 14:25:49 +02:00
LJ5O	cff2b4c2bb	Font families	2025-05-08 14:17:48 +02:00
LJ5O	1ed789d9b3	Updated emails	2025-05-08 14:17:48 +02:00
LJ5O	91fa7c70fd	Removed test classes and dev css	2025-05-08 14:17:48 +02:00
Kévin Taccoen	ba139a53b4	Create pages.yml	2025-05-08 13:54:31 +02:00
LJ5O	dcd05f6503	Readme and License TODO	2025-05-08 13:21:12 +02:00
LJ5O	ef9afec629	Updated social networks	2025-05-08 13:04:10 +02:00
LJ5O	f99527055a	Footer legal text Makes no sense to me, but everyone does it, so I guess its better	2025-05-08 12:52:19 +02:00
LJ5O	e9f4bb2f8c	New random music button Including a rickroll	2025-05-05 17:04:20 +02:00
LJ5O	eaebcec1e8	New white scroll arrow	2025-05-01 17:02:03 +02:00
LJ5O	250bd5a385	Small edits to footer	2025-05-01 16:45:41 +02:00
LJ5O	e35b86a93c	Added Github link	2025-05-01 16:28:43 +02:00
LJ5O	b877c3e330	Locale for footer	2025-05-01 15:34:30 +02:00
LJ5O	6e57b7d214	Fully translated to French	2025-05-01 15:18:39 +02:00
LJ5O	318c1c6bf6	Half of the French translations	2025-05-01 01:24:41 +02:00
LJ5O	4b9272f95d	Quick edit Yes	2025-04-30 22:06:18 +02:00
LJ5O	6ae1c81c6b	New language selection buttons	2025-04-30 22:04:08 +02:00
LJ5O	23a186a9ba	Added pictures for schools	2025-04-30 16:33:11 +02:00
LJ5O	ac6d0f1578	Fixed css mistake	2025-04-30 13:57:35 +02:00
LJ5O	c3c0298e24	new subtitle class	2025-04-29 17:55:31 +02:00
LJ5O	9b7a39a7d7	Fixed link too large	2025-04-29 17:52:18 +02:00
LJ5O	f3b70b35c6	Added schools details	2025-04-29 17:51:06 +02:00
LJ5O	16aa715076	New diploma display	2025-04-29 17:23:17 +02:00
LJ5O	7c6aa3c27f	Ready to add schools	2025-04-29 17:09:39 +02:00
LJ5O	35f4376c3d	New route and schoolDisplay.vue	2025-04-29 17:01:18 +02:00
LJ5O	e658c93a80	New education feature	2025-04-29 15:58:08 +02:00
LJ5O	fba34ec57d	New education.svg	2025-04-29 15:52:34 +02:00
LJ5O	3fb395ce8c	No more temp files from Inkscape	2025-04-29 15:49:50 +02:00
LJ5O	508236fbc1	Typo	2025-04-29 15:16:35 +02:00
LJ5O	0debc96f0b	Added more about Fukushima internship	2025-04-29 15:15:40 +02:00
LJ5O	b2e5039cf8	Added some experiment pictures	2025-04-29 00:29:07 +02:00
LJ5O	3e869df967	Added page for Fukushima Internship Started to write about it	2025-04-28 22:24:31 +02:00
LJ5O	1384f8b4bd	New img for yolov5 research	2025-04-28 17:39:27 +02:00
LJ5O	77a384f647	Continued to write about hachinohe internship	2025-04-28 16:55:12 +02:00
LJ5O	ba2c95f370	Started to write about internship at hachinohe	2025-04-03 00:37:04 +02:00
LJ5O	51d2aa88b7	New page about internship at Hachinohe kosen	2025-04-02 21:58:36 +02:00
LJ5O	4dcb0efc96	Added links to contact page	2025-04-01 23:31:33 +02:00
LJ5O	11ece73e50	Fixed invalid footer placement on small pages	2025-04-01 20:10:43 +02:00
LJ5O	6cdeacea51	Small edits	2025-04-01 19:03:39 +02:00
LJ5O	f974696584	Worked on contact page	2025-04-01 18:58:31 +02:00
LJ5O	a29be80381	Started to work on contact page	2025-04-01 18:15:35 +02:00