feat: add projects page and rework home page

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));