From dca75fb6aedf01a3d17a3dfbf2fcbe43e0801071 Mon Sep 17 00:00:00 2001
From: jlav <jlav@pm.me>
Date: Sat, 29 Aug 2026 14:05:16 +0200
Subject: [PATCH] add style

---
 src/App.vue | 93 +++++++++++++++++++++++++----------------------------
 1 file changed, 43 insertions(+), 50 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3d8f1bf..3e5256e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 // TODO changer separateur entre lieux et  f
-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 EducationYear from './components/EducationYear.vue'
-import EducationCard from './components/EducationCard.vue'
-import SideMenu from './components/SideMenu.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 EducationYear from "./components/EducationYear.vue";
+import EducationCard from "./components/EducationCard.vue";
+import SideMenu from "./components/SideMenu.vue";
 </script>
 <template>
   <div class="candidateHeader">
@@ -33,90 +33,75 @@ import SideMenu from './components/SideMenu.vue'
       <JobCard>
         <CompanyName> JobTeaser, Paris 9 — Front - end engineer </CompanyName>
         <JobDates> May 2019 – January 2021 </JobDates>
-        <JobDescription
-          >Designing and developing <LangLine>React</LangLine>, <LangLine>NodeJs</LangLine> web
+        <JobDescription>Designing and developing <LangLine>React</LangLine>, <LangLine>NodeJs</LangLine> web
           application observing company guideline
         </JobDescription>
       </JobCard>
       <JobCard>
         <CompanyName> Qwant Research, Paris 16 — Front - end engineer </CompanyName>
         <JobDates>December 2017 - April 2019 </JobDates>
-        <JobDescription
-          >High performance Maps application front-end development using <LangLine>VueJS</LangLine>,
+        <JobDescription>High performance Maps application front-end development using <LangLine>VueJS</LangLine>,
           <LangLine>Axios</LangLine>, <LangLine>SCSS</LangLine>, vector tiles Build a tool maps
-          application</JobDescription
-        >
+          application
+        </JobDescription>
       </JobCard>
       <JobCard>
         <CompanyName>Qwant, Nice — Front - end engineer </CompanyName>
         <JobDates>October 2015 - November 2017 </JobDates>
-        <JobDescription
-          >Core building for the Search application front-end in
+        <JobDescription>Core building for the Search application front-end in
           <LangLine>vanilla JavaScript</LangLine>, stack internationalization, automated build and
           quality control in collaboration with the CI team <br />Qwant lite : an SSR version of
           Qwant search SPA in <LangLine>NodeJS</LangLine> and
-          <LangLine>ExpressJS</LangLine></JobDescription
-        >
+          <LangLine>ExpressJS</LangLine>
+        </JobDescription>
       </JobCard>
       <JobCard>
         <CompanyName> CrossKnowledge Epistema, Nice — Front - end engineer </CompanyName>
         <JobDates> April 2014 - September 2014 </JobDates>
-        <JobDescription
-          >Migration from jQuery UI module to <LangLine>extJs</LangLine> on a multi page application
-          including calendar, charts, autocomplete</JobDescription
-        >
+        <JobDescription>Migration from jQuery UI module to <LangLine>extJs</LangLine> on a multi page application
+          including calendar, charts, autocomplete</JobDescription>
       </JobCard>
       <JobCard>
         <CompanyName> Air France, Sophia-Antipolis — Front - end engineer </CompanyName>
         <JobDates>July 2013 - mars 2014</JobDates>
-        <JobDescription
-          >Content Management System (CMS) integration for complex static webpage using
-          <LangLine>jQuery UI</LangLine> and <LangLine>TeamSite CMS</LangLine></JobDescription
-        >
+        <JobDescription>Content Management System (CMS) integration for complex static webpage using
+          <LangLine>jQuery UI</LangLine> and <LangLine>TeamSite CMS</LangLine>
+        </JobDescription>
       </JobCard>
       <JobCard>
         <CompanyName>Koedia, Sophia-Antipolis, Nice — Full - stack engineer </CompanyName>
         <JobDates> February 2012 - June 2013 </JobDates>
-        <JobDescription
-          >Creation of new web services for plane reservation including automatic test, monitoring
+        <JobDescription>Creation of new web services for plane reservation including automatic test, monitoring
           and Optimizing B2B & B2C web application Adding core features on the ticketing application
-          <LangLine>RedMine</LangLine></JobDescription
-        >
+          <LangLine>RedMine</LangLine>
+        </JobDescription>
       </JobCard>
       <JobCard>
         <CompanyName>Self - employed WEB developer, Nice — Software developer</CompanyName>
         <JobDates>2009 - 2012</JobDates>
-        <JobDescription
-          >Web portal and Shop Creation using <LangLine>Ruby on Rails</LangLine>,
-          <LangLine>MySql</LangLine> and <LangLine>Capristano</LangLine></JobDescription
-        >
+        <JobDescription>Web portal and Shop Creation using <LangLine>Ruby on Rails</LangLine>,
+          <LangLine>MySql</LangLine> and <LangLine>Capristano</LangLine>
+        </JobDescription>
       </JobCard>
       <JobCard>
         <CompanyName>I3S, Sophia - Antipolis, Nice — Developer(Intern)</CompanyName>
         <JobDates>June 2011 - August 2011</JobDates>
-        <JobDescription
-          >Hoare logic based genetic network dynamic resolution application
-          creation.</JobDescription
-        >
+        <JobDescription>Hoare logic based genetic network dynamic resolution application
+          creation.</JobDescription>
       </JobCard>
       <JobCard>
-        <CompanyName
-          >Nice Sophia - Antipolis university, Appliqued Language Laboratory LEA, Nice —
+        <CompanyName>Nice Sophia - Antipolis university, Appliqued Language Laboratory LEA, Nice —
           Developer(Intern)
         </CompanyName>
         <JobDates>June 2010 - August 2010</JobDates>
-        <JobDescription
-          >Translation and collaborative tool between student and teacher conception and
+        <JobDescription>Translation and collaborative tool between student and teacher conception and
           realisation. Serious game making with complete story editor, game and story market place
-          using early EcmaScript6 features and support.</JobDescription
-        >
+          using early EcmaScript6 features and support.</JobDescription>
       </JobCard>
       <JobCard>
         <CompanyName>Arkadia Consulting, Nice— Developer (Intern)</CompanyName>
         <JobDates>June 2009 - August 2009</JobDates>
-        <JobDescription
-          >Making and designing CMS websites from scratch in Ruby on Rails</JobDescription
-        >
+        <JobDescription>Making and designing CMS websites from scratch in Ruby on Rails</JobDescription>
       </JobCard>
       <h3 id="education">EDUCATION</h3>
       <EducationCard>
@@ -131,11 +116,11 @@ import SideMenu from './components/SideMenu.vue'
       </EducationCard>
       <h3 id="skills">SKILLS</h3>
       <div class="section">
-        <h4>Front end</h4>
+        <h4 class="HobbiesSection">Front end</h4>
         HTML, CSS, JavaScript, Typescript, React, Vue.js
-        <h4>Back end</h4>
+        <h4 class="HobbiesSection">Back end</h4>
         Java, NodeJs, PHP
-        <h4>Databases</h4>
+        <h4 class="HobbiesSection">Databases</h4>
         MySql, PostresSQL, SQLite
       </div>
       <h3>Sensibilities</h3>
@@ -165,6 +150,7 @@ BODY {
   color: var(--color-main);
   font-family: cascadia;
 }
+
 .section {
   padding-left: 32px;
 }
@@ -173,12 +159,14 @@ BODY {
   display: flex;
   width: 900px;
 }
+
 @media (max-width: 1279px) {
   .content {
     flex-direction: column;
     width: 100%;
   }
 }
+
 .candidateHeader {
   margin-left: 200px;
 }
@@ -192,7 +180,12 @@ H3 {
   text-transform: uppercase;
   margin-top: 48px;
 }
+
 H4 {
   margin-top: 0;
 }
+
+.HobbiesSection {
+  margin-top: 32px;
+}
 </style>