now build

README.md

@@ -1,6 +1,5 @@
 # cv_2026
 
-
 This template should help get you started developing with Vue 3 in Vite.
 
 ## Recommended IDE Setup
@@ -47,3 +46,20 @@ npm run build
 ```sh
 npm run lint
 ```
+
+### NVIM
+
+g for goto
+g-g first lint
+G last lint
+
+b w e naviagate word
+[-] naviagate on hunks and ... chapter 7
+shift o and shift i is cursor histor    y
+leader s k list keymaps
+
+#### visual
+
+v
+shift v full line
+ctrl v block

package.json

@@ -1,50 +1,52 @@
 {
-  "name": "cv_2026",
-  "version": "0.0.0",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "run-p type-check \"build-only {@}\" --",
-    "preview": "vite preview",
-    "test:unit": "vitest",
-    "build-only": "vite build",
-    "type-check": "vue-tsc --build",
-    "lint": "run-s lint:*",
-    "lint:oxlint": "oxlint . --fix",
-    "lint:eslint": "eslint . --fix --cache",
-    "format": "oxfmt src/"
-  },
-  "dependencies": {
-    "vue": "^3.5.31",
-    "vue-router": "^5.0.4"
-  },
-  "devDependencies": {
-    "@tsconfig/node24": "^24.0.4",
-    "@types/jsdom": "^28.0.1",
-    "@types/node": "^24.12.0",
-    "@vitejs/plugin-vue": "^6.0.5",
-    "@vitejs/plugin-vue-jsx": "^5.1.5",
-    "@vitest/eslint-plugin": "^1.6.13",
-    "@vue/eslint-config-typescript": "^14.7.0",
-    "@vue/test-utils": "^2.4.6",
-    "@vue/tsconfig": "^0.9.1",
-    "eslint": "^10.1.0",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-oxlint": "~1.57.0",
-    "eslint-plugin-vue": "~10.8.0",
-    "jiti": "^2.6.1",
-    "jsdom": "^29.0.1",
-    "npm-run-all2": "^8.0.4",
-    "oxfmt": "^0.42.0",
-    "oxlint": "~1.57.0",
-    "typescript": "~6.0.0",
-    "vite": "^8.0.3",
-    "vite-plugin-vue-devtools": "^8.1.1",
-    "vitest": "^4.1.2",
-    "vue-tsc": "^3.2.6"
-  },
-  "engines": {
-    "node": "^20.19.0 || >=22.12.0"
-  }
+	"name": "cv_2026",
+	"version": "0.0.0",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "run-p type-check \"build-only {@}\" --",
+		"preview": "vite preview",
+		"test:unit": "vitest",
+		"build-only": "vite build",
+		"type-check": "vue-tsc --build",
+		"lint": "run-s lint:*",
+		"lint:oxlint": "oxlint . --fix",
+		"lint:eslint": "eslint . --fix --cache",
+		"format": "oxfmt src/"
+	},
+	"dependencies": {
+		"vue": "^3.5.31",
+		"vue-router": "^5.0.4"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "2.5.6",
+		"@tsconfig/node24": "^24.0.4",
+		"@types/jsdom": "^28.0.1",
+		"@types/node": "^24.12.0",
+		"@vitejs/plugin-vue": "^6.0.5",
+		"@vitejs/plugin-vue-jsx": "^5.1.5",
+		"@vitest/eslint-plugin": "^1.6.13",
+		"@vue/eslint-config-typescript": "^14.7.0",
+		"@vue/test-utils": "^2.4.6",
+		"@vue/tsconfig": "^0.9.1",
+		"cd": "0.1",
+		"eslint": "^10.1.0",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-oxlint": "~1.57.0",
+		"eslint-plugin-vue": "~10.8.0",
+		"jiti": "^2.6.1",
+		"jsdlom": "^29.0.1",
+		"npm-run-all2": "^8.0.4",
+		"oxfmt": "^0.42.0",
+		"oxlint": "~1.57.0",
+		"typescript": "~6.0.0",
+		"vite": "^8.0.3",
+		"vite-plugin-vue-devtools": "^8.1.1",
+		"vitest": "^4.1.2",
+		"vue-tsc": "^3.2.6"
+	},
+	"engines": {
+		"node": "^20.19.0 || >=22.12.0"
+	}
 }

src/App.vue

@@ -1,28 +1,138 @@
-<script set up lang="ts"></script>
+<script setup lang="ts">
+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>
-  <h1>Julien Laville</h1>
-  <h2>Senior fullstack developper</h2>
+  <div class="content">
+    <SideMenu />
+    <div>
+      <div class="candidateHeader">
+        <h1>Julien Laville</h1>
+        <h2>Senior fullstack developper </h2>
+      </div>
+      <h3>EXPERIENCE</h3>
+      <JobCard>
+        <CompanyName>Easyence - Mediarithmics, Paris — Full - stack lead developer </CompanyName>
+        <JobDates> februrary 2021 - february 2025 </JobDates>
+        <JobDescription>
+          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
+          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.
+      </JobCard>
+      <JobCard>
+        <CompanyName> Qwant Research, Paris 16 — Front - end engineer </CompanyName>
+        <JobDates>december 2017 - april 2019 </JobDates>
+        High performance Maps application front - end development using VueJS, Axios, SCSS, vector tiles Build a tool
+        maps
+        application in vueJs
+      </JobCard>
+      <JobCard>
+        <CompanyName>Qwant, Nice — Front - end engineer </CompanyName>
+        <JobDates>october 2015 - november 2017 </JobDates>
+        Core building for the Search application front - end in vanilla
+        JavaScript, stack internationalization, automated build and quality
+        control in collaboration with the CI team
 
-  <h4>Framework agnostic</h4>
-  <h4>Complexity sensible</h4>
-  <h4>Accessibility educated</h4>
-  <h4></h4>
-  <h3>Technologies</h3>
-
-  <h3>Experiences</h3>
-  <h3>Diplomas</h3>
-  <h3>Contacts</h3>
+        Qwant lite : an SSR version of Qwant search SPA in NodeJS and ExpressJS
+      </JobCard>
+      <JobCard>
+        <CompanyName> CrossKnowledge Epistema, Nice — Front - end engineer </CompanyName>
+        <JobDates> april 2014 - september 2014 </JobDates>
+        Full replacement of jQuery UI module by extJs on the back - office application including
+        calendar, charts, autocomplete
+      </JobCard>
+      <JobCard>
+        <CompanyName> Air France, Sophia - Antipolis — Front - end engineer </CompanyName>
+        <JobDates>july 2013 - mars 2014</JobDates>
+        Content Management System integration for complex static webpage using jQuery UI and
+        TeamSite CMS
+      </JobCard>
+      <JobCard>
+        <CompanyName>Koedia - Sophia - Antipolis, Nice — Full - stack engineer </CompanyName>
+        <JobDates> february 2012 - june 2013 </JobDates>
+        Creation of new webservices for plane reservation including test and monitoring Monitoring and Optimizing B2B &
+        B2C
+        web application
+        Adding core features on the ticketing application RedMine
+      </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"
+      </JobCard>
+      <JobCard>
+        <CompanyName>I3S, Sophia - Antipolis, Nice — Developper(Intern)</CompanyName>
+        <JobDates>june 2011 - august 2011</JobDates>
+        Hoare logic based genetic network dynamic resolution application
+        creation.
+      </JobCard>
+      <JobCard>
+        <CompanyName>Nice Sophia - Antipolis university, Appliqued Language Laboratory LEA, Nice — Developper(Intern)
+        </CompanyName>
+        <JobDates>june 2010 - august 2010</JobDates>
+        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.
+      </JobCard>
+      <JobCard>
+        <CompanyName>Arkadia Consulting, Nice— Developper (Intern)</CompanyName>
+        <JobDates>june 2009 - august 2009</JobDates>
+        Making and designing two websites using Ruby on Rails with
+        secured back - office
+      </JobCard>
+      <h3>EDUCATION</h3>
+      <EducationCard>
+        <EducationYear>2011</EducationYear> Nice Sophia - Antipolis university Computer science Master degree,
+        engineering
+        &
+        foundations
+      </EducationCard>
+      <EducationCard>
+        <EducationYear>2009</EducationYear> Nice Sophia - Antipolis university Mathematics & Computer science Licenced
+      </EducationCard>
+      <h3>SKILLS</h3>
+      <h4>Frontend:</h4>
+      HTML, CSS, JavaScript, Typescript, React, VueJs
+      <h4>Backend:</h4>
+      Java, NodeJs, PhP
+      <h4>Databases:</h4>
+      MySql, PostgresSQL, SQLite
+      <ul>
+        <li>internationalization</li>
+        <li>accessibility</li>
+        <li>testability</li>
+        <li>algorithmic complexity</li>
+      </ul>
+    </div>
+  </div>
 </template>
 
 <style>
-  BODY {
-    background: #2c2c2c;
-    color: antiquewhite;
-  }
-</style>
-
-
-<style scoped>
-
+BODY {
+  font-size: 1.2rem;
+  background: #2c2c2c;
+  color: var(--color-main);
+  font-family: cascadia;
+}
+
+.content {
+  display: flex;
+}
+
+.candidateHeader {
+  margin-left: 200px;
+}
 </style>

src/components/CompanyName.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts"></script>
+<template>
+  <h4 class="CompanyName">
+    <slot />
+  </h4>
+</template>
+
+<style scoped>
+.CompanyName {
+  color: cornflowerblue;
+}
+</style>

src/components/EducationCard.vue

@@ -0,0 +1,11 @@
+<script setup></script>
+<template>
+  <div class="EducationCard">
+    <slot />
+  </div>
+</template>
+<style>
+.EducationCard {
+  width: var(--size-card-width);
+}
+</style>

src/components/JobCard.vue

@@ -0,0 +1,11 @@
+<script setup></script>
+<template>
+  <div class="JobCard">
+    <slot />
+  </div>
+</template>
+<style scoped>
+.JobCard {
+  width: 400px;
+}
+</style>

src/components/JobDates.vue

@@ -0,0 +1,8 @@
+<script setup>
+
+</script>
+<template>
+  <h5>
+    <slot />
+  </h5>
+</template>

src/components/Langline.vue

@@ -0,0 +1,11 @@
+<script setup></script>
+<template>
+  <span class="LangLine">
+    <slot />
+  </span>
+</template>
+<style lang="css" scoped>
+.LangLine {
+  font-family: logic;
+}
+</style>

src/components/SideMenu.vue

@@ -0,0 +1,24 @@
+<script setup>
+
+</script>
+<template>
+  <div class="SideMenu">
+    <ul class="menuItems">
+      <li>Education</li>
+      <li>Skills</li>
+      <li>Experiences</li>
+      <li></li>
+    </ul>
+  </div>
+</template>
+<style lang="css" scoped>
+.SideMenu {
+  position: fixed;
+  left: 0;
+  top: 50%;
+}
+
+.menuItems {
+  list-style: none;
+}
+</style>

src/main.css

@@ -0,0 +1,25 @@
+@font-face {
+  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);
+}
+
+:root {
+  --color-main: white;
+  --size-card-width: 500px;
+}
+
+@media screen and (min-width: 1024) {
+  :root {
+    --size-card-width: 100%;
+  }
+}

src/main.ts

@@ -1,9 +1,10 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import router from './router'
+import { createApp } from "vue";
+import App from "./App.vue";
+import router from "./router";
+import "./main.css";
 
-const app = createApp(App)
+const app = createApp(App);
 
-app.use(router)
+app.use(router);
 
-app.mount('#app')
+app.mount("#app");