refactor: break Timeline into composable components for reuse

Split Timeline component into a generic wrapper and EducationItem
component to support adding Experience and other timeline-based sections
later.

src/components/svelte/EducationItem.svelte

@@ -1,16 +1,10 @@
-<script lang="ts">
+<script lang="ts" module>
-  import Badge from './Badge.svelte'
+  export interface Award {
-  import IconHash from '~icons/lucide/hash'
-  import IconCalendar from '~icons/lucide/calendar'
-  import IconMapPin from '~icons/lucide/map-pin'
-  import IconAward from '~icons/lucide/award'
-
-  interface Award {
     name: string
     description?: string
   }
 
-  interface Props {
+  export interface EducationEntry {
     school: string
     degree: string
     minor?: string
@@ -24,30 +18,29 @@
     courses?: string[]
     awards?: Award[]
   }
+</script>
 
-  let {
+<script lang="ts">
-    school,
+  import Badge from './Badge.svelte'
-    degree,
+  import IconHash from '~icons/lucide/hash'
-    minor,
+  import IconCalendar from '~icons/lucide/calendar'
-    gpa,
+  import IconMapPin from '~icons/lucide/map-pin'
-    location,
+  import IconAward from '~icons/lucide/award'
-    startYear,
+
-    startMonth,
+  interface Props {
-    endYear,
+    entry: EducationEntry
-    endMonth,
+  }
-    expected = false,
+
-    courses = [],
+  let { entry }: Props = $props()
-    awards = [],
-  }: Props = $props()
 
   const dateDisplay = $derived(() => {
-    const start = startMonth ? `${startMonth} ${startYear}` : `${startYear}`
+    const start = entry.startMonth ? `${entry.startMonth} ${entry.startYear}` : `${entry.startYear}`
 
-    if (endYear) {
+    if (entry.endYear) {
-      const end = endMonth ? `${endMonth} ${endYear}` : `${endYear}`
+      const end = entry.endMonth ? `${entry.endMonth} ${entry.endYear}` : `${entry.endYear}`
       return `${start} - ${end}`
     }
-    if (expected) {
+    if (entry.expected) {
       return `${start} - Present (Expected)`
     }
     return `${start} - Present`
@@ -66,15 +59,15 @@
     <!-- Header row: school/degree left, date/location right -->
     <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-2 mb-4">
       <div>
-        <h3 class="text-lg font-medium text-foreground">{school}</h3>
+        <h3 class="text-lg font-medium text-foreground">{entry.school}</h3>
         <div class="flex items-center gap-2 flex-wrap">
-          <p class="text-sm text-muted-foreground">{degree}</p>
+          <p class="text-sm text-muted-foreground">{entry.degree}</p>
-          {#if gpa}
+          {#if entry.gpa}
-            <span class="text-xs px-2 py-0.5 rounded-full bg-primary/10 text-primary font-medium">{gpa} GPA</span>
+            <span class="text-xs px-2 py-0.5 rounded-full bg-primary/10 text-primary font-medium">{entry.gpa} GPA</span>
           {/if}
         </div>
-        {#if minor}
+        {#if entry.minor}
-          <p class="text-sm text-muted-foreground">Minor in {minor}</p>
+          <p class="text-sm text-muted-foreground">Minor in {entry.minor}</p>
         {/if}
       </div>
       <div class="flex flex-col sm:items-end gap-0.5 text-sm text-muted-foreground shrink-0">
@@ -82,10 +75,10 @@
           <IconCalendar class="size-3" />
           <span class="font-medium">{dateDisplay()}</span>
         </div>
-        {#if location}
+        {#if entry.location}
         <div class="flex items-center gap-1.5">
           <IconMapPin class="size-3" />
-          <span class="text-sm">{location}</span>
+          <span class="text-sm">{entry.location}</span>
         </div>
         {/if}
       </div>
@@ -94,11 +87,11 @@
     <!-- Courses and Awards grid -->
     <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
       <!-- Courses -->
-      {#if courses.length > 0}
+      {#if entry.courses && entry.courses.length > 0}
         <div class="flex flex-col gap-2">
           <p class="text-xs font-medium text-muted-foreground uppercase tracking-wide">Core Courses</p>
           <div class="flex flex-wrap gap-2">
-            {#each courses as course}
+            {#each entry.courses as course}
               <Badge variant="secondary" class="flex items-center gap-x-1">
                 <IconHash class="size-3" />
                 {course}
@@ -109,11 +102,11 @@
       {/if}
 
       <!-- Awards -->
-      {#if awards.length > 0}
+      {#if entry.awards && entry.awards.length > 0}
         <div class="flex flex-col gap-2">
           <p class="text-xs font-medium text-muted-foreground uppercase tracking-wide">Awards & Scholarships</p>
           <ul class="text-sm space-y-2">
-            {#each awards as award}
+            {#each entry.awards as award}
               <li class="flex items-start gap-2">
                 <IconAward class="size-3 text-primary shrink-0 mt-1" />
                 <div class="flex flex-col">

src/components/svelte/Timeline.svelte

@@ -1,48 +1,13 @@
 <script lang="ts">
-  import TimelineItem from './TimelineItem.svelte'
+  import type { Snippet } from 'svelte'
-
-  export interface Award {
-    name: string
-    description?: string
-  }
-
-  export interface TimelineEntry {
-    school: string
-    degree: string
-    minor?: string
-    gpa?: string
-    location?: string
-    startYear: number
-    startMonth?: string
-    endYear?: number
-    endMonth?: string
-    expected?: boolean
-    courses?: string[]
-    awards?: Award[]
-  }
 
   interface Props {
-    entries: TimelineEntry[]
+    children: Snippet
   }
 
-  let { entries }: Props = $props()
+  let { children }: Props = $props()
 </script>
 
 <div class="relative">
-  {#each entries as entry}
+  {@render children()}
-    <TimelineItem
-      school={entry.school}
-      degree={entry.degree}
-      minor={entry.minor}
-      gpa={entry.gpa}
-      location={entry.location}
-      startYear={entry.startYear}
-      startMonth={entry.startMonth}
-      endYear={entry.endYear}
-      endMonth={entry.endMonth}
-      expected={entry.expected}
-      courses={entry.courses}
-      awards={entry.awards}
-    />
-  {/each}
 </div>

src/data/education.ts

@@ -0,0 +1,22 @@
+import type { EducationEntry } from '@/components/svelte/EducationItem.svelte'
+
+export const education: EducationEntry[] = [
+  {
+    school: 'University of Guelph',
+    degree: 'Bachelor of Computing',
+    minor: 'Mathematics',
+    gpa: '4.0',
+    location: 'Guelph, Canada',
+    startYear: 2019,
+    startMonth: 'Sept',
+    endYear: 2024,
+    endMonth: 'May',
+    expected: false,
+    courses: ['Data Structures', 'Algorithms', 'Software Engineering', 'Operating Systems', 'Databases', 'Computer Networks'],
+    awards: [
+      { name: "Dean's List", description: 'In each full-time semester' },
+      { name: 'Weiner Mathematical Scholarship', description: 'Highest mathematics average (1st year)' },
+      { name: 'R.A Fisher Statistics Scholarship', description: 'Highest statistics average (2nd year)' },
+    ],
+  },
+]

src/pages/index.astro

@@ -15,44 +15,12 @@ import IconWrench from '~icons/lucide/wrench'
 import IconFolderCode from '~icons/lucide/folder-code'
 import IconPenLine from '~icons/lucide/pen-line'
 import Timeline from '../components/svelte/Timeline.svelte'
-import type { TimelineEntry } from '../components/svelte/Timeline.svelte'
+import EducationItem from '../components/svelte/EducationItem.svelte'
+import { education } from '@/data/education'
 import ContactForm from '../components/svelte/ContactForm.svelte'
 import IconMail from '~icons/lucide/mail'
 
 const blog = await getRecentPosts(3)
-
-const education: TimelineEntry[] = [
-  // {
-  //   school: 'Georgia Tech',
-  //   degree: 'Master\'s of Computer Science',
-  //   location: 'Atlanta, Georgia',
-  //   startYear: 2026,
-  //   startMonth: 'Sept',
-  //   expected: false,
-  //   courses: [],
-  //   awards: [
-
-  //   ],
-  // },
-  {
-    school: 'University of Guelph',
-    degree: 'Bachelor of Computing',
-    minor: 'Mathematics',
-    gpa: '4.0',
-    location: 'Guelph, Canada',
-    startYear: 2019,
-    startMonth: 'Sept',
-    endYear: 2024,
-    endMonth: 'May',
-    expected: false,
-    courses: ['Data Structures', 'Algorithms', 'Software Engineering', 'Operating Systems', 'Databases', 'Computer Networks'],
-    awards: [
-      { name: 'Dean\'s List', description: 'In each full-time semester' },
-      { name: 'Weiner Mathematical Scholarship', description: 'Highest mathematics average (1st year)' },
-      { name: 'R.A Fisher Statistics Scholarship', description: 'Highest statistics average (2nd year)' },
-    ],
-  },
-]
 const featuredProjects = await getFeaturedProjects()
 const currentUrl = Astro.url;
 const turnstileSitekey = import.meta.env.PUBLIC_TURNSTILE_SITEKEY
@@ -203,7 +171,11 @@ const turnstileSitekey = import.meta.env.PUBLIC_TURNSTILE_SITEKEY
         </p>
       </div>
       <div class="mt-4">
-        <Timeline entries={education} client:load />
+        <Timeline client:load>
+          {education.map(entry => (
+            <EducationItem entry={entry} client:load />
+          ))}
+        </Timeline>
       </div>
     </section>