mirror of
https://github.com/Patiun/com.gregkilmer.www.git
synced 2026-11-07 19:58:24 +00:00
Claude
01431468e4
- Palette: Patiun Teal, Midnight, night sky, Starlight, flat Alchemist Gold; violet/indigo only as nebula light. Starlight content sections, night-sky nav and heroes (.on-sky scope re-points accent/gold to on-dark values). - Type: Cinzel for headings, names and card titles; Montserrat for body, UI and eyebrows (font-eyebrow); JetBrains Mono kept for code-like blocks. - Header lockup: Patiun glyph + Cinzel "GREG KILMER" + "Web Development · a Patiun LLC company"; glyph also marks the footer and store nav. - Teal filled buttons with Midnight text; gold eyebrows; small links use a darker teal so they pass WCAG AA on Starlight. - Favicons, app icons and web manifest from the GregKilmer.com brand package. - docs/THEMING.md updated for the new palette and fonts. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012aSbo2D1qP8cMFQCykf7kx
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-display 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-eyebrow 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>
|