feat: add speaking.html (#1)

* feat: add speaking.html

* feat: Create sessionize.css

* feat: add events to index.html

* fix: Rename speaking.html to events/speaking.html

* fix: add events to nav

* Update assets/css/sessionize.css

Co-authored-by: Copilot <[email protected]>

* Update _data/navigation.yml

Co-authored-by: Copilot <[email protected]>

* fix: Update index.html

Co-authored-by: Copilot <[email protected]>

* fix: Update events/speaking.html

Co-authored-by: Copilot <[email protected]>

---------

Co-authored-by: Copilot <[email protected]>

Author: NotAwar

_data/navigation.yml

@@ -2,3 +2,5 @@
   link: /
 - name: Socials
   link: /socials/
+- name: Events
+  link: /speaking/

assets/css/sessionize.css

@@ -0,0 +1,29 @@
+/* Sessionize styling */
+.sessionize-events-container {
+  margin: 2rem 0;
+  padding: 1rem;
+  background-color: #f5f5f5;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+
+/* These styles will apply once Sessionize loads its content */
+.sz-session {
+  margin-bottom: 1.5rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.sz-session:last-child {
+  border-bottom: none;
+}
+
+.sz-session__title {
+  font-weight: bold;
+  color: #333;
+}
+
+.sz-session__date {
+  color: #666;
+  font-style: italic;
+}

events/speaking.html

@@ -0,0 +1,17 @@
+---
+layout: default
+title: Speaking Events
+permalink: /speaking/
+---
+
+<div class="container speaking-page">
+  <h1>Want to listen to me yap?</h1>
+  
+  <p>Check out where I've been speaking and where you can catch me next!</p>
+  
+  <div class="sessionize-events-container">
+    <div id="sessionize-events">
+      <script type="text/javascript" src="https://sessionize.com/api/speaker/sessions/8zkgq232gg/1x0x3fb393x"></script>
+    </div>
+  </div>
+</div>

index.html

@@ -17,6 +17,15 @@ <h2 class="hero-subtitle" id="typewriter" data-text="{{ site.data.profile.headli
   </div>
 </div>
 
+<section class="speaking-preview">
+  <h2>Upcoming Events</h2>
+  <p>I regularly speak at conferences and events about [your topics]. Check out my <a href="/speaking/">speaking page</a> for a complete list.</p>
+  
+  <div class="sessionize-events-container">
+    <script type="text/javascript" src="https://sessionize.com/api/speaker/sessions/8zkgq232gg/0x1x3fb393x"></script>
+  </div>
+</section>
+
 <!-- Professional Experience Section -->
 <section class="experience-section">
   <div class="container">