chore: separate frontend from backend

app/components/AppFooter.vue

@@ -0,0 +1,48 @@
+<template>
+  <UFooter class="bg-background-200">
+    <template #left>
+      <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" :orientation="orientation" />
+
+    <template #right>
+      <UButton
+        icon="i-simple-icons-github"
+        color="neutral"
+        variant="ghost"
+        to="https://github.com/Phundrak"
+        target="_blank"
+        aria-label="GitHub"
+      />
+    </template>
+  </UFooter>
+</template>
+
+<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 meta = await 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>

app/components/AppNavbar.vue

@@ -0,0 +1,29 @@
+<template>
+  <UHeader toggle-side="right" mode="drawer">
+    <template #title> Phundrak </template>
+    <UNavigationMenu :items="items" />
+    <template #right>
+      <NavbarLanguageSwitcher />
+      <NavbarThemeSwitcher />
+    </template>
+    <template #body>
+      <UNavigationMenu :items="items" orientation="vertical" class="-mx-2.5" />
+    </template>
+  </UHeader>
+</template>
+
+<script setup lang="ts">
+const route = useRoute();
+const items = computed<NavigationMenuItem[]>(() => [
+  {
+    label: $t('pages.home.name'),
+    to: '/',
+    active: route.path == '/',
+  },
+  ...['resume', 'vocal-synthesis', 'languages', 'contact'].map((page) => ({
+    label: $t(`pages.${page}.name`),
+    to: `/${page}`,
+    active: route.path.startsWith(`/${page}`),
+  })),
+]);
+</script>

app/components/Ui/BadgeList.vue

@@ -0,0 +1,13 @@
+<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>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { tools } = defineProps<{
+  tools: string[];
+}>();
+</script>

app/components/Ui/BadgeListCard.vue

@@ -0,0 +1,14 @@
+<template>
+  <UPageCard class="bg-background-100 my-10">
+    <p class="text-xl">
+      <slot />
+    </p>
+    <UiBadgeList :tools="tools" />
+  </UPageCard>
+</template>
+
+<script setup lang="ts">
+const { tools } = defineProps<{
+  tools: string[];
+}>();
+</script>

app/components/VocalSynth/Projects.vue

@@ -0,0 +1,35 @@
+<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 data?.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">
+// Inject data provided by the page to avoid hydration issues with MDC components
+const data = inject('pageData');
+const external = (url: string) => url.startsWith('http');
+</script>

app/components/VocalSynth/Tools.vue

@@ -0,0 +1,8 @@
+<template>
+  <UiBadgeListCard v-if="data" :tools="data.tools">{{ $t('pages.vocal-synthesis.tools') }}</UiBadgeListCard>
+</template>
+
+<script setup lang="ts">
+// Inject data provided by the page to avoid hydration issues with MDC components
+const data = inject('pageData');
+</script>

app/components/navbar/LanguageSwitcher.vue

@@ -0,0 +1,26 @@
+<template>
+  <UDropdownMenu :key="locale" :items="availableLocales" :content="{ align: 'start' }">
+    <UButton color="neutral" variant="outline" icon="material-symbols:globe" :aria-label="$t('menu.language')" />
+  </UDropdownMenu>
+</template>
+
+<script setup lang="ts">
+import type { DropdownMenuItem } from '@nuxt/ui';
+const { locale, locales, setLocale } = useI18n();
+
+const availableLocales = computed(() => {
+  return locales.value.map(
+    (optionLocale) =>
+      ({
+        label: optionLocale.name,
+        code: optionLocale.code,
+        type: 'checkbox' as const,
+        checked: optionLocale.code === locale.value,
+        onUpdateChecked: () => switchLocale(optionLocale.code),
+      }) as DropdownMenuItem,
+  );
+});
+const switchLocale = (newLocale: string) => {
+  setLocale(newLocale);
+};
+</script>

app/components/navbar/ThemeSwitcher.vue

@@ -0,0 +1,27 @@
+<template>
+  <UDropdownMenu :key="colorMode.preference" :items="themes" :content="{ align: 'start' }">
+    <UButton color="neutral" variant="outline" :icon="icons[currentColor]" :aria-label="$t('menu.theme')" />
+  </UDropdownMenu>
+</template>
+
+<script setup lang="ts">
+type Theme = 'light' | 'dark' | 'system';
+const icons: Dictionary<Theme, string> = {
+  light: 'material-symbols:light-mode',
+  dark: 'material-symbols:dark-mode',
+  system: 'material-symbols:computer-outline',
+};
+const colorMode = useColorMode();
+const currentColor = computed<Theme>(() => colorMode.preference ?? 'system');
+const themes = computed<DropdownValue[]>(() =>
+  ['light', 'dark', 'system'].map((theme) => ({
+    code: theme,
+    label: $t(`theme.${theme}`),
+    icon: icons[theme],
+    type: 'checkbox' as const,
+    checked: currentColor.value === theme,
+    onUpdateChecked: () => switchColor(theme),
+  })),
+);
+const switchColor = (theme: Theme) => (colorMode.preference = theme);
+</script>