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
86 lines
3.3 KiB
Plaintext
86 lines
3.3 KiB
Plaintext
---
|
|
/**
|
|
* Timeline.astro
|
|
* ---------------------------------------------------------------------------
|
|
* Vertical timeline for the Experience section. Each entry has a marker (mdi
|
|
* icon), a period label, company/title, focus, and rendered markdown body (the
|
|
* bullet list from the experience collection entry).
|
|
*
|
|
* The vertical line is drawn with a pseudo-element; markers sit on it. Entry
|
|
* bodies are expandable detail (the spec asks for "expandable detail"). On
|
|
* small screens the marker line stays but spacing tightens.
|
|
*
|
|
* Astro 7 content layer: `render(entry)` returns `{ Content }` (an Astro
|
|
* component), which we render with `<Content />` rather than stringifying.
|
|
*/
|
|
import { type CollectionEntry, render } from 'astro:content';
|
|
import Icon from '@components/Icon.astro';
|
|
import Reveal from '@components/motion/Reveal.astro';
|
|
|
|
interface Props {
|
|
entries: CollectionEntry<'experience'>[];
|
|
}
|
|
|
|
const { entries } = Astro.props;
|
|
|
|
// Pre-render each entry to get its Content component (Astro 7 API).
|
|
const rendered = await Promise.all(
|
|
entries.map(async (e) => ({
|
|
entry: e,
|
|
Content: (await render(e)).Content,
|
|
})),
|
|
);
|
|
---
|
|
|
|
<ol class="flex flex-col gap-10">
|
|
{rendered.map(({ entry, Content }, i) => (
|
|
<li class="relative">
|
|
<Reveal delay={i * 80}>
|
|
|
|
<div class="card flex flex-col gap-3">
|
|
{/* Header row: icon + company name inline, period on the right. */}
|
|
<div class="flex flex-wrap items-center justify-between gap-x-4 gap-y-1">
|
|
<h3 class="flex items-center gap-3" style="color: var(--color-text);">
|
|
<span
|
|
class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full"
|
|
style="background: color-mix(in srgb, var(--color-accent) 16%, transparent);"
|
|
aria-hidden="true"
|
|
>
|
|
<Icon name={entry.data.icon} class="h-5 w-5" style="color: var(--color-accent);" />
|
|
</span>
|
|
{entry.data.company}
|
|
</h3>
|
|
<span class="font-eyebrow text-xs uppercase tracking-[0.18em]" style="color: var(--color-text-subtle);">
|
|
{entry.data.period}
|
|
</span>
|
|
</div>
|
|
<p class="font-sans font-semibold" style="color: var(--color-accent);">
|
|
{entry.data.title}
|
|
</p>
|
|
{entry.data.focus && (
|
|
<p class="text-sm italic" style="color: var(--color-text-muted);">
|
|
Focus: {entry.data.focus}
|
|
</p>
|
|
)}
|
|
|
|
<details class="group mt-1">
|
|
<summary
|
|
class="flex cursor-pointer list-none items-center gap-2 font-sans text-sm font-semibold transition-colors"
|
|
style="color: var(--color-accent);"
|
|
>
|
|
<Icon name="chevron-down" class="h-4 w-4 transition-transform group-open:rotate-180" />
|
|
Show details
|
|
</summary>
|
|
<div
|
|
class="mt-4 flex flex-col gap-3 text-sm leading-relaxed [&_ul]:flex [&_ul]:flex-col [&_ul]:gap-2 [&_li]:ml-4 [&_li]:list-disc [&_strong]:font-semibold [&_strong]:text-[var(--color-text)] [&_p:first-child]:mt-0"
|
|
style="color: var(--color-text-muted);"
|
|
>
|
|
<Content />
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</Reveal>
|
|
</li>
|
|
))}
|
|
</ol>
|