feat: build for prod

Dockerfile

@@ -0,0 +1,9 @@
+FROM node:10
+
+RUN npm install -g serve
+
+RUN mkdir -p /data/www
+
+COPY dist/ /data/www/
+
+CMD ["serve", "-s", "/data/www/", "-p", "80", "--no-etag"]

src/components/common/WordCloud.vue

@@ -3,8 +3,8 @@
     :width="width"
     :height="height"
     @mousemove="onMousemove"
-    @mouseover="(e) => (this.hover = true)"
-    @mouseout="this.hover = false"
+    @mouseover="onMouseOver"
+    @mouseout="onMouseOut"
   >
     <g :transform="`translate(${width / 2}, ${height / 2})`">
       <text
@@ -17,7 +17,7 @@
         }"
         :transform="`translate(${word.x}, ${word.y})rotate(${word.rotate})`"
         text-anchor="middle"
-        @click="highlightText(word.text)"
+        @click="word.text && highlightText(word.text)"
         class="word"
       >
         {{ word.text }}
@@ -34,13 +34,14 @@
 
 <script lang="ts">
 import cloud from "d3-cloud";
-import * as skills from "@/data/skills";
+import skills from "@/data/skills";
 import { defineComponent } from "vue";
+import type { Skill } from "@/data/types";
 
 export default defineComponent({
   props: {
-    width: Number,
-    height: Number,
+    width: { type: Number, required: true },
+    height: { type: Number, required: true },
   },
   data() {
     return {
@@ -67,6 +68,12 @@ export default defineComponent({
       this.mouseX = e.clientX;
       this.mouseY = e.clientY;
     },
+    onMouseOver() {
+      this.hover = true;
+    },
+    onMouseOut() {
+      this.hover = false;
+    },
     highlightText(text: string) {
       console.log(text);
     },
@@ -87,7 +94,7 @@ export default defineComponent({
         fixed,
       }: {
         size: number;
-        fixed: boolean;
+        fixed?: boolean;
       }) => {
         return fixed
           ? size

src/components/skills/MySkills.vue

@@ -7,15 +7,15 @@ import ProgressBar from "@/components/skills/ProgressBar.vue";
   <RightSection :title="$t('section.skills')">
     <div class="skill">
       <div class="skill-name">Test</div>
-      <ProgressBar style="width: 70%" percent="60" />
+      <ProgressBar style="width: 70%" :percent="60" />
     </div>
     <div class="skill">
       <div class="skill-name">Java</div>
-      <ProgressBar style="width: 70%" percent="70" />
+      <ProgressBar style="width: 70%" :percent="70" />
     </div>
     <div class="skill">
       <div class="skill-name">Docker</div>
-      <ProgressBar style="width: 70%" percent="80" />
+      <ProgressBar style="width: 70%" :percent="80" />
     </div>
   </RightSection>
 </template>

src/components/skills/ProgressBar.vue

@@ -11,7 +11,7 @@ import { defineComponent } from "vue";
 export default defineComponent({
   name: "ProgressBar",
   props: {
-    percent: Number,
+    percent: { type: Number, required: true },
   },
 });
 </script>

src/data/experiences.ts

@@ -1,39 +1,7 @@
 import type { Experience } from "@/data/types";
-import {
-  Agility,
-  Angular,
-  Ansible,
-  Bash,
-  Blend,
-  Codecept,
-  CSHARP,
-  DevOps,
-  Docker,
-  DotNET,
-  ExtJS,
-  Git,
-  Groovy,
-  Gwt,
-  Helm,
-  HtmlCss,
-  Java,
-  Jee,
-  Jenkins,
-  JUnit,
-  Kubernetes,
-  Linux,
-  Pencil,
-  React,
-  ReactNative,
-  Scrum,
-  Skaffold,
-  SpringBoot,
-  Svn,
-  Typescript,
-  UIAutomation,
-  UX,
-  WPF,
-} from "@/data/skills";
+import type { Skill } from "@/data/types";
+import mySkills from "@/data/skills";
+
 const experience = (): Experience[] => {
   return [
     {
@@ -45,25 +13,29 @@ const experience = (): Experience[] => {
         {
           description: "Développement d'une application B2B pour restaurateurs",
           skills: [
-            SpringBoot,
-            React,
-            Java,
-            Typescript,
-            Kubernetes,
-            Docker,
-            Agility,
-            DevOps,
+            mySkills.SpringBoot,
+            mySkills.React,
+            mySkills.Kubernetes,
+            mySkills.Docker,
+            mySkills.Agility,
+            mySkills.DevOps,
           ],
         },
         {
           description:
             "Développement d'une application mobile à destination des serveurs pour le suivi des paiements",
-          skills: [ReactNative, SpringBoot, Kubernetes, Docker, Agility],
+          skills: [
+            mySkills.ReactNative,
+            mySkills.SpringBoot,
+            mySkills.Kubernetes,
+            mySkills.Docker,
+            mySkills.Agility,
+          ],
         },
         {
           description:
             "Mise en place de tests E2E performants, fiables et facile à écrire",
-          skills: [Codecept, Typescript, Agility],
+          skills: [mySkills.Codecept, mySkills.Typescript, mySkills.Agility],
         },
       ],
     },
@@ -77,24 +49,24 @@ const experience = (): Experience[] => {
           description:
             "Développement d'une application de déploiement d'un ERP, avec la gestion d'une stack dev entièrement sur cluster",
           skills: [
-            SpringBoot,
-            Angular,
-            Kubernetes,
-            Helm,
-            Skaffold,
-            Scrum,
-            DevOps,
+            mySkills.SpringBoot,
+            mySkills.Angular,
+            mySkills.Kubernetes,
+            mySkills.Helm,
+            mySkills.Skaffold,
+            mySkills.Scrum,
+            mySkills.DevOps,
           ],
         },
         {
           description:
             "Développement d'une application de gestion de compatibilités de versions entre les modules d'un ERP",
-          skills: [SpringBoot, Angular, Scrum],
+          skills: [mySkills.SpringBoot, mySkills.Angular, mySkills.Scrum],
         },
         {
           description:
             "Support opérationnel et conception d'outils de livraison en production",
-          skills: [Bash, Ansible, Linux],
+          skills: [mySkills.Bash, mySkills.Ansible, mySkills.Linux],
         },
       ],
     },
@@ -107,17 +79,17 @@ const experience = (): Experience[] => {
         {
           description:
             "Acteur et animateur de la cellule Industrialisation : standardisation et mise en place d'une chaîne CI",
-          skills: [Agility, DevOps, Jenkins],
+          skills: [mySkills.Agility, mySkills.DevOps, mySkills.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],
+          skills: [mySkills.Groovy, mySkills.JUnit, mySkills.Docker],
         },
         {
           description:
             "Concepteur et développeur UX pour la plateforme de paiement",
-          skills: [Jee, HtmlCss, ExtJS, UX],
+          skills: [mySkills.Jee, mySkills.HtmlCss, mySkills.ExtJS, mySkills.UX],
         },
       ],
     },
@@ -130,17 +102,17 @@ const experience = (): Experience[] => {
         {
           description:
             "Responsable technique du projet @CERES (plateforme de LMS) avec pour mission principale la modernisation du projet",
-          skills: [Jee, ExtJS],
+          skills: [mySkills.Jee, mySkills.ExtJS],
         },
         {
           description:
             "Mise à niveau de la plateforme en JEE et de l'UX en GWT",
-          skills: [Jee, Gwt],
+          skills: [mySkills.Jee, mySkills.Gwt],
         },
         {
           description:
             "Mise en place d'une chaîne de CI, de tests automatiques et d'une gestion de configuration",
-          skills: [Jenkins, Svn],
+          skills: [mySkills.Jenkins, mySkills.Svn],
         },
       ],
     },
@@ -153,17 +125,17 @@ const experience = (): Experience[] => {
         {
           description:
             "UX designer sur un projet pour Dassault Aviation avec de fortes contraintes d'ergonomie et de performances",
-          skills: [Pencil, Blend, UX],
+          skills: [mySkills.Pencil, mySkills.Blend, mySkills.UX],
         },
         {
           description:
             "Développement d'un framework graphique pour permettre de répondre aux contraites d'ergonomie de Dassault Aviation",
-          skills: [DotNET, WPF, UX, CSHARP],
+          skills: [mySkills.DotNET, mySkills.WPF, mySkills.UX, mySkills.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],
+          skills: [mySkills.UIAutomation, mySkills.CSHARP],
         },
       ],
     },

src/data/skills.ts

@@ -1,87 +1,89 @@
 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: 28,
-  parent: [DevOps],
-};
-export const Skaffold: Skill = {
-  name: "Skaffold",
-  score: 24,
-  parent: [Kubernetes],
-};
-export const Ansible: Skill = { name: "Ansible", score: 17, parent: [DevOps] };
-export const Helm: Skill = { name: "Helm", score: 14, parent: [Kubernetes] };
-
-export const UX: Skill = { name: "UX", score: 15 };
-
-export const CI_CD: Skill = { name: "CI/CD", score: 16 };
-export const Maven: Skill = { name: "Maven", score: 3 };
-export const Npm: Skill = { name: "Npm", score: 4 };
-export const Jenkins: Skill = {
-  name: "Jenkins",
-  score: 12,
-  parent: [CI_CD, DevOps],
-};
-
-export const Linux: Skill = { name: "Linux", score: 23 };
-
-export const Git: Skill = { name: "Git", score: 12 };
-export const Svn: Skill = { name: "SVN", score: 1 };
-
-export const Java: Skill = { name: "Java", score: 6 };
-export const SpringBoot: Skill = {
-  name: "SpringBoot",
-  score: 0,
-  parent: [Java],
-};
-export const Jee: Skill = { name: "JEE", score: 26, parent: [Java] };
-export const Gwt: Skill = { name: "GWT", score: 4, parent: [Java, UX] };
-export const Typescript: Skill = { name: "Typescript", score: 25 };
-export const Codecept: Skill = { name: "CodeceptJS", score: 25 };
-export const Javascript: Skill = { name: "Javascript", score: 19 };
-export const Angular: Skill = {
-  name: "Angular",
-  score: 17,
-  parent: [Typescript, UX],
-};
-export const React: Skill = {
-  name: "React",
-  score: 17,
-  parent: [Typescript, UX],
-};
-export const ReactNative: Skill = {
+const DevOps: Skill = { name: "DevOps", score: 0 };
+const Docker: Skill = { name: "Docker", score: 0, parent: [DevOps] };
+const Kubernetes: Skill = { name: "Kubernetes", score: 28, parent: [DevOps] };
+const Skaffold: Skill = { name: "Skaffold", score: 24, parent: [Kubernetes] };
+const Ansible: Skill = { name: "Ansible", score: 17, parent: [DevOps] };
+const Helm: Skill = { name: "Helm", score: 14, parent: [Kubernetes] };
+const UX: Skill = { name: "UX", score: 15 };
+const CI_CD: Skill = { name: "CI/CD", score: 16 };
+const Maven: Skill = { name: "Maven", score: 3 };
+const Npm: Skill = { name: "Npm", score: 4 };
+const Jenkins: Skill = { name: "Jenkins", score: 12, parent: [CI_CD, DevOps] };
+const Linux: Skill = { name: "Linux", score: 23 };
+const Git: Skill = { name: "Git", score: 12 };
+const Svn: Skill = { name: "SVN", score: 1 };
+const Java: Skill = { name: "Java", score: 6 };
+const SpringBoot: Skill = { name: "SpringBoot", score: 0, parent: [Java] };
+const Jee: Skill = { name: "JEE", score: 26, parent: [Java] };
+const Gwt: Skill = { name: "GWT", score: 4, parent: [Java, UX] };
+const Typescript: Skill = { name: "Typescript", score: 25 };
+const Codecept: Skill = { name: "CodeceptJS", score: 25 };
+const Javascript: Skill = { name: "Javascript", score: 19 };
+const Angular: Skill = { name: "Angular", score: 17, parent: [Typescript, UX] };
+const React: Skill = { name: "React", score: 17, parent: [Typescript, UX] };
+const ReactNative: Skill = {
   name: "React",
   score: 17,
   parent: [Typescript, UX],
 };
-export const ExtJS: Skill = {
-  name: "ExtJS",
-  score: 14,
-  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: 28 };
-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] };
+const ExtJS: Skill = { name: "ExtJS", score: 14, parent: [Javascript, UX] };
+const Bash: Skill = { name: "Bash", score: 0 };
+const HtmlCss: Skill = { name: "HtmlCss", score: 0 };
+const Kotlin: Skill = { name: "Kotlin", score: 28 };
+const Groovy: Skill = { name: "Groovy", score: 0 };
+const DotNET: Skill = { name: ".NET", score: 0 };
+const CSHARP: Skill = { name: "C#", score: 0, parent: [DotNET] };
+const WPF: Skill = { name: "WPF", score: 0, parent: [DotNET, UX] };
+const Blend: Skill = { name: "Blend", score: 0, parent: [DotNET, UX] };
+const Pencil: Skill = { name: "Blend", score: 0, parent: [UX] };
+const Agility: Skill = { name: "Agility", score: 0 };
+const Scrum: Skill = { name: "Scrum", score: 0, parent: [Agility] };
+const Tests: Skill = { name: "Tests", score: 0 };
+const UIAutomation: Skill = { name: "UIAutomation", score: 0, parent: [Tests] };
+const JUnit: Skill = { name: "JUnit", score: 0, parent: [Tests, Java] };
+const Communication: Skill = { name: "Communication", score: 0 };
 
-export const Communication: Skill = { name: "Communication", score: 0 };
+export default {
+  DevOps,
+  Docker,
+  Kubernetes,
+  Skaffold,
+  Ansible,
+  Helm,
+  UX,
+  CI_CD,
+  Maven,
+  Npm,
+  Jenkins,
+  Linux,
+  Git,
+  Svn,
+  Java,
+  SpringBoot,
+  Jee,
+  Gwt,
+  Typescript,
+  Codecept,
+  Javascript,
+  Angular,
+  React,
+  ReactNative,
+  ExtJS,
+  Bash,
+  HtmlCss,
+  Kotlin,
+  Groovy,
+  DotNET,
+  CSHARP,
+  WPF,
+  Blend,
+  Pencil,
+  Agility,
+  Scrum,
+  Tests,
+  UIAutomation,
+  JUnit,
+  Communication,
+} as { [key: string]: Skill };

tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "@vue/tsconfig/tsconfig.web.json",
   "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
   "compilerOptions": {
+    "allowJs": true,
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]