lerko
32455bf7a7
Replace monospace-terminal aesthetic with clean reader layout. System sans-serif default, typeface picker (sans/serif/mono) with per-face optical tuning. Warm color palettes (slate dark, bone light), crafted link underlines, WCAG AA contrast on all text tiers. Semantic HTML throughout: proper heading hierarchy, <time> elements, role=group, <dl>/<table>/<article> where appropriate. Net -140 lines.
44 lines
1.1 KiB
Plaintext
44 lines
1.1 KiB
Plaintext
---
|
|
import Widget from "./Widget.astro";
|
|
import { timeline, type TimelineType } from "@/data/timeline";
|
|
|
|
const isDate = (d: string) => /^\d{4}/.test(d);
|
|
|
|
const typeLabel: Record<TimelineType, string> = {
|
|
career: "career",
|
|
education: "education",
|
|
cert: "cert",
|
|
project: "project",
|
|
homelab: "homelab",
|
|
};
|
|
---
|
|
|
|
<Widget title="Journey">
|
|
<ol class="flex flex-col gap-0">
|
|
{timeline.map((entry) => (
|
|
<li class="pb-2lh last:pb-0">
|
|
<p class="text-[var(--color-text-dim)] mb-qtr-lh">
|
|
{isDate(entry.date)
|
|
? <time datetime={entry.date}>{entry.date}</time>
|
|
: <span>{entry.date}</span>
|
|
}
|
|
<span class="mx-[0.5ch]">·</span>
|
|
<em>{typeLabel[entry.type]}</em>
|
|
</p>
|
|
|
|
<h3 class="font-semibold mb-half-lh">{entry.title}</h3>
|
|
|
|
<p class="text-[var(--color-text-label)] leading-relaxed mb-half-lh">
|
|
{entry.description}
|
|
</p>
|
|
|
|
{entry.tags && entry.tags.length > 0 && (
|
|
<p class="text-[var(--color-text-dim)]">
|
|
{entry.tags.join(" · ")}
|
|
</p>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</Widget>
|