@cratis/cast 0.0.1 → 0.2.0

package/site/components/Nav.astro

@@ -0,0 +1,127 @@
+---
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { CastView } from '../profile/CastView';
+import { navLinks } from '../lib/sections';
+import CastBadge from './CastBadge.astro';
+import Monogram from './Monogram.astro';
+
+interface Props {
+  cast: CastView;
+  /** Prefix anchor links with the home page path when not on the home page. */
+  home?: boolean;
+}
+const { cast, home = true } = Astro.props;
+const { person, sections, tier } = cast;
+const base = home ? '' : cast.href();
+const links = navLinks(sections);
+---
+
+<header
+  data-nav
+  class="group/nav fixed inset-x-0 top-0 z-50 h-[var(--nav-h)] border-b border-transparent transition-[background-color,border-color,backdrop-filter] duration-300 data-[scrolled]:border-line data-[scrolled]:bg-ink-950/70 data-[scrolled]:backdrop-blur-xl data-[scrolled]:backdrop-saturate-150 print:hidden"
+>
+  <nav class="container-x flex h-full items-center justify-between gap-4" aria-label="Primary">
+    <div class="flex min-w-0 items-center gap-3">
+      <slot name="lead" />
+      <a href={home ? '#top' : cast.href()} class="group flex items-center gap-2.5 rounded-md" aria-label={`${person.handle}, home`}>
+        <Monogram cast={cast} class="size-7 shrink-0 transition-transform duration-500 ease-[var(--ease-spring)] group-hover:-rotate-6" />
+        <span class="font-mono text-[0.9375rem] font-semibold tracking-tight">{person.handle}</span>
+      </a>
+      <span class="hidden sm:inline-flex"><CastBadge tier={tier.tier} handle={person.handle} size="compact" claim={!cast.host.verified} /></span>
+    </div>
+
+    <ul class="hidden items-center gap-1 md:flex">
+      {
+        links.map((l) => (
+          <li>
+            <a
+              href={`${base}#${l.id}`}
+              data-section={home ? l.id : undefined}
+              class="relative rounded-lg px-3 py-2 text-sm text-fg-muted transition-colors hover:text-fg aria-[current=location]:text-fg"
+            >
+              {l.label}
+            </a>
+          </li>
+        ))
+      }
+      <li>
+        <a href={cast.href('cv')} class="rounded-lg px-3 py-2 text-sm text-fg-muted transition-colors hover:text-fg">CV</a>
+      </li>
+    </ul>
+
+    <div class="flex items-center gap-2">
+    <button
+      type="button"
+      data-theme-toggle
+      class="btn btn-sm w-9 px-0 text-fg-muted hover:text-fg"
+      aria-label="Light theme"
+      aria-pressed="false"
+      title="Toggle light theme"
+    >
+      <svg viewBox="0 0 20 20" class="theme-sun size-4" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
+        <circle cx="10" cy="10" r="3.5"></circle><path d="M10 2v2M10 16v2M2 10h2M16 10h2M4.3 4.3l1.4 1.4M14.3 14.3l1.4 1.4M4.3 15.7l1.4-1.4M14.3 5.7l1.4-1.4" stroke-linecap="round"></path>
+      </svg>
+      <svg viewBox="0 0 20 20" class="theme-moon size-4" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
+        <path d="M16 12.5A6.5 6.5 0 0 1 7.5 4a6.5 6.5 0 1 0 8.5 8.5Z" stroke-linejoin="round"></path>
+      </svg>
+    </button>
+    <button
+      type="button"
+      data-terminal-open
+      class="btn btn-sm w-9 px-0 text-fg-muted hover:text-fg"
+      aria-label="Open terminal"
+      aria-haspopup="dialog"
+      aria-keyshortcuts="`"
+      title="Terminal ( ` )"
+    >
+      <svg viewBox="0 0 20 20" class="size-4" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
+        <rect x="2.5" y="3.5" width="15" height="13" rx="2.5"></rect><path d="m6 8 2.5 2L6 12M10.5 12.5H14" stroke-linecap="round" stroke-linejoin="round"></path>
+      </svg>
+    </button>
+    <button
+      type="button"
+      data-palette-open
+      class="btn btn-sm gap-2.5 pr-1.5 text-fg-muted hover:text-fg"
+      aria-haspopup="dialog"
+      aria-keyshortcuts="Meta+K Control+K"
+    >
+      <svg viewBox="0 0 20 20" class="size-4" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
+        <circle cx="9" cy="9" r="5.5"></circle><path d="m13.2 13.2 3.3 3.3" stroke-linecap="round"></path>
+      </svg>
+      <span class="md:hidden">Menu</span>
+      <span class="hidden md:inline">Commands</span>
+      <span class="hidden items-center gap-0.5 sm:flex" aria-hidden="true">
+        <kbd class="kbd" data-mod-key>⌘</kbd><kbd class="kbd">K</kbd>
+      </span>
+    </button>
+    </div>
+  </nav>
+</header>
+
+<script>
+  import { onPageLoad } from '../lib/lifecycle';
+  import { currentTheme, toggleTheme } from '../lib/theme';
+  // Bound once per full load; the button itself is re-rendered on every navigation.
+  document.addEventListener('click', (e) => {
+    if ((e.target as Element | null)?.closest('[data-theme-toggle]')) toggleTheme();
+  });
+  onPageLoad(() => {
+    document.querySelectorAll('[data-theme-toggle]').forEach((b) => b.setAttribute('aria-pressed', String(currentTheme() === 'light')));
+    const isMac = /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
+    if (!isMac) document.querySelectorAll('[data-mod-key]').forEach((el) => (el.textContent = 'Ctrl'));
+  });
+</script>
+
+<style>
+  .theme-moon {
+    display: none;
+  }
+  :global(html[data-theme='light']) .theme-sun {
+    display: none;
+  }
+  :global(html[data-theme='light']) .theme-moon {
+    display: block;
+  }
+</style>

package/site/components/Now.astro

@@ -0,0 +1,116 @@
+---
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { CastView } from '../profile/CastView';
+import Inline from './Inline.astro';
+import { Picture } from 'astro:assets';
+import { formatMonth } from '../lib/career';
+import SectionHeader from './SectionHeader.astro';
+
+interface Props {
+  cast: CastView;
+  index: string;
+  title?: string;
+  label?: string;
+}
+const { index, title = 'Where the stream is *now.*', label = 'Read model' } = Astro.props;
+const { cast } = Astro.props;
+const { person, now, careerEvents, firstName, photo, photoUrl } = cast;
+const rows: { key: string; value: string | string[] }[] = Object.entries(now).map(([key, value]) => ({
+  key,
+  value: typeof value === 'string' && /^\d{4}-\d{2}$/.test(value) ? formatMonth(value) : value,
+}));
+const hasPortrait = photo !== undefined || photoUrl !== undefined;
+---
+
+<section id="about" class="relative py-24 md:py-36" aria-labelledby="about-title">
+  <div class="container-x">
+    <SectionHeader host={cast.host} index={index} kind="view" label={label} title={title} id="about-title" />
+
+    <div class="grid grid-cols-1 gap-6 lg:grid-cols-12">
+      {hasPortrait && <figure class="avatar group panel overflow-hidden p-2 lg:col-span-4" data-reveal>
+        <div class="relative aspect-square overflow-hidden rounded-[0.9rem]">
+          {photo ? <Picture
+            src={photo}
+            alt={`Portrait of ${person.name}`}
+            widths={[320, 500]}
+            sizes="(min-width: 1024px) 380px, 90vw"
+            formats={['avif', 'webp']}
+            loading="lazy"
+            class="size-full object-cover"
+          /> : <img src={photoUrl} alt={`Portrait of ${person.name}`} width="460" height="460" loading="lazy" class="size-full object-cover" />}
+          <div class="tint pointer-events-none absolute inset-0" aria-hidden="true"></div>
+          <div class="pointer-events-none absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-ink-950/80 to-transparent" aria-hidden="true"></div>
+        </div>
+        <figcaption class="flex items-center justify-between px-2 pt-3 pb-1 font-mono text-xs text-fg-muted">
+          <span>{person.fullName ?? person.name}</span>
+          <span class="text-fg-faint">{person.location}</span>
+        </figcaption>
+      </figure>}
+
+      {rows.length > 0 && <div class:list={['panel overflow-hidden', hasPortrait ? 'lg:col-span-8' : 'lg:col-span-12']} data-reveal style="--reveal-delay:120ms">
+        <div class="flex items-center justify-between gap-4 border-b border-line px-5 py-3.5 md:px-7">
+          <p class="font-mono text-sm">
+            <span class="text-fg-faint">Projection:</span> <span class="text-view">{firstName}.Now</span>
+          </p>
+          <p class="flex items-center gap-2 font-mono text-xs text-fg-muted">
+            <span class="size-1.5 animate-pulse-dot rounded-full bg-view" aria-hidden="true"></span>
+            projected from {careerEvents.length} events
+          </p>
+        </div>
+        <dl class="divide-y divide-line">
+          {
+            rows.map((r) => (
+              <div class="grid gap-1 px-5 py-4 sm:grid-cols-[9rem_1fr] sm:gap-6 md:px-7">
+                <dt class="font-mono text-xs leading-6 text-fg-faint">{r.key}</dt>
+                <dd class="text-[0.975rem] leading-6 text-fg">
+                  {Array.isArray(r.value) ? (
+                    <ul class="flex flex-wrap gap-2" aria-label={r.key}>
+                      {r.value.map((v) => (
+                        <li class="tag border-view/25 bg-view/5 text-view-soft">{v}</li>
+                      ))}
+                    </ul>
+                  ) : (
+                    <Fragment><Inline text={r.value} host={cast.host} /></Fragment>
+                  )}
+                </dd>
+              </div>
+            ))
+          }
+        </dl>
+      </div>}
+    </div>
+
+    {(person.about.length > 0 || person.interests.length > 0) && <div class="mt-16 grid grid-cols-1 gap-10 md:mt-24 md:grid-cols-12">
+      {person.about.length > 0 && <h3 class="eyebrow md:col-span-3" data-reveal>About</h3>}
+      {person.about.length > 0 && <div class="text-lg leading-relaxed text-fg-muted md:col-span-9 md:columns-2 md:gap-10 [&>p]:mb-6 [&>p]:break-inside-avoid" data-reveal>
+        {person.about.map((p, i) => <p class:list={[i === 0 && 'text-fg']}><Inline text={p} host={cast.host} /></p>)}
+      </div>}
+      {person.interests.length > 0 && <h3 class="eyebrow md:col-span-3" data-reveal>Interests</h3>}
+      {person.interests.length > 0 && <ul class="flex flex-wrap gap-2 md:col-span-9" data-reveal>
+        {person.interests.map((i) => <li class="tag">{i}</li>)}
+      </ul>}
+    </div>}
+  </div>
+</section>
+
+<style>
+  .avatar :global(img) {
+    filter: grayscale(1) contrast(1.08) brightness(0.95);
+    transition: filter 900ms var(--ease-out-expo), transform 900ms var(--ease-out-expo);
+  }
+  .tint {
+    background: linear-gradient(160deg, var(--color-accent) 0%, #2dd4bf 100%);
+    mix-blend-mode: color;
+    opacity: 0.55;
+    transition: opacity 900ms var(--ease-out-expo);
+  }
+  .avatar:hover :global(img) {
+    filter: none;
+    transform: scale(1.03);
+  }
+  .avatar:hover .tint {
+    opacity: 0;
+  }
+</style>

package/site/components/Projects.astro

@@ -0,0 +1,185 @@
+---
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { CastView } from '../profile/CastView';
+import Inline from './Inline.astro';
+import SectionHeader from './SectionHeader.astro';
+
+interface Props {
+  cast: CastView;
+  index: string;
+  title?: string;
+  label?: string;
+  intro?: string;
+}
+const { index, title = 'Things I build *after hours.*', label = 'Side projects', intro } = Astro.props;
+const { cast } = Astro.props;
+const { config, liveProjects: projects } = cast;
+// Categories in cast.yaml order, then any others in first-use order.
+const used = [...new Set(projects.map((p) => p.category))];
+const declared = config.projectCategories.filter((c) => used.includes(c.id));
+const categories = [...declared, ...used.filter((id) => !declared.some((c) => c.id === id)).map((id) => ({ id, label: id.charAt(0).toUpperCase() + id.slice(1), filter: undefined }))];
+const filters = categories.length > 1 ? [{ id: 'all', label: 'All' }, ...categories.map((c) => ({ id: c.id, label: c.filter ?? c.label }))] : [];
+const countFor = (id: string) => (id === 'all' ? projects.length : projects.filter((p) => p.category === id).length);
+const categoryLabel: Record<string, string> = Object.fromEntries(categories.map((c) => [c.id, c.label]));
+/** Lets a command wrap only after spaces and slashes, with no added visible characters. */
+const breakable = (cmd: string) => cmd.split(/(?<=[/ ])/);
+---
+
+<section id="projects" class="relative py-24 md:py-36" aria-labelledby="projects-title">
+  <div class="container-x">
+    <SectionHeader host={cast.host} index={index} label={label} title={title} id="projects-title">
+      {intro && <p class="mt-6 max-w-[62ch] text-lg leading-relaxed text-fg-muted"><Inline text={intro} host={cast.host} /></p>}
+    </SectionHeader>
+
+    <div class="mb-8 flex flex-wrap gap-2" role="group" aria-label="Filter projects by category" data-filters hidden>
+      {
+        filters.map((f, i) => (
+          <button type="button" class="filter" data-filter={f.id} aria-pressed={i === 0 ? 'true' : 'false'}>
+            {f.label}
+            <span class="font-mono text-[0.6875rem] opacity-60">{countFor(f.id)}</span>
+          </button>
+        ))
+      }
+    </div>
+    <p class="sr-only" aria-live="polite" data-filter-status></p>
+
+    <ul class="bento grid grid-cols-1 gap-4 md:grid-cols-3" data-bento>
+      {
+        projects.map((p, i) => (
+          <li class:list={['proj', p.featured && 'md:col-span-2']} data-category={p.category} data-reveal style={`--reveal-delay:${(i % 3) * 70}ms`}>
+            <article class="panel glow flex h-full flex-col p-6 md:p-7">
+              <header class="flex items-start justify-between gap-4">
+                <div>
+                  <p class="font-mono text-[0.6875rem] tracking-wider text-fg-faint uppercase">{categoryLabel[p.category]}</p>
+                  <h3 class="mt-2 flex items-center gap-3 font-display text-[1.75rem] leading-none font-[650] tracking-[-0.03em]">
+                    <a href={p.url} rel={cast.host.rel} class="hover:text-event-soft">
+                      {p.name}
+                    </a>
+                    {p.version && (
+                      <span class="rounded-md border border-event/30 bg-event/10 px-1.5 py-0.5 font-mono text-[0.6875rem] font-medium tracking-normal text-event-soft">
+                        {p.version}
+                      </span>
+                    )}
+                  </h3>
+                </div>
+                <a href={p.url} rel={cast.host.rel} class="grid size-9 shrink-0 place-items-center rounded-lg border border-line text-fg-muted transition-colors hover:border-line-strong hover:text-fg" aria-label={`${p.name} on GitHub`}>
+                  <svg viewBox="0 0 16 16" class="size-4" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M5 11 11 5M6 5h5v5" stroke-linecap="round" stroke-linejoin="round" /></svg>
+                </a>
+              </header>
+
+              <p class="mt-4 text-[1.0625rem] leading-relaxed text-fg">{p.pitch}</p>
+
+              <ul class:list={['mt-5 grid gap-2 text-sm text-fg-muted', p.featured && 'sm:grid-cols-2 sm:gap-x-6']}>
+                {p.features.map((f) => (
+                  <li class="flex gap-2.5">
+                    <span class="mt-[0.45rem] size-1.5 shrink-0 rounded-[2px] bg-view/80" aria-hidden="true" />
+                    {f}
+                  </li>
+                ))}
+              </ul>
+
+              <div class="mt-auto pt-6">
+                {p.install && (
+                  <div class="term mb-4 flex items-start gap-2.5 rounded-xl border border-line bg-ink-950/80 py-1.5 pr-1.5 pl-3.5 font-mono text-[0.8125rem] leading-5">
+                    <span class="py-[0.3rem] text-view select-none" aria-hidden="true">$</span>
+                    <code class="min-w-0 flex-1 py-[0.3rem] [overflow-wrap:anywhere] text-fg">
+                      {breakable(p.install).map((part, i) => <>{i > 0 && <wbr />}<span class="whitespace-nowrap">{part}</span></>)}
+                    </code>
+                    <button type="button" class="copy" data-copy={p.install} aria-label={`Copy install command for ${p.name}`}>
+                      <svg viewBox="0 0 16 16" class="ic-copy size-3.5" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="5" y="5" width="9" height="9" rx="2" /><path d="M11 5V3.5A1.5 1.5 0 0 0 9.5 2h-6A1.5 1.5 0 0 0 2 3.5v6A1.5 1.5 0 0 0 3.5 11H5" /></svg>
+                      <svg viewBox="0 0 16 16" class="ic-ok size-3.5" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="m3 8.5 3 3 7-7" stroke-linecap="round" stroke-linejoin="round" /></svg>
+                      <span data-copy-label>Copy</span>
+                    </button>
+                    <span class="sr-only" aria-live="polite" data-copy-status />
+                  </div>
+                )}
+                <ul class="flex flex-wrap gap-1.5" aria-label="Stack">
+                  {p.stack.map((s) => (
+                    <li class="rounded-md bg-fg/[0.04] px-2 py-0.5 font-mono text-[0.6875rem] text-fg-muted">{s}</li>
+                  ))}
+                </ul>
+              </div>
+            </article>
+          </li>
+        ))
+      }
+    </ul>
+  </div>
+</section>
+
+<style>
+  .bento[data-filtered] .proj {
+    grid-column: auto;
+  }
+  .copy {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    height: 1.9rem;
+    padding-inline: 0.6rem;
+    border-radius: 0.55rem;
+    font-size: 0.75rem;
+    color: var(--color-fg-muted);
+    border: 1px solid var(--color-line);
+    background: color-mix(in srgb, var(--color-fg) 3%, transparent);
+    transition: all 160ms ease;
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+  .copy:hover {
+    color: var(--color-fg);
+    border-color: var(--color-line-strong);
+  }
+  .copy .ic-ok,
+  .copy[data-copied='true'] .ic-copy {
+    display: none;
+  }
+  .copy[data-copied='true'] {
+    color: var(--color-view);
+    border-color: rgb(45 212 191 / 0.4);
+    background: rgb(45 212 191 / 0.08);
+  }
+  .copy[data-copied='true'] .ic-ok {
+    display: block;
+  }
+  .proj[hidden] {
+    display: none;
+  }
+  :global(.js-motion) .proj.enter {
+    animation: var(--animate-pop-in);
+  }
+</style>
+
+<script>
+  import { onPageLoad } from '../lib/lifecycle';
+  onPageLoad(() => {
+    const bar = document.querySelector<HTMLElement>('[data-filters]');
+    const grid = document.querySelector<HTMLElement>('[data-bento]');
+    const status = document.querySelector<HTMLElement>('[data-filter-status]');
+    if (bar && grid) {
+      bar.hidden = false;
+      const cards = [...grid.querySelectorAll<HTMLElement>('.proj')];
+      bar.addEventListener('click', (e) => {
+        const btn = (e.target as Element).closest<HTMLButtonElement>('[data-filter]');
+        if (!btn) return;
+        const id = btn.dataset['filter'];
+        bar.querySelectorAll('[data-filter]').forEach((b) => b.setAttribute('aria-pressed', String(b === btn)));
+        grid.toggleAttribute('data-filtered', id !== 'all');
+        let shown = 0;
+        for (const card of cards) {
+          const match = id === 'all' || card.dataset['category'] === id;
+          card.hidden = !match;
+          card.classList.remove('enter');
+          if (match) {
+            shown++;
+            void card.offsetWidth;
+            card.classList.add('enter', 'is-visible');
+          }
+        }
+        if (status) status.textContent = `Showing ${shown} project${shown === 1 ? '' : 's'}`;
+      });
+    }
+  });
+</script>

package/site/components/PullRequestFeed.astro

@@ -0,0 +1,88 @@
+---
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// The live feed of merged public pull requests: rendered from the build-time snapshot, refreshed in the browser.
+import type { CastView } from '../profile/CastView';
+import { relativeTime } from '../lib/reltime';
+
+interface Props {
+  cast: CastView;
+  class?: string;
+}
+const { class: className = '' } = Astro.props;
+const { cast } = Astro.props;
+const { config, github, snapshotDate } = cast;
+// The section shows the newest eight; the terminal's `stream tail` gets the full snapshot.
+const feed = github.mergedPullRequests.latest.slice(0, 8);
+const builtAt = github.fetchedAt ? Date.parse(github.fetchedAt) : Date.now();
+const orgs = config.github.orgs.join(', ');
+---
+
+  <div class:list={['panel overflow-hidden', className]} data-reveal data-feed>
+    <div class="flex flex-wrap items-center justify-between gap-3 border-b border-line px-5 py-3.5">
+      <h3 class="flex items-center gap-2.5 font-mono text-sm">
+        <span class="size-1.5 animate-pulse-dot rounded-full bg-view" aria-hidden="true"></span>
+        <span class="text-fg-faint">tail -f</span> <span class="text-fg">Tailing the stream</span>
+      </h3>
+      <p data-pr-status class="font-mono text-xs text-fg-faint">as of <time datetime={github.fetchedAt}>{snapshotDate()}</time></p>
+    </div>
+    <template data-pr-template>
+      <li class="feed-row">
+        <a rel={cast.host.rel} class="group grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 px-5 py-3.5 transition-colors hover:bg-fg/[0.025] sm:grid-cols-[4.5rem_1fr_auto]">
+          <span data-pr-head class="font-mono text-xs leading-6 text-fg-faint tabular-nums"></span>
+          <span class="min-w-0">
+            <span class="flex flex-wrap items-center gap-x-2.5 gap-y-1 font-mono text-xs">
+              <span class="text-event">PullRequestMerged</span>
+              <span data-pr-repo class="rounded-md border border-command/25 bg-command/8 px-1.5 py-px text-command-soft"></span>
+              <span data-pr-number class="text-fg-faint"></span>
+            </span>
+            <span data-pr-title class="mt-1 block text-[0.9375rem] leading-snug text-fg group-hover:underline"></span>
+          </span>
+          <time data-rel class="col-start-2 font-mono text-xs text-fg-faint sm:col-start-3 sm:leading-6"></time>
+        </a>
+      </li>
+    </template>
+    {
+      feed.length ? (
+        <ol data-pr-feed class="divide-y divide-line" aria-label={`Latest merged pull requests in ${orgs}`}>
+          {feed.map((pr, i) => (
+            <li class="feed-row" style={`--i:${i}`}>
+              <a href={pr.url} rel={cast.host.rel} class="group grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 px-5 py-3.5 transition-colors hover:bg-fg/[0.025] sm:grid-cols-[4.5rem_1fr_auto]">
+                <span class="font-mono text-xs leading-6 text-fg-faint tabular-nums">{i === 0 ? 'HEAD' : `HEAD~${i}`}</span>
+                <span class="min-w-0">
+                  <span class="flex flex-wrap items-center gap-x-2.5 gap-y-1 font-mono text-xs">
+                    <span class="text-event">PullRequestMerged</span>
+                    <span class="rounded-md border border-command/25 bg-command/8 px-1.5 py-px text-command-soft">{pr.repository}</span>
+                    <span class="text-fg-faint">#{pr.number}</span>
+                  </span>
+                  <span class="mt-1 block text-[0.9375rem] leading-snug text-fg group-hover:underline">{pr.title}</span>
+                </span>
+                <time datetime={pr.mergedAt} data-rel class="col-start-2 font-mono text-xs text-fg-faint sm:col-start-3 sm:leading-6">{relativeTime(pr.mergedAt, builtAt)}</time>
+              </a>
+            </li>
+          ))}
+        </ol>
+      ) : (
+        <ol data-pr-feed class="divide-y divide-line" aria-label={`Latest merged pull requests in ${orgs}`}>
+          <li class="px-5 py-8 font-mono text-sm text-fg-faint">EventNotFound: the snapshot has no merged pull requests yet.</li>
+        </ol>
+      )
+    }
+    <p class="border-t border-line px-5 py-3 font-mono text-[0.6875rem] text-fg-faint">
+      Public repositories only, newest first. Refreshed hourly and on page load.
+    </p>
+  </div>
+
+<style>
+  :global(.js-motion) [data-feed].is-visible :global(.feed-row) {
+    animation: feed-in 700ms var(--ease-out-expo) both;
+    animation-delay: calc(var(--i) * 45ms + 200ms);
+  }
+  @keyframes feed-in {
+    from {
+      opacity: 0;
+      transform: translateY(-6px);
+    }
+  }
+</style>

package/site/components/SectionHeader.astro

@@ -0,0 +1,30 @@
+---
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { CastHost } from '../profile/CastHost';
+import Inline from './Inline.astro';
+
+interface Props {
+  index: string;
+  kind?: 'event' | 'command' | 'view';
+  label: string;
+  /** May use *emphasis* for the italic serif accent. */
+  title: string;
+  id?: string;
+  /** Where the profile is rendered, for links in the title. */
+  host?: CastHost;
+}
+const { index, kind = 'event', label, title, id, host } = Astro.props;
+const noteClass = kind === 'command' ? 'note note-command' : kind === 'view' ? 'note note-view' : 'note';
+---
+
+<header class="mb-12 md:mb-16" data-reveal>
+  <p class="mb-5 flex items-center gap-3 font-mono text-xs text-fg-faint">
+    {index && <span class="text-fg-muted">{index}</span>}
+    {index && <span class="h-px w-8 bg-line-strong" aria-hidden="true"></span>}
+    <span class={noteClass}>{label}</span>
+  </p>
+  <h2 id={id} class="section-title max-w-[22ch]"><Inline text={title} host={host} /></h2>
+  <slot />
+</header>

package/site/components/Skills.astro

@@ -0,0 +1,44 @@
+---
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { CastView } from '../profile/CastView';
+import SectionHeader from './SectionHeader.astro';
+
+interface Props {
+  cast: CastView;
+  index: string;
+  title?: string;
+  label?: string;
+  /** Sits directly under the talks section, so it needs less top padding there. */
+  compact?: boolean;
+}
+const { index, title = 'The *toolbox.*', label = 'Read model', compact = false } = Astro.props;
+const { cast } = Astro.props;
+const { skills } = cast;
+const groups = Object.entries(skills);
+const accents = ['bg-event', 'bg-command', 'bg-view', 'bg-accent'];
+---
+
+<section id="skills" class:list={['relative pb-24 md:pb-36', compact ? '' : 'pt-24 md:pt-32']} aria-labelledby="skills-title">
+  <div class="container-x">
+    <SectionHeader host={cast.host} index={index} kind="view" label={label} title={title} id="skills-title" />
+    <div class="grid grid-cols-1 gap-px overflow-hidden rounded-[1.25rem] border border-line bg-line sm:grid-cols-2 lg:grid-cols-3">
+      {
+        groups.map(([group, list], i) => (
+          <div class="bg-ink-950 p-6 md:p-7" data-reveal style={`--reveal-delay:${(i % 3) * 60}ms`}>
+            <h3 class="mb-4 flex items-center gap-2.5 font-mono text-xs tracking-wider text-fg-muted uppercase">
+              <span class={`size-2 rounded-[2px] ${accents[i % accents.length]}`} aria-hidden="true" />
+              {group}
+            </h3>
+            <ul class="flex flex-wrap gap-1.5">
+              {list.map((s) => (
+                <li class="tag">{s}</li>
+              ))}
+            </ul>
+          </div>
+        ))
+      }
+    </div>
+  </div>
+</section>