feat: fill pages

frontend/app/components/AppFooter.vue

@@ -1,12 +1,20 @@
 <template>
-  <UFooter>
+  <UFooter class="bg-background-200">
     <template #left>
-      <p class="text-300 txt-sm">
-        Copyright &copy; {{ new Date().getFullYear() }}
-      </p>
+      <div class="flex flex-col gap-2">
+        <p class="text-text-800 text-sm">
+          Copyright &copy; {{ new Date().getFullYear() }}
+        </p>
+        <p class="text-text-800 text-sm">
+          {{ $t('footer.versions.frontend') }}: {{ version }}
+        </p>
+        <p class="text-text-800 text-sm">
+          {{ $t('footer.versions.backend') }}: {{ meta?.version }}
+        </p>
+      </div>
     </template>
 
-    <UNavigationMenu :items="items" variant="link" />
+    <UNavigationMenu :items="items" variant="link" :orientation="orientation" />
 
     <template #right>
       <UButton
@@ -23,11 +31,24 @@
 
 <script setup lang="ts">
 import type { NavigationMenuItem } from '@nuxt/ui';
+import { version } from '../../package.json';
 
+const { isMobile } = useDevice();
+const orientation = computed(() => (isMobile ? 'vertical' : 'horizontal'));
+const { getMeta } = useBackend();
+const { data: meta } = getMeta();
 const items = computed<NavigationMenuItem[]>(() => [
   {
     label: $t('footer.links.source'),
     to: 'https://labs.phundrak.com/phundrak/phundrak.com',
   },
+  {
+    label: $t('footer.links.nuxt'),
+    to: 'https://nuxt.com/',
+  },
+  {
+    label: $t('footer.links.rust'),
+    to: 'https://rust-lang.org/',
+  },
 ]);
 </script>

frontend/app/components/VocalSynth/Projects.vue

@@ -0,0 +1,44 @@
+<template>
+  <UPageCard class="bg-background-100 my-10">
+    <p class="text-xl">
+      {{ $t('pages.vocal-synthesis.projects') }}
+    </p>
+    <div class="flex flex-col max-w gap-10">
+      <div
+        v-for="project in projects?.projects"
+        :key="project.title"
+        class="flex flex-row max-w gap-5"
+      >
+        <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"
+          >
+            <UIcon :name="project.icon" class="size-11" />
+          </div>
+        </div>
+        <div class="flex flex-col">
+          <div class="flex flex-row gap-2 items-baseline">
+            <ULink :to="project.link" class="text-2xl">{{
+              project.title
+            }}</ULink>
+            <UIcon
+              v-if="external(project.link)"
+              name="mdi:link"
+              class="size-5"
+            />
+          </div>
+          <div>
+            {{ project.description }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </UPageCard>
+</template>
+
+<script setup lang="ts">
+const { getJsonData, getCachedData } = useDataJson('vocalSynth');
+await getJsonData('content_data_');
+const projects = getCachedData();
+const external = (url: string) => url.startsWith('http');
+</script>

frontend/app/components/VocalSynth/Tools.vue

@@ -0,0 +1,21 @@
+<template>
+  <UPageCard class="bg-background-100 my-10">
+    <p class="text-xl">
+      {{ $t('pages.vocal-synthesis.tools') }}
+    </p>
+    <div class="flex flex-row gap-5 flex-wrap">
+      <UBadge
+        v-for="tool in data?.tools"
+        :key="tool"
+        size="md"
+        variant="solid"
+        >{{ tool }}</UBadge
+      >
+    </div>
+  </UPageCard>
+</template>
+
+<script setup lang="ts">
+const { getCachedData } = useDataJson('vocalSynth');
+const data = getCachedData();
+</script>