build: add es2019 lib

src/assets/main.css

@@ -14,6 +14,7 @@
     font-size: 40px;
     text-align: center;
     padding-top: 12px;
+    font-variant: small-caps;
 }
 
 .main-left {
@@ -201,11 +202,13 @@
     font-size: 36px;
     text-align: left;
     padding-left: 16px;
+    font-variant: small-caps;
 }
 .last-name {
     font-size: 40px;
     text-align: right;
     margin-right: 16px;
+    font-variant: small-caps;
 }
 
 .hobby {

src/components/common/WordCloud.vue

@@ -14,6 +14,11 @@
           fontSize: word.size + 'px',
           fontFamily: word.font,
           cursor: 'pointer',
+          fill:
+            selectedSkillStore.skill?.name === word.text
+              ? '#FF0000'
+              : '#000000',
+          userSelect: 'none',
         }"
         :transform="`translate(${word.x}, ${word.y})rotate(${word.rotate})`"
         text-anchor="middle"
@@ -36,7 +41,7 @@
 import cloud from "d3-cloud";
 import skills from "@/data/skills";
 import { defineComponent } from "vue";
-import type { Skill } from "@/data/types";
+import { useSelectedSkill } from "@/stores/counter";
 
 export default defineComponent({
   props: {
@@ -54,6 +59,12 @@ export default defineComponent({
       mouseY: undefined,
     };
   },
+  setup() {
+    const selectedSkillStore = useSelectedSkill();
+    return {
+      selectedSkillStore,
+    };
+  },
   created() {
     this.computeWords();
     // setInterval(() => {
@@ -75,7 +86,11 @@ export default defineComponent({
       this.hover = false;
     },
     highlightText(text: string) {
-      console.log(text);
+      if (this.selectedSkillStore.skill?.name !== text) {
+        this.selectedSkillStore.set(text);
+      } else {
+        this.selectedSkillStore.unselect();
+      }
     },
     computeWords() {
       const words: (cloud.Word & { size: number; fixed?: boolean })[] =

src/components/experiences/MyExperiences.vue

@@ -24,7 +24,9 @@ import RightSection from "@/components/common/RightSection.vue";
             class="my-experiences-mission"
             v-for="mission in experience.missions"
             :key="mission.description"
-            style=""
+            :style="{
+              color: isSelected(mission) ? 'red' : 'black',
+            }"
           >
             <div class="my-experiences-mission-skills">
               {{ mission.skills.map((s) => s.name).join(", ") }}
@@ -42,6 +44,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 { mapState } from "pinia";
+import type { Mission } from "@/data/types";
 
 export default defineComponent({
   name: "MyExperiences",
@@ -50,6 +55,18 @@ export default defineComponent({
       experiences: experiences,
     };
   },
+  computed: {
+    ...mapState(useSelectedSkill, {
+      selectedSkill: "skill",
+    }),
+  },
+  methods: {
+    isSelected(mission: Mission) {
+      return mission.skills
+        .flatMap((s) => [...(s.parent ?? []), s])
+        .some((s) => s?.name === this.selectedSkill?.name);
+    },
+  },
 });
 </script>
 

src/data/skills.ts

@@ -19,28 +19,28 @@ 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",
+  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: "HtmlCss", 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: "Blend", score: 0, parent: [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 };

src/stores/counter.ts

@@ -1,16 +1,20 @@
 import { defineStore } from "pinia";
+import type { Skill } from "@/data/types";
+import mySkills from "@/data/skills";
 
-export const useCounterStore = defineStore({
-  id: "counter",
+export const useSelectedSkill = defineStore({
+  id: "skill",
   state: () => ({
-    counter: 0,
+    skill: undefined as Skill | undefined,
   }),
-  getters: {
-    doubleCount: (state) => state.counter * 2,
-  },
   actions: {
-    increment() {
-      this.counter++;
+    set(selectedSkill: string) {
+      this.skill = Object.keys(mySkills)
+        .map((p) => mySkills[p])
+        .find((skill: Skill) => skill.name === selectedSkill);
+    },
+    unselect() {
+      this.skill = undefined;
     },
   },
 });

tsconfig.config.json

@@ -3,6 +3,6 @@
   "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"],
   "compilerOptions": {
     "composite": true,
-    "types": ["node"]
+    "types": ["node"],
   }
 }

tsconfig.json

@@ -6,7 +6,10 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "lib": [
+      "es2019"
+    ]
   },
 
   "references": [

vite.config.ts

@@ -10,6 +10,9 @@ export default defineConfig({
   server: {
     port: 8311,
   },
+  build: {
+    target: "es2019",
+  },
   resolve: {
     alias: {
       "@": fileURLToPath(new URL("./src", import.meta.url)),