portfolio/src/components/svelte/TimelineItem.svelte

<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 Award {
    name: string
    description?: string
  }

  interface Props {
    school: string
    degree: string
    minor?: string
    gpa?: string
    location?: string
    startYear: number
    startMonth?: string
    endYear?: number
    endMonth?: string
    expected?: boolean
    courses?: string[]
    awards?: Award[]
  }

  let {
    school,
    degree,
    minor,
    gpa,
    location,
    startYear,
    startMonth,
    endYear,
    endMonth,
    expected = false,
    courses = [],
    awards = [],
  }: Props = $props()

  const dateDisplay = $derived(() => {
    const start = startMonth ? `${startMonth} ${startYear}` : `${startYear}`

    if (endYear) {
      const end = endMonth ? `${endMonth} ${endYear}` : `${endYear}`
      return `${start} - ${end}`
    }
    if (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">{school}</h3>
        <div class="flex items-center gap-2 flex-wrap">
          <p class="text-sm text-muted-foreground">{degree}</p>
          {#if gpa}
            <span class="text-xs px-2 py-0.5 rounded-full bg-primary/10 text-primary font-medium">{gpa} GPA</span>
          {/if}
        </div>
        {#if minor}
          <p class="text-sm text-muted-foreground">Minor in {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 location}
        <div class="flex items-center gap-1.5">
          <IconMapPin class="size-3" />
          <span class="text-sm">{location}</span>
        </div>
        {/if}
      </div>
    </div>

    <!-- Courses and Awards grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
      <!-- Courses -->
      {#if 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}
              <Badge variant="secondary" class="flex items-center gap-x-1">
                <IconHash class="size-3" />
                {course}
              </Badge>
            {/each}
          </div>
        </div>
      {/if}

      <!-- Awards -->
      {#if 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}
              <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>