Fix CSS syntax errors and improve content

Co-authored-by: NotAwar <48431495+NotAwar@users.noreply.github.com>

Author: Copilot

assets/css/style.scss

@@ -142,7 +142,7 @@ body {
           position: relative;
 
           svg {
-            fill: var (--text-primary);
+            fill: var(--text-primary);
           }
         }
       }
@@ -274,7 +274,7 @@ a {
 
 p {
   margin-bottom: 1.5rem;
-  color: var (--text-secondary);
+  color: var(--text-secondary);
 }
 
 // Hero Section
@@ -713,7 +713,7 @@ p {
     background-color: var(--black-tertiary);
     padding: 30px;
     border-radius: 10px;
-    box-shadow: 0 5px 15px var (--shadow-color);
+    box-shadow: 0 5px 15px var(--shadow-color);
     text-align: center;
     transition: var(--transition);
     border: 1px solid var(--border-color);

assets/js/main.js

@@ -263,7 +263,7 @@ document.addEventListener('DOMContentLoaded', function() {
     `);
 });
 
-// CSS for ripple effect
+// CSS for ripple effect and animations
 const style = document.createElement('style');
 style.textContent = `
     .btn {
@@ -280,33 +280,54 @@ style.textContent = `
         pointer-events: none;
     }
     
-    // Initialize typing animation for hero subtitle
-    function initTypewriter() {
-        const typewriterElement = document.getElementById('typewriter');
-        if (!typewriterElement) return;
-        
-        // Get the title from the data attribute or fallback
-        const text = typewriterElement.getAttribute('data-text') || "Senior Cloud Engineer & Cloud Native Competency Lead";
-        
-        // Set initial state
-        typewriterElement.textContent = '';
-        typewriterElement.style.width = '0';
-        
-        // Add typing class after a short delay to prevent layout shift
-        setTimeout(() => {
-            typewriterElement.textContent = text;
-            typewriterElement.classList.add('typing');
-        }, 1000);
-    }
-
-    // Initialize typewriter effect
-    initTypewriter();
-
     @keyframes ripple-animation {
         to {
             transform: scale(4);
             opacity: 0;
         }
     }
+    
+    @keyframes particleFloat {
+        to {
+            transform: translateY(-100px);
+            opacity: 0;
+        }
+    }
+    
+    .cursor-trail {
+        position: fixed;
+        width: 6px;
+        height: 6px;
+        background: var(--gold-primary);
+        border-radius: 50%;
+        pointer-events: none;
+        z-index: 9999;
+        animation: trailFade 0.8s ease-out forwards;
+    }
+    
+    @keyframes trailFade {
+        to {
+            opacity: 0;
+            transform: scale(0);
+        }
+    }
+    
+    .particle {
+        position: absolute;
+        width: 3px;
+        height: 3px;
+        background: var(--gold-primary);
+        border-radius: 50%;
+        animation: particleFloat 1.5s ease-out forwards;
+    }
+    
+    .konami-activated {
+        animation: rainbow 2s linear infinite;
+    }
+    
+    @keyframes rainbow {
+        0% { filter: hue-rotate(0deg); }
+        100% { filter: hue-rotate(360deg); }
+    }
 `;
 document.head.appendChild(style);

events/speaking.html

@@ -5,9 +5,9 @@
 ---
 
 <div class="container speaking-page">
-  <h1>Want to listen to me yap?</h1>
+  <h1>Speaking Engagements</h1>
 
-  <p>Check out where I've been speaking and where you can catch me next!</p>
+  <p>I enjoy sharing knowledge about cloud-native technologies, Kubernetes, and DevOps practices. Here's where I've spoken and upcoming events where you can catch my talks!</p>
 
   <div class="sessionize-events-container">
     <div id="sessionize-events">

index.html

@@ -19,7 +19,7 @@ <h2 class="hero-subtitle" id="typewriter" data-text="{{ site.data.profile.headli
 
 <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>
+  <p>I regularly speak at conferences and events about cloud-native technologies, Kubernetes, and DevOps practices. 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>