chore: separate frontend from backend

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

@@ -0,0 +1,22 @@
+<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">
+const { getPageContent } = useDataJson('page');
+const page = await getPageContent();
+
+// Pre-fetch JSON data for MDC components to avoid hydration issues
+const { getJsonData } = useDataJson('page-data');
+const pageData = await getJsonData();
+// Provide data to child MDC components
+provide('pageData', pageData);
+
+useMeta({ title: page.value?.title, description: page.value?.description });
+</script>

app/pages/resume.vue

@@ -0,0 +1,47 @@
+<template>
+  <NuxtLayout name="default">
+    <h1 class="text-4xl text-highlighted font-bold mb-8">
+      {{ $t('pages.resume.name') }}
+    </h1>
+    <UPageCard 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>
+            <UiBadgeList :tools="item.tools" />
+          </div>
+        </template>
+      </UTimeline>
+    </UPageCard>
+    <UPageCard class="bg-background-100 my-10">
+      <p>
+        {{ $t('pages.resume.education') }}
+      </p>
+      <UTimeline v-model="valueEd" reverse :items="resumeContent?.education" class="w-full" />
+    </UPageCard>
+    <UiBadgeListCard :tools="resumeContent?.otherTools">{{ $t('pages.resume.tools') }}</UiBadgeListCard>
+    <UiBadgeListCard :tools="resumeContent?.devops">{{ $t('pages.resume.devops') }}</UiBadgeListCard>
+    <UiBadgeListCard :tools="resumeContent?.os">{{ $t('pages.resume.os') }}</UiBadgeListCard>
+    <UiBadgeListCard :tools="resumeContent?.programmingLanguages">{{
+      $t('pages.resume.programmingLanguages')
+    }}</UiBadgeListCard>
+    <UiBadgeListCard :tools="resumeContent?.frameworks">{{ $t('pages.resume.frameworks') }}</UiBadgeListCard>
+  </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>