speaking: add speaking tab with talks

.gitignore

@@ -1,3 +1,4 @@
 resources/**
 public/**
 .hugo_build.lock
+.playwright-mcp

config.toml

@@ -41,6 +41,12 @@ googleAnalytics = "G-4J888DE1QK"
         identifier = "writing"
         pageRef = "/writing/"
 
+    [[menu.main]]
+        name = "Speaking"
+        weight = 3
+        identifier = "speaking"
+        pageRef = "/speaking/"
+
 # Jobs commented out; difficult to keep updated.
 #    [[menu.main]]
 #        identifier = "jobs"

content/speaking/_index.md

@@ -0,0 +1,7 @@
+---
+title: "Speaking"
+date: 2025-06-20T00:00:00Z
+draft: false
+---
+
+A collection of talks I've given at conferences and meetups about deterministic simulation testing, database systems, and Rust.

content/speaking/eurorust-2025.md

@@ -0,0 +1,7 @@
+---
+title: "Random Seeds and State Machines"
+date: 2025-10-10T00:00:00Z
+draft: false
+event: "EuroRust 2025"
+youtube_id: "V12hHoagv-E"
+---

content/speaking/systems-distributed-2025.md

@@ -0,0 +1,8 @@
+---
+title: "DST (again) With State Machines in Rust"
+date: 2025-06-20T00:00:00Z
+draft: false
+event: "Systems Distributed '25"
+youtube_id: "k58vJle3rxU"
+start: 100
+---

layouts/speaking/list.html

@@ -0,0 +1,40 @@
+{{ define "main" }}
+    <main class="posts">
+        <h1>{{ .Title }}</h1>
+
+        {{ if .Content }}
+            <div class="content">{{ .Content }}</div>
+        {{ end }}
+
+        <ul class="talks-list">
+            {{ range sort .Data.Pages "Date" "desc" }}
+                <li class="talk-item">
+                    <div class="talk-header">
+                        <span class="talk-title">{{ .Title }}</span>
+                        <span class="talk-meta">
+                            <span class="talk-event">{{ .Params.event }}</span>
+                            <span class="talk-separator">&middot;</span>
+                            <span class="talk-date">
+                                {{ if $.Site.Params.dateformShort }}
+                                    {{ time.Format $.Site.Params.dateformShort .Date }}
+                                {{ else }}
+                                    {{ time.Format "Jan 2, 2006" .Date }}
+                                {{ end }}
+                            </span>
+                        </span>
+                    </div>
+                    <div class="video-container">
+                        <iframe
+                            src="https://www.youtube.com/embed/{{ .Params.youtube_id }}{{ with .Params.start }}?start={{ . }}{{ end }}"
+                            title="{{ .Title }}"
+                            frameborder="0"
+                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                            allowfullscreen
+                            loading="lazy">
+                        </iframe>
+                    </div>
+                </li>
+            {{ end }}
+        </ul>
+    </main>
+{{ end }}

static/css/custom.css

@@ -20,4 +20,74 @@
     max-width: 90%;
     margin: 1.75rem auto 0;
   }
+}
+
+/* Speaking page styles */
+.talks-list {
+  flex-grow: 1;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.talk-item {
+  border-bottom: 1px grey dashed;
+  padding: 1.5rem 0;
+}
+
+.talk-item:last-child {
+  border-bottom: none;
+}
+
+.talk-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.talk-title {
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+.talk-meta {
+  color: #999;
+  font-size: 0.875rem;
+  flex-shrink: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+  .talk-meta {
+    color: #b3b3bd;
+  }
+}
+
+[data-theme=dark] .talk-meta {
+  color: #b3b3bd;
+}
+
+.talk-separator {
+  margin: 0 0.4rem;
+}
+
+/* Responsive 16:9 video container */
+.video-container {
+  position: relative;
+  width: 100%;
+  padding-bottom: 56.25%;
+  height: 0;
+  overflow: hidden;
+  border-radius: 4px;
+}
+
+.video-container iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
 }