From 2f27ef7c6f3b20590e08b9425a0b6db910b43982 Mon Sep 17 00:00:00 2001
From: "nicolas.marsal" <nicolas.marsal@sundayapp.com>
Date: Thu, 4 Aug 2022 15:14:33 +0200
Subject: [PATCH] feat: dynamic UI

---
 src/App.vue                                   |  29 +++-
 src/assets/main.css                           |  25 ++++
 src/components/common/WordCloud.vue           |  59 +++++---
 src/components/experiences/MyExperiences.vue  |  36 ++++-
 .../informations/MyInformations.vue           |   8 +-
 .../informations/MyPresentation.vue           |   4 +-
 src/data/informations.ts                      |  12 +-
 src/data/skills.ts                            | 137 ++++++++++++------
 src/data/types.ts                             |   3 +-
 src/main.ts                                   |  16 +-
 src/stores/{counter.ts => selectedSkill.ts}   |   0
 11 files changed, 230 insertions(+), 99 deletions(-)
 rename src/stores/{counter.ts => selectedSkill.ts} (100%)

diff --git a/src/App.vue b/src/App.vue
index d2c38f4..2cdc0de 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,12 +1,7 @@
-<script setup lang="ts">
-import MyCv from "@/components/cv/MyCv.vue";
-import DownloadIcon from "@/components/icons/DownloadIcon.vue";
-</script>
-
 <template>
   <MyCv />
   <div class="menu">
-    <button onclick="window.downloadPdf()">
+    <button @click="downloadPdf()">
       <DownloadIcon width="32" height="32" />
     </button>
   </div>
@@ -14,9 +9,31 @@ import DownloadIcon from "@/components/icons/DownloadIcon.vue";
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import { useSelectedSkill } from "@/stores/selectedSkill";
+import MyCv from "@/components/cv/MyCv.vue";
+import DownloadIcon from "@/components/icons/DownloadIcon.vue";
 
 export default defineComponent({
   name: "app",
+  components: {
+    MyCv,
+    DownloadIcon,
+  },
+  setup() {
+    const store = useSelectedSkill();
+
+    return {
+      unselect: store.unselect,
+    };
+  },
+  methods: {
+    downloadPdf() {
+      this.unselect();
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      window.downloadPdf();
+    },
+  },
 });
 </script>
 
diff --git a/src/assets/main.css b/src/assets/main.css
index 09fa600..d3aaff1 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -195,8 +195,33 @@
     margin-right: 10px;
 }
 
+.my-experiences-mission-skill {
+    color:black;
+}
+.my-experiences-mission-skill.unselected{
+    color: #b7b7b7;
+    filter: none;
+}
+.my-experiences-mission-skill.selected{
+    color:black;
+    /*filter: drop-shadow( 0px 0px 7px rgba(0, 255, 0, 1));*/
+}
+
+.my-experiences-mission-skill:nth-child(n+2)::before{
+    content: ", "
+}
+
 .my-experiences-mission-description{
     flex: 3 1;
+    color: black;
+}
+.my-experiences-mission-description.unselected{
+    color: #b7b7b7;
+    filter: none;
+}
+.my-experiences-mission-description.selected{
+    color: black;
+    /*filter: drop-shadow( 0px 0px 7px rgba(0, 255, 0, 1));*/
 }
 .first-name {
     font-size: 36px;
diff --git a/src/components/common/WordCloud.vue b/src/components/common/WordCloud.vue
index 25e0ae3..99a98cf 100644
--- a/src/components/common/WordCloud.vue
+++ b/src/components/common/WordCloud.vue
@@ -10,14 +10,15 @@
       <text
         v-for="word in words"
         :key="word.text"
+        :id="word.text"
         :style="{
           fontSize: word.size + 'px',
           fontFamily: word.font,
           cursor: 'pointer',
-          fill:
+          filter:
             selectedSkillStore.skill?.name === word.text
-              ? '#FF0000'
-              : '#000000',
+              ? 'drop-shadow( 0px 0px 3px rgba(0, 0, 0, 0.5))'
+              : 'none',
           userSelect: 'none',
         }"
         :transform="`translate(${word.x}, ${word.y})rotate(${word.rotate})`"
@@ -33,7 +34,10 @@
 
 <style scoped>
 .word {
-  transition: 1s transform ease-in-out;
+  transition: all 1s ease-in-out;
+  -webkit-transition: all 1s ease-in-out;
+  /*transition: 1s transform, 1s font-size;*/
+  /*-webkit-transition: 1s -webkit-transform, 1s transform, 1s font-size;*/
 }
 </style>
 
@@ -41,7 +45,7 @@
 import cloud from "d3-cloud";
 import skills from "@/data/skills";
 import { defineComponent } from "vue";
-import { useSelectedSkill } from "@/stores/counter";
+import { useSelectedSkill } from "@/stores/selectedSkill";
 
 export default defineComponent({
   props: {
@@ -61,10 +65,18 @@ export default defineComponent({
   },
   setup() {
     const selectedSkillStore = useSelectedSkill();
+
     return {
       selectedSkillStore,
     };
   },
+  mounted() {
+    this.selectedSkillStore.$subscribe((mutation, state) => {
+      console.log(mutation);
+      console.log(state);
+      this.computeWords();
+    });
+  },
   created() {
     this.computeWords();
     // setInterval(() => {
@@ -91,12 +103,13 @@ export default defineComponent({
       } else {
         this.selectedSkillStore.unselect();
       }
+      this.computeWords();
     },
     computeWords() {
       const words: (cloud.Word & { size: number; fixed?: boolean })[] =
         Object.keys(skills)
           .map((p) => skills[p])
-          .map((s) => ({ text: s.name, size: s.score }));
+          .map((s) => ({ text: s.name, size: s.score / (s.parent ? 2 : 1) }));
 
       const min = words
         .map((s) => s.size)
@@ -107,18 +120,19 @@ export default defineComponent({
       const scaleFontSize = ({
         size,
         fixed,
-      }: {
-        size: number;
-        fixed?: boolean;
-      }) => {
-        return fixed
-          ? size
-          : ((size - min) / (max - min)) *
-              (this.maxFontSize - this.minFontSize) +
-              this.minFontSize;
+        text,
+      }: cloud.Word & { size: number; fixed?: boolean }) => {
+        if (fixed) return size;
+        if (text === this.selectedSkillStore?.skill?.name)
+          return this.maxFontSize * 1.5;
+
+        return (
+          ((size - min) / (max - min)) * (this.maxFontSize - this.minFontSize) +
+          this.minFontSize
+        );
       };
       const randomRotate = (s: number) => {
-        const range = 120 * (1 - ((s - min) / (max - min)) * 0.7);
+        const range = 80 * (1 - ((s - min) / (max - min)) * 0.7);
         return Math.random() * range - range / 2;
       };
       // words = [
@@ -145,15 +159,14 @@ export default defineComponent({
             `d: ${d.length} - w: ${words.length} - f: ${this.maxFontSize}`
           );
           if (d.length < words.length) {
-            // console.log("On recommence !");
             this.maxFontSize = this.maxFontSize - 2;
-            if (this.maxFontSize > 2 * this.minFontSize) {
-              this.computeWords();
-            } else {
-              this.words = d;
-            }
+            // if (this.maxFontSize > 2 * this.minFontSize) {
+            this.computeWords();
+            // } else {
+            //   this.words = d.sort((a, b) => a.text!.localeCompare(b.text!));
+            // }
           } else {
-            this.words = d;
+            this.words = d.sort((a, b) => a.text!.localeCompare(b.text!));
           }
         })
         .start();
diff --git a/src/components/experiences/MyExperiences.vue b/src/components/experiences/MyExperiences.vue
index ebd94dd..faba34b 100644
--- a/src/components/experiences/MyExperiences.vue
+++ b/src/components/experiences/MyExperiences.vue
@@ -24,14 +24,26 @@ import RightSection from "@/components/common/RightSection.vue";
             class="my-experiences-mission"
             v-for="mission in experience.missions"
             :key="mission.description"
-            :style="{
-              color: isSelected(mission) ? 'red' : 'black',
-            }"
           >
             <div class="my-experiences-mission-skills">
-              {{ mission.skills.map((s) => s.name).join(", ") }}
+              <span
+                v-for="skill in mission.skills"
+                :key="skill.name"
+                class="my-experiences-mission-skill"
+                :class="{
+                  selected: isSelectedSkill(skill),
+                  unselected: !noSelectionAtAll() && !isSelectedSkill(skill),
+                }"
+                >{{ skill.name }}</span
+              >
             </div>
-            <div class="my-experiences-mission-description" style="">
+            <div
+              class="my-experiences-mission-description"
+              :class="{
+                selected: isSelectedMission(mission),
+                unselected: !noSelectionAtAll() && !isSelectedMission(mission),
+              }"
+            >
               {{ mission.description }}
             </div>
           </div>
@@ -44,9 +56,9 @@ import RightSection from "@/components/common/RightSection.vue";
 <script lang="ts">
 import experiences from "@/data/experiences";
 import { defineComponent } from "vue";
-import { useSelectedSkill } from "@/stores/counter";
+import { useSelectedSkill } from "@/stores/selectedSkill";
 import { mapState } from "pinia";
-import type { Mission } from "@/data/types";
+import type { Mission, Skill } from "@/data/types";
 
 export default defineComponent({
   name: "MyExperiences",
@@ -61,11 +73,19 @@ export default defineComponent({
     }),
   },
   methods: {
-    isSelected(mission: Mission) {
+    isSelectedMission(mission: Mission) {
       return mission.skills
         .flatMap((s) => [...(s.parent ?? []), s])
         .some((s) => s?.name === this.selectedSkill?.name);
     },
+    isSelectedSkill(skill: Skill) {
+      return [...(skill.parent ?? []), skill].some(
+        (s) => s?.name === this.selectedSkill?.name
+      );
+    },
+    noSelectionAtAll() {
+      return this.selectedSkill === undefined;
+    },
   },
 });
 </script>
diff --git a/src/components/informations/MyInformations.vue b/src/components/informations/MyInformations.vue
index 457b0c2..b45d414 100644
--- a/src/components/informations/MyInformations.vue
+++ b/src/components/informations/MyInformations.vue
@@ -3,6 +3,7 @@ import LeftSection from "@/components/common/LeftSection.vue";
 import EmailIcon from "@/components/icons/EmailIcon.vue";
 import HouseIcon from "@/components/icons/HouseIcon.vue";
 import PhoneIcon from "@/components/icons/PhoneIcon.vue";
+import LinkedInIcon from "@/components/icons/LinkedInIcon.vue";
 </script>
 
 <template>
@@ -22,10 +23,11 @@ import PhoneIcon from "@/components/icons/PhoneIcon.vue";
       <div>{{ infos.phoneNumber }}</div>
     </div>
     <div class="my-informations-line">
-      <div></div>
-      <div>{{ $t("age", { age: age() }) }}</div>
+      <LinkedInIcon width="18" height="18" color="#000000" />
+      <a :href="`https://www.linkedin.com/in/${infos.linkedin}`"
+        >linkedin.com/in/{{ infos.linkedin }}</a
+      >
     </div>
-    <div class="my-informations-line"></div>
   </LeftSection>
 </template>
 
diff --git a/src/components/informations/MyPresentation.vue b/src/components/informations/MyPresentation.vue
index 5a82781..5e01968 100644
--- a/src/components/informations/MyPresentation.vue
+++ b/src/components/informations/MyPresentation.vue
@@ -1,7 +1,5 @@
 <template>
-  <div class="my-presentation">
-    {{ presentation }}
-  </div>
+  <div class="my-presentation" v-html="presentation"></div>
 </template>
 
 <script lang="ts">
diff --git a/src/data/informations.ts b/src/data/informations.ts
index 4e8d1ad..a8174db 100644
--- a/src/data/informations.ts
+++ b/src/data/informations.ts
@@ -7,11 +7,13 @@ const informations = (): Information => {
     title: "Développeur Sénior",
     presentation: `Développeur avec 16 années d'expériences dans la réalisation de clients lourds ou web, initialement
     développeur UI, j'ai ensuite pû ajouter à mes compétences le développement de backend, et plus particulièrement le DevOps ces dernières annnées. 
-    Adepte du software craftsmanship, j'ai à coeur de produire et maintenir un code facile à comprendre, modifier ou tester.
-    La communication est clé dans mes échanges avec mes pairs.
+    Adepte du software craftsmanship, j'ai à coeur de produire et maintenir un code facile à comprendre, modifier ou tester. <br /><br />
+    Au sein d'une équipe, j'aime être force de proposition, et travailler en pair programming pour faire émerger de meilleures solutions
+    et arriver à un consensus.
     `,
+    linkedin: "nmars",
     email: "nicolas.marsal@gmail.com",
-    address: ["25 rue de la Moselle", "31100 Toulouse"],
+    address: ["31100 Toulouse"],
     birthDay: new Date(1982, 11, 3),
     education: [
       {
@@ -37,7 +39,7 @@ const informations = (): Information => {
       },
     ],
     hobbies: [
-      "Rhétorique, Biais Congnitifs",
+      "Rhétorique, Biais Cognitifs",
       "Domotique, Électronique",
       "Conception/Impression 3D",
       "Roller",
@@ -45,7 +47,7 @@ const informations = (): Information => {
     phoneNumber: "06 16 92 01 17",
     languages: [
       { name: "Français", level: "langue maternelle" },
-      { name: "English", level: "good level" },
+      { name: "English", level: "good level (B2)" },
     ],
   };
 };
diff --git a/src/data/skills.ts b/src/data/skills.ts
index b6f33d4..fb620e7 100644
--- a/src/data/skills.ts
+++ b/src/data/skills.ts
@@ -1,49 +1,93 @@
-import type { Skill } from "@/data/types";
+import type { Skill as DomainSkill } from "@/data/types";
 
-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 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 Native",
-  score: 17,
-  parent: [Typescript, UX],
-};
-const ExtJS: Skill = { name: "ExtJS", score: 14, parent: [Javascript, UX] };
-const Bash: Skill = { name: "Bash", score: 0 };
-const HtmlCss: Skill = { name: "HTML/CSS", 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: "Pencil", 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 Codecept: Skill = { name: "CodeceptJS", score: 25, parent: [Tests] };
-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 };
+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 Ansible: Skill = { name: "Ansible", parent: [DevOps] };
+const Helm: Skill = { name: "Helm", parent: [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 Java: Skill = { name: "Java" };
+const SpringBoot: Skill = { name: "SpringBoot", parent: [Java] };
+const Jee: Skill = { name: "JEE", parent: [Java] };
+const Gwt: Skill = { name: "GWT", parent: [Java, UX] };
+const Typescript: Skill = { name: "Typescript" };
+const Javascript: Skill = { name: "Javascript" };
+const Angular: Skill = { name: "Angular", parent: [Typescript, UX] };
+const React: Skill = { name: "React", parent: [Typescript, UX] };
+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] };
+const WPF: Skill = { name: "WPF", parent: [DotNET, UX] };
+const Blend: Skill = { name: "Blend", parent: [DotNET, UX] };
+const Pencil: Skill = { name: "Pencil", parent: [UX] };
+const Agility: Skill = { name: "Agility" };
+const Scrum: Skill = { name: "Scrum", parent: [Agility] };
+const Tests: Skill = { name: "Tests" };
+const Codecept: Skill = { name: "CodeceptJS", parent: [Tests] };
+const UIAutomation: Skill = { name: "UIAutomation", parent: [Tests] };
+const JUnit: Skill = { name: "JUnit", parent: [Tests, Java] };
+
+DevOps.score = 100;
+Docker.score = 50;
+Kubernetes.score = 50;
+Skaffold.score = 50;
+Ansible.score = 50;
+Helm.score = 20;
+
+CI_CD.score = 50;
+Maven.score = 50;
+Npm.score = 50;
+Linux.score = 50;
+Jenkins.score = 50;
+Git.score = 70;
+Svn.score = 40;
+
+Java.score = 100;
+SpringBoot.score = 50;
+Jee.score = 50;
+
+UX.score = 100;
+Gwt.score = 20;
+Typescript.score = 100;
+Javascript.score = 50;
+Angular.score = 70;
+React.score = 70;
+ReactNative.score = 50;
+ExtJS.score = 20;
+HtmlCss.score = 50;
+
+Bash.score = 10;
+Kotlin.score = 70;
+Groovy.score = 60;
+DotNET.score = 30;
+CSHARP.score = 30;
+
+WPF.score = 30;
+Blend.score = 20;
+Pencil.score = 10;
+
+Agility.score = 80;
+Scrum.score = 60;
+
+Tests.score = 70;
+Codecept.score = 60;
+UIAutomation.score = 10;
+JUnit.score = 70;
 
 export default {
   DevOps,
@@ -85,5 +129,4 @@ export default {
   Tests,
   UIAutomation,
   JUnit,
-  Communication,
-} as { [key: string]: Skill };
+} as { [key: string]: DomainSkill };
diff --git a/src/data/types.ts b/src/data/types.ts
index 25f37e2..4e7c3e8 100644
--- a/src/data/types.ts
+++ b/src/data/types.ts
@@ -14,7 +14,7 @@ export interface Experience {
 export type Skill = {
   name: string;
   score: number;
-  parent?: Skill[];
+  parent?: { name: string }[];
 };
 
 export interface Diploma {
@@ -35,6 +35,7 @@ export type Hobby = string;
 export interface Information {
   firstName: string;
   lastName: string;
+  linkedin: string;
   presentation: string;
   title: string;
   address: string[];
diff --git a/src/main.ts b/src/main.ts
index f984d60..6301bf8 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -23,20 +23,30 @@ import {
 library.add(faAt, faHouseChimney, faPhone);
 
 const i18n = createI18n({
-  locale: "fr",
+  // locale: "fr",
   messages: {
     fr: {
       section: {
         information: "informations",
         education: "formation",
         languages: "langues",
-        hobbies: "hobbies",
+        hobbies: "loisirs",
         experiences: "expériences",
         skills: "compétences",
       },
       age: "{age} ans",
     },
-    en: {},
+    en: {
+      section: {
+        information: "information",
+        education: "education",
+        languages: "languages",
+        hobbies: "hobbies",
+        experiences: "experiences",
+        skills: "skills",
+      },
+      age: "{age} years",
+    },
   },
 });
 
diff --git a/src/stores/counter.ts b/src/stores/selectedSkill.ts
similarity index 100%
rename from src/stores/counter.ts
rename to src/stores/selectedSkill.ts