add work-timeline section (#93)

src/components/organisms/work-timeline-item.astro

@@ -14,7 +14,7 @@ const { job, i18n, ...props } = Astro.props;
 const WorkTimelineItem = 'div';
 ---
 
-<WorkTimelineItem class:list={['flex', 'flex-col', 'gap-2', 'md:gap-0', props.class]}>
+<WorkTimelineItem class:list={['flex', 'flex-col', 'gap-2', 'md:gap-0', 'mb-4', props.class]}>
   <Typography variant="item-title">{job.role} <span class="font-medium"> &#8212;&nbsp;{job.company}</span></Typography>
   <div class:list={['fixed', 'top-3', 'right-3', 'md:flex', 'sm:flex-wrap', 'gap-3', '[&>a]:my-2']}>
     {job.socials?.map(({ icon, url }) => <IconButton icon={icon} href={url} target="_blank" size="small" />)}

src/components/sections/experience-section.astro

@@ -1,13 +1,21 @@
 ---
+import Divider from '@/atoms/divider.astro';
 import SectionCard from '@/atoms/section-card.astro';
 import Typography from '@/atoms/typography.astro';
+import WorkTimelineItem from '@/organisms/work-timeline-item.astro';
 import type { Section } from '@/types/data';
-import type { ExperienceSection } from '@/types/experience-section';
+import type { ExperienceSection, Job } from '@/types/experience-section';
+import type { I18n } from '@/types/i18n';
 
-export interface Props extends ExperienceSection {}
+export interface Props extends ExperienceSection {
+  jobs: Job[];
+  i18n: I18n;
+}
 
 const {
   config: { title },
+  i18n,
+  jobs,
 } = Astro.props;
 
 const section: Section = 'experience';
@@ -15,4 +23,12 @@ const section: Section = 'experience';
 
 <SectionCard section={section}
   ><Typography variant="section-title" id={`${section}-heading`}>{title}</Typography>
+  {
+    jobs.map((value, id) => (
+      <>
+        <WorkTimelineItem job={value} i18n={i18n} />
+        {id !== jobs.length - 1 && <Divider />}
+      </>
+    ))
+  }
 </SectionCard>

src/pages/index.astro

@@ -48,7 +48,11 @@ const { seo, i18n, ...dataWithoutSeoAndI18n } = data;
       <main class="w-full relative space-y-4 sm:space-y-6 lg:space-y-8">
         <MainSection {...data.main} />
         {data.skills && <SkillsSection {...data.skills} />}
-        {data.experience && <ExperienceSection {...data.experience} />}
+        {
+          data.experience && (
+            <ExperienceSection i18n={data.i18n} jobs={data.experience.jobs} config={data.experience.config} />
+          )
+        }
         {data.portfolio && <PortfolioSection {...data.portfolio} />}
         {data.testimonials && <TestimonialsSection {...data.testimonials} />}
         {data.favorites && <FavoritesSection {...data.favorites} />}