feat: add projects page and rework home page

app/components/AppNavbar.vue

@@ -13,6 +13,8 @@
 </template>
 
 <script setup lang="ts">
+import type { NavigationMenuItem } from '@nuxt/ui';
+
 const route = useRoute();
 const items = computed<NavigationMenuItem[]>(() => [
   {
@@ -20,7 +22,7 @@ const items = computed<NavigationMenuItem[]>(() => [
     to: '/',
     active: route.path == '/',
   },
-  ...['resume', 'vocal-synthesis', 'languages', 'contact'].map((page) => ({
+  ...['resume', 'projects', 'vocal-synthesis', 'languages', 'contact'].map((page) => ({
     label: $t(`pages.${page}.name`),
     to: `/${page}`,
     active: route.path.startsWith(`/${page}`),

app/components/Ui/ProjectLink.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="flex">
+    <UButton :icon="icon" target="_blank" :to="link.url">
+      <span>{{ link.display }}</span>
+      <span v-if="link.type === 'cargo'"><UIcon name="i-mdi-download" /> {{ crateDownloads }}</span>
+    </UButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ProjectLink, ProjectLinkType } from '~/types/project';
+
+const crates = useCrates();
+
+const iconDict: Record<ProjectLinkType, string> = {
+  github: 'mdi:github',
+  gitea: 'simple-icons:gitea',
+  cargo: 'simple-icons:rust',
+  melpa: 'file-icons:melpa',
+};
+
+const icon = computed(() => iconDict[link.type]);
+
+const { link } = defineProps<{
+  link: ProjectLink;
+}>();
+
+const cratesData = computed(() => (link.type === 'cargo' ? crates.getCrateInfo(link.display) : null));
+const crateDownloads = computed(
+  () => cratesData.value?.data?.value?.crate.downloads ?? (cratesData.value?.loading ? 'loading' : 'error'),
+);
+</script>

app/components/Ui/SingleProject.vue

@@ -0,0 +1,23 @@
+<template>
+  <UPageCard class="w-md bg-background-100">
+    <div class="text-2xl font-title">{{ project.name }}</div>
+    <p>
+      {{ project.description }}
+    </p>
+    <div class="flex flex-row flex-wrap gap-2 items-baseline">
+      <UiProjectLink v-for="link in project.links" :key="link.url" :link="link" />
+    </div>
+    <div class="flex flex-row gap-4 items-baseline">
+      <div>Tools</div>
+      <UiBadgeList :tools="project.tools" />
+    </div>
+  </UPageCard>
+</template>
+
+<script lang="ts" setup>
+import type { Project } from '~/types/project';
+
+const { project } = defineProps<{
+  project: Project;
+}>();
+</script>

app/components/VocalSynth/Projects.vue

@@ -4,7 +4,7 @@
       {{ $t('pages.vocal-synthesis.projects') }}
     </p>
     <div class="flex flex-col max-w gap-10">
-      <div v-for="project in data?.projects" :key="project.title" class="flex flex-row max-w gap-5">
+      <div v-for="project in data?.projects" :key="project.title" class="flex flex-row max-w gap-5 font-title">
         <div>
           <div
             class="bg-primary text-text-50 dark:bg-primary p-1 rounded-md min-w-13 w-13 h-13 min-h-13 flex justify-center my-2"

app/components/navbar/ThemeSwitcher.vue

@@ -6,7 +6,7 @@
 
 <script setup lang="ts">
 type Theme = 'light' | 'dark' | 'system';
-const icons: Dictionary<Theme, string> = {
+const icons: Record<Theme, string> = {
   light: 'material-symbols:light-mode',
   dark: 'material-symbols:dark-mode',
   system: 'material-symbols:computer-outline',