mirror of
https://github.com/Patiun/com.gregkilmer.www.git
synced 2026-11-07 19:58:24 +00:00
Claude
99ecdc2113
Landing, About, Now, Resume (with a generated PDF), Work and case studies, Inquiries and the sent page, Library and the Shelf, Workshop and craft pages, Tabletop, Blog with topics and posts, RSS, the Store, product lines, the order form and the 404, all rendered from the content service's notes. Schema: experience previousRoles, skills stack core items, page stats, make tags and deck favorite. Icon names from notes map to brand icons in one place, and HTML comments are dropped when Markdown renders. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012aSbo2D1qP8cMFQCykf7kx
112 lines
2.4 KiB
Plaintext
112 lines
2.4 KiB
Plaintext
---
|
|
/** A case study's facts: employer, role, period, key numbers and tech. */
|
|
import Chip from "@gk/ui/components/Chip.astro";
|
|
import Kicker from "@gk/ui/components/Kicker.astro";
|
|
import type { Post } from "../../lib/blog.ts";
|
|
|
|
interface Props {
|
|
post: Post;
|
|
}
|
|
const d = Astro.props.post.data;
|
|
const cells = [
|
|
{ label: "Employer", value: d.employer ?? "Personal project" },
|
|
d.role && { label: "Role", value: d.role },
|
|
d.period && { label: "Period", value: d.period },
|
|
].filter((c): c is { label: string; value: string } => !!c);
|
|
const facts = d.facts ?? [];
|
|
---
|
|
<section class="facts" aria-label="Project facts">
|
|
<dl class="grid">
|
|
{
|
|
cells.map((c) => (
|
|
<div class="cell">
|
|
<dt>{c.label}</dt>
|
|
<dd>{c.value}</dd>
|
|
</div>
|
|
))
|
|
}
|
|
{
|
|
facts.map((f) => (
|
|
<div class="cell num">
|
|
<dt>{f.label}</dt>
|
|
<dd>{f.value}</dd>
|
|
</div>
|
|
))
|
|
}
|
|
</dl>
|
|
{
|
|
d.tech && d.tech.length > 0 && (
|
|
<div class="tech">
|
|
<Kicker ticks={false}>Tech</Kicker>
|
|
<ul>
|
|
{d.tech.map((t) => (
|
|
<li>
|
|
<Chip core>{t}</Chip>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|
|
</section>
|
|
|
|
<style>
|
|
.facts {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
padding: 22px 26px;
|
|
background: var(--gk-midnight);
|
|
border: 1px solid var(--gk-lines);
|
|
border-radius: var(--gk-radius);
|
|
}
|
|
.grid {
|
|
margin: 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
|
|
gap: 16px 24px;
|
|
}
|
|
.cell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
padding-left: 14px;
|
|
border-left: 1px solid rgba(201, 162, 74, 0.45);
|
|
}
|
|
dt {
|
|
font-size: 11px;
|
|
letter-spacing: 0.2em;
|
|
font-weight: 600;
|
|
color: var(--gk-muted);
|
|
text-transform: uppercase;
|
|
}
|
|
dd {
|
|
margin: 0;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: var(--gk-text);
|
|
line-height: 1.4;
|
|
}
|
|
.num dd {
|
|
font-family: var(--gk-font-display);
|
|
font-size: 24px;
|
|
color: var(--gk-gold-bright);
|
|
}
|
|
.tech {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 10px 14px;
|
|
padding-top: 16px;
|
|
border-top: 1px solid var(--gk-lines);
|
|
}
|
|
.tech ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
</style>
|