feat(resume,vocal-synth): add clickable links to tools and technologies

- Add Tool interface with name and optional link properties - Update BadgeList and BadgeListCard components to render links - Extract VocalSynthPage types to dedicated module - Migrate resume.json and vocal-synthesis.json data to use Tool format - Add links to all tools, frameworks, and technologies in resume
2026-02-04 16:43:37 +01:00
parent 8052ccf0d5
commit f7c4b8d6da
10 changed files with 212 additions and 46 deletions
--- a/app/components/Ui/BadgeList.vue
+++ b/app/components/Ui/BadgeList.vue
@@ -1,13 +1,20 @@
 <template>
  <div v-if="tools" class="flex flex-row gap-1 flex-wrap">
-    <UBadge v-for="tool in tools" :key="tool" size="md" variant="solid">
-      {{ tool }}
+    <UBadge v-for="tool in tools" :key="tool.name" size="md" variant="solid">
+      <span v-if="tool.link">
+        <NuxtLink :to="tool.link" target="_blank">
+          {{ tool.name }}
+        </NuxtLink>
+      </span>
+      <span v-else>{{ tool.name }}</span>
    </UBadge>
  </div>
 </template>

 <script setup lang="ts">
+import type { Tool } from '../../types/tool';
+
 const { tools } = defineProps<{
-  tools: string[];
+  tools: Tool[];
 }>();
 </script>
--- a/app/components/Ui/BadgeListCard.vue
+++ b/app/components/Ui/BadgeListCard.vue
@@ -8,7 +8,9 @@
 </template>

 <script setup lang="ts">
+import type { Tool } from '~/types/tool';
+
 const { tools } = defineProps<{
-  tools: string[];
+  tools: Tool[];
 }>();
 </script>
--- a/app/components/VocalSynth/Projects.vue
+++ b/app/components/VocalSynth/Projects.vue
@@ -14,7 +14,7 @@
        </div>
        <div class="flex flex-col">
          <div class="flex flex-row gap-2 items-baseline">
-            <ULink :to="project.link" class="text-2xl">
+            <ULink :to="project.link" :target="external(project.link) ? '_blank' : '_self'" class="text-2xl">
              {{ project.title }}
            </ULink>
            <UIcon v-if="external(project.link)" name="mdi:link" class="size-5" />
@@ -29,7 +29,9 @@
 </template>

 <script setup lang="ts">
+import type { VocalSynthPage } from '~/types/vocal-synth';
+
 // Inject data provided by the page to avoid hydration issues with MDC components
-const data = inject('pageData');
+const data: VocalSynthPage | undefined = inject('pageData');
 const external = (url: string) => url.startsWith('http');
 </script>
--- a/app/types/resume.ts
+++ b/app/types/resume.ts
@@ -1,16 +1,17 @@
 import type { TimelineItem } from '@nuxt/ui';
+import type { Tool } from './tool';

 export class ResumeExperience implements TimelineItem {
-  tools: string[] = [];
+  tools: Tool[] = [];
  description?: string;
 }

 export class ResumeContent {
  experience: ResumeExperience[] = [];
  education: TimelineItem[] = [];
-  otherTools: string[] = [];
-  devops: string[] = [];
-  os: string[] = [];
-  programmingLanguages: string[] = [];
-  frameworks: string[] = [];
+  otherTools: Tool[] = [];
+  devops: Tool[] = [];
+  os: Tool[] = [];
+  programmingLanguages: Tool[] = [];
+  frameworks: Tool[] = [];
 }
--- a/app/types/tool.ts
+++ b/app/types/tool.ts
@@ -0,0 +1,4 @@
+export interface Tool {
+  name: string;
+  link?: string;
+}
--- a/app/types/vocal-synth.ts
+++ b/app/types/vocal-synth.ts
@@ -0,0 +1,13 @@
+import type { Tool } from './tool';
+
+export interface VocalSynthProject {
+  title: string;
+  icon: string;
+  description: string;
+  link: string;
+}
+
+export interface VocalSynthPage {
+  projects: VocalSynthProject[];
+  tools: Tool[];
+}
--- a/content/en/resume.json
+++ b/content/en/resume.json
@@ -5,15 +5,16 @@
      "title": "Consultant – Aubay",
      "description": "Web development consultant working on enterprise applications. Continued focus on Angular front-end development and Java Spring Boot back-end services with PostgreSQL databases.",
      "tools": [
-        "Angular",
-        "TypeScript",
-        "Java Spring Boot",
-        "Java Spring Batch",
-        "PostgreSQL",
-        "VS Code",
-        "Eclipse",
-        "IntelliJ Idea",
-        "Git"
+        { "name": "Angular", "link": "https://angular.dev/" },
+        { "name": "TypeScript", "link": "https://www.typescriptlang.org/" },
+        { "name": "Java", "link": "https://www.java.com/" },
+        { "name": "Spring Boot", "link": "https://spring.io/projects/spring-boot" },
+        { "name": "Spring Batch", "link": "https://spring.io/projects/spring-batch" },
+        { "name": "PostgreSQL", "link": "https://www.postgresql.org/" },
+        { "name": "VS Code", "link": "https://code.visualstudio.com/" },
+        { "name": "Eclipse", "link": "https://www.eclipse.org/" },
+        { "name": "IntelliJ Idea", "link": "https://www.jetbrains.com/idea/" },
+        { "name": "Git", "link": "https://git-scm.com/" }
      ],
      "icon": "mdi:laptop"
    },
@@ -21,14 +22,29 @@
      "date": "February 2023 – August 2023",
      "title": "Intern – Aubay",
      "description": "Web application development internship focused on full-stack development. Worked on projects using Angular for front-end and Java Spring Boot for back-end, with PostgreSQL databases.",
-      "tools": ["Angular", "TypeScript", "Java Spring Boot", "PostgreSQL", "VS Code", "Eclipse", "Git"],
+      "tools": [
+        { "name": "Angular", "link": "https://angular.dev/" },
+        { "name": "TypeScript", "link": "https://www.typescriptlang.org/" },
+        { "name": "Java", "link": "https://www.java.com/" },
+        { "name": "Spring Boot", "link": "https://spring.io/projects/spring-boot" },
+        { "name": "PostgreSQL", "link": "https://www.postgresql.org/" },
+        { "name": "VS Code", "link": "https://code.visualstudio.com/" },
+        { "name": "Eclipse", "link": "https://www.eclipse.org/" },
+        { "name": "Git", "link": "https://git-scm.com/" }
+      ],
      "icon": "mdi:book"
    },
    {
      "date": "October 2014 – July 2018",
      "title": "CTO – Voxwave",
      "description": "Co-founded a startup specialized in creating French virtual singers using vocal synthesis. Developed singing synthesis vocal libraries, conducted linguistic research, provided user support, and trained recruits in vocal library development. Led technical development of ALYS, the first professional French singing voice library.",
-      "tools": ["Alter/Ego", "UTAU", "FL Studio", "iZotope RX", "T-RackS CS"],
+      "tools": [
+        { "name": "Alter/Ego", "link": "https://www.plogue.com/products/alter-ego.html" },
+        { "name": "UTAU", "link": "http://utau2008.xrea.jp/" },
+        { "name": "FL Studio", "link": "https://www.image-line.com/" },
+        { "name": "iZotope RX", "link": "https://www.izotope.com/en/products/rx.html" },
+        { "name": "T-RackS CS", "link": "https://www.ikmultimedia.com/products/tr6/" }
+      ],
      "icon": "mdi:waveform"
    }
  ],
@@ -58,9 +74,52 @@
      "icon": "mdi:book-open-page-variant"
    }
  ],
-  "otherTools": ["Emacs", "Vim", "jj", "PostgreSQL", "SQLite"],
-  "devops": ["GitHub", "Gitlab", "Gitea", "GitHub Actions", "Drone.io", "Docker", "Podman"],
-  "os": ["NixOS", "Debian", "Arch Linux", "Void Linux", "Alpine Linux", "Windows"],
-  "programmingLanguages": ["TypeScript", "Rust", "C", "EmacsLisp", "Bash/Zsh", "C++", "Python", "CommonLisp"],
-  "frameworks": ["Angular", "Vue", "Nuxt", "Spring Boot", "Poem (Rust)"]
+  "otherTools": [
+    { "name": "Emacs", "link": "https://www.gnu.org/software/emacs/" },
+    { "name": "vim", "link": "https://www.vim.org/" },
+    { "name": "VS Code", "link": "https://code.visualstudio.com/" },
+    { "name": "Eclipse", "link": "https://www.eclipse.org/" },
+    { "name": "IntelliJ Idea", "link": "https://www.jetbrains.com/idea/" },
+    { "name": "jj", "link": "https://docs.jj-vcs.dev/latest/" },
+    { "name": "Git", "link": "https://git-scm.com/" },
+    { "name": "PostgreSQL", "link": "https://www.postgresql.org/" },
+    { "name": "SQLite", "link": "https://sqlite.org/index.html" }
+  ],
+  "devops": [
+    { "name": "GitHub", "link": "https://github.com" },
+    { "name": "Gitlab", "link": "https://gitlab.com" },
+    { "name": "Gitea", "link": "https://about.gitea.com/" },
+    { "name": "GitHub Actions", "link": "https://docs.github.com/en/actions" },
+    { "name": "Drone.io", "link": "https://www.drone.io/" },
+    { "name": "Docker", "link": "https://www.docker.com/" },
+    { "name": "Podman", "link": "https://podman.io/" }
+  ],
+  "os": [
+    { "name": "NixOS", "link": "https://nixos.org/" },
+    { "name": "Debian", "link": "https://www.debian.org/" },
+    { "name": "Arch Linux", "link": "https://archlinux.org/" },
+    { "name": "Void Linux", "link": "https://voidlinux.org/" },
+    { "name": "Alpine Linux", "link": "https://www.alpinelinux.org/" },
+    { "name": "Windows", "link": "https://support.microsoft.com/en-us/welcometowindows" }
+  ],
+  "programmingLanguages": [
+    { "name": "TypeScript", "link": "https://www.typescriptlang.org/" },
+    { "name": "Java", "link": "https://www.java.com/" },
+    { "name": "Rust", "link": "https://rust-lang.org/" },
+    { "name": "C", "link": "https://www.c-language.org/" },
+    { "name": "EmacsLisp", "link": "https://www.gnu.org/software/emacs/manual/html_node/eintr/index.html" },
+    { "name": "Bash", "link": "https://www.gnu.org/software/bash/" },
+    { "name": "Zsh", "link": "https://www.zsh.org/" },
+    { "name": "C++", "link": "https://isocpp.org/" },
+    { "name": "Python", "link": "https://www.python.org/" },
+    { "name": "CommonLisp", "link": "https://lisp-lang.org/" }
+  ],
+  "frameworks": [
+    { "name": "Angular", "link": "https://angular.dev/" },
+    { "name": "Vue", "link": "https://vuejs.org/" },
+    { "name": "Nuxt", "link": "https://nuxt.com/" },
+    { "name": "Spring Boot", "link": "https://spring.io/projects/spring-boot" },
+    { "name": "Poem (Rust)", "link": "https://github.com/poem-web/poem" },
+    { "name": "Loco.rs", "link": "https://loco.rs/" }
+  ]
 }
--- a/content/en/vocal-synthesis.json
+++ b/content/en/vocal-synthesis.json
@@ -31,5 +31,15 @@
      "link": "https://alys.phundrak.com/en/faq#are-there-any-plans-for-leora"
    }
  ],
-  "tools": ["Alter/Ego", "UTAU", "VOCALOID", "ChipSpeech", "FL Studio", "Audacity", "iZotope RX", "T-RackS CS", "C++"]
+  "tools": [
+    { "name": "Alter/Ego", "link": "https://www.plogue.com/products/alter-ego.html" },
+    { "name": "UTAU", "link": "http://utau2008.xrea.jp/" },
+    { "name": "VOCALOID", "link": "https://www.vocaloid.com/en/" },
+    { "name": "ChipSpeech", "link": "https://plogue.com/products/chipspeech.html" },
+    { "name": "FL Studio", "link": "https://www.image-line.com/" },
+    { "name": "Audacity", "link": "https://www.audacityteam.org/" },
+    { "name": "iZotope RX", "link": "https://www.izotope.com/en/products/rx.html" },
+    { "name": "T-RackS CS", "link": "https://www.ikmultimedia.com/products/tr6/" },
+    { "name": "C++", "link": "https://isocpp.org/" }
+  ]
 }
--- a/content/fr/resume.json
+++ b/content/fr/resume.json
@@ -5,15 +5,16 @@
      "title": "Consultant – Aubay",
      "description": "Consultant en développement web travaillant sur des applications d'entreprise. Je continue à me concentrer sur le développement front-end Angular et les services back-end Java Spring Boot avec des bases de données PostgreSQL.",
      "tools": [
-        "Angular",
-        "TypeScript",
-        "Java Spring Boot",
-        "Java Spring Batch",
-        "PostgreSQL",
-        "VS Code",
-        "Eclipse",
-        "IntelliJ Idea",
-        "Git"
+        { "name": "Angular", "link": "https://angular.dev/" },
+        { "name": "TypeScript", "link": "https://www.typescriptlang.org/" },
+        { "name": "Java", "link": "https://www.java.com/" },
+        { "name": "Spring Boot", "link": "https://spring.io/projects/spring-boot" },
+        { "name": "Spring Batch", "link": "https://spring.io/projects/spring-batch" },
+        { "name": "PostgreSQL", "link": "https://www.postgresql.org/" },
+        { "name": "VS Code", "link": "https://code.visualstudio.com/" },
+        { "name": "Eclipse", "link": "https://www.eclipse.org/" },
+        { "name": "IntelliJ Idea", "link": "https://www.jetbrains.com/idea/" },
+        { "name": "Git", "link": "https://git-scm.com/" }
      ],
      "icon": "mdi:laptop"
    },
@@ -21,14 +22,29 @@
      "date": "Février 2023 – Août 2023",
      "title": "Stagiaire – Aubay",
      "description": "Stage en développement d'applications web axé sur le développement full-stack. J'ai travaillé sur des projets utilisant Angular pour le front-end et Java Spring Boot pour le back-end, avec des bases de données PostgreSQL.",
-      "tools": ["Angular", "TypeScript", "Java Spring Boot", "PostgreSQL", "VS Code", "Eclipse", "Git"],
+      "tools": [
+        { "name": "Angular", "link": "https://angular.dev/" },
+        { "name": "TypeScript", "link": "https://www.typescriptlang.org/" },
+        { "name": "Java", "link": "https://www.java.com/" },
+        { "name": "Spring Boot", "link": "https://spring.io/projects/spring-boot" },
+        { "name": "PostgreSQL", "link": "https://www.postgresql.org/" },
+        { "name": "VS Code", "link": "https://code.visualstudio.com/" },
+        { "name": "Eclipse", "link": "https://www.eclipse.org/" },
+        { "name": "Git", "link": "https://git-scm.com/" }
+      ],
      "icon": "mdi:book"
    },
    {
      "date": "Octobre 2014 – Juillet 2018",
      "title": "Directeur technique – Voxwave",
      "description": "Co-fondateur d'une start-up spécialisée dans la création de chanteurs virtuels français à l'aide de la synthèse vocale. Développement de banques vocales de synthèse chantée, recherche linguistique, assistance aux utilisateurs et formation des recrues au développement de banques vocales. Direction du développement technique d'ALYS, la première banques vocale professionnelle de chant en français.",
-      "tools": ["Alter/Ego", "UTAU", "FL Studio", "iZotope RX", "T-RackS CS"],
+      "tools": [
+        { "name": "Alter/Ego", "link": "https://www.plogue.com/products/alter-ego.html" },
+        { "name": "UTAU", "link": "http://utau2008.xrea.jp/" },
+        { "name": "FL Studio", "link": "https://www.image-line.com/" },
+        { "name": "iZotope RX", "link": "https://www.izotope.com/en/products/rx.html" },
+        { "name": "T-RackS CS", "link": "https://www.ikmultimedia.com/products/tr6/" }
+      ],
      "icon": "mdi:waveform"
    }
  ],
@@ -58,9 +74,51 @@
      "icon": "mdi:book-open-page-variant"
    }
  ],
-  "otherTools": ["Emacs", "Vim", "jj", "PostgreSQL", "SQLite"],
-  "devops": ["GitHub", "Gitlab", "Gitea", "GitHub Actions", "Drone.io", "Docker", "Podman"],
-  "os": ["NixOS", "Debian", "Arch Linux", "Void Linux", "Alpine Linux", "Windows"],
-  "programmingLanguages": ["TypeScript", "Rust", "C", "EmacsLisp", "Bash/Zsh", "C++", "Python", "CommonLisp"],
-  "frameworks": ["Angular", "Vue", "Nuxt", "Spring Boot", "Poem (Rust)"]
+  "otherTools": [
+    { "name": "Emacs", "link": "https://www.gnu.org/software/emacs/" },
+    { "name": "vim", "link": "https://www.vim.org/" },
+    { "name": "VS Code", "link": "https://code.visualstudio.com/" },
+    { "name": "Eclipse", "link": "https://www.eclipse.org/" },
+    { "name": "IntelliJ Idea", "link": "https://www.jetbrains.com/idea/" },
+    { "name": "jj", "link": "https://docs.jj-vcs.dev/latest/" },
+    { "name": "Git", "link": "https://git-scm.com/" },
+    { "name": "PostgreSQL", "link": "https://www.postgresql.org/" },
+    { "name": "SQLite", "link": "https://sqlite.org/index.html" }
+  ],
+  "devops": [
+    { "name": "GitHub", "link": "https://github.com" },
+    { "name": "Gitlab", "link": "https://gitlab.com" },
+    { "name": "Gitea", "link": "https://about.gitea.com/" },
+    { "name": "GitHub Actions", "link": "https://docs.github.com/en/actions" },
+    { "name": "Drone.io", "link": "https://www.drone.io/" },
+    { "name": "Docker", "link": "https://www.docker.com/" },
+    { "name": "Podman", "link": "https://podman.io/" }
+  ],
+  "os": [
+    { "name": "NixOS", "link": "https://nixos.org/" },
+    { "name": "Debian", "link": "https://www.debian.org/" },
+    { "name": "Arch Linux", "link": "https://archlinux.org/" },
+    { "name": "Void Linux", "link": "https://voidlinux.org/" },
+    { "name": "Alpine Linux", "link": "https://www.alpinelinux.org/" },
+    { "name": "Windows", "link": "https://support.microsoft.com/en-us/welcometowindows" }
+  ],
+  "programmingLanguages": [
+    { "name": "TypeScript", "link": "https://www.typescriptlang.org/" },
+    { "name": "Rust", "link": "https://rust-lang.org/" },
+    { "name": "C", "link": "https://www.c-language.org/" },
+    { "name": "EmacsLisp", "link": "https://www.gnu.org/software/emacs/manual/html_node/eintr/index.html" },
+    { "name": "Bash", "link": "https://www.gnu.org/software/bash/" },
+    { "name": "Zsh", "link": "https://www.zsh.org/" },
+    { "name": "C++", "link": "https://isocpp.org/" },
+    { "name": "Python", "link": "https://www.python.org/" },
+    { "name": "CommonLisp", "link": "https://lisp-lang.org/" }
+  ],
+  "frameworks": [
+    { "name": "Angular", "link": "https://angular.dev/" },
+    { "name": "Vue", "link": "https://vuejs.org/" },
+    { "name": "Nuxt", "link": "https://nuxt.com/" },
+    { "name": "Spring Boot", "link": "https://spring.io/projects/spring-boot" },
+    { "name": "Poem (Rust)", "link": "https://github.com/poem-web/poem" },
+    { "name": "Loco.rs", "link": "https://loco.rs/" }
+  ]
 }
--- a/content/fr/vocal-synthesis.json
+++ b/content/fr/vocal-synthesis.json
@@ -31,5 +31,15 @@
      "link": "https://alys.phundrak.com/faq#y-a-t-il-quelque-chose-de-prevu-pour-leora"
    }
  ],
-  "tools": ["Alter/Ego", "UTAU", "VOCALOID", "ChipSpeech", "FL Studio", "Audacity", "iZotope RX", "T-RackS CS", "C++"]
+  "tools": [
+    { "name": "Alter/Ego", "link": "https://www.plogue.com/products/alter-ego.html" },
+    { "name": "UTAU", "link": "http://utau2008.xrea.jp/" },
+    { "name": "VOCALOID", "link": "https://www.vocaloid.com/en/" },
+    { "name": "ChipSpeech", "link": "https://plogue.com/products/chipspeech.html" },
+    { "name": "FL Studio", "link": "https://www.image-line.com/" },
+    { "name": "Audacity", "link": "https://www.audacityteam.org/" },
+    { "name": "iZotope RX", "link": "https://www.izotope.com/en/products/rx.html" },
+    { "name": "T-RackS CS", "link": "https://www.ikmultimedia.com/products/tr6/" },
+    { "name": "C++", "link": "https://isocpp.org/" }
+  ]
 }