add section

src/App.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import Langline from "@/components/Langline.vue";
+import JobDescription from "./components/JobDescription.vue";
+import LangLine from "@/components/Langline.vue";
 import JobDates from "@/components/JobDates.vue";
 import CompanyName from "@/components/CompanyName.vue";
 import JobCard from "@/components/JobCard.vue";
 import EducationCard from "./components/EducationCard.vue";
 import SideMenu from "./components/SideMenu.vue";
 </script>
-
 <template>
   <div class="content">
     <SideMenu />
     <div>
       <div class="candidateHeader">
         <h1>Julien Laville</h1>
-        <h2>Senior fullstack developper </h2>
+        <h2>Senior fullstack developper</h2>
       </div>
       <h3>EXPERIENCE</h3>
       <JobCard>
@@ -23,14 +23,15 @@ import SideMenu from "./components/SideMenu.vue";
           Designing and developing high performance web application observing company target technology – React
           Typescript
           <LangLine>NodeJs</LangLine>
-          Integrating new feature on multiple solution.Designing future target stack from PHP SSR to SPA, based on best
+          Integrating new feature on multiple solution. Designing future target stack from PHP SSR to SPA, based on best
           practice – VueJs NodeJs PHP.
         </JobDescription>
       </JobCard>
       <JobCard>
         <CompanyName> JobTeaser, Paris 9 — Front - end engineer </CompanyName>
         <JobDates> may 2019 – january 2021 </JobDates>
-        Designing and developing React web application observing to company guideline – NodeJs, React.
+        <JobDescription>Designing and developing React web application observing to company guideline – NodeJs, React.
+        </JobDescription>
       </JobCard>
       <JobCard>
         <CompanyName> Qwant Research, Paris 16 — Front - end engineer </CompanyName>
@@ -109,12 +110,19 @@ import SideMenu from "./components/SideMenu.vue";
       <h4>Backend:</h4>
       Java, NodeJs, PhP
       <h4>Databases:</h4>
-      MySql, PostgresSQL, SQLite
+      MySql, PostresSQL, SQLite
       <ul>
         <li>internationalization</li>
         <li>accessibility</li>
         <li>testability</li>
-        <li>algorithmic complexity</li>
+        <li>alorithmic complexity</li>
+      </ul>
+    </div>
+    <div>
+      <h3>Hobies</h3>
+      <ul>
+        <li>Home lab</li>
+        <li>radioControl fpv plane</li>
       </ul>
     </div>
   </div>
@@ -135,4 +143,9 @@ BODY {
 .candidateHeader {
   margin-left: 200px;
 }
+
+H2 {
+  letter-spacing: 2px;
+  color: var(--color-secondary-text);
+}
 </style>

src/components/CompanyName.vue

@@ -1,4 +1,6 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+
+</script>
 <template>
   <h4 class="CompanyName">
     <slot />

src/components/EducationCard.vue

@@ -1,4 +1,5 @@
-<script setup></script>
+<script setup lang="ts">
+</script>
 <template>
   <div class="EducationCard">
     <slot />

src/components/JobCard.vue

@@ -1,4 +1,4 @@
-<script setup></script>
+<script setup lang="ts"></script>
 <template>
   <div class="JobCard">
     <slot />

src/components/JobDates.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 
 </script>
 <template>
@@ -6,3 +6,9 @@
     <slot />
   </h5>
 </template>
+<style lang="css" scoped>
+.JobDates {
+  letter-spacing: 1px;
+  font-size: 14px;
+}
+</style>

src/components/JobDescription.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+
+</script>
+<template>
+  <span class="JobDescription">
+    <slot />
+  </span>
+</template>
+<style lang="css" scoped>
+.JobDescription {
+  color: var(--color-discreet);
+}
+</style>

src/components/Langline.vue

@@ -1,4 +1,4 @@
-<script setup></script>
+<script setup lang="ts"></script>
 <template>
   <span class="LangLine">
     <slot />
@@ -6,6 +6,7 @@
 </template>
 <style lang="css" scoped>
 .LangLine {
+  color: var(--color-amphasys);
   font-family: logic;
 }
 </style>

src/components/SideMenu.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 
 </script>
 <template>
@@ -13,9 +13,7 @@
 </template>
 <style lang="css" scoped>
 .SideMenu {
-  position: fixed;
-  left: 0;
-  top: 50%;
+  padding: 32px;
 }
 
 .menuItems {

src/main.css

@@ -1,25 +1,28 @@
 @font-face {
-  font-family: "cascadia";
-  font-style: normal;
-  src:
-    local("cascadia"),
-    url(./static/fonts/cascadia_code/woff2/CascadiaCode.woff2);
+	font-family: "cascadia";
+	font-style: normal;
+	src:
+		local("cascadia"),
+		url(./static/fonts/cascadia_code/woff2/CascadiaCode.woff2);
 }
 
 @font-face {
-  font-family: "logic";
-  font-style: normal;
-  src:
-    local("logic"), url(./static/fonts/logic/logicmonoscripttrial-medium.otf);
+	font-family: "logic";
+	font-style: normal;
+	src:
+		local("logic"), url(./static/fonts/logic/logicmonoscripttrial-medium.otf);
 }
 
 :root {
-  --color-main: white;
-  --size-card-width: 500px;
+	--color-amphasys: #d27e99;
+	--color-secondary-text: #87a987;
+	--color-discreet: #9e9b93;
+	--color-main: white;
+	--size-card-width: 500px;
 }
 
 @media screen and (min-width: 1024) {
-  :root {
-    --size-card-width: 100%;
-  }
+	:root {
+		--size-card-width: 100%;
+	}
 }