lint

2026-08-30 18:53:48 +02:00 · 2026-08-30 18:53:48 +02:00 · 361deedfa8
commit 361deedfa8
parent 6557cf45c2
4 changed files with 133 additions and 67 deletions
--- a/src/App.vue
+++ b/src/App.vue
@ -1,54 +1,62 @@
 <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 IAm from './components/IAm.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">
-    <h1>Julien Laville</h1>
+    <h1>
+      Julien Laville
+      <IAm :w="available" />
+    </h1>
    <h2>Senior full-stack developer</h2>
+    <p>I deliver and deploy secure, fast, internationalized and accessible web applications.</p>
  </div>
  <div class="content">
    <SideMenu />
    <div>
      <h3 id="experience">EXPERIENCE</h3>
      <JobCard>
-        <CompanyName>Easyence - Mediarithmics, Paris — Fullstack 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 using
+          Design target architecture and mentor developer team to achieve migration to the new stack
          <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
+          Secure multiple big data and e-marketing applications
        </JobDescription>
      </JobCard>
      <JobCard>
-        <CompanyName> JobTeaser, Paris 9 — Front - end engineer </CompanyName>
+        <CompanyName> JobTeaser, Paris 9 — Frontend engineer </CompanyName>
        <JobDates> May 2019 – January 2021 </JobDates>
-        <JobDescription>Designing and developing <LangLine>React</LangLine>, <LangLine>NodeJs</LangLine> web
-          application observing company guideline
+        <JobDescription
+          >Define architecture of new web application in <LangLine>React</LangLine>,
+          <LangLine>NodeJs</LangLine><br />
+          Write guidelines for frontend / backend communication
        </JobDescription>
      </JobCard>
      <JobCard>
-        <CompanyName> Qwant Research, Paris 16 — Front - end engineer </CompanyName>
+        <CompanyName> Qwant Research, Paris 16 — Frontend engineer </CompanyName>
        <JobDates>December 2017 - April 2019 </JobDates>
-        <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
+          >Develop high performance Maps application frontend 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
+        <JobDescription
+          >Core building for the Search application frontend 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
@ -56,77 +64,90 @@ import SideMenu from "./components/SideMenu.vue";
        </JobDescription>
      </JobCard>
      <JobCard>
-        <CompanyName> CrossKnowledge Epistema, Nice — Front - end engineer </CompanyName>
+        <CompanyName> CrossKnowledge Epistema, Nice — Frontend 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>
+        <CompanyName> Air France, Sophia-Antipolis — Frontend engineer </CompanyName>
        <JobDates>July 2013 - mars 2014</JobDates>
-        <JobDescription>Content Management System (CMS) integration for complex static webpage using
+        <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>
      </JobCard>
      <JobCard>
-        <CompanyName>Self - employed WEB developer, Nice — Software developer</CompanyName>
+        <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>,
+        <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 in plain <LangLine>Java</LangLine>.</JobDescription>
+        <JobDescription
+          >Hoare logic based genetic network dynamic resolution application creation in plain
+          <LangLine>Java</LangLine>.</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 <LangLine>EcmaScript6</LangLine> features and support.</JobDescription>
+          using early <LangLine>EcmaScript6</LangLine> 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 <LangLine>Ruby on Rails</LangLine>
+        <JobDescription
+          >Making and designing CMS websites from scratch in <LangLine>Ruby on Rails</LangLine>
        </JobDescription>
      </JobCard>
      <h3 id="education">EDUCATION</h3>
      <EducationCard>
        <EducationYear>2011</EducationYear>
        <EducationLocation> Nice Sophia - Antipolis university </EducationLocation><br />
-        Computer science Master degree, engineering & foundations
+        <span class="secondary">Computer science Master degree, engineering & foundations</span>
      </EducationCard>
      <EducationCard>
        <EducationYear>2009</EducationYear>
        <EducationLocation> Nice Sophia - Antipolis university </EducationLocation><br />
-        Mathematics & Computer science Licence
+        <span class="secondary">Mathematics & Computer science Licence</span>
      </EducationCard>
      <h3 id="skills">SKILLS</h3>
      <div class="section">
-        <h4 class="HobbiesSection">Front end</h4>
-        HTML, CSS, JavaScript, Typescript, React, Vue.js
+        <h4 class="HobbiesSection">Frontend</h4>
+        <span class="secondary"
+          >HTML, CSS, JavaScript, Typescript, React, <span class="vue">VueJS</span></span
+        >
        <h4 class="HobbiesSection">Back end</h4>
-        Java, NodeJs, PHP
+        <span class="secondary">Java, NodeJs, PHP</span>
        <h4 class="HobbiesSection">Databases</h4>
-        MySql, PostresSQL, SQLite
+        <span class="secondary">MySql, PostresSQL, SQLite</span>
      </div>
-      <h3>Sensibilities</h3>
+      <h3 id="sensibilities">Sensibilities</h3>
      <div class="section">
-        <ul>
+        <ul class="secondary">
          <li>internationalization</li>
          <li>accessibility</li>
          <li>testability</li>
@ -135,7 +156,7 @@ import SideMenu from "./components/SideMenu.vue";
      </div>
      <h3 id="hobbies">Hobbies</h3>
      <div class="section">
-        <ul>
+        <ul class="secondary">
          <li>Homelab</li>
          <li>Radio Control FPV plane</li>
        </ul>
@ -145,17 +166,27 @@ import SideMenu from "./components/SideMenu.vue";
 </template>

 <style>
+HTML {
+  margin: 0;
+  padding: 0;
+}
 BODY {
+  margin: 0;
+  padding: 0;
  font-size: 1.2rem;
  background: #2c2c2c;
  color: var(--color-main);
  font-family: cascadia;
 }

+.secondary {
+  color: var(--color-discreet);
+}
 .section {
-  background-color: #123123;
+  background-color: #323232;
+  border: 1px solid #424242;
  border-radius: 1rem;
-  padding-left: 32px;
+  padding: 32px;
 }

 .content {
@ -171,9 +202,14 @@ BODY {
 }

 .candidateHeader {
-  margin-left: 200px;
+  background-color: #323232;
+  border-bottom: 1px solid #424242;
+  padding: 16px 0 16px 200px;
 }

+H1 {
+  margin: 0;
+}
 H2 {
  letter-spacing: 2px;
  color: var(--color-secondary);
@ -187,8 +223,16 @@ H3 {
 H4 {
  margin-top: 0;
 }
-
-.HobbiesSection {
-  margin-top: 32px;
+UL {
+  margin: 0;
+  padding: 0;
+  line-height: 32px;
+  list-style: none;
+}
+.vue {
+  color: var(--vue-color);
+}
+.HobbiesSection:not(:first-child) {
+  padding-top: 32px;
 }
 </style>
--- a/src/components/IAm.vue
+++ b/src/components/IAm.vue
@ -0,0 +1,19 @@
+<script setup lang="ts"></script>
+<template>
+  <div class="IAm"></div>
+  <span class="small">Looking for opportunity</span>
+</template>
+<style lang="css" scoped>
+.small {
+  display: inline-block;
+  font-size: 16px;
+  margin-left: 16px;
+}
+.IAm {
+  display: inline-block;
+  background-color: var(--vue-color);
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+}
+</style>
--- a/src/components/SideMenu.vue
+++ b/src/components/SideMenu.vue
@ -11,6 +11,7 @@ function scrollTo(to: string) {
        <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('sensibilities')" href="#">sensibilities</a></li>
        <li><a @click.prevent="scrollTo('hobbies')" href="#">Hobbies</a></li>
      </ul>
    </div>
@ -41,4 +42,8 @@ a {
  text-decoration: none;
  color: inherit;
 }
+a:hover {
+  text-decoration-thickness: 2px;
+  text-decoration: underline;
+}
 </style>
--- a/src/main.css
+++ b/src/main.css
@ -1,28 +1,26 @@
@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-amphasys: #d27e99;
-	--color-secondary-text: #87a987;
-	--color-discreet: #9e9b93;
-	--color-main: white;
-	--size-card-width: 500px;
+  --vue-color: #42b883;
+  --color-amphasys: #d27e99;
+  --color-secondary-text: #87a987;
+  --color-discreet: #bab6ad;
+  --color-main: white;
+  --size-card-width: 500px;
 }

@media screen and (min-width: 1024) {
-	:root {
-		--size-card-width: 100%;
-	}
+  :root {
+    --size-card-width: 100%;
+  }
 }