feat: improve education timeline component

- add spacing between timeline items
- connect timeline line between nodes by extending the line
- add isLast prop to hide line extension on final item
- auto-detect future start dates and display "Starting X" instead of "X - present"
- reorder awards section before core courses section on mobile

src/components/svelte/EducationItem.svelte

@@ -29,9 +29,10 @@
 
   interface Props {
     entry: EducationEntry
+    isLast?: boolean
   }
 
-  let { entry }: Props = $props()
+  let { entry, isLast = false }: Props = $props()
 
   const dateDisplay = $derived(() => {
     const start = entry.startMonth ? `${entry.startMonth} ${entry.startYear}` : `${entry.startYear}`
@@ -40,6 +41,18 @@
       const end = entry.endMonth ? `${entry.endMonth} ${entry.endYear}` : `${entry.endYear}`
       return `${start} - ${end}`
     }
+
+    // Check if start date is in the future
+    const now = new Date()
+    const currentYear = now.getFullYear()
+    const isFutureYear = entry.startYear > currentYear
+    const isFutureMonth = entry.startYear === currentYear && entry.startMonth &&
+      new Date(`${entry.startMonth} 1, ${entry.startYear}`).getTime() > now.getTime()
+
+    if (isFutureYear || isFutureMonth) {
+      return `Starting ${start}`
+    }
+
     if (entry.expected) {
       return `${start} - Present (Expected)`
     }
@@ -47,9 +60,9 @@
   })
 </script>
 
-<div class="relative pl-8 pb-8 last:pb-0">
+<div class="relative pl-8">
   <!-- Timeline line -->
-  <div class="absolute left-[7px] top-3 bottom-0 w-0.5 bg-border last:hidden"></div>
+  <div class="absolute left-[7px] top-3 w-0.5 bg-border" class:-bottom-8={!isLast} class:bottom-0={isLast}></div>
 
   <!-- Timeline marker -->
   <div class="absolute left-0 top-1.5 size-4 rounded-full border-2 border-primary bg-background"></div>
@@ -85,10 +98,10 @@
     </div>
 
     <!-- Courses and Awards grid -->
-    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 sm:gap-4">
-      <!-- Courses -->
+      <!-- Courses (order-2 on mobile so awards appear first) -->
       {#if entry.courses && entry.courses.length > 0}
-        <div class="flex flex-col gap-2">
+        <div class="flex flex-col gap-2 order-2 sm:order-1">
           <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}
@@ -101,9 +114,9 @@
         </div>
       {/if}
 
-      <!-- Awards -->
+      <!-- Awards (order-1 on mobile so it appears before courses) -->
       {#if entry.awards && entry.awards.length > 0}
-        <div class="flex flex-col gap-2">
+        <div class="flex flex-col gap-2 order-1 sm:order-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}

src/components/svelte/Timeline.svelte

@@ -8,6 +8,6 @@
   let { children }: Props = $props()
 </script>
 
-<div class="relative">
+<div class="relative flex flex-col gap-6">
   {@render children()}
 </div>

src/pages/index.astro

@@ -172,8 +172,8 @@ const turnstileSitekey = import.meta.env.PUBLIC_TURNSTILE_SITEKEY
       </div>
       <div class="mt-4">
         <Timeline client:load>
-          {education.map(entry => (
+          {education.map((entry, i) => (
-            <EducationItem entry={entry} client:load />
+            <EducationItem entry={entry} isLast={i === education.length - 1} client:load />
           ))}
         </Timeline>
       </div>