From 75d58295966953eea6c510c359d5265a7a7ca2c7 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Tue, 29 Jul 2025 12:41:15 -0400
Subject: [PATCH] update presentations and added resilience subpage

---
 src/App.tsx                  |   2 +
 src/css/style.css            |  93 ++++++++++++++++++++++++
 src/routes/Presentations.tsx |  25 +++++++
 src/routes/Resilience.tsx    | 133 +++++++++++++++++++++++++++++++++++
 vercel.json                  |   4 ++
 5 files changed, 257 insertions(+)
 create mode 100644 src/routes/Resilience.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 885564f..a2c3302 100644
--- a/src/App.tsx
+++ b/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>
diff --git a/src/css/style.css b/src/css/style.css
index 4a59c0d..429f403 100644
--- a/src/css/style.css
+++ b/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;
+  }
 }
\ No newline at end of file
diff --git a/src/routes/Presentations.tsx b/src/routes/Presentations.tsx
index 2ed24aa..d331974 100644
--- a/src/routes/Presentations.tsx
+++ b/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>
   )
diff --git a/src/routes/Resilience.tsx b/src/routes/Resilience.tsx
new file mode 100644
index 0000000..6f5bc9c
--- /dev/null
+++ b/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>
+  )
+}
\ No newline at end of file
diff --git a/vercel.json b/vercel.json
index 2ad6985..3d5b463 100644
--- a/vercel.json
+++ b/vercel.json
@@ -23,6 +23,10 @@
     {
       "source": "/presentations",
       "destination": "/"
+    },
+    {
+      "source": "/presentations/resilience",
+      "destination": "/"
     }
   ],
   "headers": [