feat: hide detailed skills

3 years ago · a168963795
6 changed files with 88 additions and 33 deletions
--- a/src/components/common/WordCloud.vue
+++ b/src/components/common/WordCloud.vue
@ -12,12 +12,13 @@
        :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:
-            selectedSkillStore.skill?.name === word.text
-              ? 'drop-shadow( 0px 0px 3px rgba(0, 0, 0, 0.5))'
+          filter: isSelected(word.text)
+            ? 'drop-shadow( 0px 0px 6px rgba(255, 255, 255, 1))'
            : 'none',
          userSelect: 'none',
        }"
@ -25,6 +26,10 @@
        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;
-  -webkit-transition: all 1s ease-in-out;
+  transition: all 0.5s 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(state);
-      this.computeWords();
+      // console.log(mutation);
+      // console.log(state);
+      // 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)
-          return this.maxFontSize * 1.5;
+        // if (text === this.selectedSkillStore?.skill?.name)
+        //   return this.maxFontSize * 1.5;

        return (
          ((size - min) / (max - min)) * (this.maxFontSize - this.minFontSize) +
--- a/src/components/experiences/MyExperiences.vue
+++ b/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="{
--- a/src/data/experiences.ts
+++ b/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:
--- a/src/data/skills.ts
+++ b/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 Git: Skill = { name: "Git" };
-const Svn: Skill = { name: "SVN" };
+const Linux: Skill = { name: "Linux", detailed: true };
+const Git: Skill = { name: "Git", detailed: true };
+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,
--- a/src/data/types.ts
+++ b/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 {
--- a/src/main.ts
+++ b/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}",
    },
  },
 });