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

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>

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>

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>

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[] = [];
 }

app/types/tool.ts

@@ -0,0 +1,4 @@
+export interface Tool {
+  name: string;
+  link?: string;
+}

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[];
+}