New page about internship at Hachinohe kosen

src/assets/localization/en/localization.json

@@ -108,5 +108,11 @@
         "desc": "All of these can go directly here : {user}<>{domain}"
       }
     }
+  },
+  "projects":{
+    "semantic_segmentation":{
+      "title": "Semantic Segmentation",
+      "subtitle": "My first internship in Japan, at Hachinohe National Institute of Technology."
+    }
   }
 }

src/components/footer.vue

@@ -27,7 +27,7 @@
       <div id="footer_contact_div">
         <h1>Contact</h1>
         <p>Want to contact me ? Let's have a talk !</p>
-        <router-link to="contact">
+        <router-link :to="{ name: 'contact'}">
           <div id="footer_contact_button" class="button">Contact</div>
         </router-link>
       </div>

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">

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,6 +32,7 @@
 </template>
 
 <script setup>
+    import { RouterLink } from 'vue-router';
     import projectTag from './libs/projectTag.vue';
 
     import disblockSvg from "@/assets/svg/projects/disblock.svg";
@@ -57,6 +59,7 @@
         desc:i18n.t("home.projects.project.disblock.desc"),
         buttonText:i18n.t("home.projects.project.disblock.button_text"),
         buttonLink:"https://disblock.xyz",
+        localButton:false,
         button2Text:i18n.t("home.projects.project.disblock.button2_text"),
         button2Link:"https://github.com/Disblock/WebApp",
         tags:[
@@ -70,6 +73,7 @@
         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:[
@@ -83,6 +87,7 @@
         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},
@@ -95,7 +100,8 @@
         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:"#",
+        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},
@@ -108,6 +114,7 @@
         desc:i18n.t("home.projects.project.video_editor.desc"),
         buttonText:i18n.t("home.projects.project.video_editor.button_text"),
         buttonLink:"#",
+        localButton:false,
         tags:[
             {title:i18n.t("home.projects.tags.research"), colour:tagsColours.research},
             {title:i18n.t("home.projects.tags.school"), colour:tagsColours.school},
@@ -115,6 +122,10 @@
         ],
         date: i18n.t("home.projects.project.video_editor.date")
     }];
+
+    function goToTop(){
+        window.scrollTo(0, 0);
+    }
 </script>
 
 <style scoped>

src/router/index.js

@@ -28,13 +28,13 @@ const router = createRouter({
       component: ContactView
     },
     {
-      path: '/about',
-      name: 'about',
+      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'),
+    }
   ],
 })
 

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>

src/views/projects/semanticSegmentationView.vue

@@ -0,0 +1,32 @@
+<template>
+    <Header/>
+    <div id="title_div">
+      <h1>{{ $t("projects.semantic_segmentation.title") }}</h1>
+      <p>{{ $t("projects.semantic_segmentation.subtitle") }}</p>
+    </div>
+    <article>
+      
+    </article>
+  </template>
+
+<script setup>
+    import Header from '@/components/header.vue';
+</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;
+  }
+</style>
+