feat: add projects page and rework home page

app/pages/projects.vue

@@ -0,0 +1,18 @@
+<template>
+  <NuxtLayout name="default">
+    <h1 class="text-4xl text-highlighted font-bold mb-8">
+      {{ $t('pages.projects.name') }}
+    </h1>
+    <div class="flex flex-wrap gap-4 justify-center">
+      <UiSingleProject v-for="project in projects" :key="project.name" :project="project" />
+    </div>
+  </NuxtLayout>
+</template>
+
+<script lang="ts" setup>
+import type { Project, ProjectsWrapper } from '~/types/project';
+
+const { getJsonData } = useDataJson('projects');
+const projects$ = await getJsonData<ProjectsWrapper>();
+const projects: ComputedRef<Project[]> = computed(() => (projects$?.value ? projects$.value.projects : []));
+</script>

app/pages/resume.vue

@@ -7,7 +7,7 @@
       <p>
         {{ $t('pages.resume.experience') }}
       </p>
-      <UTimeline v-model="valueExp" reverse :items="resumeContent?.experience" class="w-full">
+      <UTimeline v-model="valueExp" reverse :items="experiences" class="w-full">
         <template #description="{ item }">
           <div class="flex flex-col gap-2">
             <p>
@@ -22,7 +22,7 @@
       <p>
         {{ $t('pages.resume.education') }}
       </p>
-      <UTimeline v-model="valueEd" reverse :items="resumeContent?.education" class="w-full" />
+      <UTimeline v-model="valueEd" reverse :items="education" class="w-full" />
     </UPageCard>
     <UiBadgeListCard :tools="resumeContent?.otherTools">{{ $t('pages.resume.tools') }}</UiBadgeListCard>
     <UiBadgeListCard :tools="resumeContent?.devops">{{ $t('pages.resume.devops') }}</UiBadgeListCard>
@@ -35,7 +35,7 @@
 </template>
 
 <script setup lang="ts">
-import { ResumeContent } from '~/types/resume';
+import { EducationTimelineItem, ResumeContent, ResumeExperienceTimelineItem } from '~/types/resume';
 
 useMeta({
   title: $t('pages.resume.name'),
@@ -44,6 +44,8 @@ useMeta({
 const { getJsonData } = useDataJson('resume');
 const resumeContent$ = await getJsonData<ResumeContent>();
 const resumeContent = computed(() => (resumeContent$.value ? resumeContent$.value : new ResumeContent()));
+const experiences = computed(() => resumeContent.value.experience.map((e) => new ResumeExperienceTimelineItem(e)));
+const education = computed(() => resumeContent.value.education.map((e) => new EducationTimelineItem(e)));
 const arrLength = <T,>(array?: T[]) => (array ? array.length - 1 : 0);
 const valueExp = computed(() => arrLength(resumeContent.value?.experience));
 const valueEd = computed(() => arrLength(resumeContent.value?.education));