From 5b2fa435e1f807cd485cf0d868b5f45ac5f2a2d0 Mon Sep 17 00:00:00 2001
From: jlav <jlav@pm.me>
Date: Mon, 17 Aug 2026 13:36:41 +0200
Subject: [PATCH] add section

---
 src/App.vue                       | 27 ++++++++++++++++++++-------
 src/components/CompanyName.vue    |  4 +++-
 src/components/EducationCard.vue  |  3 ++-
 src/components/JobCard.vue        |  2 +-
 src/components/JobDates.vue       |  8 +++++++-
 src/components/JobDescription.vue | 13 +++++++++++++
 src/components/Langline.vue       |  3 ++-
 src/components/SideMenu.vue       |  6 ++----
 src/main.css                      | 31 +++++++++++++++++--------------
 9 files changed, 67 insertions(+), 30 deletions(-)
 create mode 100644 src/components/JobDescription.vue

diff --git a/src/App.vue b/src/App.vue
index 1d64e9b..cd362f9 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/CompanyName.vue b/src/components/CompanyName.vue
index 4636240..5b0dd04 100644
--- a/src/components/CompanyName.vue
+++ b/src/components/CompanyName.vue
@@ -1,4 +1,6 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+
+</script>
 <template>
   <h4 class="CompanyName">
     <slot />
diff --git a/src/components/EducationCard.vue b/src/components/EducationCard.vue
index 4c16547..1b1ed8c 100644
--- a/src/components/EducationCard.vue
+++ b/src/components/EducationCard.vue
@@ -1,4 +1,5 @@
-<script setup></script>
+<script setup lang="ts">
+</script>
 <template>
   <div class="EducationCard">
     <slot />
diff --git a/src/components/JobCard.vue b/src/components/JobCard.vue
index b196b7a..345ff14 100644
--- a/src/components/JobCard.vue
+++ b/src/components/JobCard.vue
@@ -1,4 +1,4 @@
-<script setup></script>
+<script setup lang="ts"></script>
 <template>
   <div class="JobCard">
     <slot />
diff --git a/src/components/JobDates.vue b/src/components/JobDates.vue
index 3942d4f..2e81301 100644
--- a/src/components/JobDates.vue
+++ b/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>
diff --git a/src/components/JobDescription.vue b/src/components/JobDescription.vue
new file mode 100644
index 0000000..745e99a
--- /dev/null
+++ b/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>
diff --git a/src/components/Langline.vue b/src/components/Langline.vue
index 1cb1cf5..13ecf6b 100644
--- a/src/components/Langline.vue
+++ b/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>
diff --git a/src/components/SideMenu.vue b/src/components/SideMenu.vue
index 18418c2..6ea7daa 100644
--- a/src/components/SideMenu.vue
+++ b/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 {
diff --git a/src/main.css b/src/main.css
index 80b4974..24dc336 100644
--- a/src/main.css
+++ b/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%;
+	}
 }