April 2026

src/App.tsx

@@ -6,8 +6,8 @@ import "reveal.js/dist/reveal.css";
 import "./styles/index.scss";
 import Splash from "./slides/splash";
 import Thanks from "./slides/thanks";
-import Agenda202603 from "./slides/agenda-2026-03";
 import Contribute from "./slides/contribute";
+import Agenda202604 from "./slides/agenda-2026-04";
 
 function App() {
   const deckDivRef = useRef<HTMLDivElement>(null); // reference to deck container div
@@ -47,7 +47,7 @@ function App() {
     <div className="reveal" ref={deckDivRef}>
       <div className="slides">
         <Splash />
-        <Agenda202603 />
+        <Agenda202604 />
         <Contribute />
         <Thanks />
       </div>

src/slides/agenda-2026-04.tsx

@@ -0,0 +1,23 @@
+const Agenda202604 = () => {
+  return (
+    <section>
+      <div className="agendaWrapper">
+        <div className="agenda">
+          <img src="https://c.tenor.com/LhIysipvdrIAAAAd/tenor.gif" alt="" />
+          <h2>Agenda</h2>
+          <ol>
+            <li>Welcome!</li>
+            <li>Shirts!</li>
+            <li>🌩️ From Levels to Learning: Building an ML System for Game Difficulty</li>
+            <li>🌩️ Caging Chaos: Building Deterministic AI Chatbots with Effect</li>
+            <li>🌩️ A Charting library for Agents: Building Spec-Driven Visualizations with OpenChart</li>
+            <li>🌩️ Teaching Your AI to See: Validating agentic UI development flows</li>
+            <li>Wrap up</li>
+          </ol>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Agenda202604;

src/styles/index.scss

@@ -22,6 +22,11 @@ sl-qr-code {
 .agenda {
   color: $black;
   --r-link-color: var(--r-link-color-dark);
+
+  img {
+    display: block;
+    margin: 16px auto;
+  }
 }
 
 .quadrants {