need to take a break

frontend/package-lock.json

@@ -14,6 +14,7 @@
         "axios": "^1.8.4",
         "iconify-icon": "^2.3.0",
         "vue": "^3.5.13",
+        "vue-i18n": "^11.1.5",
         "vue-router": "^4.5.0"
       },
       "devDependencies": {
@@ -1028,6 +1029,50 @@
         "vue": ">=3"
       }
     },
+    "node_modules/@intlify/core-base": {
+      "version": "11.1.5",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-11.1.5.tgz",
+      "integrity": "sha512-xGRkISwV/2Trqb8yVQevlHm5roaQqy+75qwUzEQrviaQF0o4c5VDhjBW7WEGEoKFx09HSgq7NkvK/DAyuerTDg==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/message-compiler": "11.1.5",
+        "@intlify/shared": "11.1.5"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "11.1.5",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-11.1.5.tgz",
+      "integrity": "sha512-YLSBbjD7qUdShe3ZAat9Hnf9E8FRpN6qmNFD/x5Xg5JVXjsks0kJ90Zj6aAuyoppJQA/YJdWZ8/bB7k3dg2TjQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/shared": "11.1.5",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "11.1.5",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-11.1.5.tgz",
+      "integrity": "sha512-+I4vRzHm38VjLr/CAciEPJhGYFzWWW4HMTm+6H3WqknXLh0ozNX9oC8ogMUwTSXYR/wGUb1/lTpNziiCH5MybQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
@@ -4540,6 +4585,26 @@
         }
       }
     },
+    "node_modules/vue-i18n": {
+      "version": "11.1.5",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-11.1.5.tgz",
+      "integrity": "sha512-XCwuaEA5AF97g1frvH/EI1zI9uo1XKTf2/OCFgts7NvUWRsjlgeHPrkJV+a3gpzai2pC4quZ4AnOHFO8QK9hsg==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/core-base": "11.1.5",
+        "@intlify/shared": "11.1.5",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.0.tgz",

frontend/package.json

@@ -17,6 +17,7 @@
     "axios": "^1.8.4",
     "iconify-icon": "^2.3.0",
     "vue": "^3.5.13",
+    "vue-i18n": "^11.1.5",
     "vue-router": "^4.5.0"
   },
   "devDependencies": {

frontend/src/App.vue

@@ -52,6 +52,10 @@ import HeaderNav from "@/components/HeaderNav.vue"
 
   a { color: inherit; }
 
-
+  .grid {
-
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: 10px;
+    grid-auto-rows: minmax(100px, auto);
+  }
 </style>

frontend/src/assets/_base.scss

@@ -45,3 +45,14 @@ $themes: (
  .font-bigger {
    font-size: x-large;
  }
+
+ .marginauto {
+   margin: auto;
+ }
+
+ .locale-changer select {
+  border: 2px solid #7f5be1;
+  background: #2f27ce;
+  padding: 10px;
+  transition: 1s;
+ }

frontend/src/components/88x31.vue

@@ -3,7 +3,7 @@
 </script>
 
 <template>
-  <h3 class="center">There, have cool old-fashioned 88x31 buttons</h3>
+  <h3 class="center">{{ $t('home.buttons') }}</h3>
   <div class="wrapper flex">
     <a href="https://tralala.fr.eu.org" title="tralala.fr.eu.org"><img src="../components/icons/tralala-88x31.gif" alt="tralala.fr.eu.org" height="31" width="88"></a>
     <a href="https://fransgenre.fr/" title="fransgenre.fr"><img src="../components/icons/estrogen-88x31.gif" alt="fransgenre.fr" height="31" width="88"></a>

frontend/src/components/HeaderNav.vue

@@ -1,8 +1,14 @@
 <template>
   <nav class="font-bigger">
-    <RouterLink to="/cv" class="nav-li">Web Resume</RouterLink>
+    <RouterLink to="/alternance" class="nav-li">{{ $t('nav.alt') }}</RouterLink>
-    <RouterLink to="/about" class="nav-li">About me</RouterLink>
+    <RouterLink to="/cv" class="nav-li">{{ $t('nav.cv') }}</RouterLink>
-    <RouterLink to="/" class="nav-li">Home</RouterLink>
+    <RouterLink to="/about" class="nav-li">{{ $t('nav.about') }}</RouterLink>
+    <RouterLink to="/" class="nav-li">{{ $t('nav.home') }}</RouterLink>
+    <div class="locale-changer">
+      <select v-model="$i18n.locale">
+        <option v-for="locale in $i18n.availableLocales" :key="`locale-${locale}`" :value="locale">{{ locale }}</option>
+      </select>
+    </div>
   </nav>
 </template>
 
@@ -16,6 +22,7 @@ import {RouterLink} from "vue-router";
     padding: 15pt;
     display: flex;
     flex-direction: row-reverse;
+    flex-wrap: wrap;
   }
 
 </style>

frontend/src/components/Projects.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import {RouterLink} from "vue-router";
 </script>
 
 <template>
-  <h3 class="center">Some cool projects I worked on</h3>
+  <h3 class="center">{{ $t('home.projects') }}</h3>
   <div class="center card-container">
 
     <div>
@@ -14,20 +15,36 @@
     </div>
 
     <div>
-      <a class="card" href="https://github.com/Akomry/sae302-chat">
+      <RouterLink to="/sae302" class="nav-li">
-        <img class="rounded card" src="" alt="sae302-chat" width="300">
+        <img class="rounded card" src="../components/images/sae302-screen.png" alt="sae302-chat" width="200">
-      </a>
+      </RouterLink>
       <br>
       <span>Communication app</span>
     </div>
 
     <div>
-      <a class="card" href="https://github.com/Akomry/website">
+      <a class="card" href="https://github.com/Akomry/website" target="_blank" rel="external nofllow noopener">
-        <img class="rounded card" src="" alt="website" width="300">
+        <img class="rounded card" src="../components/images/website.png" alt="website" width="200">
       </a>
       <br>
       <span>Current website</span>
     </div>
+    <div>
+      <RouterLink to="/sae201" class="nav-li">
+        <img class="rounded card" src="../components/images/schema_reseau.png" alt="sae201" width="200">
+      </RouterLink>
+      <br>
+      <span>Network Project</span>
+    </div>
+    <div>
+      <RouterLink to="/sae301" class="nav-li">
+        <img class="rounded card" src="../components/images/sae301-scheme.jpg" alt="sae301" width="200">
+      </RouterLink>
+      <br>
+      <span>Electronics</span>
+    </div>
+
+
   </div>
 </template>
 

frontend/src/components/StarrySky.vue

@@ -352,7 +352,7 @@
       $size: math.random(5);
 
       position: absolute;
-      top: math.random(250) - 1 + vh;
+      top: math.random(200) - 1 + vh;
       left: math.random(100) - 1 + vw;
       width: $size + px;
       height: $size + px;

frontend/src/i18n/index.ts

@@ -0,0 +1,91 @@
+import {createI18n} from "vue-i18n";
+
+const i18n = createI18n({
+    locale: "fr",
+    fallbackLocale: 'en',
+    messages: {
+        en: {
+            nav: {
+                home: "Home",
+                about: "About me",
+                cv: "Web Resume",
+                alt: "Apprenticeship"
+            },
+            home: {
+                welcome: "Welcome to my website !",
+                projects: "Some cool projects I worked on",
+                buttons: "There, have cool old-fashioned 88x31 buttons"
+            },
+            cv: {
+                title: 'Web Resume',
+
+                coord: 'Coordinates',
+                age: '19 years old',
+
+                formation: 'Education',
+                rt: '2nd year of Networking and Telecommunications',
+                iut: 'IUT1 from Grenoble - Saint-Martin-d\'Hères',
+                bac: 'High school diploma',
+                lycee: 'Charles-Gabriel Pravaz High School',
+                spebac: 'Math, English Literature, Expert Maths, with high honours',
+
+                lang: 'Language',
+                francais: 'French : Mother tongue',
+                anglais: 'English : Fluent (B2)',
+                allemand: 'German : Solid foundations (A2)',
+
+                comp: 'Skills',
+                prog: 'Programming',
+                devnet: 'Develop an app based on a network protocol',
+                cont: 'Containerize and manage a Docker infrastructure',
+                ad: 'Setup and manage an Active Directory infrastructure',
+                db: 'Setup and manage a Database Management System',
+                automate: 'Automate administration tasks using scripting and Ansible'
+
+
+
+            }
+        },
+        fr: {
+            nav: {
+                home: "Accueil",
+                about: "A propos de moi",
+                cv: "Web CV",
+                alt: "Alternance"
+            },
+            home: {
+                welcome: "Bienvenue sur mon site web !",
+                projects: "Quelques projects sympathiques sur lesquels j'ai travaillé",
+                buttons: "Tiens, quelques boutons 88x31 à l'ancienne"
+            },
+            cv: {
+                title: 'Web CV',
+
+                coord: 'Coordonées',
+                age: '19 ans',
+
+                formation: 'Formation',
+                rt: '2e année de BUT Réseaux et Télécommunications',
+                iut: 'IUT1 de Grenoble - Saint-Martin-d\'Hères',
+                bac: 'Baccalauréat Général',
+                lycee: 'Lycée Charles-Gabriel Pravaz',
+                spebac: 'Maths, LLCER, Maths expertes avec mention bien',
+
+                lang: 'Langues',
+                francais: 'Français : Langue maternelle',
+                anglais: 'Anglais : Parle couramment (B2)',
+                allemand: 'Allemand : Bases solides (A2)',
+
+                comp: 'Compétences',
+                prog: 'Programmation',
+                devnet: 'Développer une application basée sur un protocole réseau',
+                cont: 'Conteneuriser et maintenir une infrastructure Docker',
+                ad: 'Installer et configurer un serveur Active Directory',
+                db: 'Mettre en place et maintenir une SGBD',
+                automate: 'Automatiser les tâches d\'administration avec du scripting et Ansible',
+            }
+        }
+    }
+})
+
+export default i18n

frontend/src/main.ts

@@ -1,9 +1,14 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
+import {createI18n} from "vue-i18n";
+import i18n from "./i18n";
 
 const app = createApp(App)
 
 app.use(router)
 
+app.use(i18n)
+
+
 app.mount('#app')

frontend/src/router/index.ts

@@ -2,9 +2,20 @@ import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '@/views/HomeView.vue'
 import AboutView from '@/views/AboutView.vue'
 import CvView from "@/views/CvView.vue";
+import ApprenticeshipView from "@/views/ApprenticeshipView.vue";
+import Sae201View from "@/views/Sae201View.vue";
+import Sae301View from "@/views/Sae301View.vue";
+import Sae302View from "@/views/Sae302View.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
+    scrollBehavior(to, from, savedPosition) {
+    if (savedPosition) {
+      return savedPosition
+    } else {
+      return { top: 0 }
+    }
+  },
   routes: [
     {
       path: '/',
@@ -20,6 +31,26 @@ const router = createRouter({
       path: '/cv',
       name: 'cv',
       component: CvView
+    },
+    {
+      path: '/apprenticeship',
+      name: 'apprenticeship',
+      component: ApprenticeshipView
+    },
+    {
+      path: '/sae201',
+      name: 'sae201',
+      component: Sae201View
+    },
+    {
+      path: '/sae301',
+      name: 'sae301',
+      component: Sae301View
+    },
+    {
+      path: '/sae302',
+      name: 'sae302',
+      component: Sae302View
     }
   ],
 })

frontend/src/views/AboutView.vue

@@ -80,14 +80,13 @@
         <br>
         <p>Want a linktree ? Have one.</p>
         <ul>
-          <li><a href="">Backloggd</a></li>
+          <li><a href="https://backloggd.com/u/Akorona/">Backloggd</a></li>
-          <li><a href="">Steam</a></li>
+          <li><a href="https://steamcommunity.com/profiles/76561198347930009/">Steam</a></li>
-          <li><a href="">Discord</a></li>
+          <li><a href="https://discord.com/users/281342667781308417/">Discord</a></li>
-          <li><a href="">GitHub</a></li>
+          <li><a href="https://github.com/Akomry/">GitHub</a></li>
-          <li><a href="">Itch.io</a></li>
+          <li><a href="https://akorona.itch.io/">Itch.io</a></li>
-          <li><a href="">SoundCloud</a></li>
+          <li><a href="https://soundcloud.com/akorona/">SoundCloud</a></li>
-          <li><a href="">AniList</a></li>
+          <li><a href="https://anilist.co/user/Akorona/">AniList</a></li>
-          <li><a href="">Instagram</a></li>
         </ul>
       </div>
       <div>

frontend/src/views/ApprenticeshipView.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+</template>
+
+<style scoped lang="scss">
+
+</style>

frontend/src/views/CvView.vue

@@ -1,35 +1,60 @@
 <script setup lang="ts">
 
+import {RouterLink} from "vue-router";
 </script>
 
 <template>
   <div class="center">
-    <h1>Web Resume</h1>
+    <h1>{{ $t('cv.title') }}</h1>
   </div>
 
   <div class="margin flex space-around">
     <div>
-        <h2>Coordinates</h2>
+        <h2>{{ $t('cv.coord') }}</h2>
         <p>Emi BOUCLY</p>
         <p>34 rue de Mortillet, 38000 Grenoble</p>
         <p><a href="mailto:emi.boucly38@gmail.com">emi.boucly38@gmail.com</a></p>
         <p><a href="tel:0768280432">07 68 28 04 32</a></p>
-        <p>19 years old</p>
+        <p>{{ $t('cv.age') }}</p>
     </div>
 
     <div>
-      <h2>Education</h2>
+      <h2>{{ $t('cv.formation') }}</h2>
-      <p>2024/2025 - 2nd year of Networking and Telecommunications</p>
+      <p>2024/2025 - {{ $t('cv.rt') }}</p>
-      <em style="font-size: smaller">IUT1 from Grenoble - Saint-Martin-d'Hères</em>
+      <em style="font-size: smaller">{{ $t('cv.iut') }}</em>
 
       <br><br>
-      <p>2022/2023 - High school diploma</p>
+      <p>2022/2023 - {{ $t('cv.bac') }}</p>
-      <em style="font-size: smaller">Charles-Gabriel Pravaz High School - Pont de Beauvoisin</em> <br>
+      <em style="font-size: smaller">{{ $t('cv.lycee') }} - Pont de Beauvoisin</em> <br>
-      <em style="font-size: smaller">Math, English Literature, Expert Maths, with high honours</em>
+      <em style="font-size: smaller">{{ $t('cv.spebac') }}</em>
 
 
     </div>
 
+    <div>
+      <h2>{{ $t('cv.lang') }}</h2>
+      <p>{{ $t('cv.francais') }}</p>
+      <p>{{ $t('cv.anglais') }}</p>
+      <p>{{ $t('cv.allemand') }}</p>
+    </div>
+
+    <div>
+      <h2>{{ $t('cv.comp') }}</h2>
+      <p>{{ $t('cv.prog') }}</p>
+      <p>{{ $t('cv.devnet') }}</p>
+      <p>{{ $t('cv.cont') }}</p>
+      <p>{{ $t('cv.ad') }}</p>
+      <p>{{ $t('cv.db') }}</p>
+      <p>{{ $t('cv.automate') }}</p>
+    </div>
+
+    <div>
+      <h2>Experience</h2>
+      <h3><RouterLink to="/apprenticeship">Impactiv'</RouterLink></h3>
+      <em style="font-size: smaller">2024 - Now</em>
+      <p>IT and networking technician in a co-op program.</p>
+    </div>
+
     <div>
       <h2></h2>
     </div>
@@ -37,5 +62,7 @@
 </template>
 
 <style scoped lang="scss">
-
+  h2 {
+    text-align: center;
+  }
 </style>

frontend/src/views/HomeView.vue

@@ -24,7 +24,7 @@ import { Icon } from '@iconify/vue'
 │ \___||_| |_| |_||_||_|\_\\___/(_)|_|  |_|   │
 └─────────────────────────────────────────────┘</pre>
       <div class="center">
-        <h1>Welcome to my website !</h1>
+        <h1>{{ $t('home.welcome') }}</h1>
         <button class="scroll-indicator" style="margin-top: 12%" @click="scrollToProjects()">
           <Icon icon="mingcute:down-line" style="width: 3rem; height: 3rem;" width="3rem" />
         </button>

frontend/src/views/Sae201View.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+<div class="margin">
+  <div>
+    <h2>What is SAE201?</h2>
+    <div class="grid">
+      <p class="marginauto">
+        During this project, I proceeded to the installation simulation of a microenterprise's networking system.
+        For this I used tools like OpenStack to create virtual machines and networks. Then, I installed various services
+        on CentOS Stream 8 machines. Those services includes Apache, DNSMasq, Grafana & Prometheus, and Nextcloud.
+      </p>
+      <img class="marginauto" src="../components/images/openstack.png" alt="openstack logo" width="300">
+    </div>
+  </div>
+  <div class="grid">
+    <img class="marginauto" src="../components/images/schema_reseau.png" alt="network_scheme" width="500">
+    <p class="marginauto">
+      The simulated network was independant for each group. To access to our machines, we had to use virtual machines
+      running Windows which had elastic IPs connected to our university's VPN.
+    </p>
+    <br>
+  </div>
+  <div class="grid">
+    <div>
+      <h2>What I learnt</h2>
+      <ul>
+        <li>Install Linux services</li>
+        <li>Create bash scripts and manage a Linux system</li>
+        <li>Debug using tools such as Wireshark or TCPDump</li>
+      </ul>
+    </div>
+    <div>
+      <h2>My feelings</h2>
+      <p>
+        It's the project I loved the most this year. Having an appetite for Linux systems and their manipulation, I enjoyed
+        working on this project
+      </p>
+    </div>
+  </div>
+</div>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>

frontend/src/views/Sae301View.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+<div class="margin">
+  <h2>What is SAE301?</h2>
+  <div class="grid">
+    <img style="grid-column: 2; grid-row: 1;" src="../components/images/sae301-scheme.jpg" alt="file_scheme" width="500">
+    <p class="marginauto" style="grid-column: 1; grid-row: 1;">
+      This project was dedicated to make amplitude modulation on a RZ signal. We studied the whole circuitry, made the
+      electronic schemes and calculated every component value to make everything work.
+      We used an NE-555 to generate an NRZ signal, then used a programmable circuit to convert it to an RZ signal,
+      then used a Wien bridge oscillator to generate a carrier sine that we multiplied to the RZ signal to modulate it.
+      After modulation, we made a synchronous demodulation using the generated carrier, a multiplier and a low-pass filter.
+    </p>
+  </div>
+</div>
+<div class="margin grid">
+  <!--
+  <div>
+    <p>
+
+    </p>
+    <img src="../components/images/sae204-elec.jpg" alt="elec_circuitry">
+  </div>
+  <hr>
+  -->
+  <div>
+    <h2>What I learnt</h2>
+    <ul>
+      <li>How an amplitude modulation works (+ demodulation)</li>
+      <li>How to make an oscillator from scratch</li>
+      <li>To brainstorm and work as a group</li>
+      <li>How a NE-555 works to generate an NRZ signal</li>
+    </ul>
+  </div>
+  <div>
+    <h2>My feelings</h2>
+    <div>
+      This was complicated. We had to do a lot of calculus and brainstorming,
+      deduce spectral densities of the various signals,
+      without doing any circuitry.
+      But still it was fun and interesting to learn.
+    </div>
+  </div>
+</div>
+
+
+</template>
+
+<style scoped lang="scss">
+
+</style>

frontend/src/views/Sae302View.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+<div class="margin">
+
+  <h2>What is SAE302?</h2>
+  <div class="grid">
+    <p class="marginauto">
+      Basically, I had to recreate a communication app using JavaFX.
+      From the very basics, I had to use SceneBuilder to create our graphical environment, then create the whole
+      controller stack using callbacks. I then wrote a TCP server and client, and incorporated them in the client app.
+      Even though we were guided through this project, only a few managed to finish it.
+    </p>
+    <img class="marginauto" src="../components/images/sae302-screen.png" alt="app-screen" width="500">
+  </div>
+  <br>
+
+  <div class="grid">
+    <img class="marginauto" src="../components/images/sae302-intellij.png" alt="intellij" width="700">
+    <p class="marginauto">We also had to use git versioning, and the whole code is available to download on
+      <a href="https://github.com/Akomry/sae302_applicom">GitHub</a>. I used the IntelliJ IDE.</p>
+  </div>
+  <br>
+
+  <div class="grid">
+    <div>
+      <h2>What I learnt</h2>
+      <ul>
+        <li>How to code in Java and in Object-Oriented Programming</li>
+        <li>How to create a graphical application using JavaFX</li>
+        <li>How to communicate between to apps using TCP</li>
+      </ul>
+    </div>
+    <div>
+      <h2>My feelings</h2>
+      <p>
+        My favorite project of the year, again. It was fun to develop such an app, and I was thrilled to finally code in
+        Java and/or OOP.
+      </p>
+    </div>
+  </div>
+</div>
+
+
+</template>
+
+<style scoped lang="scss">
+
+</style>