Review and improve portfolio site: Fix critical bugs, enhance content, and optimize performance (#2)

* Initial plan

* Fix CSS syntax errors and improve content

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

* Improve resume structure, add navigation, and optimize JavaScript performance

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

* Enhance speaking page with topic list and styling

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

* Update _includes/head.html

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

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: NotAwar <[email protected]>
Co-authored-by: Copilot <[email protected]>

Author: 3 people

_data/navigation.yml

@@ -1,5 +1,7 @@
 - name: Home
   link: /
+- name: CV
+  link: /cv/
 - name: Socials
   link: /socials/
 - name: Events

_includes/head.html

@@ -18,8 +18,12 @@
   <meta name="color-scheme" content="dark">
   <meta name="theme-color" content="#121212">
 
+  <!-- Accessibility -->
+  
   <!-- CSS -->
   <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
 
   <!-- Favicon -->

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

@@ -89,7 +89,9 @@ document.addEventListener('DOMContentLoaded', function() {
             this.appendChild(ripple);
 
             setTimeout(() => {
-                ripple.remove();
+                if (ripple.parentNode) {
+                    ripple.remove();
+                }
             }, 600);
         });
     });
@@ -169,7 +171,9 @@ document.addEventListener('DOMContentLoaded', function() {
         document.body.appendChild(trail);
 
         setTimeout(() => {
-            trail.remove();
+            if (trail.parentNode) {
+                trail.remove();
+            }
         }, 800);
     }
 
@@ -197,7 +201,9 @@ document.addEventListener('DOMContentLoaded', function() {
         }
 
         setTimeout(() => {
-            particleContainer.remove();
+            if (particleContainer.parentNode) {
+                particleContainer.remove();
+            }
         }, 1500);
     }
 
@@ -237,7 +243,11 @@ document.addEventListener('DOMContentLoaded', function() {
                     particle.style.animation = 'particleFloat 3s ease-out forwards';
                     document.body.appendChild(particle);
 
-                    setTimeout(() => particle.remove(), 3000);
+                    setTimeout(() => {
+                        if (particle.parentNode) {
+                            particle.remove();
+                        }
+                    }, 3000);
                 }, i * 50);
             }
 
@@ -263,7 +273,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 +290,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,13 +5,70 @@
 ---
 
 <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="speaking-topics">
+    <h3>Speaking Topics</h3>
+    <ul>
+      <li>🚀 Cloud-Native Architecture & Best Practices</li>
+      <li>☸️ Kubernetes Implementation & Management</li>
+      <li>🛠️ DevOps Automation & CI/CD Pipelines</li>
+      <li>☁️ Azure Infrastructure & Cloud Migration</li>
+      <li>📊 Monitoring & Observability in Cloud Environments</li>
+    </ul>
+  </div>
 
   <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>
+
+<style>
+.speaking-page {
+  padding: 40px 0;
+  min-height: 60vh;
+}
+
+.speaking-topics {
+  background: var(--black-secondary);
+  border-radius: 10px;
+  padding: 30px;
+  margin: 40px 0;
+  border: 1px solid var(--border-color);
+}
+
+.speaking-topics h3 {
+  color: var(--gold-primary);
+  margin: 0 0 20px;
+  font-size: 1.4rem;
+}
+
+.speaking-topics ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.speaking-topics li {
+  padding: 10px 0;
+  border-bottom: 1px solid var(--border-color);
+  color: var(--text-secondary);
+  font-size: 1.1rem;
+}
+
+.speaking-topics li:last-child {
+  border-bottom: none;
+}
+
+.sessionize-events-container {
+  margin-top: 40px;
+  padding: 30px;
+  background: var(--black-secondary);
+  border-radius: 10px;
+  border: 1px solid var(--border-color);
+}
+</style>

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>

resume.html

@@ -18,11 +18,26 @@ <h2>Professional Experience</h2>
       {% for job in site.data.profile.experience %}
       <div class="experience-item">
         <div class="experience-header">
-          <h3>{{ job.title }}</h3>
-          <span class="date">{{ job.startDate }} - {{ job.endDate }}</span>
+          <h3>{{ job.position }}</h3>
+          <span class="date">{{ job.period }}</span>
         </div>
-        <p class="company">{{ job.company }}{% if job.location %}, {{ job.location }}{% endif %}</p>
+        <p class="company">{{ job.company }}</p>
         <p class="description">{{ job.description }}</p>
+        {% if job.achievements %}
+        <ul class="achievements">
+          {% for achievement in job.achievements %}
+          <li>{{ achievement }}</li>
+          {% endfor %}
+        </ul>
+        {% endif %}
+        {% if job.technologies %}
+        <div class="technologies">
+          <strong>Technologies:</strong>
+          {% for tech in job.technologies %}
+          <span class="tech-tag">{{ tech }}</span>
+          {% endfor %}
+        </div>
+        {% endif %}
       </div>
       {% endfor %}
     </section>
@@ -182,6 +197,37 @@ <h2>Current Focus</h2>
   margin: 10px 0 0;
 }
 
+.achievements {
+  margin: 15px 0;
+  padding-left: 20px;
+}
+
+.achievements li {
+  color: var(--text-secondary);
+  margin: 5px 0;
+  line-height: 1.5;
+}
+
+.technologies {
+  margin: 15px 0 0;
+}
+
+.technologies strong {
+  color: var(--text-primary);
+  margin-right: 10px;
+}
+
+.tech-tag {
+  background: linear-gradient(135deg, var(--gold-primary), var(--gold-secondary));
+  color: var(--black-primary);
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  margin: 0 5px 5px 0;
+  display: inline-block;
+}
+
 .skills-categories {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));