Started to write about internship at hachinohe

src/assets/localization/en/localization.json

@@ -112,7 +112,13 @@
   "projects":{
     "semantic_segmentation":{
       "title": "Semantic Segmentation",
-      "subtitle": "My first internship in Japan, at Hachinohe National Institute of Technology."
+      "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 were 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."
+        }
+      }
     }
   }
 }

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>

src/views/projects/semanticSegmentationView.vue

@@ -3,17 +3,32 @@
     <div id="title_div">
       <h1>{{ $t("projects.semantic_segmentation.title") }}</h1>
       <p>{{ $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>
     </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";
 </script>
 
 <style scoped>
+  #title_div img{
+    width:100%;
+    max-width: 800px;
+    margin-top: 15px;
+  }
+
   article, #title_div{
     display: flex;
     flex-direction: column;
@@ -28,5 +43,12 @@
   p,h1{
     margin: 0;
   }
+  .doubleRowHolder p{
+    min-width: 200px;
+  }
+  .doubleRowHolder img{
+    min-width: 200px;
+    max-width: 400px;
+  }
 </style>