feat: fill pages

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>