patrick/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: break Timeline into composable components for reuse

Browse Source 
Split Timeline component into a generic wrapper and EducationItem
component to support adding Experience and other timeline-based sections
later.
This commit is contained in:
Patrick Jaroszewski
2026-03-26 16:46:30 -04:00
parent 2ca13c5b2f
commit 6ad73c98e2
4 changed files with 65 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/components/svelte/TimelineItem.svelte → src/components/svelte/EducationItem.svelte
View File

@@ -1,16 +1,10 @@
<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 {
<script lang="ts" module>
export 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 {
school,
degree,
minor,
gpa,
location,
startYear,
startMonth,
endYear,
endMonth,
expected = false,
courses = [],
awards = [],
}: Props = $props()
<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 = startMonth ? `${startMonth} ${startYear}` : `${startYear}`
const start = entry.startMonth ? `${entry.startMonth} ${entry.startYear}` : `${entry.startYear}`
if (endYear) {
const end = endMonth ? `${endMonth} ${endYear}` : `${endYear}`
if (entry.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>
{#if gpa}
<span class="text-xs px-2 py-0.5 rounded-full bg-primary/10 text-primary font-medium">{gpa} GPA</span>
<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 minor}
<p class="text-sm text-muted-foreground">Minor in {minor}</p>
{#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">
@@ -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">

43
src/components/svelte/Timeline.svelte
View File

@@ -1,48 +1,13 @@
<script lang="ts">
import TimelineItem from './TimelineItem.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[]
}
import type { Snippet } from 'svelte'
interface Props {
entries: TimelineEntry[]
children: Snippet
}
let { entries }: Props = $props()
let { children }: Props = $props()
</script>
<div class="relative">
{#each entries as entry}
<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}
{@render children()}
</div>

22
src/data/education.ts Normal file
View File

@@ -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)' },
],
},
]

42
src/pages/index.astro
View File

@@ -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>