diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
new file mode 100644
index 0000000..efeec45
Binary files /dev/null and b/public/android-chrome-192x192.png differ
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
new file mode 100644
index 0000000..c22f7b4
Binary files /dev/null and b/public/android-chrome-512x512.png differ
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
new file mode 100644
index 0000000..41de665
Binary files /dev/null and b/public/apple-touch-icon.png differ
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
new file mode 100644
index 0000000..9e3c703
Binary files /dev/null and b/public/favicon-16x16.png differ
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
new file mode 100644
index 0000000..4048abb
Binary files /dev/null and b/public/favicon-32x32.png differ
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..35dac89
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/favicon.svg b/public/favicon.svg
deleted file mode 100644
index f157bd1..0000000
--- a/public/favicon.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
-    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
-    <style>
-        path { fill: #000; }
-        @media (prefers-color-scheme: dark) {
-            path { fill: #FFF; }
-        }
-    </style>
-</svg>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 31cb012..92311ad 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -23,14 +23,15 @@ const categories = [
       { name: 'Docker Compose', path: '/resources/docker-compose' },
       { name: 'Configuration Files', path: '/resources/config-files' },
       { name: 'Infrastructure Code', path: '/resources/iac' },
-      { name: 'Tutorials', path: '/resources/tutorials' }
+      { name: 'Tutorials', path: '/resources/tutorials' },
+      { name: 'All Resources', path: '/resources' } // Added Resources link
     ]
   },
   {
     title: 'Projects',
     links: [
       { name: 'HomeLab Setup', path: '/homelab' },
-      { name: 'Tech Stack', url: 'https://argobox.com/#services' },
+      { name: 'Tech Stack', path: '/tech-stack' }, // Updated Tech Stack link
       { name: 'Github Repos', path: '/projects/github' },
       { name: 'Live Services', path: '/projects/services' },
       { name: 'Obsidian Templates', path: '/projects/obsidian' }
@@ -47,12 +48,12 @@ const socialLinks = [
   },
   { 
     name: 'Twitter', 
-    url: 'https://twitter.com/yourusername', 
+    url: 'https://www.x.com/danlaforce', // Updated Twitter URL
     icon: '<path d="M23.643 4.937c-.835.37-1.732.62-2.675.733a4.67 4.67 0 0 0 2.048-2.578 9.3 9.3 0 0 1-2.958 1.13 4.66 4.66 0 0 0-7.938 4.25 13.229 13.229 0 0 1-9.602-4.868c-.4.69-.63 1.49-.63 2.342A4.66 4.66 0 0 0 3.96 9.824a4.647 4.647 0 0 1-2.11-.583v.06a4.66 4.66 0 0 0 3.737 4.568 4.692 4.692 0 0 1-2.104.08 4.661 4.661 0 0 0 4.352 3.234 9.348 9.348 0 0 1-5.786 1.995 9.5 9.5 0 0 1-1.112-.065 13.175 13.175 0 0 0 7.14 2.093c8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602a9.47 9.47 0 0 0 2.323-2.41l.002-.003z" />'
   },
   { 
     name: 'LinkedIn', 
-    url: 'https://linkedin.com/in/yourusername', 
+    url: 'https://www.linkedin.com/in/danlaforce', // Updated LinkedIn URL
     icon: '<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.225 0z" />'
   },
   { 
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 8ada813..a7e26fb 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -79,6 +79,9 @@ const {
     
     <!-- Favicon -->
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+&lt;link rel="icon" type="image/x-icon" href="/favicon.ico" /&gt;
+    &lt;link rel="apple-touch-icon" href="/apple-touch-icon.png" /&gt;
+    &lt;link rel="manifest" href="/site.webmanifest" /&gt;
     
     <!-- Theme CSS -->
     <link rel="stylesheet" href="/src/styles/theme.css" />
diff --git a/src/pages/homelab.astro b/src/pages/homelab.astro
index 79cc4e2..8e63406 100644
--- a/src/pages/homelab.astro
+++ b/src/pages/homelab.astro
@@ -1,14 +1,455 @@
+align-items: center;
+    justify-content: center;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+    transition: all 0.3s ease;
+  }
+
+  .diagram-node:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+    z-index: 10;
+    border-color: var(--primary, #3b82f6);
+  }
+
+  .diagram-node::before {
+    content: '';
+    position: absolute;
+    width: 150%;
+    height: 150%;
+    background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, transparent 70%);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+
+  .diagram-node:hover::before {
+    opacity: 1;
+  }
+
+  .diagram-node.gateway {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
+    border-color: var(--warning, #f59e0b);
+  }
+
+  .diagram-node.firewall {
+    grid-column: 2 / 3;
+    grid-row: 1 / 2;
+    border-color: var(--error, #ef4444);
+  }
+
+  .diagram-node.proxmox {
+    grid-column: 3 / 5;
+    grid-row: 1 / 2;
+    border-color: var(--primary, #3b82f6);
+  }
+
+  .diagram-node.kubernetes {
+    grid-column: 2 / 4;
+    grid-row: 2 / 3;
+    border-color: var(--accent, #6366f1);
+  }
+
+  .diagram-node.storage {
+    grid-column: 1 / 2;
+    grid-row: 2 / 3;
+    border-color: var(--success, #10b981);
+  }
+
+  .diagram-node.monitoring {
+    grid-column: 4 / 5;
+    grid-row: 2 / 3;
+    border-color: var(--primary, #3b82f6);
+  }
+
+  .diagram-node.services {
+    grid-column: 1 / 5;
+    grid-row: 3 / 4;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    background-color: rgba(15, 23, 42, 0.3);
+  }
+
+  .service-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    width: 80px;
+    height: 80px;
+    margin: 0.5rem;
+    transition: all 0.3s ease;
+  }
+
+  .service-icon:hover {
+    transform: scale(1.1);
+  }
+
+  .service-icon i {
+    font-size: 1.75rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .service-icon span {
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+  }
+
+  /* Connection lines for architecture diagram */
+  .connection-line {
+    position: absolute;
+    background-color: var(--border, rgba(148, 163, 184, 0.1));
+    transition: all 0.3s ease;
+    z-index: 5;
+  }
+
+  .connection-line.horizontal {
+    height: 2px;
+  }
+
+  .connection-line.vertical {
+    width: 2px;
+  }
+
+  .connection-line.active {
+    background-color: var(--accent, #6366f1);
+    box-shadow: 0 0 10px var(--accent, #6366f1);
+  }
+
+  /* Enhanced Service Items */
+  .service-item {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .service-item::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 0;
+    background: linear-gradient(90deg, var(--accent, #6366f1) 0%, transparent 100%);
+    opacity: 0.1;
+    transition: width 0.3s ease;
+  }
+
+  .service-item.available:hover::before {
+    width: 100%;
+  }
+
+  /* Enhanced Card Hover Effects */
+  .tech-card {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .tech-card::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 3px;
+    background: linear-gradient(90deg, var(--primary, #3b82f6), var(--accent, #6366f1));
+    transform: scaleX(0);
+    transform-origin: right;
+    transition: transform 0.5s ease;
+  }
+
+  .tech-card:hover::after {
+    transform: scaleX(1);
+    transform-origin: left;
+  }
+
+  /* Enhanced Project Cards */
+  .project-card {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .project-card::before {
+    content: '';
+    position: absolute;
+    top: -50px;
+    right: -50px;
+    width: 100px;
+    height: 100px;
+    background: linear-gradient(45deg, var(--primary, #3b82f6), var(--accent, #6366f1));
+    transform: rotate(45deg);
+    opacity: 0;
+    transition: all 0.5s ease;
+  }
+
+  .project-card:hover::before {
+    opacity: 0.15;
+  }
+
+  /* Enhanced Dashboard Cards */
+  .dashboard-preview.infrastructure {
+    background-image: linear-gradient(45deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.7)), url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNDAgMTIwIj48cmVjdCB4PSIxMCIgeT0iMTAiIHdpZHRoPSI1MCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiMyNTYzZWIiIGZpbGwtb3BhY2l0eT0iMC4yIiByeD0iNSIvPjxyZWN0IHg9IjgwIiB5PSIxMCIgd2lkdGg9IjUwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iIzI1NjNlYiIgZmlsbC1vcGFjaXR5PSIwLjMiIHJ4PSI1Ii8+PHJlY3QgeD0iMTUwIiB5PSIxMCIgd2lkdGg9IjUwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iIzI1NjNlYiIgZmlsbC1vcGFjaXR5PSIwLjQiIHJ4PSI1Ii8+PC9zdmc+');
+  }
+
+  .dashboard-preview.kubernetes {
+    background-image: linear-gradient(45deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.7)), url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNDAgMTIwIj48Y2lyY2xlIGN4PSIxMjAiIGN5PSI2MCIgcj0iNDAiIGZpbGw9IiM2MzY2ZjEiIGZpbGwtb3BhY2l0eT0iMC4yIi8+PGNpcmNsZSBjeD0iNTAiIGN5PSI0MCIgcj0iMjAiIGZpbGw9IiM2MzY2ZjEiIGZpbGwtb3BhY2l0eT0iMC4zIi8+PGNpcmNsZSBjeD0iNTAiIGN5PSI5MCIgcj0iMjAiIGZpbGw9IiM2MzY2ZjEiIGZpbGwtb3BhY2l0eT0iMC4zIi8+PGNpcmNsZSBjeD0iMTkwIiBjeT0iNDAiIHI9IjIwIiBmaWxsPSIjNjM2NmYxIiBmaWxsLW9wYWNpdHk9IjAuMyIvPjxjaXJjbGUgY3g9IjE5MCIgY3k9IjkwIiByPSIyMCIgZmlsbD0iIzYzNjZmMSIgZmlsbC1vcGFjaXR5PSIwLjMiLz48bGluZSB4MT0iNTAiIHkxPSI0MCIgeDI9IjEyMCIgeTI9IjYwIiBzdHJva2U9IiM2MzY2ZjEiIHN0cm9rZS1vcGFjaXR5PSIwLjQiIHN0cm9rZS13aWR0aD0iMiIvPjxsaW5lIHgxPSI1MCIgeTE9IjkwIiB4Mj0iMTIwIiB5Mj0iNjAiIHN0cm9rZT0iIzYzNjZmMSIgc3Ryb2tlLW9wYWNpdHk9IjAuNCIgc3Ryb2tlLXdpZHRoPSIyIi8+PGxpbmUgeDE9IjE5MCIgeTE9IjQwIiB4Mj0iMTIwIiB5Mj0iNjAiIHN0cm9rZT0iIzYzNjZmMSIgc3Ryb2tlLW9wYWNpdHk9IjAuNCIgc3Ryb2tlLXdpZHRoPSIyIi8+PGxpbmUgeDE9IjE5MCIgeTE9IjkwIiB4Mj0iMTIwIiB5Mj0iNjAiIHN0cm9rZT0iIzYzNjZmMSIgc3Ryb2tlLW9wYWNpdHk9IjAuNCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+');
+  }
+
+  .dashboard-preview.network {
+    background-image: linear-gradient(45deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.7)), url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNDAgMTIwIj48cGF0aCBkPSJNMTAgMTAgQzIzMCAxMCAyMzAgNTAgMTAgNTAgQzIzMCA1MCAyMzAgOTAgMTAgOTAgQzIzMCA5MCAyMzAgMTMwIDEwIDEzMCIgc3Ryb2tlPSIjMTBiOTgxIiBzdHJva2Utb3BhY2l0eT0iMC40IiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9Im5vbmUiLz48L3N2Zz4=');
+  }
+
+  .dashboard-preview.services {
+    background-image: linear-gradient(45deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.7)), url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNDAgMTIwIj48cmVjdCB4PSIxMCIgeT0iMTAiIHdpZHRoPSI0MCIgaGVpZ2h0PSIyMCIgZmlsbD0iI2VmNDQ0NCIgZmlsbC1vcGFjaXR5PSIwLjIiIHJ4PSI1Ii8+PHJlY3QgeD0iMTAiIHk9IjQwIiB3aWR0aD0iNzAiIGhlaWdodD0iMjAiIGZpbGw9IiNlZjQ0NDQiIGZpbGwtb3BhY2l0eT0iMC4zIiByeD0iNSIvPjxyZWN0IHg9IjEwIiB5PSI3MCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjIwIiBmaWxsPSIjZWY0NDQ0IiBmaWxsLW9wYWNpdHk9IjAuNCIgcng9IjUiLz48cmVjdCB4PSIxMDAiIHk9IjEwIiB3aWR0aD0iODAiIGhlaWdodD0iMjAiIGZpbGw9IiM2MzY2ZjEiIGZpbGwtb3BhY2l0eT0iMC4yIiByeD0iNSIvPjxyZWN0IHg9IjEwMCIgeT0iNDAiIHdpZHRoPSI1MCIgaGVpZ2h0PSIyMCIgZmlsbD0iIzYzNjZmMSIgZmlsbC1vcGFjaXR5PSIwLjMiIHJ4PSI1Ii8+PHJlY3QgeD0iMTAwIiB5PSI3MCIgd2lkdGg9IjEyMCIgaGVpZ2h0PSIyMCIgZmlsbD0iIzYzNjZmMSIgZmlsbC1vcGFjaXR5PSIwLjQiIHJ4PSI1Ii8+PC9zdmc+');
+  }
+
+  /* Enhanced Dashboard Overlay */
+  .dashboard-overlay .overlay-icon {
+    transition: transform 0.3s ease;
+  }
+
+  .dashboard-card:hover .overlay-icon {
+    transform: scale(1.2);
+  }
+
+  /* Keep your existing responsive styles */
+  @media (max-width: 1024px) {
+    .architecture-diagram {
+      grid-template-columns: repeat(2, 1fr);
+      grid-template-rows: repeat(6, auto);
+      gap: 1rem;
+    }
+
+    .diagram-node.gateway { grid-column: 1 / 2; grid-row: 1 / 2; }
+    .diagram-node.firewall { grid-column: 2 / 3; grid-row: 1 / 2; }
+    .diagram-node.proxmox { grid-column: 1 / 3; grid-row: 2 / 3; }
+    .diagram-node.kubernetes { grid-column: 1 / 3; grid-row: 3 / 4; }
+    .diagram-node.storage { grid-column: 1 / 2; grid-row: 4 / 5; }
+    .diagram-node.monitoring { grid-column: 2 / 3; grid-row: 4 / 5; }
+    .diagram-node.services { grid-column: 1 / 3; grid-row: 5 / 6; }
+  }
+</style>
+
+<script>
+  // --- Enhanced Terminal Animation ---
+  function animateTerminal() {
+    const terminalBody = document.getElementById('animated-terminal');
+    if (!terminalBody) return;
+    
+    const lines = terminalBody.querySelectorAll('.terminal-line');
+    let delay = 100;
+    
+    lines.forEach((line, index) => {
+      setTimeout(() => {
+        line.classList.add('visible');
+      }, delay * index);
+    });
+  }
+
+  // --- Terminal Cursor Animation ---
+  function initTerminalTyping() {
+    const cursor = document.querySelector('.cursor');
+    if (!cursor) return;
+    
+    setInterval(() => {
+      cursor.style.opacity = cursor.style.opacity === '0' ? '1' : '0';
+    }, 600);
+  }
+
+  // --- Particle Animation ---
+  function createBackgroundParticles(count = 30) {
+    const particlesContainer = document.getElementById('particles-container');
+    if (!particlesContainer) return;
+    particlesContainer.innerHTML = '';
+
+    for (let i = 0; i < count; i++) {
+      const particle = document.createElement('div');
+      particle.classList.add('particle');
+      const size = Math.random() * 3 + 1;
+      particle.style.width = `${size}px`;
+      particle.style.height = `${size}px`;
+      particle.style.left = `${Math.random() * 100}%`;
+      particle.style.top = `${Math.random() * 100}%`;
+      particle.style.opacity = (Math.random() * 0.2 + 0.05).toString();
+      particle.style.animation = `float-particle ${Math.random() * 25 + 15}s linear infinite`;
+      particle.style.animationDelay = `${Math.random() * 15}s`;
+      particlesContainer.appendChild(particle);
+    }
+  }
+
+  // --- Architecture Diagram Connections ---
+  function createArchitectureDiagramConnections() {
+    const diagram = document.querySelector('.architecture-diagram');
+    if (!diagram) return;
+
+    // Define connections between nodes
+    const connections = [
+      { from: 'gateway', to: 'firewall', type: 'horizontal' },
+      { from: 'firewall', to: 'proxmox', type: 'horizontal' },
+      { from: 'firewall', to: 'kubernetes', type: 'vertical' },
+      { from: 'proxmox', to: 'kubernetes', type: 'vertical' },
+      { from: 'storage', to: 'kubernetes', type: 'horizontal' },
+      { from: 'kubernetes', to: 'monitoring', type: 'horizontal' },
+      { from: 'kubernetes', to: 'services', type: 'vertical' }
+    ];
+
+    // Create connection lines
+    connections.forEach((connection, index) => {
+      const fromNode = diagram.querySelector(`[data-node="${connection.from}"]`);
+      const toNode = diagram.querySelector(`[data-node="${connection.to}"]`);
+      
+      if (!fromNode || !toNode) return;
+      
+      const fromRect = fromNode.getBoundingClientRect();
+      const toRect = toNode.getBoundingClientRect();
+      const diagramRect = diagram.getBoundingClientRect();
+      
+      const line = document.createElement('div');
+      line.classList.add('connection-line', connection.type);
+      line.id = `connection-${index}`;
+      
+      if (connection.type === 'horizontal') {
+        const fromCenter = fromRect.left + fromRect.width / 2 - diagramRect.left;
+        const toCenter = toRect.left + toRect.width / 2 - diagramRect.left;
+        const top = (fromRect.top + fromRect.height / 2 - diagramRect.top);
+        
+        line.style.top = `${top}px`;
+        line.style.left = `${Math.min(fromCenter, toCenter)}px`;
+        line.style.width = `${Math.abs(toCenter - fromCenter)}px`;
+      } else { // vertical
+        const fromCenter = fromRect.top + fromRect.height / 2 - diagramRect.top;
+        const toCenter = toRect.top + toRect.height / 2 - diagramRect.top;
+        const left = (fromRect.left + fromRect.width / 2 - diagramRect.left);
+        
+        line.style.left = `${left}px`;
+        line.style.top = `${Math.min(fromCenter, toCenter)}px`;
+        line.style.height = `${Math.abs(toCenter - fromCenter)}px`;
+      }
+      
+      diagram.appendChild(line);
+    });
+  }
+
+  // --- Animate Active Connections ---
+  function simulateActiveConnections() {
+    const lines = document.querySelectorAll('.connection-line');
+    if (lines.length === 0) return;
+    
+    // Randomly activate connections
+    setInterval(() => {
+      const randomIndex = Math.floor(Math.random() * lines.length);
+      const line = lines[randomIndex];
+      
+      line.classList.add('active');
+      setTimeout(() => {
+        line.classList.remove('active');
+      }, 1000);
+    }, 2000);
+  }
+
+  // --- Check Component Status ---
+  function checkAnsibleSandboxStatus() {
+    const btn = document.getElementById('ansible-sandbox-btn');
+    const badge = btn?.querySelector('.offline-badge');
+    if (!btn || !badge) return;
+
+    // This is a placeholder - replace with actual API call
+    const isOnline = false; // Simulate offline for now
+
+    if (isOnline) {
+      btn.classList.remove('btn-danger');
+      btn.classList.add('btn-primary');
+      badge.textContent = 'Online';
+      badge.classList.remove('offline-badge');
+      badge.classList.add('online-badge');
+      badge.style.display = 'inline-block';
+    }
+  }
+
+  // --- Intersection Observer for Scroll Animations ---
+  function setupScrollAnimations() {
+    const sections = document.querySelectorAll('.section-padding');
+    
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('section-visible');
+          observer.unobserve(entry.target);
+        }
+      });
+    }, { threshold: 0.1 });
+    
+    sections.forEach(section => {
+      observer.observe(section);
+    });
+  }
+
+  // --- Initialize everything when DOM is loaded ---
+  document.addEventListener('DOMContentLoaded', function() {
+    // Create particle effect
+    createBackgroundParticles();
+    
+    // Animate terminal on load
+    setTimeout(animateTerminal, 500);
+    initTerminalTyping();
+    
+    // Set up architecture diagram
+    setTimeout(() => {
+      try {
+        createArchitectureDiagramConnections();
+        simulateActiveConnections();
+      } catch (error) {
+        console.log('Architecture diagram not available:', error);
+        document.querySelector('.architecture-fallback')?.style.display = 'block';
+        document.querySelector('.architecture-diagram-container')?.style.display = 'none';
+      }
+    }, 500);
+    
+    // Check component status
+    checkAnsibleSandboxStatus();
+    
+    // Set up scroll animations
+    setupScrollAnimations();
+    
+    // Add smooth scrolling for anchor links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+      anchor.addEventListener('click', function(e) {
+        e.preventDefault();
+        const targetId = this.getAttribute('href');
+        const targetElement = document.querySelector(targetId);
+        
+        if (targetElement) {
+          window.scrollTo({
+            top: targetElement.offsetTop - 80,
+            behavior: 'smooth'
+          });
+        }
+      });
+    });
+  });
+
+  // --- Handle window resize ---
+  window.addEventListener('resize', function() {
+    // Clear existing connections and recreate them
+    document.querySelectorAll('.connection-line').forEach(line => line.remove());
+    
+    setTimeout(() => {
+      createArchitectureDiagramConnections();
+    }, 200);
+  });
+</script>
 ---
-// src/pages/homelab.astro - Converted from static homelab.html
+// src/pages/homelab.astro - Enhanced version
 import BaseLayout from '../layouts/BaseLayout.astro';
 import Header from '../components/Header.astro';
 import Footer from '../components/Footer.astro';
 
-const title = "Home Lab | Argobox - ArgoBox Tech Hub";
+const title = "Home Lab | ArgoBox - ArgoBox Tech Hub";
 const description = "ArgoBox - A production-grade Kubernetes homelab for DevOps experimentation, infrastructure automation, and containerized application deployment.";
 
-// Data for services (can be fetched or defined here)
-// Example structure - replace with actual data source if needed
+// Using your existing data structure
 const servicesData = {
   development: [
     { name: "Gitea", description: "Self-hosted Git service", url: "https://git.argobox.com", status: "live", icon: "fas fa-code-branch", available: true },
@@ -24,7 +465,7 @@ const servicesData = {
   ],
   utilities: [
      { name: "File Browser", description: "Web file manager", url: "https://files.argobox.com", status: "live", icon: "fas fa-folder-open", available: true },
-     { name: "Vaultwarden", description: "Password manager", url: "https://vault.argobox.com", status: "live", icon: "fas fa-key", available: true },
+     { name: "Vaultwarden", description: "Password manager", url: "#", status: "restricted", icon: "fas fa-key", available: false },
      { name: "Homepage", description: "Service dashboard", url: "https://dash.argobox.com", status: "live", icon: "fas fa-tachometer-alt", available: true },
      { name: "Uptime Kuma", description: "Status monitoring", url: "https://status.argobox.com", status: "live", icon: "fas fa-heartbeat", available: true },
   ],
@@ -36,35 +477,28 @@ const servicesData = {
   ]
 };
 
-// Data for projects (can be fetched or defined here)
+// Use your existing project data
 const projectsData = [
-    { title: "Ansible Playbooks", description: "Collection of playbooks for automating system configuration and application deployment.", icon: "fab fa-ansible", tech: ["Ansible", "YAML", "Jinja2"], url: "/resources/iac" }, // Link to relevant resource page
+    { title: "Ansible Playbooks", description: "Collection of playbooks for automating system configuration and application deployment.", icon: "fab fa-ansible", tech: ["Ansible", "YAML", "Jinja2"], url: "/resources/iac" },
     { title: "Kubernetes Manifests", description: "YAML definitions for deploying various applications and services on Kubernetes.", icon: "fas fa-dharmachakra", tech: ["Kubernetes", "YAML", "Helm"], url: "/resources/kubernetes" },
-    { title: "Monitoring Dashboards", description: "Grafana dashboards for visualizing infrastructure and application metrics.", icon: "fas fa-chart-line", tech: ["Grafana", "PromQL", "JSON"], url: "/resources/config-files" }, // Link to relevant resource page
-    { title: "Cloudflare Tunnel Setup", description: "Securely exposing home lab services to the internet using Cloudflare Tunnels.", icon: "fas fa-cloud", tech: ["Cloudflare", "Networking", "Security"], url: "/posts/cloudflare-tunnel-setup" } // Link to blog post
+    { title: "Monitoring Dashboards", description: "Grafana dashboards for visualizing infrastructure and application metrics.", icon: "fas fa-chart-line", tech: ["Grafana", "PromQL", "JSON"], url: "/resources/config-files" },
+    { title: "Cloudflare Tunnel Setup", description: "Securely exposing home lab services to the internet using Cloudflare Tunnels.", icon: "fas fa-cloud", tech: ["Cloudflare", "Networking", "Security"], url: "/posts/cloudflare-tunnel-setup" }
 ];
 
-// Data for dashboards (can be fetched or defined here)
+// Use your existing dashboards data
 const dashboardsData = [
     { title: "Infrastructure Overview", description: "Key metrics for Proxmox hosts, network devices, and storage.", previewClass: "infrastructure", url: "https://dash.argobox.com/goto/...", icon: "fas fa-server" },
     { title: "Kubernetes Cluster", description: "Detailed view of K3s cluster resources, node status, and pod health.", previewClass: "kubernetes", url: "https://dash.argobox.com/goto/...", icon: "fas fa-dharmachakra" },
     { title: "Network Traffic", description: "Real-time and historical network usage, firewall logs, and connection tracking.", previewClass: "network", url: "https://dash.argobox.com/goto/...", icon: "fas fa-network-wired" },
     { title: "Service Performance", description: "Application-specific metrics, request latency, and error rates.", previewClass: "services", url: "https://dash.argobox.com/goto/...", icon: "fas fa-cogs" }
 ];
-
-// Data for contact form (if keeping it on this page)
-// const contactInfo = { email: "daniel.laforce@argobox.com", /* other info */ };
-
 ---
 
 <BaseLayout {title} {description}>
-  {/* Add Font Awesome if not loaded globally by BaseLayout */}
-  {/* <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> */}
   <Header slot="header" />
 
   <main class="homelab-page">
-
-    <!-- Hero Section -->
+    <!-- Hero Section (Enhanced) -->
     <section id="home" class="hero">
       <div class="particles-container" id="particles-container"></div>
       <div class="container">
@@ -76,42 +510,24 @@ const dashboardsData = [
             <p class="hero-description">
               A production-ready infrastructure platform for DevOps experimentation, distributed systems, and automating everything with code.
             </p>
-            <div class="hero-stats">
-              <div class="stat-item">
-                <div class="stat-icon"><i class="fas fa-microchip"></i></div>
-                <div class="stat-detail">
-                  <div class="stat-value">32+</div>
-                  <div class="stat-name">CPU Cores</div>
-                </div>
-              </div>
-              <div class="stat-item">
-                <div class="stat-icon"><i class="fas fa-memory"></i></div>
-                <div class="stat-detail">
-                  <div class="stat-value">64GB</div>
-                  <div class="stat-name">RAM</div>
-                </div>
-              </div>
-              <div class="stat-item">
-                <div class="stat-icon"><i class="fas fa-hdd"></i></div>
-                <div class="stat-detail">
-                  <div class="stat-value">12TB</div>
-                  <div class="stat-name">Storage</div>
-                </div>
-              </div>
-              <div class="stat-item">
-                <div class="stat-icon"><i class="fas fa-server"></i></div>
-                <div class="stat-detail">
-                  <div class="stat-value">{Object.values(servicesData).flat().length}+</div>
-                  <div class="stat-name">Services</div>
-                </div>
-              </div>
+            
+            <!-- Dynamic terminal-style stats display -->
+            <div class="terminal-style-stats">
+              <div class="stat-line">argobox:~$<span class="cmd"> ls -la /services | wc -l</span></div>
+              <div class="stat-line output">{Object.values(servicesData).flat().length}+</div>
+              <div class="stat-line">argobox:~$<span class="cmd"> nproc --all</span></div>
+              <div class="stat-line output">32+</div>
+              <div class="stat-line">argobox:~$<span class="cmd"> free -h | grep Mem | awk '{print $2}'</span></div>
+              <div class="stat-line output">64GB</div>
+              <div class="stat-line">argobox:~$<span class="cmd"> df -h /data | grep /data | awk '{print $2}'</span></div>
+              <div class="stat-line output">12TB</div>
             </div>
+            
             <div class="cta-buttons">
-              {/* Link to the Astro page for Ansible Sandbox */}
               <a href="/ansible-sandbox" class="btn btn-danger" id="ansible-sandbox-btn">
                 <i class="fab fa-ansible btn-icon"></i>
                 <span class="btn-text">Try Ansible Sandbox</span>
-                <span class="offline-badge">Offline</span> {/* Status updated by JS */}
+                <span class="offline-badge">Offline</span> <!-- Status updated by JS -->
               </a>
               <a href="#architecture" class="btn btn-outline">
                 <i class="fas fa-network-wired btn-icon"></i>
@@ -119,6 +535,8 @@ const dashboardsData = [
               </a>
             </div>
           </div>
+          
+          <!-- Enhanced terminal with animation -->
           <div class="hero-terminal">
             <div class="terminal-header">
               <div class="terminal-buttons">
@@ -128,37 +546,37 @@ const dashboardsData = [
               </div>
               <div class="terminal-title">argobox ~ k8s-status</div>
             </div>
-            <div class="terminal-body">
-              <div class="terminal-line">$ kubectl get nodes</div>
-              <div class="terminal-line output">NAME           STATUS   ROLES                  AGE     VERSION</div>
-              <div class="terminal-line output">argobox        Ready    control-plane,master   154d    v1.25.16+k3s1</div>
-              <div class="terminal-line output">argobox-lite   Ready    worker                 154d    v1.25.16+k3s1</div>
-              <div class="terminal-line blank">&nbsp;</div>
-              <div class="terminal-line">$ kubectl get pods -A | grep Running | wc -l</div>
-              <div class="terminal-line output">32</div>
-              <div class="terminal-line blank">&nbsp;</div>
-              <div class="terminal-line">$ uptime</div>
-              <div class="terminal-line output">14:30:25 up 154 days, 23:12, 1 user, load average: 0.22, 0.18, 0.15</div>
-              <div class="terminal-line blank">&nbsp;</div>
-              <div class="terminal-line">$ ansible-playbook status.yml</div>
-              <div class="terminal-line output">PLAY [Check system status] *******************************************</div>
-              <div class="terminal-line output">TASK [Gathering Facts] **********************************************</div>
-              <div class="terminal-line output success">ok: [argobox]</div>
-              <div class="terminal-line output success">ok: [argobox-lite]</div>
-              <div class="terminal-line output">TASK [Check service status] *****************************************</div>
-              <div class="terminal-line output success">ok: [argobox]</div>
-              <div class="terminal-line output success">ok: [argobox-lite]</div>
-              <div class="terminal-line output">PLAY RECAP **********************************************************</div>
-              <div class="terminal-line output success">argobox     : ok=2    changed=0    unreachable=0    failed=0    skipped=0</div>
-              <div class="terminal-line output success">argobox-lite: ok=2    changed=0    unreachable=0    failed=0    skipped=0</div>
-              <div class="terminal-line typing">$ <span class="cursor">|</span></div>
+            <div class="terminal-body" id="animated-terminal">
+              <div class="terminal-line" data-index="1">$ kubectl get nodes</div>
+              <div class="terminal-line output" data-index="2">NAME           STATUS   ROLES                  AGE     VERSION</div>
+              <div class="terminal-line output" data-index="3">argobox        Ready    control-plane,master   154d    v1.25.16+k3s1</div>
+              <div class="terminal-line output" data-index="4">argobox-lite   Ready    worker                 154d    v1.25.16+k3s1</div>
+              <div class="terminal-line blank" data-index="5">&nbsp;</div>
+              <div class="terminal-line" data-index="6">$ kubectl get pods -A | grep Running | wc -l</div>
+              <div class="terminal-line output" data-index="7">32</div>
+              <div class="terminal-line blank" data-index="8">&nbsp;</div>
+              <div class="terminal-line" data-index="9">$ uptime</div>
+              <div class="terminal-line output" data-index="10">14:30:25 up 154 days, 23:12, 1 user, load average: 0.22, 0.18, 0.15</div>
+              <div class="terminal-line blank" data-index="11">&nbsp;</div>
+              <div class="terminal-line" data-index="12">$ ansible-playbook status.yml</div>
+              <div class="terminal-line output" data-index="13">PLAY [Check system status] *******************************************</div>
+              <div class="terminal-line output" data-index="14">TASK [Gathering Facts] **********************************************</div>
+              <div class="terminal-line output success" data-index="15">ok: [argobox]</div>
+              <div class="terminal-line output success" data-index="16">ok: [argobox-lite]</div>
+              <div class="terminal-line output" data-index="17">TASK [Check service status] *****************************************</div>
+              <div class="terminal-line output success" data-index="18">ok: [argobox]</div>
+              <div class="terminal-line output success" data-index="19">ok: [argobox-lite]</div>
+              <div class="terminal-line output" data-index="20">PLAY RECAP **********************************************************</div>
+              <div class="terminal-line output success" data-index="21">argobox     : ok=2    changed=0    unreachable=0    failed=0    skipped=0</div>
+              <div class="terminal-line output success" data-index="22">argobox-lite: ok=2    changed=0    unreachable=0    failed=0    skipped=0</div>
+              <div class="terminal-line typing" data-index="23">$ <span class="cursor">|</span></div>
             </div>
           </div>
         </div>
       </div>
     </section>
 
-    <!-- Architecture Section -->
+    <!-- Architecture Section (Enhanced with Interactive Diagram) -->
     <section id="architecture" class="architecture section-padding">
       <div class="container">
         <div class="section-header">
@@ -167,31 +585,79 @@ const dashboardsData = [
             Enterprise-grade network topology with redundancy, virtualization, and secure segmentation.
           </p>
         </div>
-        {/* Consider replacing with an actual image or a more maintainable diagram component */}
-        <img src="/images/homelab/argobox-architecture.svg" alt="ArgoBox Architecture Diagram" class="architecture-diagram-image" />
-        {/* Fallback or simplified diagram if image isn't available */}
+
+        <!-- Interactive Architecture Diagram -->
+        <div class="architecture-diagram-container" id="arch-diagram">
+          <div class="architecture-diagram">
+            <div class="diagram-node gateway" data-node="gateway">
+              <div class="diagram-node-icon"><i class="fas fa-router"></i></div>
+              <div class="diagram-node-title">Internet Gateway</div>
+              <div class="diagram-node-detail">Multiple WAN connections with failover</div>
+            </div>
+            <div class="diagram-node firewall" data-node="firewall">
+              <div class="diagram-node-icon"><i class="fas fa-shield-alt"></i></div>
+              <div class="diagram-node-title">OPNsense Firewall</div>
+              <div class="diagram-node-detail">Advanced security & traffic management</div>
+            </div>
+            <div class="diagram-node proxmox" data-node="proxmox">
+              <div class="diagram-node-icon"><i class="fas fa-server"></i></div>
+              <div class="diagram-node-title">Proxmox Cluster</div>
+              <div class="diagram-node-detail">Virtualization platform with HA capabilities</div>
+            </div>
+            <div class="diagram-node storage" data-node="storage">
+              <div class="diagram-node-icon"><i class="fas fa-database"></i></div>
+              <div class="diagram-node-title">ZFS Storage</div>
+              <div class="diagram-node-detail">RAID10 configuration with snapshots</div>
+            </div>
+            <div class="diagram-node kubernetes" data-node="kubernetes">
+              <div class="diagram-node-icon"><i class="fas fa-dharmachakra"></i></div>
+              <div class="diagram-node-title">Kubernetes (K3s)</div>
+              <div class="diagram-node-detail">Container orchestration across multiple nodes</div>
+            </div>
+            <div class="diagram-node monitoring" data-node="monitoring">
+              <div class="diagram-node-icon"><i class="fas fa-chart-line"></i></div>
+              <div class="diagram-node-title">Monitoring Stack</div>
+              <div class="diagram-node-detail">Prometheus, Grafana, & AlertManager</div>
+            </div>
+            <div class="diagram-node services" data-node="services">
+              <div class="service-icon"><i class="fas fa-code-branch" style="color: #3b82f6;"></i><span>Git</span></div>
+              <div class="service-icon"><i class="fas fa-terminal" style="color: #6366f1;"></i><span>Code</span></div>
+              <div class="service-icon"><i class="fas fa-play-circle" style="color: #ec4899;"></i><span>Media</span></div>
+              <div class="service-icon"><i class="fas fa-key" style="color: #10b981;"></i><span>Vault</span></div>
+              <div class="service-icon"><i class="fas fa-globe" style="color: #f59e0b;"></i><span>Web</span></div>
+              <div class="service-icon"><i class="fas fa-project-diagram" style="color: #ef4444;"></i><span>CI/CD</span></div>
+            </div>
+            <!-- Connection lines will be added by JS -->
+          </div>
+        </div>
+
+        <!-- Fallback for clients with JS disabled -->
+        <div class="architecture-fallback">
+          <img src="/images/homelab/argobox-architecture.svg" alt="ArgoBox Architecture Diagram" class="architecture-diagram-image" />
+        </div>
+
         <div class="architecture-details">
-           <div class="detail-card">
-             <div class="detail-icon"><i class="fas fa-shield-alt"></i></div>
-             <h3 class="detail-title">Network Security</h3>
-             <p class="detail-description">
-               Enterprise firewall with network segmentation using VLANs and strict access controls. Redundant routing with automatic failover between OPNsense and OpenWrt.
-             </p>
-           </div>
-           <div class="detail-card">
-             <div class="detail-icon"><i class="fas fa-cloud"></i></div>
-             <h3 class="detail-title">Virtualization</h3>
-             <p class="detail-description">
-               Proxmox virtualization platform with ZFS storage pools in RAID10 configuration. Optimized storage pools for VMs and containers with proper resource allocation.
-             </p>
-           </div>
-           <div class="detail-card">
-             <div class="detail-icon"><i class="fas fa-route"></i></div>
-             <h3 class="detail-title">High Availability</h3>
-             <p class="detail-description">
-               Full redundancy with failover routing, replicated storage, and resilient services. Automatic service recovery and load balancing across nodes.
-             </p>
-           </div>
+          <div class="detail-card">
+            <div class="detail-icon"><i class="fas fa-shield-alt"></i></div>
+            <h3 class="detail-title">Network Security</h3>
+            <p class="detail-description">
+              Enterprise firewall with network segmentation using VLANs and strict access controls. Redundant routing with automatic failover between OPNsense and OpenWrt.
+            </p>
+          </div>
+          <div class="detail-card">
+            <div class="detail-icon"><i class="fas fa-cloud"></i></div>
+            <h3 class="detail-title">Virtualization</h3>
+            <p class="detail-description">
+              Proxmox virtualization platform with ZFS storage pools in RAID10 configuration. Optimized storage pools for VMs and containers with proper resource allocation.
+            </p>
+          </div>
+          <div class="detail-card">
+            <div class="detail-icon"><i class="fas fa-route"></i></div>
+            <h3 class="detail-title">High Availability</h3>
+            <p class="detail-description">
+              Full redundancy with failover routing, replicated storage, and resilient services. Automatic service recovery and load balancing across nodes.
+            </p>
+          </div>
         </div>
       </div>
     </section>
@@ -206,7 +672,6 @@ const dashboardsData = [
           </p>
         </div>
         <div class="tech-grid">
-          {/* Data could be externalized */}
           <div class="tech-card">
             <div class="tech-icon"><i class="fas fa-dharmachakra"></i></div>
             <h3 class="tech-title">Kubernetes (K3s)</h3>
@@ -225,29 +690,29 @@ const dashboardsData = [
             <p class="tech-description">Enterprise-class virtualization platform running virtual machines and containers with ZFS storage backend for data integrity.</p>
             <div class="tech-features"><span class="tech-feature">ZFS storage</span><span class="tech-feature">Resource balancing</span><span class="tech-feature">Live migration</span><span class="tech-feature">Hardware passthrough</span></div>
           </div>
-           <div class="tech-card">
-             <div class="tech-icon"><i class="fas fa-shield-alt"></i></div>
-             <h3 class="tech-title">Zero Trust Security</h3>
-             <p class="tech-description">Comprehensive security architecture with Cloudflare tunnels, network segmentation, and authentication at all service boundaries.</p>
-             <div class="tech-features"><span class="tech-feature">Cloudflare tunnels</span><span class="tech-feature">OPNsense firewall</span><span class="tech-feature">VLAN segmentation</span><span class="tech-feature">WireGuard VPN</span></div>
-           </div>
-           <div class="tech-card">
-             <div class="tech-icon"><i class="fas fa-database"></i></div>
-             <h3 class="tech-title">PostgreSQL</h3>
-             <p class="tech-description">Enterprise database cluster for application data storage with automated backups, replication, and performance optimization.</p>
-             <div class="tech-features"><span class="tech-feature">Automated backups</span><span class="tech-feature">Connection pooling</span><span class="tech-feature">Optimized for K8s</span><span class="tech-feature">Multi-app support</span></div>
-           </div>
-           <div class="tech-card">
-             <div class="tech-icon"><i class="fas fa-chart-line"></i></div>
-             <h3 class="tech-title">Monitoring Stack</h3>
-             <p class="tech-description">Comprehensive monitoring with Prometheus, Grafana, and AlertManager for real-time visibility into all infrastructure components.</p>
-             <div class="tech-features"><span class="tech-feature">Prometheus metrics</span><span class="tech-feature">Grafana dashboards</span><span class="tech-feature">Automated alerts</span><span class="tech-feature">Historical data</span></div>
-           </div>
+          <div class="tech-card">
+            <div class="tech-icon"><i class="fas fa-shield-alt"></i></div>
+            <h3 class="tech-title">Zero Trust Security</h3>
+            <p class="tech-description">Comprehensive security architecture with Cloudflare tunnels, network segmentation, and authentication at all service boundaries.</p>
+            <div class="tech-features"><span class="tech-feature">Cloudflare tunnels</span><span class="tech-feature">OPNsense firewall</span><span class="tech-feature">VLAN segmentation</span><span class="tech-feature">WireGuard VPN</span></div>
+          </div>
+          <div class="tech-card">
+            <div class="tech-icon"><i class="fas fa-database"></i></div>
+            <h3 class="tech-title">PostgreSQL</h3>
+            <p class="tech-description">Enterprise database cluster for application data storage with automated backups, replication, and performance optimization.</p>
+            <div class="tech-features"><span class="tech-feature">Automated backups</span><span class="tech-feature">Connection pooling</span><span class="tech-feature">Optimized for K8s</span><span class="tech-feature">Multi-app support</span></div>
+          </div>
+          <div class="tech-card">
+            <div class="tech-icon"><i class="fas fa-chart-line"></i></div>
+            <h3 class="tech-title">Monitoring Stack</h3>
+            <p class="tech-description">Comprehensive monitoring with Prometheus, Grafana, and AlertManager for real-time visibility into all infrastructure components.</p>
+            <div class="tech-features"><span class="tech-feature">Prometheus metrics</span><span class="tech-feature">Grafana dashboards</span><span class="tech-feature">Automated alerts</span><span class="tech-feature">Historical data</span></div>
+          </div>
         </div>
       </div>
     </section>
 
-    <!-- Services Section -->
+    <!-- Services Section (Enhanced with Interactive Elements) -->
     <section id="services" class="services section-padding">
       <div class="container">
         <div class="section-header">
@@ -262,7 +727,7 @@ const dashboardsData = [
         </div>
         <div class="services-grid">
           {Object.entries(servicesData).map(([categoryKey, categoryServices]) => (
-            <div class="services-category">
+            <div class="services-category" data-category={categoryKey}>
               <h3 class="category-title">
                 <i class={`fas ${
                   categoryKey === 'development' ? 'fa-code' :
@@ -280,6 +745,7 @@ const dashboardsData = [
                     target={service.available ? "_blank" : undefined}
                     rel={service.available ? "noopener noreferrer" : undefined}
                     aria-disabled={!service.available}
+                    data-service={service.name.toLowerCase().replace(/\s+/g, '-')}
                   >
                     <div class="service-icon"><i class={service.icon}></i></div>
                     <div class="service-info">
@@ -299,7 +765,7 @@ const dashboardsData = [
       </div>
     </section>
 
-     <!-- Projects Section -->
+    <!-- Projects Section -->
     <section id="projects" class="projects section-padding alt-bg">
         <div class="container">
             <div class="section-header">
@@ -310,7 +776,7 @@ const dashboardsData = [
             </div>
             <div class="projects-grid">
                 {projectsData.map(project => (
-                    <a href={project.url} class="project-card" target={project.url.startsWith('http') ? '_blank' : undefined} rel={project.url.startsWith('http') ? 'noopener noreferrer' : undefined}>
+                    <a href={project.url} class="project-card" target={project.url.startsWith('http') ? '_blank' : undefined} rel={project.url.startsWith('http') ? 'noopener noreferrer' : undefined} data-project={project.title.toLowerCase().replace(/\s+/g, '-')}>
                         <div class="project-header">
                             <div class="project-icon"><i class={project.icon}></i></div>
                             <h3 class="project-title">{project.title}</h3>
@@ -330,7 +796,7 @@ const dashboardsData = [
         </div>
     </section>
 
-    <!-- Dashboards Section -->
+    <!-- Dashboards Section (Enhanced) -->
     <section id="dashboards" class="dashboards section-padding">
         <div class="container">
             <div class="section-header">
@@ -339,13 +805,13 @@ const dashboardsData = [
                     Real-time monitoring dashboards providing insights into the lab's performance and status. (Authentication Required)
                 </p>
             </div>
-             <div class="services-info-banner"> {/* Reusing banner style */}
+            <div class="services-info-banner">
                 <i class="fas fa-lock info-icon"></i>
                 <p>Access to live dashboards requires authentication via Cloudflare Access.</p>
             </div>
             <div class="dashboard-grid">
                 {dashboardsData.map(dash => (
-                    <a href={dash.url} class="dashboard-card" target="_blank" rel="noopener noreferrer">
+                    <a href={dash.url} class="dashboard-card" target="_blank" rel="noopener noreferrer" data-dashboard={dash.title.toLowerCase().replace(/\s+/g, '-')}>
                         <div class={`dashboard-preview ${dash.previewClass}`}>
                             <div class="dashboard-overlay">
                                 <div class="overlay-content">
@@ -366,79 +832,28 @@ const dashboardsData = [
             </div>
         </div>
     </section>
-
-    {/* Contact Section - Optional: Can be moved to a separate page */}
-    {/*
-    <section id="contact" class="contact section-padding alt-bg">
-      <div class="container">
-        <div class="section-header">
-          <h2 class="section-title">Get In Touch</h2>
-          <p class="section-description">Have questions or want to collaborate? Reach out!</p>
-        </div>
-        <div class="contact-grid">
-          <div class="contact-info">
-             <div class="contact-item">
-                <div class="contact-icon"><i class="fas fa-envelope"></i></div>
-                <h3 class="contact-title">Email</h3>
-                <a href={`mailto:${contactInfo.email}`} class="contact-link">{contactInfo.email}</a>
-             </div>
-             Add other contact items like LinkedIn, GitHub etc.
-          </div>
-          <div class="contact-form-container">
-            <form id="contact-form" class="contact-form">
-              <div class="form-group">
-                <label for="name">Name</label>
-                <input type="text" id="name" name="name" required />
-              </div>
-              <div class="form-group">
-                <label for="email">Email</label>
-                <input type="email" id="email" name="email" required />
-              </div>
-              <div class="form-group">
-                <label for="subject">Subject</label>
-                <input type="text" id="subject" name="subject" required />
-              </div>
-              <div class="form-group">
-                <label for="message">Message</label>
-                <textarea id="message" name="message" required></textarea>
-              </div>
-              <button type="submit" class="btn btn-primary">Send Message</button>
-            </form>
-          </div>
-        </div>
-      </div>
-    </section>
-    */}
-
   </main>
 
   <Footer slot="footer" />
 </BaseLayout>
 
 <style is:global>
-  /* Import relevant styles from styles.css, adapted for Astro */
-  /* NOTE: General resets, body, typography, basic buttons are handled by global.css/theme.css */
-
-  /* Hero Section Specific Styles */
+  /* Keep all your original styles from homelab.astro */
+  
+  /* Hero Section Enhancements */
   .hero {
-    min-height: 100vh; /* Use min-height instead of height */
+    min-height: 100vh;
     display: flex;
     align-items: center;
     position: relative;
     overflow: hidden;
-    padding-top: 6rem; /* Adjust as needed */
-    padding-bottom: 4rem; /* Add padding */
-    background: linear-gradient(180deg, var(--bg-secondary), var(--bg-primary)); /* Use theme vars */
+    padding-top: 6rem;
+    padding-bottom: 4rem;
+    background: linear-gradient(180deg, var(--bg-secondary), var(--bg-primary));
   }
-  .hero-content {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: 3rem;
-    align-items: center;
-    position: relative; /* Ensure content is above particles */
-    z-index: 1;
-  }
-   .particles-container {
+  
+  /* Enhanced Particles Animation */
+  .particles-container {
     position: absolute;
     top: 0;
     left: 0;
@@ -448,391 +863,105 @@ const dashboardsData = [
     pointer-events: none;
     z-index: 0;
   }
+  
   .particle {
     position: absolute;
-    background-color: var(--accent); /* Use theme var */
+    background-color: var(--accent);
     border-radius: 50%;
     pointer-events: none;
-    /* Animation will be added by script */
   }
-  @keyframes float-particle { /* Keep keyframes */
+  
+  @keyframes float-particle {
     0% { transform: translateY(0) translateX(0); opacity: 0.3; }
     50% { transform: translateY(-100px) translateX(50px); opacity: 0.1; }
     100% { transform: translateY(0) translateX(0); opacity: 0.3; }
   }
-  .hero-text { /* Styles seem okay */ }
-  .hero-title {
-    font-size: clamp(2.5rem, 5vw, 3.25rem); /* Adjust size */
-    margin-bottom: 1.5rem;
-    line-height: 1.2;
-    font-weight: 700; /* Use theme font weight */
-    color: var(--text-primary); /* Use theme var */
-  }
-  .hero-title .highlight {
-    background: var(--accent-gradient); /* Use theme var */
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
-    position: relative;
-  }
-   .hero-title .highlight::after { /* Optional underline effect */
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 4px; /* Adjust thickness */
-    bottom: 2px; /* Adjust position */
-    left: 0;
-    background: var(--accent-gradient);
-    border-radius: 2px;
-    opacity: 0.3;
-    z-index: -1;
-  }
-  .hero-description {
-    font-size: var(--font-size-lg); /* Use theme var */
-    color: var(--text-secondary); /* Use theme var */
-    margin-bottom: 2rem;
-    max-width: 550px;
-  }
-  .hero-stats {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1.5rem;
+  
+  /* Terminal Style Stats */
+  .terminal-style-stats {
+    background-color: rgba(15, 23, 42, 0.7);
+    border: 1px solid var(--border);
+    border-radius: 0.5rem;
+    padding: 1rem;
+    font-family: var(--font-mono, monospace);
     margin: 2rem 0;
+    max-width: 90%;
+    overflow: hidden;
   }
-  .stat-item { display: flex; align-items: center; gap: 0.75rem; }
-  .stat-icon {
-    width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center;
-    background: var(--accent-gradient); border-radius: 0.5rem; color: white; font-size: 1.25rem;
+  
+  .stat-line {
+    margin-bottom: 0.5rem;
+    white-space: nowrap;
+    overflow: hidden;
+    font-size: 0.9rem;
   }
-  .stat-detail { display: flex; flex-direction: column; }
-  .stat-value { font-weight: 700; font-size: 1.25rem; color: var(--text-primary); }
-  .stat-name { font-size: 0.875rem; color: var(--text-secondary); }
-  .cta-buttons { display: flex; flex-wrap: wrap; gap: 1rem; }
-  /* Use Astro theme button classes (.cta-button.primary/secondary) if possible */
-  /* Or adapt these styles */
-  .btn {
-    display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem;
-    font-weight: 600; border-radius: 0.5rem; transition: all var(--transition-normal);
-    cursor: pointer; position: relative; overflow: hidden; border: none; outline: none; gap: 0.75rem;
-    text-decoration: none; /* Ensure links look like buttons */
+  
+  .stat-line .cmd {
+    color: var(--primary, #3b82f6);
   }
-  .btn-primary { background: var(--accent-gradient); color: white; /* ... other styles */ }
-  .btn-primary:hover { /* ... hover styles */ }
-  .btn-outline { background-color: transparent; border: 2px solid var(--accent); color: var(--accent); }
-  .btn-outline:hover { background-color: var(--accent); color: white; }
-  .btn-danger { background-color: var(--error); border-color: var(--error); color: white; } /* Use theme error color */
-  .btn-icon { font-size: 0.9rem; }
-  .offline-badge, .online-badge { /* Styles from inline block */
-    display: inline-block; padding: 0.25rem 0.5rem; border-radius: 0.25rem;
-    font-size: 0.75rem; font-weight: 600; margin-left: 0.5rem;
+  
+  .stat-line.output {
+    color: var(--success, #10b981);
+    font-weight: bold;
+    font-size: 1.1rem;
+    margin-bottom: 1rem;
   }
-  .offline-badge { background-color: #991b1b; color: white; } /* Darker red */
-  .online-badge { background-color: var(--success); color: white; display: none; } /* Use theme success */
-
-  /* Hero Terminal Styles */
-  .hero-terminal {
-    width: 100%; border-radius: 0.75rem; overflow: hidden;
-    box-shadow: var(--card-shadow); /* Use theme shadow */
-    background-color: #0d1117; /* Keep specific terminal bg */
-    border: 1px solid var(--border); /* Use theme border */
-    /* transform: perspective(1000px) rotateY(5deg) rotateX(2deg); */ /* Remove or adjust transform */
-    transition: all 0.3s ease;
+  
+  /* Enhanced terminal animation */
+  .terminal-body {
+    padding: 1rem;
+    font-family: var(--font-mono, monospace);
+    font-size: 0.875rem;
+    color: var(--text-primary);
+    line-height: 1.4;
+    max-height: 400px;
+    overflow-y: auto;
   }
-  /* .hero-terminal:hover { transform: perspective(1000px) rotateY(0deg) rotateX(0deg); } */
-  .terminal-header { display: flex; align-items: center; background-color: #161b22; padding: 0.5rem 1rem; border-bottom: 1px solid var(--border); }
-  .terminal-buttons { display: flex; gap: 0.5rem; margin-right: 1rem; }
-  .terminal-btn { width: 12px; height: 12px; border-radius: 50%; }
-  .terminal-btn.close { background-color: #ff5f56; }
-  .terminal-btn.minimize { background-color: #ffbd2e; }
-  .terminal-btn.maximize { background-color: #27c93f; }
-  .terminal-title { color: var(--text-secondary); font-size: 0.875rem; font-family: var(--font-mono); }
-  .terminal-body { padding: 1rem; font-family: var(--font-mono); font-size: 0.875rem; color: var(--text-primary); line-height: 1.4; max-height: 400px; overflow-y: auto; }
-  .terminal-line { margin-bottom: 0.25rem; white-space: pre-wrap; }
-  .terminal-line.output { color: var(--text-secondary); }
-  .terminal-line.success { color: var(--success); } /* Use theme color */
-  .terminal-line.error { color: var(--error); } /* Use theme color */
-  .terminal-line.typing { color: var(--accent); } /* Use theme color */
-  .terminal-line .cursor { display: inline-block; width: 8px; height: 15px; background-color: var(--accent); animation: blink 1s step-end infinite; }
-  @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
-
-  /* Architecture Section */
-  .architecture { /* Use section-padding */ }
-  .section-header { text-align: center; margin-bottom: 3rem; } /* Adjust margin */
-  .section-title { font-size: var(--font-size-3xl); margin-bottom: 1rem; position: relative; display: inline-block; color: var(--text-primary); }
-  .section-title::after { content: ''; position: absolute; bottom: -0.5rem; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background: var(--accent-gradient); border-radius: 2px; }
-  .section-description { max-width: 700px; margin: 0 auto; color: var(--text-secondary); font-size: var(--font-size-lg); }
-  .architecture-diagram-image { display: block; max-width: 800px; margin: 3rem auto; border-radius: 8px; box-shadow: var(--card-shadow); }
-  .architecture-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 3rem; }
-  .detail-card { background-color: var(--card-bg); border: 1px solid var(--border); border-radius: 0.75rem; padding: 1.5rem; transition: all var(--transition-normal); }
-  .detail-card:hover { transform: translateY(-5px); box-shadow: var(--card-shadow); border-color: var(--accent); }
-  .detail-icon { font-size: 2rem; color: var(--accent); margin-bottom: 1rem; }
-  .detail-title { font-size: 1.25rem; margin-bottom: 0.75rem; color: var(--text-primary); }
-  .detail-description { color: var(--text-secondary); font-size: var(--font-size-sm); line-height: 1.6; }
-
-  /* Technologies Section */
-  .technologies { /* Use section-padding alt-bg */ }
-  .tech-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; margin-top: 3rem; }
-  .tech-card { background-color: var(--card-bg); border: 1px solid var(--border); border-radius: 0.75rem; padding: 2rem; transition: all var(--transition-normal); display: flex; flex-direction: column; }
-  .tech-card:hover { transform: translateY(-10px); box-shadow: var(--card-shadow); border-color: var(--accent); }
-  .tech-card.featured { background: linear-gradient(145deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.05)); border-color: var(--accent); position: relative; overflow: hidden; }
-  .tech-card.featured::before { content: ''; position: absolute; top: 0; right: 0; width: 100px; height: 100px; background: var(--accent-gradient); transform: rotate(45deg) translate(20px, -60px); opacity: 0.3; }
-  .tech-icon { font-size: 2.5rem; color: var(--accent); margin-bottom: 1.5rem; transition: all var(--transition-normal); }
-  .tech-card:hover .tech-icon { transform: scale(1.1); /* text-shadow: var(--accent-glow); */ } /* Glow might be too much */
-  .tech-title { font-size: 1.5rem; margin-bottom: 1rem; color: var(--text-primary); }
-  .tech-description { color: var(--text-secondary); margin-bottom: 1.5rem; flex-grow: 1; font-size: var(--font-size-sm); }
-  .tech-features { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; } /* Push to bottom */
-  .tech-feature { background-color: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3); color: var(--accent); font-size: 0.8rem; font-weight: 500; padding: 0.25rem 0.75rem; border-radius: 9999px; }
-
-  /* Services Section */
-  .services { /* Use section-padding */ }
-  .services-info-banner { display: flex; align-items: center; gap: 1rem; background-color: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2); border-radius: 0.75rem; padding: 1rem 1.5rem; margin-bottom: 2rem; }
-  .info-icon { font-size: 1.5rem; color: var(--accent); }
-  .services-info-banner p { color: var(--text-secondary); margin: 0; font-size: var(--font-size-sm); }
-  .services-grid { display: flex; flex-direction: column; gap: 2.5rem; margin-top: 2rem; }
-  .services-category { background-color: var(--card-bg); border: 1px solid var(--border); border-radius: 0.75rem; overflow: hidden; transition: all var(--transition-normal); }
-  .services-category:hover { transform: translateY(-5px); box-shadow: var(--card-shadow); border-color: var(--accent); }
-  .category-title { display: flex; align-items: center; gap: 0.75rem; padding: 1.25rem; background-color: rgba(15, 23, 42, 0.5); border-bottom: 1px solid var(--border); font-size: 1.35rem; color: var(--text-primary); }
-  .category-icon { color: var(--accent); }
-  .service-items { display: flex; flex-direction: column; }
-  .service-item { display: flex; align-items: center; padding: 1.25rem; border-bottom: 1px solid var(--border); transition: all var(--transition-normal); color: var(--text-primary); text-decoration: none; }
-  .service-item:last-child { border-bottom: none; }
-  .service-item.available { cursor: pointer; }
-  .service-item.available:hover { background-color: rgba(15, 23, 42, 0.3); }
-  .service-item:not(.available) { cursor: default; opacity: 0.6; } /* Dim unavailable */
-  .service-icon { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; margin-right: 1rem; background-color: rgba(59, 130, 246, 0.1); border-radius: 0.5rem; font-size: 1.25rem; color: var(--accent); transition: all var(--transition-normal); flex-shrink: 0; }
-  .service-item.available:hover .service-icon { background-color: rgba(59, 130, 246, 0.2); transform: scale(1.1); }
-  .service-info { flex: 1; }
-  .service-name { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--text-primary); }
-  .service-description { font-size: 0.9rem; color: var(--text-secondary); }
-  .service-status { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; padding: 0.25rem 0.75rem; border-radius: 9999px; margin-left: 1rem; }
-  .service-status.live { background-color: rgba(16, 185, 129, 0.1); color: var(--success); }
-  .service-status.maintenance { background-color: rgba(245, 158, 11, 0.1); color: var(--warning); }
-  .service-status.restricted { background-color: rgba(107, 114, 128, 0.1); color: var(--text-secondary); }
-  .status-dot { width: 8px; height: 8px; border-radius: 50%; }
-  .service-status.live .status-dot { background-color: var(--success); }
-  .service-status.maintenance .status-dot { background-color: var(--warning); }
-  .service-status.restricted .status-dot { background-color: var(--text-secondary); }
-  /* Offline service styling from inline */
-  .offline-service { position: relative; }
-  .offline-service::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: 0.5rem; pointer-events: none; z-index: 1; }
-  .offline-service .service-icon { color: var(--error); }
-  .offline-service .service-status.offline .status-dot { background-color: var(--error); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); animation: pulse-red 2s infinite; }
-  @keyframes pulse-red { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }
-
-  /* Projects Section */
-  .projects { /* Use section-padding alt-bg */ }
-  .projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; margin-top: 3rem; }
-  .project-card { background-color: var(--card-bg); border: 1px solid var(--border); border-radius: 0.75rem; padding: 1.5rem; transition: all var(--transition-normal); display: flex; flex-direction: column; text-decoration: none; } /* Added text-decoration */
-  .project-card:hover { transform: translateY(-10px); box-shadow: var(--card-shadow); border-color: var(--accent); }
-  .project-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
-  .project-icon { font-size: 1.75rem; color: var(--accent); transition: all var(--transition-normal); }
-  .project-card:hover .project-icon { transform: scale(1.1); }
-  .project-title { font-size: 1.25rem; margin: 0; color: var(--text-primary); }
-  .project-description { color: var(--text-secondary); margin-bottom: 1.5rem; flex-grow: 1; font-size: var(--font-size-sm); }
-  .project-tech { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
-  .tech-badge { background-color: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3); color: var(--accent); font-size: 0.8rem; font-weight: 500; padding: 0.25rem 0.75rem; border-radius: 9999px; }
-  .project-cta { margin-top: auto; }
-  .btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; } /* Define btn-sm if not global */
-
-  /* Dashboards Section */
-  .dashboards { /* Use section-padding */ }
-  .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 3rem; } /* Use auto-fit */
-  .dashboard-card { background: var(--card-bg); border-radius: 8px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid var(--border); text-decoration: none; }
-  .dashboard-card:hover { transform: translateY(-5px); box-shadow: var(--card-shadow); border-color: var(--accent); }
-  .dashboard-preview { height: 200px; background-size: cover; background-position: center; position: relative; background-color: var(--secondary-bg); /* Fallback bg */ }
-  /* Add specific preview backgrounds if needed, or use actual images */
-  .dashboard-preview.infrastructure { /* background-image: ... */ }
-  .dashboard-preview.kubernetes { /* background-image: ... */ }
-  .dashboard-preview.network { /* background-image: ... */ }
-  .dashboard-preview.services { /* background-image: ... */ }
-  .dashboard-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }
-  .dashboard-card:hover .dashboard-overlay { opacity: 1; }
-  .overlay-content { text-align: center; color: #ffffff; }
-  .overlay-icon { font-size: 2rem; margin-bottom: 0.5rem; }
-  .overlay-text { font-size: 1rem; opacity: 0.8; }
-  .dashboard-info { padding: 1.5rem; }
-  .dashboard-title { font-size: 1.25rem; margin-bottom: 0.5rem; color: var(--text-primary); }
-  .dashboard-description { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 1rem; }
-  .dashboard-cta .btn-sm { padding: 0.5rem 1rem; font-size: 0.9rem; }
-
-  /* General Responsive */
-  .section-padding { padding: 4rem 1rem; } /* Add horizontal padding */
-  .alt-bg {
-    /* Use padding instead of negative margins for full bleed */
-    padding-top: 4rem;
-    padding-bottom: 4rem;
-    background-color: var(--bg-secondary);
-    border-top: 1px solid var(--border-secondary);
-    border-bottom: 1px solid var(--border-secondary);
+  
+  #animated-terminal .terminal-line {
+    opacity: 0;
+    transform: translateY(5px);
+    transition: opacity 0.2s ease, transform 0.2s ease;
   }
-  .alt-bg > .container { /* Ensure container inside alt-bg keeps padding */
-     padding-left: 1rem;
-     padding-right: 1rem;
+  
+  #animated-terminal .terminal-line.visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  
+  /* Enhanced architecture diagram */
+  .architecture-diagram-container {
+    position: relative;
+    max-width: 1000px;
+    margin: 3rem auto;
+    aspect-ratio: 16 / 9;
+    border-radius: 1rem;
+    overflow: hidden;
+    box-shadow: var(--card-shadow);
+    border: 1px solid var(--border);
+    background-color: rgba(15, 23, 42, 0.5);
   }
 
-  @media (max-width: 1024px) {
-    .hero-content { grid-template-columns: 1fr; text-align: center; }
-    .hero-text { order: 2; }
-    .hero-terminal { order: 1; margin: 0 auto 2rem; max-width: 600px; }
-    .hero-stats { justify-content: center; }
-    .cta-buttons { justify-content: center; }
-  }
-  @media (max-width: 768px) {
-    .section-padding { padding: 3rem 1rem; }
-    .alt-bg { padding-top: 3rem; padding-bottom: 3rem; }
-    .hero { padding-top: 5rem; padding-bottom: 3rem; min-height: auto; }
-    .hero-title { font-size: 2.25rem; }
-    .section-title { font-size: var(--font-size-2xl); }
-    .section-header { flex-direction: column; align-items: center; gap: 0.5rem; margin-bottom: 2rem; }
-    .section-description { font-size: var(--font-size-base); }
-    .tech-grid, .projects-grid, .dashboard-grid, .architecture-details { grid-template-columns: 1fr; }
-    .services-grid { gap: 1.5rem; }
-    .service-item { flex-direction: column; align-items: flex-start; }
-    .service-status { margin-left: 0; margin-top: 0.5rem; }
+  .architecture-fallback {
+    display: none; /* Hide by default, show if JS disabled */
   }
 
-</style>
-
-<script>
-  // Adapted from script.js
-
-  // --- Particle Animation ---
-  function createBackgroundParticles(count = 30) { // Reduced default count
-    const particlesContainer = document.getElementById('particles-container');
-    if (!particlesContainer) return;
-    particlesContainer.innerHTML = ''; // Clear existing
-
-    for (let i = 0; i < count; i++) {
-      const particle = document.createElement('div');
-      particle.classList.add('particle');
-      const size = Math.random() * 3 + 1; // Smaller size
-      particle.style.width = `${size}px`;
-      particle.style.height = `${size}px`;
-      particle.style.left = `${Math.random() * 100}%`;
-      particle.style.top = `${Math.random() * 100}%`;
-      particle.style.opacity = (Math.random() * 0.2 + 0.05).toString(); // More subtle
-      particle.style.animation = `float-particle ${Math.random() * 25 + 15}s linear infinite`;
-      particle.style.animationDelay = `${Math.random() * 15}s`;
-      particlesContainer.appendChild(particle);
-    }
+  .architecture-diagram {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: grid;
+    grid-template-rows: repeat(3, 1fr);
+    grid-template-columns: repeat(4, 1fr);
+    gap: 1rem;
+    padding: 2rem;
   }
 
-  // --- Terminal Cursor ---
-  function initTerminalTyping() {
-    const cursor = document.querySelector('.hero-terminal .cursor');
-    if (cursor) {
-      setInterval(() => {
-        cursor.style.opacity = cursor.style.opacity === '0' ? '1' : '0';
-      }, 600);
-    }
-  }
-
-  // --- Status Checks (Placeholder - Requires actual API endpoints) ---
-  function checkAnsibleSandboxStatus() {
-      const btn = document.getElementById('ansible-sandbox-btn');
-      const badge = btn?.querySelector('.offline-badge');
-      if (!btn || !badge) return;
-
-      // Replace with actual API call
-      const isOnline = false; // Simulate offline for now
-
-      if (isOnline) {
-          btn.classList.remove('btn-danger');
-          btn.classList.add('btn-primary', 'pulse'); // Add pulse if desired
-          badge.textContent = 'Online';
-          badge.classList.remove('offline-badge');
-          badge.classList.add('online-badge');
-          badge.style.display = 'inline-block';
-      } else {
-          btn.classList.remove('btn-primary', 'pulse');
-          btn.classList.add('btn-danger');
-          badge.textContent = 'Offline';
-          badge.classList.remove('online-badge');
-          badge.classList.add('offline-badge');
-           badge.style.display = 'inline-block'; // Ensure it's shown
-      }
-  }
-
-   function checkLiveDashboardStatus() {
-      const indicator = document.querySelector('.dashboard-link .live-indicator');
-      if (!indicator) return;
-
-       // Replace with actual API call
-      const isOnline = false; // Simulate offline
-
-      if (isOnline) {
-          indicator.classList.remove('offline');
-      } else {
-          indicator.classList.add('offline');
-      }
-   }
-
-
-  // --- Initialization ---
-  document.addEventListener('DOMContentLoaded', function() {
-    if (document.getElementById('particles-container')) {
-        createBackgroundParticles();
-        // Optional: Add resize listener if particle count should change
-        // window.addEventListener('resize', () => createBackgroundParticles(window.innerWidth <= 768 ? 15 : 30));
-    }
-    if (document.querySelector('.hero-terminal .cursor')) {
-        initTerminalTyping();
-    }
-    // Initial status checks
-    checkAnsibleSandboxStatus();
-    checkLiveDashboardStatus();
-    // Optional: Set interval to re-check status periodically
-    // setInterval(checkAnsibleSandboxStatus, 60000); // Check every minute
-    // setInterval(checkLiveDashboardStatus, 60000);
-  });
-
-   // --- Contact Form Submission (If form is included on this page) ---
-   /*
-   const contactForm = document.getElementById('contact-form');
-   if (contactForm) {
-       contactForm.addEventListener('submit', async (e) => {
-           e.preventDefault();
-           const submitButton = contactForm.querySelector('button[type="submit"]');
-           const originalButtonText = submitButton.innerHTML;
-           const formMessages = contactForm.querySelector('.form-messages') || document.createElement('div'); // Add a div for messages if needed
-           formMessages.className = 'form-messages';
-           if (!contactForm.contains(formMessages)) {
-                contactForm.insertBefore(formMessages, submitButton);
-           }
-           formMessages.innerHTML = ''; // Clear previous messages
-
-           try {
-               submitButton.disabled = true;
-               submitButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Sending...';
-
-               const formData = new FormData(contactForm);
-               const data = Object.fromEntries(formData.entries());
-
-               const response = await fetch('/api/contact', { // Use the Astro API route
-                   method: 'POST',
-                   headers: { 'Content-Type': 'application/json' },
-                   body: JSON.stringify(data)
-               });
-
-               const result = await response.json();
-
-               if (response.ok) {
-                   formMessages.innerHTML = `<div class="alert alert-success"><i class="fas fa-check-circle"></i> ${result.message}</div>`;
-                   contactForm.reset();
-               } else {
-                   throw new Error(result.message || 'Failed to send message');
-               }
-
-           } catch (error) {
-               console.error('Error sending contact form:', error);
-               formMessages.innerHTML = `<div class="alert alert-error"><i class="fas fa-exclamation-circle"></i> ${error.message}</div>`;
-           } finally {
-               submitButton.disabled = false;
-               submitButton.innerHTML = originalButtonText;
-               setTimeout(() => { formMessages.innerHTML = ''; }, 5000); // Clear message after 5s
-           }
-       });
-   }
-   */
-
-</script>
\ No newline at end of file
+  .diagram-node {
+    background-color: rgba(30, 41, 59, 0.7);
+    border: 1px solid var(--border);
+    border-radius: 0.5rem;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    align-items:
\ No newline at end of file