feat: hide detailed skills

src/components/common/WordCloud.vue

@@ -12,19 +12,24 @@
         :key="word.text"
         :id="word.text"
         :style="{
-          fontSize: word.size + 'px',
+          fontSize: isSelected(word.text)
+            ? word.size * 1.3 + 'px'
+            : word.size + 'px',
           fontFamily: word.font,
           cursor: 'pointer',
-          filter:
+          filter: isSelected(word.text)
-            selectedSkillStore.skill?.name === word.text
+            ? 'drop-shadow( 0px 0px 6px rgba(255, 255, 255, 1))'
-              ? 'drop-shadow( 0px 0px 3px rgba(0, 0, 0, 0.5))'
+            : 'none',
-              : 'none',
           userSelect: 'none',
         }"
         :transform="`translate(${word.x}, ${word.y})rotate(${word.rotate})`"
         text-anchor="middle"
         @click="word.text && highlightText(word.text)"
         class="word"
+        :class="{
+          selected: isSelected(word.text),
+          unselected: !noSelectionAtAll() && !isSelected(word.text),
+        }"
       >
         {{ word.text }}
       </text>
@@ -34,11 +39,19 @@
 
 <style scoped>
 .word {
-  transition: all 1s ease-in-out;
+  transition: all 0.5s ease-in-out;
-  -webkit-transition: all 1s ease-in-out;
+  -webkit-transition: all 0.5s ease-in-out;
   /*transition: 1s transform, 1s font-size;*/
   /*-webkit-transition: 1s -webkit-transform, 1s transform, 1s font-size;*/
 }
+.word.selected {
+  fill: black;
+  color: black;
+}
+.word.unselected {
+  color: gray;
+  fill: gray;
+}
 </style>
 
 <script lang="ts">
@@ -72,9 +85,9 @@ export default defineComponent({
   },
   mounted() {
     this.selectedSkillStore.$subscribe((mutation, state) => {
-      console.log(mutation);
+      // console.log(mutation);
-      console.log(state);
+      // console.log(state);
-      this.computeWords();
+      // this.computeWords();
     });
   },
   created() {
@@ -87,6 +100,12 @@ export default defineComponent({
     // }, 1500);
   },
   methods: {
+    isSelected(text: string) {
+      return this.selectedSkillStore.skill?.name === text;
+    },
+    noSelectionAtAll() {
+      return !this.selectedSkillStore.skill?.name;
+    },
     onMousemove(e: any) {
       this.mouseX = e.clientX;
       this.mouseY = e.clientY;
@@ -103,7 +122,7 @@ export default defineComponent({
       } else {
         this.selectedSkillStore.unselect();
       }
-      this.computeWords();
+      // this.computeWords();
     },
     computeWords() {
       const words: (cloud.Word & { size: number; fixed?: boolean })[] =
@@ -123,8 +142,8 @@ export default defineComponent({
         text,
       }: cloud.Word & { size: number; fixed?: boolean }) => {
         if (fixed) return size;
-        if (text === this.selectedSkillStore?.skill?.name)
+        // if (text === this.selectedSkillStore?.skill?.name)
-          return this.maxFontSize * 1.5;
+        //   return this.maxFontSize * 1.5;
 
         return (
           ((size - min) / (max - min)) * (this.maxFontSize - this.minFontSize) +

src/components/experiences/MyExperiences.vue

@@ -15,9 +15,12 @@ import RightSection from "@/components/common/RightSection.vue";
             {{ experience.company }}
           </div>
           <div class="my-experiences-role">{{ experience.role }}</div>
-          <div class="my-experiences-date">
+          <div class="my-experiences-date" v-if="experience.endAt">
             {{ experience.startAt }} - {{ experience.endAt }}
           </div>
+          <div class="my-experiences-date" v-else>
+            {{ $t("since", { date: experience.startAt }) }}
+          </div>
         </div>
         <div class="my-experiences-missions">
           <div
@@ -27,7 +30,7 @@ import RightSection from "@/components/common/RightSection.vue";
           >
             <div class="my-experiences-mission-skills">
               <span
-                v-for="skill in mission.skills"
+                v-for="skill in mission.skills.filter((s) => !s.detailed)"
                 :key="skill.name"
                 class="my-experiences-mission-skill"
                 :class="{

src/data/experiences.ts

@@ -7,7 +7,6 @@ const experience = (): Experience[] => {
     {
       company: "Sunday",
       startAt: 2021,
-      endAt: 2022,
       role: "Développeur Senior Full Stack",
       missions: [
         {
@@ -19,6 +18,7 @@ const experience = (): Experience[] => {
             mySkills.Docker,
             mySkills.Agility,
             mySkills.DevOps,
+            mySkills.Git,
           ],
         },
         {
@@ -30,12 +30,18 @@ const experience = (): Experience[] => {
             mySkills.Kubernetes,
             mySkills.Docker,
             mySkills.Agility,
+            mySkills.Git,
           ],
         },
         {
           description:
             "Mise en place de tests E2E performants, fiables et facile à écrire",
-          skills: [mySkills.Codecept, mySkills.Typescript, mySkills.Agility],
+          skills: [
+            mySkills.Codecept,
+            mySkills.Typescript,
+            mySkills.Git,
+            mySkills.Agility,
+          ],
         },
       ],
     },
@@ -56,17 +62,28 @@ const experience = (): Experience[] => {
             mySkills.Skaffold,
             mySkills.Scrum,
             mySkills.DevOps,
+            mySkills.Git,
           ],
         },
         {
           description:
             "Développement d'une application de gestion de compatibilités de versions entre les modules d'un ERP",
-          skills: [mySkills.SpringBoot, mySkills.Angular, mySkills.Scrum],
+          skills: [
+            mySkills.SpringBoot,
+            mySkills.Angular,
+            mySkills.Scrum,
+            mySkills.Git,
+          ],
         },
         {
           description:
             "Support opérationnel et conception d'outils de livraison en production",
-          skills: [mySkills.Bash, mySkills.Ansible, mySkills.Linux],
+          skills: [
+            mySkills.Bash,
+            mySkills.Ansible,
+            mySkills.Linux,
+            mySkills.Git,
+          ],
         },
       ],
     },
@@ -79,17 +96,33 @@ const experience = (): Experience[] => {
         {
           description:
             "Acteur et animateur de la cellule Industrialisation : standardisation et mise en place d'une chaîne CI",
-          skills: [mySkills.Agility, mySkills.DevOps, mySkills.Jenkins],
+          skills: [
+            mySkills.Agility,
+            mySkills.DevOps,
+            mySkills.Jenkins,
+            mySkills.Git,
+          ],
         },
         {
           description:
             "Responsable projet : création d'un outil de déploiement d'applications et mise en place de tests sous Docker",
-          skills: [mySkills.Groovy, mySkills.JUnit, mySkills.Docker],
+          skills: [
+            mySkills.Groovy,
+            mySkills.JUnit,
+            mySkills.Docker,
+            mySkills.Git,
+          ],
         },
         {
           description:
             "Concepteur et développeur UX pour la plateforme de paiement",
-          skills: [mySkills.Jee, mySkills.HtmlCss, mySkills.ExtJS, mySkills.UX],
+          skills: [
+            mySkills.Jee,
+            mySkills.HtmlCss,
+            mySkills.ExtJS,
+            mySkills.UX,
+            mySkills.Git,
+          ],
         },
       ],
     },
@@ -102,12 +135,12 @@ const experience = (): Experience[] => {
         {
           description:
             "Responsable technique du projet @CERES (plateforme de LMS) avec pour mission principale la modernisation du projet",
-          skills: [mySkills.Jee, mySkills.ExtJS],
+          skills: [mySkills.Jee, mySkills.ExtJS, mySkills.Svn],
         },
         {
           description:
             "Mise à niveau de la plateforme en JEE et de l'UX en GWT",
-          skills: [mySkills.Jee, mySkills.Gwt],
+          skills: [mySkills.Jee, mySkills.Gwt, mySkills.Svn],
         },
         {
           description:

src/data/skills.ts

@@ -5,17 +5,17 @@ type Skill = Partial<DomainSkill> & { name: string };
 const DevOps: Skill = { name: "DevOps" };
 const Docker: Skill = { name: "Docker", parent: [DevOps] };
 const Kubernetes: Skill = { name: "Kubernetes", parent: [DevOps] };
-const Skaffold: Skill = { name: "Skaffold", parent: [Kubernetes] };
+const Skaffold: Skill = { name: "Skaffold", parent: [DevOps, Kubernetes] };
 const Ansible: Skill = { name: "Ansible", parent: [DevOps] };
-const Helm: Skill = { name: "Helm", parent: [Kubernetes] };
+const Helm: Skill = { name: "Helm", parent: [DevOps, Kubernetes] };
 const UX: Skill = { name: "UX" };
 const CI_CD: Skill = { name: "CI/CD" };
 const Maven: Skill = { name: "Maven" };
 const Npm: Skill = { name: "Npm" };
 const Jenkins: Skill = { name: "Jenkins", parent: [CI_CD, DevOps] };
-const Linux: Skill = { name: "Linux" };
+const Linux: Skill = { name: "Linux", detailed: true };
-const Git: Skill = { name: "Git" };
+const Git: Skill = { name: "Git", detailed: true };
-const Svn: Skill = { name: "SVN" };
+const Svn: Skill = { name: "SVN", detailed: true };
 const Java: Skill = { name: "Java" };
 const SpringBoot: Skill = { name: "SpringBoot", parent: [Java] };
 const Jee: Skill = { name: "JEE", parent: [Java] };
@@ -28,7 +28,6 @@ const ReactNative: Skill = { name: "React Native", parent: [Typescript, UX] };
 const ExtJS: Skill = { name: "ExtJS", parent: [Javascript, UX] };
 const Bash: Skill = { name: "Bash" };
 const HtmlCss: Skill = { name: "HTML/CSS" };
-const Kotlin: Skill = { name: "Kotlin" };
 const Groovy: Skill = { name: "Groovy" };
 const DotNET: Skill = { name: ".NET" };
 const CSHARP: Skill = { name: "C#", parent: [DotNET] };
@@ -72,7 +71,6 @@ ExtJS.score = 20;
 HtmlCss.score = 50;
 
 Bash.score = 10;
-Kotlin.score = 70;
 Groovy.score = 60;
 DotNET.score = 30;
 CSHARP.score = 30;
@@ -117,7 +115,6 @@ export default {
   ExtJS,
   Bash,
   HtmlCss,
-  Kotlin,
   Groovy,
   DotNET,
   CSHARP,

src/data/types.ts

@@ -6,7 +6,7 @@ export interface Mission {
 export interface Experience {
   company: string;
   startAt: number;
-  endAt: number;
+  endAt?: number;
   missions: Mission[];
   role: string;
 }
@@ -15,6 +15,7 @@ export type Skill = {
   name: string;
   score: number;
   parent?: { name: string }[];
+  detailed: boolean;
 };
 
 export interface Diploma {

src/main.ts

@@ -35,6 +35,7 @@ const i18n = createI18n({
         skills: "compétences",
       },
       age: "{age} ans",
+      since: "depuis {date}",
     },
     en: {
       section: {
@@ -46,6 +47,7 @@ const i18n = createI18n({
         skills: "skills",
       },
       age: "{age} years",
+      since: "since {date}",
     },
   },
 });