update presentations and added resilience subpage

src/App.tsx

@@ -7,6 +7,7 @@ import { Contact } from "@/routes/Contact"
 import { Board } from "./routes/Board"
 import { Inbox } from "./routes/Inbox"
 import { Presentations } from "./routes/Presentations"
+import { Resilience } from "./routes/Resilience"
 import { createRoot } from "react-dom/client"
 import { DailyProvider } from "@daily-co/daily-react"
 import Daily from "@daily-co/daily-js"
@@ -25,6 +26,7 @@ function App() {
           <Route path="/board/:slug" element={<Board />} />
           <Route path="/inbox" element={<Inbox />} />
           <Route path="/presentations" element={<Presentations />} />
+          <Route path="/presentations/resilience" element={<Resilience />} />
         </Routes>
       </BrowserRouter>
     </DailyProvider>

src/css/style.css

@@ -539,4 +539,97 @@ p:has(+ ol) {
   .presentation-embed iframe {
     height: 400px;
   }
+}
+
+/* Resilience page styles */
+.presentation-info {
+  margin-bottom: 3rem;
+  padding: 2rem;
+  background-color: #f8f9fa;
+  border-radius: 8px;
+  border-left: 4px solid #0366d6;
+}
+
+.presentation-info h1 {
+  margin-bottom: 1rem;
+  color: #24292e;
+}
+
+.presentation-info p {
+  margin-bottom: 1rem;
+  line-height: 1.6;
+}
+
+.video-clips {
+  margin-top: 3rem;
+}
+
+.video-clips h2 {
+  margin-bottom: 2rem;
+  color: #24292e;
+}
+
+.video-section {
+  margin-bottom: 3rem;
+}
+
+.video-section h3 {
+  margin-bottom: 1rem;
+  color: #24292e;
+  font-size: 1.2rem;
+}
+
+.video-container {
+  position: relative;
+  width: 100%;
+  max-width: 560px;
+  margin: 0 auto;
+}
+
+.video-container iframe {
+  width: 100%;
+  height: 315px;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.presentation-embed h2 {
+  margin-bottom: 1rem;
+  color: #24292e;
+}
+
+.presentation-meta {
+  margin-top: 3rem;
+  padding: 2rem;
+  background-color: #f8f9fa;
+  border-radius: 8px;
+  border-top: 4px solid #0366d6;
+}
+
+.presentation-meta p {
+  margin-bottom: 1rem;
+  line-height: 1.6;
+}
+
+.presentation-meta a {
+  color: #0366d6;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.presentation-meta a:hover {
+  text-decoration: underline;
+}
+
+@media (max-width: 768px) {
+  .video-container iframe {
+    height: 200px;
+  }
+  
+  .presentation-info,
+  .presentation-meta {
+    padding: 1rem;
+    margin-left: -1rem;
+    margin-right: -1rem;
+  }
 }

src/routes/Presentations.tsx

@@ -261,6 +261,31 @@ export function Presentations() {
             <span>Video coming soon</span>
           </div>
         </div>
+
+        <div className="presentation-card">
+          <h3>Building Community Resilience in an Age of Crisis</h3>
+          <p>Internet outages during crises, such as wars or environmental disasters, can disrupt communication, education, and access to vital information. Preparing for such disruptions is essential for communities and organizations operating in challenging environments.</p>
+          <div className="presentation-embed">
+            <div style={{position: "relative", paddingTop: "max(60%, 324px)", width: "100%", height: 0}}>
+              <iframe 
+                style={{position: "absolute", border: "none", width: "100%", height: "100%", left: 0, top: 0}}
+                src="https://online.fliphtml5.com/phqos/afbp/" 
+                seamless={true}
+                scrolling="no" 
+                frameBorder="0" 
+                allowTransparency={true}
+                allowFullScreen={true}
+                title="Building Community Resilience in an Age of Crisis"
+              />
+            </div>
+          </div>
+          <div className="presentation-meta">
+            <span>Presentation at re:publica conference in May 2025</span>
+            <a href="https://www.youtube.com/watch?v=rTOLk7k9Ad8" target="_blank" rel="noopener noreferrer">
+              Watch the full talk →
+            </a>
+          </div>
+        </div>
       </div>
     </main>
   )

src/routes/Resilience.tsx

@@ -0,0 +1,133 @@
+export function Resilience() {
+  return (
+    <main>
+      <header>
+        <a href="/">Jeff Emmett</a>
+      </header>
+      
+      <div className="presentation-info">
+        <h1>Building Community Resilience in an Age of Crisis</h1>
+        <p>
+          Internet outages during crises, such as wars or environmental disasters, can disrupt 
+          communication, education, and access to vital information. Preparing for such disruptions 
+          is essential for communities and organizations operating in challenging environments.
+        </p>
+        <p>
+          This presentation by Jeff Emmett and Fadia ElGharib explores strategies for building resilient communication networks 
+          and maintaining access to critical information when traditional internet infrastructure fails.
+        </p>
+      </div>
+
+      <div className="presentation-embed">
+        <h2>Full Presentation</h2>
+        <div style={{position: "relative", paddingTop: "max(60%, 324px)", width: "100%", height: 0}}>
+          <iframe 
+            style={{position: "absolute", border: "none", width: "100%", height: "100%", left: 0, top: 0}}
+            src="https://online.fliphtml5.com/phqos/afbp/" 
+            seamless={true}
+            scrolling="no" 
+            frameBorder="0" 
+            allowTransparency={true}
+            allowFullScreen={true}
+            title="Building Community Resilience in an Age of Crisis"
+          />
+        </div>
+      </div>
+
+      <div className="video-clips">
+        <h2>Video Clips</h2>
+        
+        <div className="video-section">
+          <h3>Full Talk at re:publica Conference</h3>
+          <div className="video-container">
+            <iframe 
+              width="560" 
+              height="315" 
+              src="https://www.youtube.com/embed/rTOLk7k9Ad8?si=Ye0gmEg_JhWbxS2a" 
+              title="YouTube video player" 
+              frameBorder="0" 
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+              referrerPolicy="strict-origin-when-cross-origin" 
+              allowFullScreen
+            />
+          </div>
+        </div>
+
+        <div className="video-section">
+          <h3>Clip 1: How can we mitigate crisis as a global community?</h3>
+          <div className="video-container">
+            <iframe 
+              width="560" 
+              height="315" 
+              src="https://www.youtube.com/embed/_ZVzlTzkv8Q?si=zKq2PatVXDDsC-71" 
+              title="YouTube video player" 
+              frameBorder="0" 
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+              referrerPolicy="strict-origin-when-cross-origin" 
+              allowFullScreen
+            />
+          </div>
+        </div>
+
+        <div className="video-section">
+          <h3>Clip 2: The moral imperative for collective harm reduction</h3>
+          <div className="video-container">
+            <iframe 
+              width="560" 
+              height="315" 
+              src="https://www.youtube.com/embed/sriN8AC_EKc?si=7lQS1gEHtEMXWjzD" 
+              title="YouTube video player" 
+              frameBorder="0" 
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+              referrerPolicy="strict-origin-when-cross-origin" 
+              allowFullScreen
+            />
+          </div>
+        </div>
+
+        <div className="video-section">
+          <h3>Clip 3: The need for protocols of community resilience</h3>
+          <div className="video-container">
+            <iframe 
+              width="560" 
+              height="315" 
+              src="https://www.youtube.com/embed/CufzFR_-JOg?si=kmhN39UaZskAyFCh" 
+              title="YouTube video player" 
+              frameBorder="0" 
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+              referrerPolicy="strict-origin-when-cross-origin" 
+              allowFullScreen
+            />
+          </div>
+        </div>
+
+        <div className="video-section">
+          <h3>Clip 4: Cosmo-localism and protocols of community care</h3>
+          <div className="video-container">
+            <iframe 
+              width="560" 
+              height="315" 
+              src="https://www.youtube.com/embed/IjMqssomIww?si=veLdLpGcdsyMRkey" 
+              title="YouTube video player" 
+              frameBorder="0" 
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+              referrerPolicy="strict-origin-when-cross-origin" 
+              allowFullScreen
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="presentation-meta">
+        <p>
+          <strong>Event:</strong> re:publica conference, May 2025<br />
+          <strong>Location:</strong> Berlin, Germany<br />
+          <strong>Topic:</strong> Building Community Resilience in an Age of Crisis
+        </p>
+        <p>
+          <a href="/presentations">← Back to all presentations</a>
+        </p>
+      </div>
+    </main>
+  )
+}

vercel.json

@@ -23,6 +23,10 @@
     {
       "source": "/presentations",
       "destination": "/"
+    },
+    {
+      "source": "/presentations/resilience",
+      "destination": "/"
     }
   ],
   "headers": [