Added page for Fukushima Internship

Started to write about it

src/assets/localization/en/localization.json

@@ -135,6 +135,18 @@
           "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."
+      }
     }
   }
 }

src/components/home/projects.vue

@@ -38,7 +38,7 @@
     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_editor.png';
     import tradingAiImg from '@/assets/img/trading_ai.png';
 
     import {useI18n} from 'vue-i18n';
@@ -109,12 +109,12 @@
         ],
         date: i18n.t("home.projects.project.semantic_segmentation.date")
     },{
-        picture: videoEditorSegmentationImg,
+        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:"#",
-        localButton:false,
+        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},

src/router/index.js

@@ -34,6 +34,11 @@ const router = createRouter({
       // this generates a separate chunk (About.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
       component: () => import('../views/projects/semanticSegmentationView.vue'),
+    },
+    {
+      path: '/project/video-editor',
+      name: 'video_editor',
+      component: () => import('../views/projects/videoEditorView.vue'),
     }
   ],
 })

src/views/projects/videoEditorView.vue

@@ -0,0 +1,51 @@
+<template>
+    <Header/>
+    <div id="title_div">
+      <h1>{{ $t("projects.video_editor.title") }}</h1>
+      <p>{{ $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>
+    </article>
+  </template>
+
+<script setup>
+    import Header from '@/components/header.vue';
+    import doubleRowHolder from '@/components/doubleRowHolder.vue';
+
+    import videoEditorImg from '@/assets/img/video_editor.png';
+    import fukushimaKosenImg from '@/assets/img/projects/fukushima_kosen.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;
+  }
+</style>
+