responsvness

src/App.vue

@@ -1,123 +1,154 @@
 <script setup lang="ts">
-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";
+// 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'
 </script>
 <template>
+  <div class="candidateHeader">
+    <h1>Julien Laville</h1>
+    <h2>Senior full-stack developer</h2>
+  </div>
   <div class="content">
     <SideMenu />
     <div>
-      <div class="candidateHeader">
-        <h1>Julien Laville</h1>
-        <h2>Senior full-stack developer</h2>
-      </div>
-      <h3>EXPERIENCE</h3>
+      <h3 id="experience">EXPERIENCE</h3>
       <JobCard>
-        <CompanyName>Easyence - Mediarithmics, Paris — Full - stack lead developer</CompanyName>
+        <CompanyName>Easyence - Mediarithmics, Paris — Fullstack lead developer</CompanyName>
         <JobDates> February 2021 - February 2025 </JobDates>
         <JobDescription>
           Designing and developing high performance web application observing company target
-          technology –
-          <LangLine>React </LangLine>
-          <LangLine>Typescript </LangLine>
-          <LangLine>NodeJs </LangLine>
-          Integrating new feature on multiple solution. Designing future target stack from PHP SSR
-          to SPA, based on best practice – Vue.js NodeJs PHP.
+          technology using
+          <LangLine> React</LangLine>, <LangLine>Typescript </LangLine> and
+          <LangLine>NodeJs </LangLine> <br />
+          Migrate AngularJs + PHP monolith to <LangLine>VueJS</LangLine> SPA<br />
+          Secure multiple application regarding pentest report
         </JobDescription>
       </JobCard>
       <JobCard>
         <CompanyName> JobTeaser, Paris 9 — Front - end engineer </CompanyName>
         <JobDates> May 2019 – January 2021 </JobDates>
-        <JobDescription>Designing and developing React web application observing to company guideline – NodeJs,
-          React.
+        <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 VueJS, Axios, SCSS,
-          vector tiles Build a tool maps application in vueJs</Jobdescription>
+        <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
+        >
       </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 vanilla JavaScript, stack
-          internationalization, automated build and quality control in collaboration with the CI
-          team <br />Qwant lite : an SSR version of Qwant search SPA in NodeJS and
-          ExpressJS</JobDescription>
+        <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
+        >
       </JobCard>
       <JobCard>
         <CompanyName> CrossKnowledge Epistema, Nice — Front - end engineer </CompanyName>
         <JobDates> April 2014 - September 2014 </JobDates>
-        <JobDescription>Full replacement of jQuery UI module by extJs on the back - office 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 integration for complex static webpage using jQuery UI and
-          TeamSite CMS</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 test and monitoring
-          Monitoring and Optimizing B2B & B2C web application Adding core features on the ticketing
-          application RedMine</JobDescription>
+        <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
+        >
       </JobCard>
       <JobCard>
         <CompanyName>Self - employed WEB developer, Nice — Software developer</CompanyName>
         <JobDates>2009 - 2012</JobDates>
-        Web portal and Shop Creation using Ruby on Rails framework
+        <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>
-        Hoare logic based genetic network dynamic resolution application creation.
+        <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>
         <JobDates>June 2010 - August 2010</JobDates>
-        <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>
+        <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
+        >
       </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>EDUCATION</h3>
+      <h3 id="education">EDUCATION</h3>
       <EducationCard>
-        <EducationYear>2011</EducationYear> Nice Sophia - Antipolis university Computer science
-        Master degree, engineering & foundations
+        <EducationYear>2011</EducationYear>
+        <EducationLocation> Nice Sophia - Antipolis university </EducationLocation><br />
+        Computer science Master degree, engineering & foundations
       </EducationCard>
       <EducationCard>
-        <EducationYear>2009</EducationYear> Nice Sophia - Antipolis university Mathematics &
-        Computer science Licence
+        <EducationYear>2009</EducationYear>
+        <EducationLocation> Nice Sophia - Antipolis university </EducationLocation><br />
+        Mathematics & Computer science Licence
       </EducationCard>
-      <h3>SKILLS</h3>
-      <h4>Front end:</h4>
-      HTML, CSS, JavaScript, Typescript, React, Vue.js
-      <h4>Back end:</h4>
-      Java, NodeJs, PhP
-      <h4>Databases:</h4>
-      MySql, PostresSQL, SQLite
-      <ul>
-        <li>internationalization</li>
-        <li>accessibility</li>
-        <li>testability</li>
-        <li>algorithmic complexity</li>
-      </ul>
-      <div>
-        <h3>Hobbies</h3>
+      <h3 id="skills">SKILLS</h3>
+      <div class="section">
+        <h4>Front end</h4>
+        HTML, CSS, JavaScript, Typescript, React, Vue.js
+        <h4>Back end</h4>
+        Java, NodeJs, PHP
+        <h4>Databases</h4>
+        MySql, PostresSQL, SQLite
+      </div>
+      <h3>Sensibilities</h3>
+      <div class="section">
+        <ul>
+          <li>internationalization</li>
+          <li>accessibility</li>
+          <li>testability</li>
+          <li>algorithmic complexity</li>
+        </ul>
+      </div>
+      <h3 id="hobbies">Hobbies</h3>
+      <div class="section">
         <ul>
           <li>Homelab</li>
           <li>Radio Control FPV plane</li>
@@ -134,11 +165,20 @@ BODY {
   color: var(--color-main);
   font-family: cascadia;
 }
+.section {
+  padding-left: 32px;
+}
 
 .content {
   display: flex;
+  width: 900px;
+}
+@media (max-width: 1279px) {
+  .content {
+    flex-direction: column;
+    width: 100%;
+  }
 }
-
 .candidateHeader {
   margin-left: 200px;
 }
@@ -152,4 +192,7 @@ H3 {
   text-transform: uppercase;
   margin-top: 48px;
 }
+H4 {
+  margin-top: 0;
+}
 </style>

src/components/EducationCard.vue

@@ -1,5 +1,4 @@
-<script setup lang="ts">
-</script>
+<script setup lang="ts"></script>
 <template>
   <div class="EducationCard">
     <slot />
@@ -7,6 +6,8 @@
 </template>
 <style>
 .EducationCard {
-  width: var(--size-card-width);
+  width: 100%;
+  margin: 16px 0;
+  padding-left: 32px;
 }
 </style>

src/components/EducationLocation.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+<template>
+  <span class="EducationLocation"><slot /></span>
+</template>
+<style lang="css" scoped>
+.EducationLocation {
+  color: #123123;
+}
+</style>

src/components/EducationYear.vue

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

src/components/JobCard.vue

@@ -2,10 +2,24 @@
 <template>
   <div class="JobCard">
     <slot />
+    <div class="JobCard__separator"></div>
   </div>
 </template>
 <style scoped>
 .JobCard {
-  width: 600px;
+  padding-left: 32px;
+}
+.JobCard__separator {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.JobCard__separator::before {
+  content: '';
+  margin: 32px;
+  width: 70px;
+  height: 2px;
+  background-color: rgba(255, 255, 255, 0.3);
+  display: block;
 }
 </style>

src/components/JobDescription.vue

@@ -1,7 +1,4 @@
-<script setup lang="ts">
-
-u
-</script>
+<script setup lang="ts"></script>
 <template>
   <span class="JobDescription">
     <slot />

src/components/Langline.vue

@@ -8,5 +8,10 @@
 .LangLine {
   color: var(--color-amphasys);
   font-family: logic;
+  border-radius: 0.2rem;
+  background-color: rgba(0, 0, 0, 0.4);
+  display: inline-block;
+  padding: 0 0.2rem;
+  margin: 0 0.2rem;
 }
 </style>

src/components/SideMenu.vue

@@ -1,23 +1,44 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+function scrollTo(to: string) {
+  document.getElementById(to)?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+}
+</script>
 <template>
   <div class="SideMenu">
-    <h4>Menu</h4>
-    <ul class="menuItems">
-      <li>Education</li>
-      <li>Skills</li>
-      <li>Experiences</li>
-      <li></li>
-    </ul>
+    <div class="menuBox">
+      <h4>Menu</h4>
+      <ul class="menuItems">
+        <li><a @click.prevent="scrollTo('experiences')" href="#">Experiences</a></li>
+        <li><a @click.prevent="scrollTo('education')" href="#">Education</a></li>
+        <li><a @click.prevent="scrollTo('skills')" href="#">Skills</a></li>
+        <li><a @click.prevent="scrollTo('hobbies')" href="#">Hobbies</a></li>
+      </ul>
+    </div>
   </div>
 </template>
 <style lang="css" scoped>
 .SideMenu {
   padding: 32px;
 }
+.menuBox {
+  border-right: 1px solid #afafaf;
+}
+@media (max-width: 1279px) {
+  .SideMenu {
+    display: none;
+  }
+}
 
 .menuItems {
   list-style: none;
-  border-right: 1px solid #afafaf;
-  padding: 0 32px;
+  padding-right: 32px;
+  padding-left: 0;
+  margin: 1rem 0;
+}
+</style>
+<style>
+a {
+  text-decoration: none;
+  color: inherit;
 }
 </style>