Started to work on contact page

src/assets/localization/en/localization.json

@@ -94,5 +94,19 @@
         "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."
       }
     }
+  },
+  "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}<That email Symbol>{domain}."
+      },
+      "work": {
+        "title": "Work, jobs, others",
+        "desc": "All of these can go directly here : {user}<>{domain}"
+      }
+    }
   }
 }

src/components/home/intersection.vue

@@ -2,14 +2,16 @@
   <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">
+        <RouterLink :to="buttonLink"><div class="button intersection_button_div test">
             <p>{{buttonText}}</p>
-        </div></a>
+        </div></RouterLink>
       </div>
     </div>
 </template>
 
 <script setup>
+import { RouterLink } from 'vue-router';
+
 const props = defineProps({
         text:{
             type: String,

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),
@@ -21,6 +22,11 @@ const router = createRouter({
       name: 'skills',
       component: SkillsView
     },
+    {
+      path: '/contact',
+      name: 'contact',
+      component: ContactView
+    },
     {
       path: '/about',
       name: 'about',

src/views/ContactView.vue

@@ -0,0 +1,37 @@
+<template>
+    <Header/>
+    <div id="contact_content">
+      <h1>{{ $t("contact.title") }}</h1>
+      <p>{{ $t("contact.subtitle") }}</p>
+      <h2>{{ $t("contact.emails.research.title") }}</h2>
+      <p>{{ $t("contact.emails.research.desc", {user:"a", domain:"b"}) }}</p>
+      <h2>{{ $t("contact.emails.work.title") }}</h2>
+      <p>{{ $t("contact.emails.work.desc", {user:"a", domain:"b"}) }}</p>
+      <img :src="ContactSvg"/>
+    </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: column;
+    /*justify-content: center;*/
+    align-items: center;
+    text-align: center;
+    min-height: 100vh;
+  }
+  #contact_content img{
+    width: 100%;
+    max-width: 600px;
+  }
+</style>
+  

src/views/HomeView.vue

@@ -15,7 +15,7 @@
 
     <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/>