mirror of
https://github.com/Patiun/com.gregkilmer.www.git
synced 2026-11-08 04:08:24 +00:00
Greg Kilmer
77 lines
2.3 KiB
Plaintext
77 lines
2.3 KiB
Plaintext
---
|
||
/**
|
||
* EducationHistory.astro
|
||
* ---------------------------------------------------------------------------
|
||
* Card grid for the Education section of the Professional page. Each entry is a
|
||
* degree/diploma with institution, period, and optional detail. Data is seeded
|
||
* with placeholder rows (Greg to fill); swap the array below with real entries.
|
||
*
|
||
* Mirrors the Timeline/ProjectCard card aesthetic: raised surface, hairline
|
||
* border, gold accent for the credential, mono period label.
|
||
*/
|
||
import Icon from "@components/Icon.astro";
|
||
|
||
interface EduEntry {
|
||
icon: string;
|
||
credential: string;
|
||
institution: string;
|
||
period: string;
|
||
detail?: string;
|
||
}
|
||
|
||
// Placeholder entries — replace with Greg's real education history.
|
||
const entries: EduEntry[] = [
|
||
{
|
||
icon: "school",
|
||
credential: "B.S., Computer Science",
|
||
institution: "Drexel University",
|
||
period: "2014 – 2018",
|
||
detail:
|
||
"Foundational coursework in software engineering, algorithms, and systems. Focuses in AI and human-computer interaction.",
|
||
},
|
||
];
|
||
---
|
||
|
||
<div class="grid gap-4 sm:grid-cols-2">
|
||
{
|
||
entries.map((e) => (
|
||
<article class="card flex flex-col gap-3">
|
||
<div class="flex items-start gap-3">
|
||
<span
|
||
class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg"
|
||
style="background: color-mix(in srgb, var(--color-accent) 16%, transparent); color: var(--color-accent);"
|
||
aria-hidden="true"
|
||
>
|
||
<Icon name={e.icon} class="h-5 w-5" />
|
||
</span>
|
||
<div class="flex flex-col gap-1">
|
||
<h3 class="font-sans text-lg" style="color: var(--color-text);">
|
||
{e.credential}
|
||
</h3>
|
||
<p
|
||
class="font-sans font-semibold"
|
||
style="color: var(--color-accent);"
|
||
>
|
||
{e.institution}
|
||
</p>
|
||
<span
|
||
class="font-mono text-xs uppercase tracking-[0.18em]"
|
||
style="color: var(--color-text-subtle);"
|
||
>
|
||
{e.period}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
{e.detail && (
|
||
<p
|
||
class="text-sm leading-relaxed"
|
||
style="color: var(--color-text-muted);"
|
||
>
|
||
{e.detail}
|
||
</p>
|
||
)}
|
||
</article>
|
||
))
|
||
}
|
||
</div>
|