Merge presentations-framework: Layout fixes for projector resolutions

Author: sanity

hugo-site/content/presentations/2025-02-06-freenet-lives.md

@@ -12,6 +12,8 @@ slides:
   # 3. The Hard Problems We Solved
   - hard-problems/small-world
   - hard-problems/real-time-sync
+  - hard-problems/sync-demo
+  - hard-problems/propagation-demo
   - hard-problems/no-infrastructure
   # 4. Live Demo
   - demo/dashboard
@@ -26,3 +28,5 @@ slides:
   # 8. Questions
   - common/questions
 ---
+
+

hugo-site/static/images/river-screenshot-dark.png

@@ -1,38 +1,35 @@
 <section style="display: flex; flex-direction: column; height: 100vh;">
   <h2 style="flex-shrink: 0; margin-bottom: 0.3em;">AI-Accelerated Development</h2>
 
-  <div style="flex: 1; display: flex; flex-direction: column; justify-content: center;">
-    <p style="font-size: 1.3em; margin-bottom: 1em; color: rgba(255,255,255,0.9);">
-      We need to rebuild every internet service, decentralized.
+  <div style="flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;">
+    <p style="font-size: 1.1em; margin-bottom: 0.5em; color: rgba(255,255,255,0.9); text-align: center;">
+      Rebuild every internet service, decentralized.
     </p>
-    <p style="font-size: 1.1em; margin-bottom: 1.5em; color: rgba(255,255,255,0.7);">
+    <p style="font-size: 0.95em; margin-bottom: 1em; color: rgba(255,255,255,0.7); text-align: center;">
       That's a lot of work. <span style="color: #43e97b;">AI changes the economics.</span>
     </p>
 
-    <div style="display: flex; gap: 2em; margin-top: 1em;">
+    <div style="display: flex; gap: 1.5em; max-width: 90%;">
       <!-- dapp-builder box -->
-      <div style="flex: 1; background: rgba(67,233,123,0.1); border: 2px solid rgba(67,233,123,0.4); border-radius: 12px; padding: 1.2em;">
-        <p style="font-size: 1em; font-weight: 600; color: #43e97b; margin-bottom: 0.5em;">dapp-builder skill</p>
-        <ul style="font-size: 0.85em; color: rgba(255,255,255,0.8);">
-          <li>Claude Code can scaffold Freenet apps</li>
-          <li>Follows River architecture patterns</li>
-          <li>Contract → Delegate → UI workflow</li>
+      <div style="flex: 1; background: rgba(67,233,123,0.1); border: 2px solid rgba(67,233,123,0.4); border-radius: 12px; padding: 1em;">
+        <p style="font-size: 0.9em; font-weight: 600; color: #43e97b; margin-bottom: 0.4em;">dapp-builder skill</p>
+        <ul style="font-size: 0.7em; color: rgba(255,255,255,0.8); margin: 0; padding-left: 1em;">
+          <li>Claude scaffolds Freenet apps</li>
+          <li>River architecture patterns</li>
+          <li>Contract → Delegate → UI</li>
         </ul>
-        <p style="font-size: 0.8em; color: rgba(255,255,255,0.5); margin-top: 0.8em;">
-          github.com/freenet/freenet-agent-skills
-        </p>
       </div>
 
       <!-- AI slop box -->
-      <div style="flex: 1; background: rgba(79,172,254,0.1); border: 2px solid rgba(79,172,254,0.4); border-radius: 12px; padding: 1.2em;">
-        <p style="font-size: 1em; font-weight: 600; color: #4facfe; margin-bottom: 0.5em;">"But isn't AI code garbage?"</p>
-        <ul style="font-size: 0.85em; color: rgba(255,255,255,0.8);">
-          <li><em>Unverified</em> code is garbage - human or AI</li>
-          <li>Solution: rigorous CI, comprehensive tests</li>
-          <li>AI writes first drafts, tests verify, humans review</li>
+      <div style="flex: 1; background: rgba(79,172,254,0.1); border: 2px solid rgba(79,172,254,0.4); border-radius: 12px; padding: 1em;">
+        <p style="font-size: 0.9em; font-weight: 600; color: #4facfe; margin-bottom: 0.4em;">"But isn't AI code garbage?"</p>
+        <ul style="font-size: 0.7em; color: rgba(255,255,255,0.8); margin: 0; padding-left: 1em;">
+          <li><em>Unverified</em> code is garbage</li>
+          <li>Solution: CI + comprehensive tests</li>
+          <li>AI drafts, tests verify, humans review</li>
         </ul>
-        <p style="font-size: 0.85em; color: #4facfe; margin-top: 0.8em; font-style: italic;">
-          Quality bar stays the same. Velocity increases.
+        <p style="font-size: 0.7em; color: #4facfe; margin-top: 0.5em; font-style: italic;">
+          Same quality bar. Higher velocity.
         </p>
       </div>
     </div>

hugo-site/static/slides/ai/accelerated-development.html

@@ -1,37 +1,33 @@
 <section style="display: flex; flex-direction: column; height: 100vh;">
   <h2 style="flex-shrink: 0; margin-bottom: 0.3em;">Freenet for AI Agents</h2>
 
-  <div style="flex: 1; display: flex; flex-direction: column; justify-content: center;">
-    <p style="font-size: 1.2em; margin-bottom: 1.2em; color: rgba(255,255,255,0.9);">
+  <div style="flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;">
+    <p style="font-size: 1em; margin-bottom: 0.8em; color: rgba(255,255,255,0.9); text-align: center;">
       AI agents can deploy services <span style="color: #43e97b;">autonomously</span>
     </p>
 
-    <div style="display: flex; gap: 3em; align-items: flex-start;">
+    <div style="display: flex; gap: 1.5em; align-items: flex-start; max-width: 90%;">
       <!-- Benefits list -->
       <div style="flex: 1;">
-        <ul style="font-size: 0.95em; line-height: 1.8;">
-          <li><strong style="color: #43e97b;">No infrastructure to provision</strong><br>
-            <span style="color: rgba(255,255,255,0.6); font-size: 0.85em;">No AWS, no API keys, no OAuth</span></li>
-          <li><strong style="color: #43e97b;">Self-describing contracts</strong><br>
-            <span style="color: rgba(255,255,255,0.6); font-size: 0.85em;">The code IS the interface (hash = key)</span></li>
-          <li><strong style="color: #43e97b;">Real-time by default</strong><br>
-            <span style="color: rgba(255,255,255,0.6); font-size: 0.85em;">Subscribe, get updates, no polling</span></li>
-          <li><strong style="color: #43e97b;">Permissionless deployment</strong><br>
-            <span style="color: rgba(255,255,255,0.6); font-size: 0.85em;">No terms of service, no rate limits</span></li>
+        <ul style="font-size: 0.75em; line-height: 1.6; margin: 0; padding-left: 1em;">
+          <li><strong style="color: #43e97b;">No infrastructure</strong> - no AWS, no keys</li>
+          <li><strong style="color: #43e97b;">Self-describing</strong> - code IS interface</li>
+          <li><strong style="color: #43e97b;">Real-time</strong> - subscribe, get updates</li>
+          <li><strong style="color: #43e97b;">Permissionless</strong> - no ToS, no limits</li>
         </ul>
       </div>
 
       <!-- Vision box -->
-      <div style="flex: 1; background: linear-gradient(135deg, rgba(67,233,123,0.15), rgba(79,172,254,0.15)); border: 2px solid rgba(67,233,123,0.4); border-radius: 12px; padding: 1.5em;">
-        <p style="font-size: 1em; font-weight: 600; color: #43e97b; margin-bottom: 0.8em;">The Vision</p>
-        <p style="font-size: 0.95em; color: rgba(255,255,255,0.85); line-height: 1.6;">
-          An AI agent deploys a contract, advertises its hash, and other agents can interact with it <em>immediately</em>.
+      <div style="flex: 1; background: linear-gradient(135deg, rgba(67,233,123,0.15), rgba(79,172,254,0.15)); border: 2px solid rgba(67,233,123,0.4); border-radius: 12px; padding: 0.8em;">
+        <p style="font-size: 0.8em; font-weight: 600; color: #43e97b; margin-bottom: 0.4em;">The Vision</p>
+        <p style="font-size: 0.7em; color: rgba(255,255,255,0.85); line-height: 1.5; margin: 0;">
+          Deploy a contract, advertise its hash, other agents interact <em>immediately</em>.
         </p>
-        <p style="font-size: 0.95em; color: rgba(255,255,255,0.85); line-height: 1.6; margin-top: 0.8em;">
-          No servers. No documentation. No waiting for approval.
+        <p style="font-size: 0.7em; color: rgba(255,255,255,0.85); line-height: 1.5; margin-top: 0.4em;">
+          No servers. No docs. No approval.
         </p>
-        <p style="font-size: 0.95em; color: #4facfe; margin-top: 1em; font-weight: 500;">
-          The contract code IS the specification.
+        <p style="font-size: 0.7em; color: #4facfe; margin-top: 0.5em; font-weight: 500;">
+          Contract code IS the spec.
         </p>
       </div>
     </div>

hugo-site/static/slides/ai/freenet-for-agents.html

@@ -1,41 +1,41 @@
 <section style="display: flex; flex-direction: column; height: 100vh;">
   <h2 style="flex-shrink: 0; margin-bottom: 0.5em;">Get Involved</h2>
 
-  <div style="flex: 1; display: flex; flex-direction: column; justify-content: center;">
-    <div style="display: flex; gap: 2em; justify-content: center;">
+  <div style="flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;">
+    <div style="display: flex; gap: 1em; justify-content: center; max-width: 95%;">
 
       <!-- Run a Peer -->
-      <div style="flex: 1; max-width: 280px; background: rgba(67,233,123,0.1); border: 2px solid rgba(67,233,123,0.4); border-radius: 12px; padding: 1.5em; text-align: center;">
-        <div style="font-size: 2.5em; margin-bottom: 0.3em;">🖥️</div>
-        <p style="font-size: 1.1em; font-weight: 600; color: #43e97b; margin-bottom: 0.5em;">Run a Peer</p>
-        <p style="font-size: 0.85em; color: rgba(255,255,255,0.7); margin-bottom: 0.8em;">Join the network</p>
-        <code style="background: rgba(0,0,0,0.3); padding: 0.3em 0.8em; border-radius: 4px; font-size: 0.9em; color: #43e97b;">cargo install freenet</code>
+      <div style="flex: 1; max-width: 220px; background: rgba(67,233,123,0.1); border: 2px solid rgba(67,233,123,0.4); border-radius: 10px; padding: 1em; text-align: center;">
+        <div style="font-size: 2em; margin-bottom: 0.2em;">🖥️</div>
+        <p style="font-size: 0.9em; font-weight: 600; color: #43e97b; margin-bottom: 0.3em;">Run a Peer</p>
+        <p style="font-size: 0.7em; color: rgba(255,255,255,0.7); margin-bottom: 0.5em;">Join the network</p>
+        <code style="background: rgba(0,0,0,0.3); padding: 0.2em 0.5em; border-radius: 4px; font-size: 0.7em; color: #43e97b;">cargo install freenet</code>
       </div>
 
       <!-- Build Something -->
-      <div style="flex: 1; max-width: 280px; background: rgba(79,172,254,0.1); border: 2px solid rgba(79,172,254,0.4); border-radius: 12px; padding: 1.5em; text-align: center;">
-        <div style="font-size: 2.5em; margin-bottom: 0.3em;">🛠️</div>
-        <p style="font-size: 1.1em; font-weight: 600; color: #4facfe; margin-bottom: 0.5em;">Build Something</p>
-        <p style="font-size: 0.85em; color: rgba(255,255,255,0.7); margin-bottom: 0.8em;">Use River as a template</p>
-        <code style="background: rgba(0,0,0,0.3); padding: 0.3em 0.8em; border-radius: 4px; font-size: 0.85em; color: #4facfe;">github.com/freenet/river</code>
+      <div style="flex: 1; max-width: 220px; background: rgba(79,172,254,0.1); border: 2px solid rgba(79,172,254,0.4); border-radius: 10px; padding: 1em; text-align: center;">
+        <div style="font-size: 2em; margin-bottom: 0.2em;">🛠️</div>
+        <p style="font-size: 0.9em; font-weight: 600; color: #4facfe; margin-bottom: 0.3em;">Build Something</p>
+        <p style="font-size: 0.7em; color: rgba(255,255,255,0.7); margin-bottom: 0.5em;">River as template</p>
+        <code style="background: rgba(0,0,0,0.3); padding: 0.2em 0.5em; border-radius: 4px; font-size: 0.65em; color: #4facfe;">github.com/freenet/river</code>
       </div>
 
       <!-- AI Skills -->
-      <div style="flex: 1; max-width: 280px; background: rgba(168,85,247,0.1); border: 2px solid rgba(168,85,247,0.4); border-radius: 12px; padding: 1.5em; text-align: center;">
-        <div style="font-size: 2.5em; margin-bottom: 0.3em;">🤖</div>
-        <p style="font-size: 1.1em; font-weight: 600; color: #a855f7; margin-bottom: 0.5em;">Use AI</p>
-        <p style="font-size: 0.85em; color: rgba(255,255,255,0.7); margin-bottom: 0.8em;">dapp-builder skill for Claude</p>
-        <code style="background: rgba(0,0,0,0.3); padding: 0.3em 0.6em; border-radius: 4px; font-size: 0.75em; color: #a855f7;">freenet/freenet-agent-skills</code>
+      <div style="flex: 1; max-width: 220px; background: rgba(168,85,247,0.1); border: 2px solid rgba(168,85,247,0.4); border-radius: 10px; padding: 1em; text-align: center;">
+        <div style="font-size: 2em; margin-bottom: 0.2em;">🤖</div>
+        <p style="font-size: 0.9em; font-weight: 600; color: #a855f7; margin-bottom: 0.3em;">Use AI</p>
+        <p style="font-size: 0.7em; color: rgba(255,255,255,0.7); margin-bottom: 0.5em;">dapp-builder skill</p>
+        <code style="background: rgba(0,0,0,0.3); padding: 0.2em 0.5em; border-radius: 4px; font-size: 0.6em; color: #a855f7;">freenet-agent-skills</code>
       </div>
 
     </div>
 
     <!-- Links -->
-    <div style="margin-top: 2em; text-align: center;">
-      <p style="font-size: 0.95em; color: rgba(255,255,255,0.6);">
-        <a href="https://freenet.org" style="color: #4facfe; margin: 0 1em;">freenet.org</a>
-        <a href="https://github.com/freenet" style="color: #4facfe; margin: 0 1em;">GitHub</a>
-        <a href="https://matrix.to/#/#freenet:matrix.org" style="color: #4facfe; margin: 0 1em;">Matrix Chat</a>
+    <div style="margin-top: 1.5em; text-align: center;">
+      <p style="font-size: 0.8em; color: rgba(255,255,255,0.6);">
+        <a href="https://freenet.org" style="color: #4facfe; margin: 0 0.8em;">freenet.org</a>
+        <a href="https://github.com/freenet" style="color: #4facfe; margin: 0 0.8em;">GitHub</a>
+        <a href="https://matrix.to/#/#freenet:matrix.org" style="color: #4facfe; margin: 0 0.8em;">Matrix</a>
       </p>
     </div>
   </div>

hugo-site/static/slides/building/components.svg

@@ -1,7 +1,7 @@
 <section style="display: flex; flex-direction: column; height: 100vh; justify-content: center; align-items: center; text-align: center;">
   <h1 style="font-size: 3em; background: linear-gradient(90deg, #4facfe, #43e97b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">Questions?</h1>
 
-  <div style="margin-top: 2em; font-size: 1.1em;">
+  <div style="margin-top: 2em; font-size: 0.95em;">
     <p style="margin: 0.8em 0;">
       <span style="color: #4facfe;">🌐</span>
       <a href="https://freenet.org" style="color: rgba(255,255,255,0.8); margin-left: 0.5em;">freenet.org</a>

hugo-site/static/slides/common/call-to-action.html

@@ -2,11 +2,8 @@
   <h2 style="flex-shrink: 0; margin-bottom: 0.3em;">Live Demo: Network Dashboard</h2>
 
   <div style="flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 0;">
-    <div style="position: relative; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 30px rgba(67,233,123,0.3);">
+    <div style="border-radius: 8px; overflow: hidden; box-shadow: 0 4px 30px rgba(67,233,123,0.3);">
       <img src="/images/dashboard-topology.png" alt="Freenet Network Topology" style="max-height: calc(100vh - 180px); max-width: 90vw; display: block;">
-      <div style="position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.7); padding: 5px 12px; border-radius: 4px; font-size: 0.7em; color: #43e97b;">
-        📷 Backup screenshot
-      </div>
     </div>
 
     <p style="margin-top: 0.8em; font-size: 0.9em; color: rgba(255,255,255,0.7);">