feat: add data

src/components/common/LeftSection.vue

@@ -15,17 +15,18 @@ defineProps<{
   </div>
 </template>
 
-
 <style scoped>
-.wrapper{
+.wrapper {
   display: flex;
   flex-direction: column;
+  margin-bottom: 12px;
 }
 .title {
   font-size: 18px;
   font-weight: bolder;
   font-variant: titling-caps;
   text-transform: capitalize;
+  background-color: lightblue;
 }
 .body {
   flex: 1;

src/components/common/RightSection.vue

@@ -15,9 +15,8 @@ defineProps<{
   </div>
 </template>
 
-
 <style scoped>
-.wrapper{
+.wrapper {
   display: flex;
   flex-direction: column;
 }

src/components/education/MyEducation.vue

@@ -1,18 +1,23 @@
 <script setup lang="ts">
 import LeftSection from "@/components/common/LeftSection.vue";
 </script>
+
 <template>
   <LeftSection :title="$t('section.education')">
-    My Education
+    <div v-for="info in infos.education" :key="info.year">
+      {{ info.degree }} {{ info.title }}<br />
+      {{ info.year }} {{ info.location }}
+    </div>
   </LeftSection>
 </template>
 
 <script lang="ts">
+import informations from "@/data/informations";
+
 export default {
-  name: "MyEducation"
+  name: "MyEducation",
+  data: () => ({ infos: informations }),
 };
 </script>
 
-<style scoped>
+<style scoped></style>
-
-</style>

src/components/informations/FirstNameAndLastName.vue

@@ -1,15 +1,13 @@
 <template>
-  <div>
+  <div>{{ infos.firstName }} {{ infos.lastName }} !</div>
-  {{ firstName }} {{ lastName }} !
-  </div>
 </template>
 
 <script>
+import informations from "@/data/informations";
 export default {
   data() {
     return {
-      firstName: "Nicolas",
+      infos: informations,
-      lastName: "Marsal",
     };
   },
 };

src/components/informations/MyHobbies.vue

@@ -1,19 +1,24 @@
 <script setup lang="ts">
-import LeftSection from "@/components/common/LeftSection.vue"
+import LeftSection from "@/components/common/LeftSection.vue";
 </script>
 
 <template>
   <LeftSection :title="$t('section.hobbies')">
-    My Hobbies
+    <div v-for="hobby in infos.hobbies" :key="hobby">{{ hobby }}</div>
   </LeftSection>
 </template>
 
 <script lang="ts">
+import informations from "@/data/informations";
+
 export default {
-  name: "MyHobbies"
+  name: "MyHobbies",
+  data() {
+    return {
+      infos: informations,
+    };
+  },
 };
 </script>
 
-<style scoped>
+<style scoped></style>
-
-</style>

src/components/informations/MyInformations.vue

@@ -4,16 +4,27 @@ import LeftSection from "@/components/common/LeftSection.vue";
 
 <template>
   <LeftSection :title="$t('section.information')">
-    My Informations
+    <div v-for="line in infos.address" :key="line">{{ line }}</div>
+    <div>{{ infos.phoneNumber }}</div>
+    <div>{{ $t("age", { age: age() }) }}</div>
   </LeftSection>
 </template>
 
 <script lang="ts">
+import informations from "@/data/informations";
 export default {
-  name: "MyInformations"
+  name: "MyInformations",
+  data() {
+    return {
+      infos: informations,
+      age: () => {
+        const ageInMilliseconds =
+          new Date().getTime() - informations.birthDay.getTime();
+        return Math.floor(ageInMilliseconds / 1000 / 60 / 60 / 24 / 365);
+      },
+    };
+  },
 };
 </script>
 
-<style scoped>
+<style scoped></style>
-
-</style>

src/components/informations/MyLanguages.vue

@@ -3,16 +3,23 @@ import LeftSection from "@/components/common/LeftSection.vue";
 </script>
 <template>
   <LeftSection :title="$t('section.languages')">
-    My Languages
+    <div v-for="language in infos.languages" :key="language.name">
+      {{ language.name }}: {{ language.level }}
+    </div>
   </LeftSection>
 </template>
 
 <script lang="ts">
+import informations from "@/data/informations";
+
 export default {
-  name: "MyLanguages"
+  name: "MyLanguages",
+  data() {
+    return {
+      infos: informations,
+    };
+  },
 };
 </script>
 
-<style scoped>
+<style scoped></style>
-
-</style>

src/components/informations/WordsCloud.vue

@@ -1,15 +1,11 @@
 <template>
-  <div>
+  <div>Words Cloud !</div>
-    Words Cloud !
-  </div>
 </template>
 
 <script>
 export default {
-  name: "WordsCloud"
+  name: "WordsCloud",
 };
 </script>
 
-<style scoped>
+<style scoped></style>
-
-</style>

src/components/skills/MySkills.vue

@@ -8,13 +8,10 @@ import RightSection from "@/components/common/RightSection.vue";
   </RightSection>
 </template>
 
-
 <script lang="ts">
 export default {
-  name: "MySkills"
+  name: "MySkills",
 };
 </script>
 
-<style scoped>
+<style scoped></style>
-
-</style>

src/data/experiences.ts

@@ -0,0 +1,144 @@
+import type { Experience } from "@/data/types";
+import {
+  Agility,
+  Angular,
+  Ansible,
+  Bash,
+  Blend,
+  CSHARP,
+  DevOps,
+  Docker,
+  DotNET,
+  ExtJS,
+  Git,
+  Groovy,
+  Gwt,
+  Helm,
+  HtmlCss,
+  Jee,
+  Jenkins,
+  JUnit,
+  Kubernetes,
+  Linux,
+  Pencil,
+  Scrum,
+  Skaffold,
+  SpringBoot,
+  Svn,
+  UIAutomation,
+  UX,
+  WPF,
+} from "@/data/skills";
+const experience = (): Experience[] => {
+  return [
+    {
+      company: "Mipih",
+      startAt: 2017,
+      endAt: 2021,
+      missions: [
+        {
+          description:
+            "Conception/Développement/DevOps pour un logiciel de déploiement d'un ERP, avec la création d'une stack dev entièrement sur cluster",
+          skills: [SpringBoot, Angular, Kubernetes, Helm, Skaffold, Scrum],
+        },
+        {
+          description:
+            "Développement d'une application de gestion de compatibilités de versions entre les modules d'un ERP",
+          skills: [SpringBoot, Angular, Docker, Scrum],
+        },
+        {
+          description:
+            "Diffuseur technique : conception, développement et utilisation d'outils de livraison en production",
+          skills: [Bash, Ansible, Linux],
+        },
+      ],
+    },
+    {
+      company: "Lyra Network",
+      startAt: 2012,
+      endAt: 2017,
+      missions: [
+        {
+          description:
+            "Acteur et animateur de la cellule Industrialisa5on : standardisation et mise en place d'une chaîne CI",
+          skills: [Agility, DevOps, Jenkins],
+        },
+        {
+          description:
+            "Responsable projet : création d'un outil de déploiement d'applications et mise en place de tests sous Docker",
+          skills: [Groovy, JUnit, Docker],
+        },
+        {
+          description: "Responsable Gestion de configuration du service",
+          skills: [Svn, Git],
+        },
+        {
+          description:
+            "Concepteur et développeur API Rest / UX WEB pour application web sur tablette",
+          skills: [Jee, HtmlCss, ExtJS],
+        },
+        {
+          description:
+            "Concepteur et développeur UX pour la plateforme de paiement",
+          skills: [Jee, HtmlCss, ExtJS],
+        },
+      ],
+    },
+    {
+      company: "Studec",
+      startAt: 2010,
+      endAt: 2012,
+      missions: [
+        {
+          description:
+            "Responsable technique du projet @CERES (plateforme de LMS) avec pour mission principale la modernisation du projet",
+          skills: [Jee, ExtJS],
+        },
+        {
+          description:
+            "Encadrement technique de l'équipe française et de l'équipe indienne",
+          skills: [],
+        },
+        {
+          description:
+            "Mise à niveau de la plateforme en JEE et de l'UX en GWT",
+          skills: [Jee, Gwt],
+        },
+        {
+          description:
+            "Mise en place d'une chaîne de CI, de tests automatiques et d'une gestion de configuration",
+          skills: [Jenkins, Svn],
+        },
+      ],
+    },
+    {
+      company: "SOGETI High Tech",
+      startAt: 2006,
+      endAt: 2010,
+      missions: [
+        {
+          description:
+            "UX designer sur un projet pour Dassault Aviation avec de fortes contraintes d'ergonomie et de performances",
+          skills: [Pencil, Blend],
+        },
+        {
+          description:
+            "Conception/développement d'un framework graphique pour permettre de répondre aux contraites d'ergonomie de Dassault Aviation",
+          skills: [DotNET, WPF, CSHARP],
+        },
+        {
+          description:
+            "Création d'une application de tests UX automatiques avec une conception basée sur le découplage du scénario, du modèle représentant l'IHM et des données",
+          skills: [UIAutomation, CSHARP],
+        },
+        {
+          description:
+            "Conception et développement sur un projet de R&D pour l'affichage de jeux de données complexes",
+          skills: [UX, CSHARP],
+        },
+      ],
+    },
+  ];
+};
+
+export default experience();

src/data/informations.ts

@@ -0,0 +1,48 @@
+import type { Information } from "@/data/types";
+
+const informations = (): Information => {
+  return {
+    firstName: "Nicolas",
+    lastName: "Marsal",
+    address: ["25 rue de la Moselle", "31100 Toulouse"],
+    birthDay: new Date(1982, 11, 3),
+    education: [
+      {
+        degree: "Master",
+        title: "Interaction Homme Machine",
+        school: "ENAC",
+        location: "Toulouse",
+        year: 2006,
+      },
+      {
+        degree: "Maîtrise",
+        title: "IUP Systèmes Intelligents",
+        school: "Univesité Paul Sabatier",
+        location: "Toulouse",
+        year: 2005,
+      },
+      {
+        degree: "DUT",
+        title: "Génie Élec, et Info. Indus.",
+        school: "Univesité Paul Sabatier",
+        location: "Toulouse",
+        year: 2002,
+      },
+    ],
+    hobbies: [
+      "Rhétorique",
+      "Biais Congnitifs",
+      "Domotique",
+      "Électronique",
+      "Conception/Impression 3D",
+      "Roller",
+    ],
+    phoneNumber: "06 16 92 01 17",
+    languages: [
+      { name: "Français", level: "langue maternelle" },
+      { name: "English", level: "good level" },
+    ],
+  };
+};
+
+export default informations();

src/data/skills.ts

@@ -0,0 +1,76 @@
+import type { Skill } from "@/data/types";
+
+export const DevOps: Skill = { name: "DevOps", score: 0 };
+export const Docker: Skill = { name: "Docker", score: 0, parent: [DevOps] };
+export const Kubernetes: Skill = {
+  name: "Kubernetes",
+  score: 0,
+  parent: [DevOps],
+};
+export const Skaffold: Skill = {
+  name: "Skaffold",
+  score: 0,
+  parent: [Kubernetes],
+};
+export const Ansible: Skill = { name: "Ansible", score: 0, parent: [DevOps] };
+export const Helm: Skill = { name: "Helm", score: 0, parent: [Kubernetes] };
+
+export const UX: Skill = { name: "UX", score: 0 };
+
+export const CI_CD: Skill = { name: "CI/CD", score: 0 };
+export const Maven: Skill = { name: "Maven", score: 0 };
+export const Npm: Skill = { name: "Npm", score: 0 };
+export const Jenkins: Skill = {
+  name: "Jenkins",
+  score: 0,
+  parent: [CI_CD, DevOps],
+};
+
+export const Linux: Skill = { name: "Linux", score: 0 };
+
+export const Git: Skill = { name: "Git", score: 0 };
+export const Svn: Skill = { name: "SVN", score: 0 };
+
+export const Java: Skill = { name: "Java", score: 0 };
+export const SpringBoot: Skill = {
+  name: "SpringBoot",
+  score: 0,
+  parent: [Java],
+};
+export const Jee: Skill = { name: "JEE", score: 0, parent: [Java] };
+export const Gwt: Skill = { name: "GWT", score: 0, parent: [Java, UX] };
+export const Typescript: Skill = { name: "Typescript", score: 0 };
+export const Javascript: Skill = { name: "Javascript", score: 0 };
+export const Angular: Skill = {
+  name: "Angular",
+  score: 0,
+  parent: [Typescript, UX],
+};
+export const ExtJS: Skill = {
+  name: "ExtJS",
+  score: 0,
+  parent: [Javascript, UX],
+};
+export const Bash: Skill = { name: "Bash", score: 0 };
+export const HtmlCss: Skill = { name: "HtmlCss", score: 0 };
+export const Kotlin: Skill = { name: "Kotlin", score: 0 };
+export const Groovy: Skill = { name: "Groovy", score: 0 };
+
+export const DotNET: Skill = { name: ".NET", score: 0 };
+export const CSHARP: Skill = { name: "C#", score: 0, parent: [DotNET] };
+export const WPF: Skill = { name: "WPF", score: 0, parent: [DotNET, UX] };
+export const Blend: Skill = { name: "Blend", score: 0, parent: [DotNET, UX] };
+export const Pencil: Skill = { name: "Blend", score: 0, parent: [UX] };
+
+export const Agility: Skill = { name: "Agility", score: 0 };
+export const Scrum: Skill = { name: "Scrum", score: 0, parent: [Agility] };
+
+export const Tests: Skill = { name: "Tests", score: 0 };
+export const UIAutomation: Skill = {
+  name: "UIAutomation",
+  score: 0,
+  parent: [Tests],
+};
+export const JUnit: Skill = { name: "JUnit", score: 0, parent: [Tests, Java] };
+
+export const Communication: Skill = { name: "Communication", score: 0 };

src/data/types.ts

@@ -0,0 +1,43 @@
+export interface Mission {
+  description: string;
+  skills: Skill[];
+}
+
+export interface Experience {
+  company: string;
+  startAt: number;
+  endAt: number;
+  missions: Mission[];
+}
+
+export type Skill = {
+  name: string;
+  score: number;
+  parent?: Skill[];
+};
+
+export interface Diploma {
+  year: number;
+  degree: string;
+  title: string;
+  school: string;
+  location: string;
+}
+
+export interface Language {
+  name: string;
+  level: string;
+}
+
+export type Hobby = string;
+
+export interface Information {
+  firstName: string;
+  lastName: string;
+  address: string[];
+  phoneNumber: string;
+  birthDay: Date;
+  education: Diploma[];
+  hobbies: Hobby[];
+  languages: Language[];
+}

src/main.ts

@@ -17,8 +17,9 @@ const i18n = createI18n({
         experiences: "expériences",
         skills: "compétences",
       },
+      age: "{age} ans",
     },
-    en: { hello: "こんにちは！" },
+    en: {},
   },
 });