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
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -8,7 +8,9 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Tool } from '~/types/tool';
|
||||
|
||||
const { tools } = defineProps<{
|
||||
tools: string[];
|
||||
tools: Tool[];
|
||||
}>();
|
||||
</script>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user