com.gregkilmer.www/services/site/src/pages/resume.astro

---
/**
 * The resume: at a glance with the PDF, highlights, skills and education in
 * the sidebar, and the experience timeline. Every word comes from the Resume
 * notes and the /resume Page text; the PDF is built from the same data.
 */
import Button from "@gk/ui/components/Button.astro";
import Chip from "@gk/ui/components/Chip.astro";
import GiltCorners from "@gk/ui/components/GiltCorners.astro";
import Icon from "@gk/ui/components/Icon.astro";
import PageShell from "@gk/ui/components/PageShell.astro";
import Seal from "@gk/ui/components/Seal.astro";
import Star from "@gk/ui/components/Star.astro";
import StarPath from "@gk/ui/components/StarPath.astro";
import TickRing from "@gk/ui/components/TickRing.astro";
import TickScale from "@gk/ui/components/TickScale.astro";
import { site } from "../lib/page.ts";
import { listOf, period, resumeData } from "../lib/resume.ts";
import { formatDate } from "../lib/site.ts";

const s = await site();
const r = resumeData(s);
const caseStudies = s.caseStudies();
const isCore = (group: { core?: string[] }, item: string) => group.core?.some((c) => c.toLowerCase() === item.toLowerCase()) ?? false;
---
<PageShell title="Resume" family="resume" current="resume" description={`${r.name}: ${r.headline}. Experience, skills and a PDF to take with you.`}>
  <div slot="hero" class="hero">
    <div class="intro">
      <div class="plaque"><GiltCorners inset={4} size={30} />RESUME AT A GLANCE</div>
      <h1>{r.name}</h1>
      <p class="headline">{[r.headline, r.location].filter(Boolean).join(" · ")}</p>
      {r.summary && <p class="summary">{r.summary}</p>}
    </div>
    <aside class="take" aria-labelledby="take-h">
      <span class="take-star" aria-hidden="true"><TickRing size={36}><Star size={16} /></TickRing></span>
      <span class="take-head">
        <span id="take-h" class="take-label">TAKE IT WITH YOU</span>
        <TickScale width={120} count={24} />
      </span>
      <Button href="/resume.pdf" download="Greg-Kilmer-Resume.pdf">
        <Icon name="download" size={18} />Download PDF
      </Button>
      {r.updated && <span class="pdf-date">PDF · updated {formatDate(r.updated)}</span>}
      <Button variant="secondary" href="/inquiries?type=job">Start an inquiry</Button>
      {r.availability && <span class="avail"><span class="dot" aria-hidden="true"></span>{r.availability}</span>}
    </aside>
  </div>

  {
    r.stats.length > 0 && (
      <section aria-label="Highlights" class="stats">
        {r.stats.map((st) => (
          <div class="stat">
            <span class="stat-value">{st.value}</span>
            <TickScale width={120} count={24} />
            <span class="stat-label">{st.label}</span>
            {st.detail && <span class="stat-detail">{st.detail}</span>}
          </div>
        ))}
      </section>
    )
  }

  {r.stats.length > 0 && <div class="rule"><StarPath seed="resume" strength="calm" centerStar={false} /></div>}

  <div class="columns">
    <aside class="side">
      {
        r.skills && (
          <section aria-labelledby="skills-h" class="panel">
            <Seal name="mini-astrolabe" size={116} class="panel-seal" />
            <div class="panel-head">
              <h2 id="skills-h">SKILLS</h2>
              <TickScale width={140} count={28} />
            </div>
            {r.skills.stack.map((g) => (
              <div class="group">
                <span class="group-label">{g.label}</span>
                <div class="chips">
                  {g.items.map((item) => (
                    <Chip core={isCore(g, item)}>{item}</Chip>
                  ))}
                </div>
              </div>
            ))}
            {r.skills.stack.some((g) => g.core?.length) && <span class="hint">Teal outline marks the core stack.</span>}
          </section>
        )
      }
      {
        r.skills?.core?.length ? (
          <section aria-labelledby="strengths-h" class="panel">
            <div class="panel-head">
              <h2 id="strengths-h">STRENGTHS</h2>
              <TickScale width={140} count={28} />
            </div>
            <ul class="strengths">
              {r.skills.core.map((c) => (
                <li>
                  <Star size={10} />
                  {c}
                </li>
              ))}
            </ul>
          </section>
        ) : null
      }
      {
        r.education?.degrees.length ? (
          <section aria-labelledby="edu-h" class="panel">
            <Seal name="mini-tome" size={116} class="panel-seal" />
            <div class="panel-head">
              <h2 id="edu-h">EDUCATION</h2>
              <TickScale width={140} count={28} />
            </div>
            {r.education.degrees.map((d) => (
              <div class="degree">
                <span class="degree-name">{d.credential}</span>
                <span class="muted">
                  {d.institution} · {d.period}
                </span>
                {d.detail && <span class="muted small">{d.detail}</span>}
              </div>
            ))}
          </section>
        ) : null
      }
      {
        r.education?.certifications?.length ? (
          <section aria-labelledby="certs-h" class="panel">
            <Seal name="mini-layered" size={116} class="panel-seal" />
            <div class="panel-head">
              <h2 id="certs-h">CERTIFICATIONS</h2>
              <TickScale width={140} count={28} />
            </div>
            {r.education.certifications.map((c) => (
              <div class="cert">
                <span class="cert-name">{c.name}</span>
                <span class="muted">
                  {c.issuer} · {c.year}
                </span>
              </div>
            ))}
          </section>
        ) : null
      }
    </aside>

    <section aria-labelledby="exp-h" class="experience">
      <div class="exp-head">
        <h2 id="exp-h">Experience</h2>
        <span class="gk-underline" aria-hidden="true"></span>
      </div>
      <div class="timeline">
        <div class="grid" aria-hidden="true"></div>
        <div class="spine" aria-hidden="true"></div>
        {
          r.roles.map((role, i) => (
            <article id={role.slug} class:list={["role", { current: i === 0 && !role.data.end }]}>
              {i === 0 && !role.data.end && <GiltCorners inset={4} size={30} />}
              <span class="marker" aria-hidden="true">
                <Star size={i === 0 ? 14 : 11} tone={i === 0 ? "gold" : "outline"} />
              </span>
              <div class="role-top">
                <h3>{role.data.role}</h3>
                <span class="dates">{period(role)}</span>
              </div>
              <span class="company">{role.data.company}{role.data.location ? ` · ${role.data.location}` : ""}</span>
              {role.data.previousRoles?.length ? (
                <span class="previously">Previously {listOf(role.data.previousRoles)}</span>
              ) : null}
              {role.data.focus && <span class="focus">{role.data.focus}</span>}
              <ul>
                {role.data.bullets.map((b) => (
                  <li>
                    <Star size={9} />
                    <span>{b}</span>
                  </li>
                ))}
              </ul>
              {role.data.tech?.length ? (
                <div class="chips">
                  {role.data.tech.map((t) => (
                    <Chip>{t}</Chip>
                  ))}
                </div>
              ) : null}
            </article>
          ))
        }
      </div>
      {
        r.earlier.length > 0 && (
          <section aria-labelledby="earlier-h" class="earlier">
            <h3 id="earlier-h" class="sub-head">Earlier</h3>
            <ul>
              {r.earlier.map((role) => (
                <li id={role.slug}>
                  <div class="role-top">
                    <span class="earlier-role">{role.data.role}</span>
                    <span class="dates">{period(role)}</span>
                  </div>
                  <span class="company">{role.data.company}</span>
                  {role.data.focus && <span class="focus">{role.data.focus}</span>}
                </li>
              ))}
            </ul>
          </section>
        )
      }
      {
        r.projects.length > 0 && (
          <section aria-labelledby="projects-h" class="projects">
            <h3 id="projects-h" class="sub-head">Selected projects</h3>
            <ul>
              {r.projects.map((p) => (
                <li>
                  <Star size={10} />
                  <span>
                    {p.link ? <a href={p.link}>{p.title}</a> : <strong>{p.title}</strong>}
                    <span class="muted"> · {p.detail}</span>
                  </span>
                </li>
              ))}
            </ul>
          </section>
        )
      }
      {caseStudies.length > 0 && <Button variant="text" href="/work" arrow>See the case studies on the Work page</Button>}
    </section>
  </div>
</PageShell>

<style>
  .hero {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: center;
    padding-top: 8px;
  }
  .intro {
    flex: 1 1 520px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .plaque {
    align-self: flex-start;
    position: relative;
    font-size: 11px;
    letter-spacing: 0.3em;
    font-weight: 600;
    color: var(--gk-gold-bright);
    border: 1px solid rgba(201, 162, 74, 0.55);
    border-radius: 10px;
    padding: 17px 60px;
    line-height: 1.2;
  }
  h1 {
    margin: 0;
    font-size: clamp(34px, 6vw, 48px);
    letter-spacing: 0.08em;
    line-height: 1.05;
  }
  .headline {
    margin: 0;
    font-size: 18px;
    color: var(--gk-soft);
  }
  .summary {
    margin: 0;
    padding-left: 14px;
    border-left: 2px solid var(--gk-gold);
    font-size: 16px;
    line-height: 1.65;
    color: var(--gk-soft);
    max-width: 62ch;
  }
  .take {
    flex: 0 1 310px;
    min-width: 0;
    position: relative;
    background: var(--gk-midnight);
    border: 1px solid rgba(201, 162, 74, 0.6);
    border-radius: 12px;
    box-shadow:
      inset 0 0 0 5px var(--gk-midnight),
      inset 0 0 0 6px rgba(201, 162, 74, 0.3);
    padding: 32px 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .take-star {
    position: absolute;
    left: 50%;
    top: -18px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: var(--gk-midnight);
    display: flex;
  }
  .take-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .take-label {
    font-size: 11px;
    letter-spacing: 0.3em;
    font-weight: 600;
    color: var(--gk-gold-bright);
  }
  .pdf-date {
    margin-top: -4px;
    font-size: 12px;
    color: var(--gk-muted);
    text-align: center;
  }
  .avail {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px dashed rgba(244, 242, 237, 0.16);
    font-size: 13px;
    color: var(--gk-soft);
    text-align: center;
  }
  .dot {
    flex: 0 0 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--gk-teal-bright);
    box-shadow: 0 0 8px rgba(43, 194, 183, 0.7);
  }
  .stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    padding: 12px 0 8px;
  }
  .stat {
    background: var(--gk-midnight);
    border: 1px solid var(--gk-lines);
    border-top: 2px solid var(--gk-gold);
    border-radius: 10px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .stat-value {
    font-family: var(--gk-font-display);
    font-weight: 700;
    font-size: 44px;
    color: var(--gk-gold-bright);
    line-height: 1;
  }
  .stat-label {
    font-size: 15px;
    font-weight: 600;
  }
  .stat-detail {
    font-size: 14px;
    color: var(--gk-muted);
    line-height: 1.5;
  }
  .rule {
    padding: 28px 0 4px;
  }
  .columns {
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
    align-items: flex-start;
    padding: 32px 0 24px;
  }
  .side {
    flex: 1 1 300px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .panel {
    position: relative;
    overflow: hidden;
    background: var(--gk-midnight);
    border: 1px solid var(--gk-lines);
    border-radius: 10px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .panel :global(.panel-seal) {
    position: absolute;
    right: -30px;
    top: -30px;
    opacity: 0.12;
    pointer-events: none;
  }
  .panel-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .panel h2 {
    margin: 0;
    font-family: var(--gk-font-body);
    font-size: 11px;
    letter-spacing: 0.3em;
    font-weight: 600;
    color: var(--gk-gold-bright);
  }
  .group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .group-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--gk-muted);
  }
  .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .hint,
  .muted {
    font-size: 13px;
    color: var(--gk-muted);
  }
  .small {
    font-size: 13px;
    line-height: 1.5;
  }
  .strengths {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
  }
  .strengths li {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .degree {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .degree-name {
    font-family: var(--gk-font-display);
    font-weight: 700;
    font-size: 17px;
  }
  .cert {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
  }
  .cert-name {
    font-weight: 600;
  }
  /* Once the columns stack, the experience leads and the sidebar follows. */
  @media (max-width: 960px) {
    .experience {
      order: -1;
    }
  }
  .experience {
    flex: 2 1 560px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .exp-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .exp-head h2 {
    margin: 0;
    font-size: 28px;
    letter-spacing: 0.08em;
  }
  .timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-left: 36px;
  }
  .grid {
    position: absolute;
    inset: -24px -24px -24px 0;
    pointer-events: none;
    background:
      repeating-linear-gradient(0deg, rgba(244, 242, 237, 0.045) 0 1px, transparent 1px 40px),
      repeating-linear-gradient(90deg, rgba(244, 242, 237, 0.045) 0 1px, transparent 1px 40px);
    -webkit-mask-image: radial-gradient(ellipse at 40% 50%, #000 40%, transparent 80%);
    mask-image: radial-gradient(ellipse at 40% 50%, #000 40%, transparent 80%);
  }
  .spine {
    position: absolute;
    left: 10px;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: repeating-linear-gradient(to bottom, var(--gk-gold) 0 1px, transparent 1px 4px);
  }
  .role {
    position: relative;
    background: var(--gk-midnight);
    border: 1px solid var(--gk-lines);
    border-radius: 10px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-margin-top: 24px;
  }
  .role.current {
    border-color: rgba(201, 162, 74, 0.55);
  }
  .marker {
    position: absolute;
    left: -26.5px;
    top: 28px;
    transform: translateX(-50%);
    display: flex;
    background: var(--gk-sky);
    padding: 3px;
  }
  .role-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
  }
  .role h3 {
    margin: 0;
    font-size: 18px;
    letter-spacing: 0.04em;
  }
  .role.current h3 {
    font-size: 20px;
  }
  .dates {
    font-size: 13px;
    font-weight: 600;
    color: var(--gk-gold-bright);
  }
  .company {
    font-size: 15px;
    font-weight: 600;
    color: var(--gk-teal-bright);
  }
  .previously,
  .focus {
    font-size: 13px;
    color: var(--gk-muted);
  }
  .role ul {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--gk-soft);
  }
  .role li {
    display: flex;
    gap: 10px;
  }
  .role li :global(svg) {
    margin-top: 7px;
  }
  .earlier,
  .projects {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .sub-head {
    margin: 8px 0 0;
    font-size: 16px;
    letter-spacing: 0.08em;
    color: var(--gk-gold-bright);
  }
  .earlier ul,
  .projects ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .earlier li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 18px;
    border: 1px solid var(--gk-lines);
    border-radius: 10px;
    background: var(--gk-midnight);
    scroll-margin-top: 24px;
  }
  .earlier-role {
    font-family: var(--gk-font-display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--gk-text);
  }
  .earlier .company {
    font-size: 14px;
  }
  .projects li {
    display: flex;
    gap: 10px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--gk-soft);
  }
  .projects li :global(svg) {
    flex: none;
    margin-top: 6px;
  }
  .projects strong,
  .projects a {
    color: var(--gk-text);
    font-weight: 600;
  }
</style>