From a29be803814bb1d6f9e912638f197d2a2c844686 Mon Sep 17 00:00:00 2001
From: LJ5O <75009579+LJ5O@users.noreply.github.com>
Date: Tue, 1 Apr 2025 18:15:35 +0200
Subject: [PATCH] Started to work on contact page

---
 src/assets/localization/en/localization.json | 14 ++++++++
 src/components/home/intersection.vue         |  6 ++--
 src/router/index.js                          |  6 ++++
 src/views/ContactView.vue                    | 37 ++++++++++++++++++++
 src/views/HomeView.vue                       |  2 +-
 5 files changed, 62 insertions(+), 3 deletions(-)
 create mode 100644 src/views/ContactView.vue

diff --git a/src/assets/localization/en/localization.json b/src/assets/localization/en/localization.json
index 645be6c..1c4dd7f 100644
--- a/src/assets/localization/en/localization.json
+++ b/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}"
+      }
+    }
   }
 }
\ No newline at end of file
diff --git a/src/components/home/intersection.vue b/src/components/home/intersection.vue
index 2722afe..4fa89ec 100644
--- a/src/components/home/intersection.vue
+++ b/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,
diff --git a/src/router/index.js b/src/router/index.js
index fe37ca4..0e204ae 100644
--- 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),
@@ -21,6 +22,11 @@ const router = createRouter({
       name: 'skills',
       component: SkillsView
     },
+    {
+      path: '/contact',
+      name: 'contact',
+      component: ContactView
+    },
     {
       path: '/about',
       name: 'about',
diff --git a/src/views/ContactView.vue b/src/views/ContactView.vue
new file mode 100644
index 0000000..6524442
--- /dev/null
+++ b/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>
+  
\ No newline at end of file
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 2ad4349..5cbf751 100644
--- a/src/views/HomeView.vue
+++ b/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/>