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

@@ -0,0 +1,144 @@
+<script lang="ts" module>
+  export interface Award {
+    name: string
+    description?: string
+  }
+
+  export interface EducationEntry {
+    school: string
+    degree: string
+    minor?: string
+    gpa?: string
+    location?: string
+    startYear: number
+    startMonth?: string
+    endYear?: number
+    endMonth?: string
+    expected?: boolean
+    courses?: string[]
+    awards?: Award[]
+  }
+</script>
+
+<script lang="ts">
+  import Badge from './Badge.svelte'
+  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 Props {
+    entry: EducationEntry
+  }
+
+  let { entry }: Props = $props()
+
+  const dateDisplay = $derived(() => {
+    const start = entry.startMonth ? `${entry.startMonth} ${entry.startYear}` : `${entry.startYear}`
+
+    if (entry.endYear) {
+      const end = entry.endMonth ? `${entry.endMonth} ${entry.endYear}` : `${entry.endYear}`
+      return `${start} - ${end}`
+    }
+    if (entry.expected) {
+      return `${start} - Present (Expected)`
+    }
+    return `${start} - Present`
+  })
+</script>
+
+<div class="relative pl-8 pb-8 last:pb-0">
+  <!-- Timeline line -->
+  <div class="absolute left-[7px] top-3 bottom-0 w-0.5 bg-border last:hidden"></div>
+
+  <!-- Timeline marker -->
+  <div class="absolute left-0 top-1.5 size-4 rounded-full border-2 border-primary bg-background"></div>
+
+  <!-- Content card -->
+  <div class="timeline-card rounded-xl border bg-card p-5 transition-colors duration-300 hover:bg-secondary/30">
+    <!-- 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">{entry.school}</h3>
+        <div class="flex items-center gap-2 flex-wrap">
+          <p class="text-sm text-muted-foreground">{entry.degree}</p>
+          {#if entry.gpa}
+            <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 entry.minor}
+          <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">
+        <div class="flex items-center gap-1.5">
+          <IconCalendar class="size-3" />
+          <span class="font-medium">{dateDisplay()}</span>
+        </div>
+        {#if entry.location}
+        <div class="flex items-center gap-1.5">
+          <IconMapPin class="size-3" />
+          <span class="text-sm">{entry.location}</span>
+        </div>
+        {/if}
+      </div>
+    </div>
+
+    <!-- Courses and Awards grid -->
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+      <!-- Courses -->
+      {#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 entry.courses as course}
+              <Badge variant="secondary" class="flex items-center gap-x-1">
+                <IconHash class="size-3" />
+                {course}
+              </Badge>
+            {/each}
+          </div>
+        </div>
+      {/if}
+
+      <!-- Awards -->
+      {#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 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">
+                  <span class="text-foreground font-medium">{award.name}</span>
+                  {#if award.description}
+                    <span class="text-xs text-muted-foreground">{award.description}</span>
+                  {/if}
+                </div>
+              </li>
+            {/each}
+          </ul>
+        </div>
+      {/if}
+    </div>
+  </div>
+</div>
+
+<style>
+  .timeline-card {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .timeline-card::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(315deg, color-mix(in oklch, var(--color-primary) 6%, transparent) 0%, transparent 50%);
+    pointer-events: none;
+  }
+
+  :global(.dark) .timeline-card::before {
+    background: linear-gradient(135deg, color-mix(in oklch, var(--color-primary) 6%, transparent) 0%, transparent 50%);
+  }
+</style>