feat: fill pages

frontend/app/pages/[...slug].vue

@@ -0,0 +1,35 @@
+<template>
+  <NuxtLayout v-if="page" :name="page.meta?.layout ?? 'default'">
+    <ContentRenderer :value="page" />
+  </NuxtLayout>
+  <div v-else>
+    <h1>Page not found</h1>
+    <p>This page doesn&apos;t exist in {{ locale }} language.</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { withLeadingSlash } from 'ufo';
+import type { Collections } from '@nuxt/content';
+
+const route = useRoute();
+const { locale } = useI18n();
+const slug = computed(() => withLeadingSlash(String(route.params.slug)));
+
+const { data: page } = await useAsyncData(
+  'page-' + slug.value,
+  async () => {
+    const collection = ('content_' + locale.value) as keyof Collections;
+    const content = await queryCollection(collection).path(slug.value).first();
+    if (!content && locale.value !== 'en') {
+      return await queryCollection('content_en').path(slug.value).first();
+    }
+    return content;
+  },
+  {
+    watch: [locale], // Refresh when locale changes
+  },
+);
+
+useMeta({ title: page.value?.title, description: page.value?.description });
+</script>

frontend/app/pages/contact.vue

@@ -1,5 +0,0 @@
-<template>
-  <div>
-    {{ $t('pages.contact.name') }}
-  </div>
-</template>

frontend/app/pages/index.vue

@@ -1,3 +0,0 @@
-<template>
-  <h1>{{ $t('website.name') }}</h1>
-</template>

frontend/app/pages/languages.vue

@@ -1,5 +0,0 @@
-<template>
-  <div>
-    {{ $t('pages.languages.name') }}
-  </div>
-</template>

frontend/app/pages/resume.vue

@@ -1,5 +1,59 @@
 <template>
-  <div>
-    {{ $t('pages.resume.name') }}
-  </div>
+  <NuxtLayout name="default">
+    <h1 class="text-4xl text-highlighted font-bold mb-8">
+      {{ $t('pages.resume.name') }}
+    </h1>
+    <UPageCard v-if="resumeContent" class="bg-background-100 my-10">
+      <p>
+        {{ $t('pages.resume.experience') }}
+      </p>
+      <UTimeline
+        v-model="valueExp"
+        reverse
+        :items="resumeContent?.experience"
+        class="w-full"
+      >
+        <template #description="{ item }">
+          <div class="flex flex-col gap-2">
+            <p>
+              {{ item.description }}
+            </p>
+            <div class="flex flex-row gap-2 flex-wrap">
+              <UBadge
+                v-for="tool in item.tools"
+                :key="tool"
+                size="md"
+                variant="solid"
+              >
+                {{ tool }}
+              </UBadge>
+            </div>
+          </div>
+        </template>
+      </UTimeline>
+    </UPageCard>
+    <UPageCard v-if="resumeContent" class="bg-background-100 my-10">
+      <p>
+        {{ $t('pages.resume.education') }}
+      </p>
+      <UTimeline
+        v-model="valueEd"
+        reverse
+        :items="resumeContent?.education"
+        class="w-full"
+      />
+    </UPageCard>
+  </NuxtLayout>
 </template>
+
+<script setup lang="ts">
+useMeta({
+  title: $t('pages.resume.name'),
+  description: $t('pages.resume.description'),
+});
+const { getJsonData } = useDataJson('resume');
+const resumeContent = await getJsonData();
+const arrLength = (array?: T[]) => (array ? array.length - 1 : 0);
+const valueExp = computed(() => arrLength(resumeContent.value?.experience));
+const valueEd = computed(() => arrLength(resumeContent.value?.education));
+</script>

frontend/app/pages/vocal-synthesis.vue

@@ -1,5 +0,0 @@
-<template>
-  <div>
-    {{ $t('pages.vocal-synthesis.name') }}
-  </div>
-</template>