<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="Leo & Tisha Maguire - AMSOIL Dealers and IT Professionals"><link rel="icon" type="image/png" href="/favicon.png"><link rel="apple-touch-icon" href="/favicon.png"><title>Leo&#39;s Lab - Leo Maguire</title><link rel="stylesheet" href="/_astro/about.BYtfHiQJ.css"></head> <body class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen">  <header class="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700"> <!-- Logo Section with Infrastructure Pattern --> <div class="relative overflow-hidden"> <!-- Infrastructure Skyline SVG Background --> <div class="absolute inset-0 opacity-[0.08] dark:opacity-[0.12] text-[#9aa4b2]" aria-hidden="true"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 160" preserveAspectRatio="none" class="w-full h-full"> <g fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"> <!-- baseline / subtle wave --> <path d="M0 132 C 80 124, 140 140, 220 132 S 360 124, 440 132 S 580 140, 660 132 S 800 124, 880 132 S 1020 140, 1100 132 S 1240 124, 1320 132 S 1460 140, 1600 132"></path> <!-- SERVER RACK CLUSTER A --> <g transform="translate(60,30)"> <rect x="0" y="30" width="72" height="76" rx="8"></rect> <rect x="92" y="22" width="72" height="84" rx="8"></rect> <path d="M12 46h48M12 62h48M12 78h48M12 94h22"></path> <circle cx="58" cy="94" r="2.2"></circle> <path d="M104 40h48M104 56h48M104 72h48M104 88h22"></path> <circle cx="150" cy="88" r="2.2"></circle> <path d="M10 110v10M60 110v10M102 110v10M152 110v10"></path> </g> <!-- NETWORK SWITCH + PORTS --> <g transform="translate(280,72)"> <rect x="0" y="0" width="160" height="42" rx="10"></rect> <path d="M18 14h18M42 14h18M66 14h18M90 14h18M114 14h18"></path> <path d="M18 28h18M42 28h18M66 28h18M90 28h18M114 28h18"></path> <rect x="140" y="10" width="12" height="10" rx="2"></rect> <rect x="140" y="24" width="12" height="10" rx="2"></rect> </g> <!-- PATCH CABLES --> <path d="M440 92 C 470 92, 470 62, 510 62 S 560 92, 600 92"></path> <path d="M440 104 C 475 104, 485 130, 525 130 S 590 110, 640 120"></path> <!-- RJ45 end --> <g transform="translate(628,108)"> <rect x="0" y="0" width="34" height="18" rx="4"></rect> <path d="M6 6v6M12 6v6M18 6v6M24 6v6M30 6v6"></path> <path d="M6 18v6M28 18v6"></path> </g> <!-- K8S HEX + NODES --> <g transform="translate(700,44)"> <path d="M80 34l30-17 30 17v34l-30 17-30-17z"></path> <circle cx="110" cy="50" r="3.2"></circle> <circle cx="96" cy="42" r="2.8"></circle> <circle cx="124" cy="42" r="2.8"></circle> <circle cx="96" cy="58" r="2.8"></circle> <circle cx="124" cy="58" r="2.8"></circle> <path d="M110 67v26"></path> </g> <!-- SCUBA TANK --> <g transform="translate(930,26)"> <rect x="0" y="24" width="70" height="102" rx="22"></rect> <path d="M10 24c6-16 44-16 50 0"></path> <path d="M6 62h58M6 92h58"></path> <path d="M28 18h14"></path> <path d="M35 18v-10"></path> <path d="M35 8h16"></path> <path d="M51 8c10 0 14 10 14 18"></path> <path d="M65 28 C 92 40, 92 78, 70 92"></path> </g> <!-- FISHING ROD + LINE + HOOK --> <g transform="translate(1090,22)"> <path d="M20 120 C 40 78, 90 44, 170 26 S 310 18, 420 26"></path> <path d="M18 122l-10 10"></path> <path d="M8 132l12 12"></path> <circle cx="120" cy="44" r="3"></circle> <circle cx="190" cy="34" r="3"></circle> <circle cx="260" cy="26" r="3"></circle> <circle cx="330" cy="22" r="3"></circle> <path d="M332 22 C 350 40, 348 70, 330 94 S 312 132, 340 144"></path> <path d="M340 144c10 0 12-10 4-14"></path> <path d="M344 132c-2 8-10 10-18 8"></path> </g> <!-- SERVER RACK CLUSTER B --> <g transform="translate(1260,34)"> <rect x="0" y="26" width="68" height="82" rx="8"></rect> <rect x="86" y="34" width="68" height="74" rx="8"></rect> <path d="M12 44h44M12 58h44M12 72h44M12 86h20"></path> <circle cx="56" cy="86" r="2.2"></circle> <path d="M98 50h44M98 64h44M98 78h44M98 92h20"></path> <circle cx="142" cy="92" r="2.2"></circle> </g> </g> </svg> </div> <!-- Logo and Manifesto Container --> <div class="container mx-auto px-4 py-6 relative"> <div class="flex items-center justify-between"> <a href="/" class="flex hover:opacity-80 transition-opacity flex-shrink-0"> <img src="/_astro/LeosLabLogo.BtSUAFtM_ZajXty.webp" alt="Leo's Lab" loading="lazy" decoding="async" fetchpriority="auto" width="200" height="200" class="w-48 h-48 object-contain"> </a> <!-- Manifesto Line - Hidden on mobile --> <div class="hidden sm:flex flex-1 items-center justify-center px-8"> <p id="manifesto" class="text-xs sm:text-sm tracking-[0.2em] uppercase text-gray-500 dark:text-gray-400 font-mono text-center">
Designing systems that scale, survive, and stay boring.
</p> </div> </div> </div> </div> <!-- Navigation Bar --> <nav class="bg-gray-100 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-600" aria-label="Main navigation"> <div class="container mx-auto px-4 flex items-center justify-between"> <!-- Mobile hamburger button --> <button id="mobile-menu-btn" class="md:hidden p-2 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors" aria-expanded="false" aria-controls="mobile-menu" aria-label="Toggle navigation menu"> <svg id="hamburger-icon" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> </svg> <svg id="close-icon" class="w-6 h-6 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> <!-- Desktop navigation --> <div class="hidden md:flex items-center justify-center w-full gap-6 py-3"> <a href="/" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"> Home </a><a href="/weather" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"> Weather </a><a href="/blog" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"> Blog </a><div class="relative group"> <button class="desktop-dropdown-btn text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors flex items-center gap-1" data-dropdown-index="3"> About <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> </svg> </button> <div class="desktop-dropdown absolute left-0 top-full mt-1 w-48 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50" data-dropdown-index="3"> <a href="/about" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 first:rounded-t-lg last:rounded-b-lg transition-colors"> About Me </a><a href="/et" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 first:rounded-t-lg last:rounded-b-lg transition-colors"> Living with ET </a> </div> </div><div class="relative group"> <button class="desktop-dropdown-btn text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors flex items-center gap-1" data-dropdown-index="4"> Tools <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> </svg> </button> <div class="desktop-dropdown absolute left-0 top-full mt-1 w-48 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50" data-dropdown-index="4"> <a href="/tools" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 first:rounded-t-lg last:rounded-b-lg transition-colors"> All Tools </a><a href="/tools/password-generator" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 first:rounded-t-lg last:rounded-b-lg transition-colors"> Password Generator </a><a href="/tools/jwt-decoder" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 first:rounded-t-lg last:rounded-b-lg transition-colors"> JWT Decoder </a><a href="/tools/hash-generator" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 first:rounded-t-lg last:rounded-b-lg transition-colors"> Hash Generator </a><a href="/tools/lorem-ipsum" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 first:rounded-t-lg last:rounded-b-lg transition-colors"> Lorem Ipsum </a><a href="/tools/json-yaml" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 first:rounded-t-lg last:rounded-b-lg transition-colors"> JSON/YAML Converter </a><a href="/tools/cron-builder" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 first:rounded-t-lg last:rounded-b-lg transition-colors"> Cron Builder </a> </div> </div><a href="/privacy" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"> Privacy </a>  </div> </div> <!-- Mobile navigation menu --> <div id="mobile-menu" class="hidden md:hidden border-t border-gray-200 dark:border-gray-700"> <div class="container mx-auto px-4 py-2"> <a href="/" class="block py-3 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"> Home </a><a href="/weather" class="block py-3 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"> Weather </a><a href="/blog" class="block py-3 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"> Blog </a><div class="py-1"> <button class="mobile-dropdown-btn w-full flex items-center justify-between py-3 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors" data-mobile-dropdown="3"> <span>About</span> <svg class="mobile-dropdown-arrow w-4 h-4 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> </svg> </button> <div class="mobile-dropdown-content hidden pl-4 border-l-2 border-gray-200 dark:border-gray-600" data-mobile-dropdown="3"> <a href="/about" class="block py-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"> About Me </a><a href="/et" class="block py-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"> Living with ET </a> </div> </div><div class="py-1"> <button class="mobile-dropdown-btn w-full flex items-center justify-between py-3 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors" data-mobile-dropdown="4"> <span>Tools</span> <svg class="mobile-dropdown-arrow w-4 h-4 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> </svg> </button> <div class="mobile-dropdown-content hidden pl-4 border-l-2 border-gray-200 dark:border-gray-600" data-mobile-dropdown="4"> <a href="/tools" class="block py-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"> All Tools </a><a href="/tools/password-generator" class="block py-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"> Password Generator </a><a href="/tools/jwt-decoder" class="block py-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"> JWT Decoder </a><a href="/tools/hash-generator" class="block py-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"> Hash Generator </a><a href="/tools/lorem-ipsum" class="block py-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"> Lorem Ipsum </a><a href="/tools/json-yaml" class="block py-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"> JSON/YAML Converter </a><a href="/tools/cron-builder" class="block py-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"> Cron Builder </a> </div> </div><a href="/privacy" class="block py-3 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"> Privacy </a> </div> </div> </nav> </header>  <div class="min-h-screen bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"> <!-- Main Content Area --> <div> <!-- Hero Header --> <header class="py-12 px-4 text-center border-b border-gray-200 dark:border-gray-800"> <img src="/_astro/LeoMaguire.KyFbjOwV.jpg" alt="Leo Maguire" class="w-32 h-32 rounded-full mx-auto mb-6 object-cover border-4 border-lab-blue shadow-lg"> <h1 class="text-5xl md:text-6xl font-bold mb-3">Leo Maguire</h1> <p class="text-gray-600 dark:text-gray-400 text-xl">IT Professional | Homelab Enthusiast | Problem Solver</p> </header> <!-- Main Content --> <main class="container mx-auto px-4 py-12"> <!-- Hero Section --> <div class="max-w-4xl mx-auto text-center mb-16"> <p class="text-xl text-gray-700 dark:text-gray-300 leading-relaxed">
20+ years in enterprise IT, from network engineering to cloud architecture.
              When I'm not solving problems at work, I'm building infrastructure at home.
</p> </div> <!-- Main Grid --> <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto"> <!-- The Lab --> <div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700 hover:border-lab-blue transition-colors"> <div class="flex items-center gap-3 mb-4"> <div class="w-10 h-10 bg-lab-blue rounded-lg flex items-center justify-center"> <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"></path> </svg> </div> <h2 class="text-xl font-bold text-lab-blue">The Homelab</h2> </div> <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">
3-node Proxmox cluster running K3s Kubernetes, managed with Terraform and Ansible.
                ArgoCD for GitOps, Longhorn for storage, full monitoring stack.
</p> <div class="flex flex-wrap gap-2"> <span class="px-2 py-1 bg-gray-200 dark:bg-gray-700 rounded text-xs text-gray-700 dark:text-gray-300">Proxmox</span> <span class="px-2 py-1 bg-gray-200 dark:bg-gray-700 rounded text-xs text-gray-700 dark:text-gray-300">Kubernetes</span> <span class="px-2 py-1 bg-gray-200 dark:bg-gray-700 rounded text-xs text-gray-700 dark:text-gray-300">ArgoCD</span> <span class="px-2 py-1 bg-gray-200 dark:bg-gray-700 rounded text-xs text-gray-700 dark:text-gray-300">Terraform</span> </div> </div> <!-- Professional --> <div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700 hover:border-green-500 transition-colors"> <div class="flex items-center gap-3 mb-4"> <div class="w-10 h-10 bg-green-600 rounded-lg flex items-center justify-center"> <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path> </svg> </div> <h2 class="text-xl font-bold text-green-600">Professional</h2> </div> <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">
Infrastructure architect focused on automation, reliability, and making complex systems manageable.
</p> <ul class="text-gray-600 dark:text-gray-400 text-sm space-y-1 mb-4"> <li>Cloud & On-Prem Infrastructure</li> <li>Network Engineering</li> <li>DevOps & CI/CD Pipelines</li> <li>Security & Compliance</li> </ul> <a href="https://www.linkedin.com/in/leo-maguire" target="_blank" rel="noopener noreferrer" class="text-green-600 hover:text-green-500 text-sm font-medium">
LinkedIn &rarr;
</a> </div> <!-- AMSOIL --> <div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700 hover:border-amsoil-red transition-colors"> <a href="https://www.amsoil.com/?zo=1858536" target="_blank" rel="noopener noreferrer" class="block mb-4"> <img src="/_astro/AMSOIL_Logo_wTag.CFRjMsdY.jpg" alt="AMSOIL - The First in Synthetics" class="w-full max-w-[200px] mx-auto rounded-lg"> </a> <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">
Family business with Tisha. Premium synthetic lubricants for vehicles, powersports, and industrial equipment.
</p> <p class="text-gray-500 text-xs mb-4"> <strong class="text-gray-700 dark:text-gray-300">Tisha Maguire</strong> - Independent Dealer
</p> <div class="text-center"> <a href="https://www.amsoil.com/?zo=1858536" target="_blank" rel="noopener noreferrer" class="inline-block bg-amsoil-red hover:bg-red-700 text-white text-sm font-medium px-4 py-2 rounded-lg transition-colors">
Shop Products
</a> </div> </div> <!-- Current Projects --> <div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700 hover:border-purple-500 transition-colors"> <div class="flex items-center gap-3 mb-4"> <div class="w-10 h-10 bg-purple-600 rounded-lg flex items-center justify-center"> <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path> </svg> </div> <h2 class="text-xl font-bold text-purple-600">Current Projects</h2> </div> <ul class="text-gray-600 dark:text-gray-400 text-sm space-y-2"> <li class="flex items-start gap-2"> <span class="text-purple-600 mt-1">&#8227;</span> <span>GitOps pipeline with Forgejo Actions + ArgoCD</span> </li> <li class="flex items-start gap-2"> <span class="text-purple-600 mt-1">&#8227;</span> <span>Self-hosted monitoring (Prometheus, Grafana, Loki)</span> </li> <li class="flex items-start gap-2"> <span class="text-purple-600 mt-1">&#8227;</span> <span>Private container registry with Zot</span> </li> <li class="flex items-start gap-2"> <span class="text-purple-600 mt-1">&#8227;</span> <span>AI-assisted development workflows</span> </li> </ul> </div> <!-- Hobbies --> <div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700 hover:border-orange-500 transition-colors"> <div class="flex items-center gap-3 mb-4"> <div class="w-10 h-10 bg-orange-600 rounded-lg flex items-center justify-center"> <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path> </svg> </div> <h2 class="text-xl font-bold text-orange-600">Outside Work</h2> </div> <ul class="text-gray-600 dark:text-gray-400 text-sm space-y-2"> <li class="flex items-start gap-2"> <span class="text-orange-600 mt-1">&#8227;</span> <span>Guitar & bass (badly, but enthusiastically)</span> </li> <li class="flex items-start gap-2"> <span class="text-orange-600 mt-1">&#8227;</span> <span>Scuba diving</span> </li> <li class="flex items-start gap-2"> <span class="text-orange-600 mt-1">&#8227;</span> <span>Fishing</span> </li> <li class="flex items-start gap-2"> <span class="text-orange-600 mt-1">&#8227;</span> <span>Shooting</span> </li> <li class="flex items-start gap-2"> <span class="text-orange-600 mt-1">&#8227;</span> <span>Tinkering with the homelab</span> </li> </ul> </div> <!-- Tech Stack --> <div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700 hover:border-cyan-500 transition-colors"> <div class="flex items-center gap-3 mb-4"> <div class="w-10 h-10 bg-cyan-600 rounded-lg flex items-center justify-center"> <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path> </svg> </div> <h2 class="text-xl font-bold text-cyan-600">Tech I Use</h2> </div> <div class="flex flex-wrap gap-2"> <span class="px-2 py-1 bg-gray-200 dark:bg-gray-700 rounded text-xs text-gray-700 dark:text-gray-300">K3s</span> <span class="px-2 py-1 bg-gray-200 dark:bg-gray-700 rounded text-xs text-gray-700 dark:text-gray-300">Proxmox</span> <span class="px-2 py-1 bg-gray-200 dark:bg-gray-700 rounded text-xs text-gray-700 dark:text-gray-300">Terraform</span> <span class="px-2 py-1 bg-gray-200 dark:bg-gray-700 rounded text-xs text-gray-700 dark:text-gray-300">Ansible</span> <span class="px-2 py-1 bg-gray-200 dark:bg-gray-700 rounded text-xs text-gray-700 dark:text-gray-300">ArgoCD</span> <span class="px-2 py-1 bg-gray-200 dark:bg-gray-700 rounded text-xs text-gray-700 dark:text-gray-300">Prometheus</span> <span class="px-2 py-1 bg-gray-200 dark:bg-gray-700 rounded text-xs text-gray-700 dark:text-gray-300">Grafana</span> <span class="px-2 py-1 bg-gray-200 dark:bg-gray-700 rounded text-xs text-gray-700 dark:text-gray-300">Traefik</span> <span class="px-2 py-1 bg-gray-200 dark:bg-gray-700 rounded text-xs text-gray-700 dark:text-gray-300">Python</span> <span class="px-2 py-1 bg-gray-200 dark:bg-gray-700 rounded text-xs text-gray-700 dark:text-gray-300">Bash</span> <span class="px-2 py-1 bg-gray-200 dark:bg-gray-700 rounded text-xs text-gray-700 dark:text-gray-300">Git</span> <span class="px-2 py-1 bg-gray-200 dark:bg-gray-700 rounded text-xs text-gray-700 dark:text-gray-300">Claude</span> </div> </div> </div> <!-- Featured Video (external only) --> <div class="max-w-3xl mx-auto mt-16"> <h2 class="text-2xl font-bold mb-6 text-center">Featured</h2> <div class="youtube-container w-full" style="aspect-ratio: 16/9;"> <iframe src="https://www.youtube-nocookie.com/embed/5hY8matcKXk" title="Leo's Lab Featured Video" class="w-full h-full rounded-lg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen loading="lazy"></iframe> </div> </div> <!-- Contact --> <div class="max-w-2xl mx-auto mt-16 text-center"> <h2 class="text-2xl font-bold mb-6">Get in Touch</h2> <div class="flex justify-center gap-6"> <a href="https://www.linkedin.com/in/leo-maguire" target="_blank" rel="noopener noreferrer" class="text-gray-500 hover:text-lab-blue transition-colors"> <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"> <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.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 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.222 0h.003z"></path> </svg> </a> <a href="https://github.com/leoandtisha" target="_blank" rel="noopener noreferrer" class="text-gray-500 hover:text-gray-900 dark:hover:text-white transition-colors"> <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path> </svg> </a> <a href="https://www.facebook.com/lmaguire" target="_blank" rel="noopener noreferrer" class="text-gray-500 hover:text-blue-600 transition-colors"> <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"> <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"></path> </svg> </a> </div> </div> </main> </div> <!-- End Main Content Area --> </div>  <footer class="bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 py-6 text-center text-gray-600 dark:text-gray-400 text-sm"> <p>&copy; 2025 Leo&#39;s Lab - Leo Maguire</p>  <div class="mt-3"> <a href="/privacy" class="hover:text-gray-900 dark:hover:text-white transition-colors">Privacy Policy</a> </div> </footer> <script type="module">const s=["Designing systems that scale, survive, and stay boring.","Build it by hand. Automate it forever.","Reliable infrastructure. Clean automation. Zero drama.","Homelab discipline. Enterprise outcomes.","Make it observable. Make it repeatable. Make it boring.","When I'm not fixing systems at work, I'm building them at home."],a=document.getElementById("manifesto");if(a){const e=Math.floor(Math.random()*s.length);a.textContent=s[e]}const d=document.getElementById("mobile-menu-btn"),c=document.getElementById("mobile-menu"),r=document.getElementById("hamburger-icon"),m=document.getElementById("close-icon");function l(){const e=c?.classList.toggle("hidden")===!1;d?.setAttribute("aria-expanded",String(e)),r?.classList.toggle("hidden",e),m?.classList.toggle("hidden",!e)}d?.addEventListener("click",e=>{e.stopPropagation(),l()});document.querySelectorAll(".mobile-dropdown-btn").forEach(e=>{e.addEventListener("click",o=>{o.stopPropagation();const n=e.dataset.mobileDropdown,t=document.querySelector(`.mobile-dropdown-content[data-mobile-dropdown="${n}"]`),i=e.querySelector(".mobile-dropdown-arrow");t?.classList.toggle("hidden"),i?.classList.toggle("rotate-180")})});document.querySelectorAll(".desktop-dropdown-btn").forEach(e=>{e.addEventListener("click",o=>{o.stopPropagation();const n=e.dataset.dropdownIndex,t=document.querySelector(`.desktop-dropdown[data-dropdown-index="${n}"]`);document.querySelectorAll(".desktop-dropdown").forEach(i=>{i!==t&&(i.classList.remove("opacity-100","visible"),i.classList.add("opacity-0","invisible"))}),t?.classList.toggle("opacity-100"),t?.classList.toggle("visible"),t?.classList.toggle("opacity-0"),t?.classList.toggle("invisible")})});document.addEventListener("click",e=>{const o=document.querySelector("nav");o&&!o.contains(e.target)&&(c?.classList.contains("hidden")||l(),document.querySelectorAll(".desktop-dropdown").forEach(n=>{n.classList.remove("opacity-100","visible"),n.classList.add("opacity-0","invisible")}))});</script> </body> </html>