<!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="Abel Mendoza - Robotics & Embedded Systems Engineer specializing in UAV autonomy, ROS2, PX4, and embedded Linux systems. Based in Southern California.">
      <meta name="keywords" content="robotics engineer, embedded systems, UAV, PX4, ROS2, autonomous systems, NVIDIA Jetson, RealSense, MAVLink, Abel Mendoza, Southern California">
      <meta name="author" content="Abel Mendoza">
      <meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
      <meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
      <meta name="bingbot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
      <meta name="theme-color" content="#b842df">
      <meta name="msapplication-TileColor" content="#b842df">
      <meta name="msapplication-config" content="browserconfig.xml">
      
      <!-- Open Graph / Facebook -->
      <meta property="og:type" content="website">
      <meta property="og:url" content="https://www.abelxmendoza.com/">
      <meta property="og:title" content="Abel Mendoza - Robotics & Embedded Systems Engineer Portfolio">
      <meta property="og:description" content="Robotics & Embedded Systems Engineer specializing in UAV autonomy stacks, ROS2 perception pipelines, and embedded Linux systems.">
      <meta property="og:image" content="https://www.abelxmendoza.com/images/omega1selfie.png">
      <meta property="og:image:width" content="1200">
      <meta property="og:image:height" content="630">
      <meta property="og:image:alt" content="Abel Mendoza - Robotics & Embedded Systems Engineer">
      <meta property="og:site_name" content="Abel Mendoza Portfolio">
      <meta property="og:locale" content="en_US">
      
      <!-- Twitter -->
      <meta property="twitter:card" content="summary_large_image">
      <meta property="twitter:url" content="https://www.abelxmendoza.com/">
      <meta property="twitter:title" content="Abel Mendoza - Robotics & Embedded Systems Engineer Portfolio">
      <meta property="twitter:description" content="Robotics & Embedded Systems Engineer specializing in UAV autonomy stacks, ROS2 perception pipelines, and embedded Linux systems.">
      <meta property="twitter:image" content="https://www.abelxmendoza.com/images/omega1selfie.png">
      <meta property="twitter:image:alt" content="Abel Mendoza - Robotics & Embedded Systems Engineer">
      <meta property="twitter:creator" content="@abelxmendoza">
      <meta property="twitter:site" content="@abelxmendoza">
      
      <!-- Additional SEO -->
      <meta name="geo.region" content="US-CA">
      <meta name="geo.placename" content="Southern California">
      <meta name="language" content="en">
      <meta name="revisit-after" content="7 days">
      <meta name="rating" content="general">
      <meta name="distribution" content="global">
      <meta name="target" content="all">
      <meta name="HandheldFriendly" content="true">
      <meta name="MobileOptimized" content="320">
      <meta name="format-detection" content="telephone=no">
      
      <!-- Canonical URL -->
      <link rel="canonical" href="https://www.abelxmendoza.com/">
      
      <!-- Alternate languages (if applicable) -->
      <link rel="alternate" hreflang="en" href="https://www.abelxmendoza.com/">
      <link rel="alternate" hreflang="x-default" href="https://www.abelxmendoza.com/">
      
      <!-- DNS Prefetch for performance -->
      <link rel="dns-prefetch" href="//fonts.googleapis.com">
      <link rel="dns-prefetch" href="//fonts.gstatic.com">
      <link rel="dns-prefetch" href="//cdnjs.cloudflare.com">
      <link rel="dns-prefetch" href="//use.fontawesome.com">
      
      <!-- Preconnect for critical resources -->
      <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <title>Abel Mendoza - Robotics & Embedded Systems Engineer</title>
      
      <!-- Preload critical resources -->
      <link rel="preload" href="css/style.css?v=5&t=1738000000" as="style">
      <link rel="preload" href="https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap" as="style">
      <link rel="preload" href="images/spider.png" as="image">
      <link rel="preload" href="images/wallpaper-background.jpg" as="image">
      <link rel="preload" href="images/MeComps.JPG?v=2" as="image" fetchpriority="high">

      <link rel="preload" href="js/security.js?v=5&t=1738000000" as="script">
      <link rel="preload" href="js/script.js?v=5&t=1738000000" as="script">
      
      <!-- Stylesheets -->
      <link href="css/style.css?v=5&t=1738000000" rel="stylesheet" type="text/css" />
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" media="print" onload="this.media='all'">
      <noscript><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"></noscript>
      
      <!-- Favicon -->
      <link rel="icon" href="images/spider.png">
      
      <!-- PWA Manifest -->
      <link rel="manifest" href="manifest.json">
      <meta name="theme-color" content="#b842df">
      <meta name="mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
      <meta name="apple-mobile-web-app-title" content="Abel Portfolio">
      <link rel="apple-touch-icon" href="images/spider.png">
      
      <!-- Scripts -->
      <!-- Security Configuration -->
      <script src="js/security-config.js?v=5&t=1738000000" defer></script>

      <!-- Security Manager -->
      <script src="js/security.js?v=5&t=1738000000" defer></script>

      <!-- Main Application Script -->
      <script src="js/script.js?v=5&t=1738000000" defer></script>
      <script src="js/splash-screen.js?v=5&t=1738000000" defer></script>
      <script src="js/pwa-features.js?v=5&t=1738000000" defer></script>
      
      <!-- PWA Service Worker Registration -->
      <script>
        if ('serviceWorker' in navigator) {
          window.addEventListener('load', () => {
            navigator.serviceWorker.register('/sw.js').then((registration) => {
              registration.addEventListener('updatefound', () => {
                const newWorker = registration.installing;
                newWorker.addEventListener('statechange', () => {
                  if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
                    var b = document.createElement('div');
                    b.innerHTML = 'New version available! <button onclick="window.location.reload()" style="background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.4);color:#fff;padding:4px 10px;border-radius:4px;cursor:pointer;margin-left:8px;font-size:13px">Refresh</button>';
                    b.style.cssText = 'position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#b842df;color:#fff;padding:12px 20px;border-radius:8px;z-index:9999;font-family:sans-serif;font-size:14px;white-space:nowrap';
                    document.body.appendChild(b);
                    setTimeout(function(){ if(b.parentNode) b.remove(); }, 15000);
                  }
                });
              });
            }).catch(function(){});
          });
        }
      </script>
      
      <!-- Image fallback error handling -->
      <script>
        document.addEventListener('error', function(event) {
          if (event.target.tagName === 'IMG') {
            if (event.target.src.includes('spider.png')) {
              event.target.style.display = 'none';
            } else if (event.target.classList.contains('project-card-image')) {
              event.target.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZGRkIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzk5OSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPkltYWdlIG5vdCBhdmFpbGFibGU8L3RleHQ+PC9zdmc+';
              event.target.alt = 'Image not available';
            }
          }
        }, true);
      </script>
  </head>
    <body>
      <!-- Fixed wallpaper background - covers full viewport on all devices -->
      <div id="bg-wallpaper" aria-hidden="true"></div>

      <!-- Splash Screen -->
      <div id="splash-screen" class="splash-screen">
        <video id="splash-video" class="splash-video" autoplay muted playsinline preload="none">
          <source src="images/OmegaTechSplashScreen.MP4" type="video/mp4">
          <!-- Fallback message if video fails to load -->
          <div class="splash-fallback">
            <p>Loading...</p>
          </div>
        </video>
      </div>

      <!-- Structured Data for SEO -->
      <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "Person",
        "name": "Abel Mendoza",
        "jobTitle": "Robotics & Embedded Systems Engineer",
        "description": "Robotics & Embedded Systems Engineer specializing in UAV autonomy, ROS2, PX4, and embedded Linux systems",
        "url": "https://www.abelxmendoza.com",
        "image": "https://www.abelxmendoza.com/images/omega1selfie.png",
        "sameAs": [
          "https://x.com/CyberNautAbel",
          "https://github.com/abelxmendoza",
          "https://www.linkedin.com/in/abelxmendoza/",
          "https://www.youtube.com/@Omega-Technologies"
        ],
        "knowsAbout": [
          "Robotics",
          "Embedded Systems",
          "UAV Autonomy",
          "ROS2",
          "PX4 Autopilot",
          "MAVLink",
          "MAVSDK",
          "NVIDIA Jetson",
          "Intel RealSense",
          "Python",
          "C++",
          "Linux"
        ],
        "address": {
          "@type": "PostalAddress",
          "addressRegion": "CA",
          "addressCountry": "US"
        }
      }
      </script>
      
      <!-- Website Structured Data -->
      <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "WebSite",
        "name": "Abel Mendoza Portfolio",
        "url": "https://www.abelxmendoza.com",
        "description": "Robotics & Embedded Systems Engineer Portfolio - UAV Autonomy, ROS2, PX4, Embedded Linux",
        "author": {
          "@type": "Person",
          "name": "Abel Mendoza"
        },
        "potentialAction": {
          "@type": "SearchAction",
          "target": "https://www.abelxmendoza.com/?q={search_term_string}",
          "query-input": "required name=search_term_string"
        }
      }
      </script>
      
      <!-- Portfolio Structured Data -->
      <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "CreativeWork",
        "name": "Abel Mendoza Robotics & Embedded Systems Engineer Portfolio",
        "description": "Portfolio showcasing robotics, UAV autonomy, embedded systems, and autonomous systems engineering projects",
        "url": "https://www.abelxmendoza.com",
        "author": {
          "@type": "Person",
          "name": "Abel Mendoza"
        },
        "dateCreated": "2024-01-01",
        "dateModified": "2025-03-20",
        "inLanguage": "en-US",
        "isAccessibleForFree": true,
        "keywords": "robotics engineer, embedded systems, UAV autonomy, PX4, ROS2, NVIDIA Jetson, aerospace, defense"
      }
      </script>

        <div class="container">
	 

		<!--────────────────Header───────────────-->
	<header>
		<a class="logo" href="#home">

                <picture><source srcset="images/spider.webp" type="image/webp"><img src="images/spider.png" alt="spider icon" loading="lazy" width="40" height="40" /></picture>
		</a>

        <div class="resume-dropdown">
            <button class="resumeButton" aria-label="Resume dropdown menu" aria-expanded="false" aria-haspopup="true">Resumes</button>
            <div class="resume-dropdown-content" role="menu" aria-label="Resume options">
                    <a href="https://drive.google.com/file/d/1M6FTAmzSXGFTn2iTXo4ae76FPT3G5Gaj/view?usp=sharing" target="_blank" rel="noopener noreferrer" role="menuitem" aria-label="Download Robotic Systems Engineer Resume">1. Robotic Systems Engineer-Resume</a>
                    <a href="https://drive.google.com/file/d/1dALnPnyp9Jzf7Bd0-DQhK8axb6AuY1WY/view?usp=drive_link" target="_blank" rel="noopener noreferrer" role="menuitem" aria-label="Download UAV Field Engineer Resume">2. UAV Field Engineer-Resume</a>
                    <a href="https://drive.google.com/file/d/1IvyVtmh7rQMdW7A6vzRMUYc5koizolR7/view?usp=sharing" target="_blank" rel="noopener noreferrer" role="menuitem" aria-label="Download Electronics Technician Resume">3. Electronics Technician-Resume</a>
                    <a href="https://drive.google.com/file/d/1Y_zhMno5JzMAvVf7of5YOvajapJhtFl9/view?usp=sharing" target="_blank" rel="noopener noreferrer" role="menuitem" aria-label="Download Fullstack Software Engineer Resume">4. Fullstack Software Engineer-Resume</a>
            </div>
        </div>





		<nav role="navigation" aria-label="Main navigation">	
		 <ul class="nav-bar" id="nav-bar" role="menubar"><div class="bg" aria-hidden="true"></div>
			<li role="none"><a class="nav-link active" href="#home" aria-current="page" role="menuitem">Home</a></li>
			<li role="none"><a class="nav-link" href="#skills-tech" role="menuitem">Skills</a></li>
			<li role="none"><a class="nav-link" href="#video" role="menuitem">Video</a></li>
			<li role="none"><a class="nav-link" href="#projects" role="menuitem">Projects</a></li>
			<li role="none"><a class="nav-link" href="#contact" role="menuitem">Contact</a></li>
		 </ul>
		</nav>
			
		<button class="hamburger" aria-label="Toggle navigation menu" aria-expanded="false" aria-controls="nav-bar" type="button">
				<div class="line1" aria-hidden="true"></div>
            <div class="line2" aria-hidden="true"></div>
				<div class="line3" aria-hidden="true"></div>
		</button>
	</header>
	<main>
		<!--─────────────────Home────────────────-->
	  <section id="home" aria-labelledby="home-heading">
		 <div class="filter" aria-hidden="true"></div>
		 <div class="intro">
		  <h1 id="home-heading">Abel Mendoza</h1>
		  <p class="subtitle">Robotics & Embedded Systems Engineer</p>
		  <div class="profile-image-container">
			  <img src="images/MeComps.JPG?v=2" alt="Abel Mendoza with computers" class="profile-image" loading="eager" fetchpriority="high" width="3024" height="4032">
		  </div>
		  <p class="location-status">Based in Southern California · Open to UAV, robotics, electronics, aerospace, and defense roles.</p>
		  <p>I like writing code for the web, electronics and embedded systems, and tinkering with robotics.</p>
          <p>When I'm not coding I like aggressively cuddling others on the jiu jitsu mat, reading, and educating myself.</p>
			  
		  <!--────social media links─────-->
			 
		  <div class="social-media" role="list" aria-label="Social media links">
			  
		  <a href="https://x.com/CyberNautAbel" target="_blank" rel="noopener noreferrer" aria-label="Follow me on X" role="listitem">
			  <div class="hover-bg" aria-hidden="true"></div>
			  <img src="images/twitter-icon.svg" alt="X" class="social-icon" width="24" height="24" aria-hidden="true">
		  </a>
			  <a href="https://github.com/abelxmendoza" target="_blank" rel="noopener noreferrer" aria-label="View my GitHub profile" role="listitem">
				  <div class="hover-bg" aria-hidden="true"></div>
				  <img src="images/github-icon.svg" alt="GitHub" class="social-icon" width="24" height="24" aria-hidden="true">
			  </a>
			  <a href="https://www.linkedin.com/in/abelxmendoza/" target="_blank" rel="noopener noreferrer" aria-label="Connect with me on LinkedIn" role="listitem">
				  <div class="hover-bg" aria-hidden="true"></div>
				  <img src="images/linkedin-icon.svg" alt="LinkedIn" class="social-icon" width="24" height="24" aria-hidden="true">
			  </a>
			  <a href="https://www.youtube.com/@Omega-Technologies" target="_blank" rel="noopener noreferrer" aria-label="Subscribe to my YouTube channel" role="listitem">
				  <div class="hover-bg" aria-hidden="true"></div>
				  <img src="images/youtube-icon.svg" alt="YouTube" class="social-icon" width="24" height="24" aria-hidden="true">
			  </a>
			  
                      
		    </div>
		    </div>
			 
		 <!--─────────────────Skills Section────────────────-->
<section id="skills-tech" aria-labelledby="skills-tech-heading">
  <style>
    #skills-tech {
      margin: 0;
      padding: 2rem 1rem;
    }
    #skills-tech .skills-intro {
      max-width: 980px;
      margin: 0 auto;
    }
    #skills-tech .skills-heading-wrap {
      text-align: center;
      margin-bottom: 1.5rem;
    }
    #skills-tech .skills-heading-wrap h2 {
      font-size: 1.8rem;
      font-family: var(--main-font-family);
      color: var(--main-fonts-color);
      margin-bottom: 0.4rem;
      letter-spacing: 0.04em;
    }
    #skills-tech .skills-heading-wrap h2 span {
      color: var(--main-decor-color);
    }
    #skills-tech .skills-divider {
      width: 60px;
      height: 3px;
      background: linear-gradient(90deg, var(--main-decor-color), #9932cc);
      margin: 0.5rem auto 0.9rem;
      border-radius: 2px;
    }
    #skills-tech .skills-heading-wrap p {
      font-size: 1rem;
      font-family: var(--main-font-family);
      color: rgba(255,255,255,0.7);
      line-height: 1.6;
      margin: 0;
    }
    #skills-tech .technology-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
      gap: 0.75rem;
    }
    @media (min-width: 768px) {
      #skills-tech .technology-grid {
        grid-template-columns: repeat(8, 1fr);
      }
    }
    #skills-tech .tech-chip {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.45rem;
      padding: 0.9rem 0.6rem 0.75rem;
      border-radius: 10px;
      text-decoration: none;
      color: #fff;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
      overflow: hidden;
    }
    #skills-tech .tech-chip::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 10px;
      background: linear-gradient(135deg, rgba(184,66,223,0.12), rgba(153,50,204,0.06));
      opacity: 0;
      transition: opacity 200ms ease;
    }
    #skills-tech .tech-chip:hover {
      transform: translateY(-4px);
      border-color: var(--main-decor-color);
      box-shadow: 0 0 16px rgba(184,66,223,0.35), 0 6px 20px rgba(0,0,0,0.4);
      background: rgba(184,66,223,0.08);
    }
    #skills-tech .tech-chip:hover::before {
      opacity: 1;
    }
    #skills-tech .tech-chip .logo {
      width: 44px;
      height: 44px;
      object-fit: contain;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
      transition: transform 200ms ease;
      position: relative;
    }
    #skills-tech .tech-chip:hover .logo {
      transform: scale(1.1);
    }
    #skills-tech .tech-chip .tech-label {
      font-size: 0.75rem;
      font-weight: 600;
      font-family: var(--main-font-family);
      text-align: center;
      color: rgba(255,255,255,0.9);
      line-height: 1.2;
      position: relative;
    }
    @media (max-width: 640px) {
      #skills-tech {
        padding: 2rem 0.75rem;
      }
      #skills-tech .technology-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 0.6rem;
      }
      /* Always-bright base state on mobile */
      #skills-tech .tech-chip {
        padding: 0.75rem 0.4rem 0.6rem;
        background: linear-gradient(135deg, rgba(184,66,223,0.28), rgba(120,30,160,0.32));
        border: 1px solid rgba(184,66,223,0.7);
        box-shadow: 0 0 14px rgba(184,66,223,0.25), 0 4px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.1);
      }
      #skills-tech .tech-chip::before {
        opacity: 1;
      }
      #skills-tech .tech-chip .logo {
        filter: drop-shadow(0 2px 6px rgba(184,66,223,0.5)) brightness(1.2);
      }
      #skills-tech .tech-chip .tech-label {
        color: #fff;
        text-shadow: 0 1px 4px rgba(0,0,0,0.6);
      }
      /* Tap/press feedback — scale down + bright burst */
      #skills-tech .tech-chip:active {
        transform: scale(0.93);
        background: linear-gradient(135deg, rgba(184,66,223,0.55), rgba(153,50,204,0.55));
        border-color: #b842df;
        box-shadow: 0 0 28px rgba(184,66,223,0.7), 0 2px 8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.15);
        transition: transform 80ms ease, background 80ms ease, box-shadow 80ms ease;
      }
      #skills-tech .tech-chip:active .logo {
        filter: drop-shadow(0 0 8px rgba(184,66,223,0.9)) brightness(1.35);
      }
      #skills-tech .skills-heading-wrap p {
        color: rgba(255,255,255,0.85);
      }
    }
  </style>

  <div class="skills-intro">
    <div class="skills-heading-wrap">
      <h2 id="skills-tech-heading">Skills <span>&</span> Technologies</h2>
      <div class="skills-divider"></div>
      <p>Core autonomous systems competencies, tooling, and embedded platforms.</p>
    </div>

    <div class="technology-grid technology-links">
        <a class="tech-chip" href="https://www.python.org/" target="_blank" rel="noopener noreferrer" aria-label="Python official site" title="Python">
          <picture><source srcset="images/pythonlogo.webp" type="image/webp"><img class="logo" src="images/pythonlogo.png" alt="Python logo" loading="lazy" width="36" height="36" /></picture>
          <span class="tech-label">Python</span>
        </a>
        <a class="tech-chip" href="https://isocpp.org/" target="_blank" rel="noopener noreferrer" aria-label="C++ official site" title="C++">
          <picture><source srcset="images/c++Logo.webp" type="image/webp"><img class="logo" src="images/c++Logo.png" alt="C++ logo" loading="lazy" width="36" height="36" /></picture>
          <span class="tech-label">C++</span>
        </a>
        <a class="tech-chip" href="https://en.cppreference.com/w/c" target="_blank" rel="noopener noreferrer" aria-label="C official site" title="C">
          <picture><source srcset="images/CLogo.webp" type="image/webp"><img class="logo" src="images/CLogo.jpeg" alt="C logo" loading="lazy" width="36" height="36" /></picture>
          <span class="tech-label">C</span>
        </a>
        <a class="tech-chip" href="https://go.dev/" target="_blank" rel="noopener noreferrer" aria-label="Go official site" title="Go">
          <picture><source srcset="images/GoLogoicons.webp" type="image/webp"><img class="logo" src="images/GoLogoicons.png" alt="Go logo" loading="lazy" width="36" height="36" /></picture>
          <span class="tech-label">Go</span>
        </a>
        <a class="tech-chip" href="https://www.gnu.org/software/bash/" target="_blank" rel="noopener noreferrer" aria-label="Bash official site" title="Bash">
          <picture><source srcset="images/bash-1-logo-black-and-white.webp" type="image/webp"><img class="logo" src="images/bash-1-logo-black-and-white.png" alt="Bash logo" loading="lazy" width="36" height="36" /></picture>
          <span class="tech-label">Bash</span>
        </a>
        <a class="tech-chip" href="https://git-scm.com/" target="_blank" rel="noopener noreferrer" aria-label="Git official site" title="Git">
          <picture><source srcset="images/gitLogo.webp" type="image/webp"><img class="logo" src="images/gitLogo.jpeg" alt="Git logo" loading="lazy" width="36" height="36" /></picture>
          <span class="tech-label">Git</span>
        </a>
        <a class="tech-chip" href="https://www.docker.com/" target="_blank" rel="noopener noreferrer" aria-label="Docker official site" title="Docker">
          <picture><source srcset="images/dockerLogo.webp" type="image/webp"><img class="logo" src="images/dockerLogo.jpeg" alt="Docker logo" loading="lazy" width="36" height="36" /></picture>
          <span class="tech-label">Docker</span>
        </a>
        <a class="tech-chip" href="https://www.qgroundcontrol.com/" target="_blank" rel="noopener noreferrer" aria-label="QGroundControl official site" title="QGroundControl">
          <picture><source srcset="images/QGroundControlLogo.webp" type="image/webp"><img class="logo" src="images/QGroundControlLogo.png" alt="QGroundControl logo" loading="lazy" width="36" height="36" /></picture>
          <span class="tech-label">QGroundControl</span>
        </a>
        <a class="tech-chip" href="https://www.ros.org/" target="_blank" rel="noopener noreferrer" aria-label="ROS2 official site" title="ROS2">
          <picture><source srcset="images/ros2.webp" type="image/webp"><img class="logo" src="images/ros2.png" alt="ROS2 logo" loading="lazy" width="36" height="36" /></picture>
          <span class="tech-label">ROS2</span>
        </a>
        <a class="tech-chip" href="https://px4.io/" target="_blank" rel="noopener noreferrer" aria-label="PX4 official site" title="PX4">
          <picture><source srcset="images/px4logo.webp" type="image/webp"><img class="logo" src="images/px4logo.png" alt="PX4 logo" loading="lazy" width="36" height="36" /></picture>
          <span class="tech-label">PX4</span>
        </a>
        <a class="tech-chip" href="https://gazebosim.org/" target="_blank" rel="noopener noreferrer" aria-label="Gazebo official site" title="Gazebo">
          <picture><source srcset="images/gazebologo.webp" type="image/webp"><img class="logo" src="images/gazebologo.png" alt="Gazebo logo" loading="lazy" width="36" height="36" /></picture>
          <span class="tech-label">Gazebo</span>
        </a>
        <a class="tech-chip" href="https://mavlink.io/en/" target="_blank" rel="noopener noreferrer" aria-label="MAVLink official site" title="MAVLink">
          <picture><source srcset="images/mavlinklogo.webp" type="image/webp"><img class="logo" src="images/mavlinklogo.png" alt="MAVLink logo" loading="lazy" width="36" height="36" /></picture>
          <span class="tech-label">MAVLink</span>
        </a>
        <a class="tech-chip" href="https://mavsdk.mavlink.io/" target="_blank" rel="noopener noreferrer" aria-label="MAVSDK official site" title="MAVSDK">
          <picture><source srcset="images/MAVSDKlogo.webp" type="image/webp"><img class="logo" src="images/MAVSDKlogo.png" alt="MAVSDK logo" loading="lazy" width="36" height="36" /></picture>
          <span class="tech-label">MAVSDK</span>
        </a>
        <a class="tech-chip" href="https://opencv.org/" target="_blank" rel="noopener noreferrer" aria-label="OpenCV official site" title="OpenCV">
          <picture><source srcset="images/OpenCV_Logo_with_text.webp" type="image/webp"><img class="logo" src="images/OpenCV_Logo_with_text.png" alt="OpenCV logo" loading="lazy" width="36" height="36" /></picture>
          <span class="tech-label">OpenCV</span>
        </a>
        <a class="tech-chip" href="https://www.intelrealsense.com/" target="_blank" rel="noopener noreferrer" aria-label="Intel RealSense official site" title="RealSense">
          <picture><source srcset="images/real-sense-logo.webp" type="image/webp"><img class="logo" src="images/real-sense-logo.png" alt="RealSense logo" loading="lazy" width="36" height="36" /></picture>
          <span class="tech-label">RealSense</span>
        </a>
        <a class="tech-chip" href="https://developer.nvidia.com/embedded-computing" target="_blank" rel="noopener noreferrer" aria-label="NVIDIA Jetson official site" title="Jetson">
          <picture><source srcset="images/nvidia-jetson.webp" type="image/webp"><img class="logo" src="images/nvidia-jetson.png" alt="Jetson logo" loading="lazy" width="36" height="36" /></picture>
          <span class="tech-label">Jetson</span>
        </a>
        <a class="tech-chip" href="https://www.raspberrypi.org/" target="_blank" rel="noopener noreferrer" aria-label="Raspberry Pi official site" title="Raspberry Pi">
          <picture><source srcset="images/Raspberry_Pi_logo.webp" type="image/webp"><img class="logo" src="images/Raspberry_Pi_logo.jpg" alt="Raspberry Pi logo" loading="lazy" width="36" height="36" /></picture>
          <span class="tech-label">Raspberry Pi</span>
        </a>
        <a class="tech-chip" href="https://www.arduino.cc/" target="_blank" rel="noopener noreferrer" aria-label="Arduino official site" title="Arduino">
          <picture><source srcset="images/Arduino_Logo.svg.webp" type="image/webp"><img class="logo" src="images/Arduino_Logo.svg.png" alt="Arduino logo" loading="lazy" width="36" height="36" /></picture>
          <span class="tech-label">Arduino</span>
        </a>
        <a class="tech-chip" href="https://ubuntu.com/" target="_blank" rel="noopener noreferrer" aria-label="Ubuntu official site" title="Ubuntu">
          <picture><source srcset="images/ubuntu-2.webp" type="image/webp"><img class="logo" src="images/ubuntu-2.png" alt="Ubuntu logo" loading="lazy" width="36" height="36" /></picture>
          <span class="tech-label">Ubuntu</span>
        </a>
        <a class="tech-chip" href="https://www.linux.org/" target="_blank" rel="noopener noreferrer" aria-label="Linux official site" title="Linux">
          <picture><source srcset="images/linux-logo-png_seeklogo-482333.webp" type="image/webp"><img class="logo" src="images/linux-logo-png_seeklogo-482333.png" alt="Linux logo" loading="lazy" width="36" height="36" /></picture>
          <span class="tech-label">Linux</span>
        </a>
        <a class="tech-chip" href="https://cursor.com/" target="_blank" rel="noopener noreferrer" aria-label="Cursor official site" title="Cursor">
          <picture><source srcset="images/cursor-logo-freelogovectors.net_.webp" type="image/webp"><img class="logo" src="images/cursor-logo-freelogovectors.net_.png" alt="Cursor logo" loading="lazy" width="36" height="36" /></picture>
          <span class="tech-label">Cursor</span>
        </a>
        <a class="tech-chip" href="https://chat.openai.com/" target="_blank" rel="noopener noreferrer" aria-label="ChatGPT official site" title="ChatGPT">
          <picture><source srcset="images/chatgptLogo.webp" type="image/webp"><img class="logo" src="images/chatgptLogo.png" alt="ChatGPT logo" loading="lazy" width="36" height="36" /></picture>
          <span class="tech-label">ChatGPT</span>
        </a>
        <a class="tech-chip" href="https://claude.ai/" target="_blank" rel="noopener noreferrer" aria-label="Claude AI official site" title="Claude AI">
          <picture><source srcset="images/claude-ai-logo-rounded-hd-free-png.webp" type="image/webp"><img class="logo" src="images/claude-ai-logo-rounded-hd-free-png.png" alt="Claude AI logo" loading="lazy" width="36" height="36" /></picture>
          <span class="tech-label">Claude AI</span>
        </a>
        <a class="tech-chip" href="https://x.ai/" target="_blank" rel="noopener noreferrer" aria-label="Grok official site" title="Grok">
          <picture><source srcset="images/grok-logo.webp" type="image/webp"><img class="logo" src="images/grok-logo.jpg" alt="Grok logo" loading="lazy" width="36" height="36" /></picture>
          <span class="tech-label">Grok</span>
        </a>
      </div>
  </div>
</section><!--─────────────────PDF Resume Button────────────────-->
            <div class="pdfResume-dropdown standalone-resume-button">
                <button class="resumeButton" aria-label="PDF Resume dropdown menu" aria-expanded="false" aria-haspopup="true">PDF Resumes</button>
                <div class="pdfResume-dropdown-content">
				<a href="https://drive.google.com/file/d/1M6FTAmzSXGFTn2iTXo4ae76FPT3G5Gaj/view?usp=sharing" target="_blank" rel="noopener noreferrer">1. Robotic Systems Engineer-Resume</a>
				<a href="https://drive.google.com/file/d/1dALnPnyp9Jzf7Bd0-DQhK8axb6AuY1WY/view?usp=drive_link" target="_blank" rel="noopener noreferrer">2. UAV Field Engineer-Resume</a>
				<a href="https://drive.google.com/file/d/1IvyVtmh7rQMdW7A6vzRMUYc5koizolR7/view?usp=sharing" target="_blank" rel="noopener noreferrer">3. Electronics Technician-Resume</a>
				<a href="https://drive.google.com/file/d/1Y_zhMno5JzMAvVf7of5YOvajapJhtFl9/view?usp=sharing" target="_blank" rel="noopener noreferrer">4. Fullstack Software Engineer-Resume</a>
                </div>
            </div>
            
            



	  <!-- Video Section -->
	  <section id="video" aria-labelledby="video-heading">
		  <h2 id="video-heading">Featured Work</h2>
		  <hr>
		  <div class="video-container">
			  <div class="video-wrapper">
				  <!-- YouTube facade: loads thumbnail only; iframe injected on click (saves ~978 KiB + 314 ms blocking) -->
				  <div class="yt-facade"
					   data-videoid="Swrsx3dyn6A"
					   data-start="1"
					   role="button"
					   tabindex="0"
					   aria-label="Play Project Showcase video on YouTube">
					  <img
						  src="https://i.ytimg.com/vi/Swrsx3dyn6A/maxresdefault.jpg"
						  alt="Omega-1 robot project showcase video thumbnail"
						  loading="lazy"
						  width="1280"
						  height="720"
						  class="yt-facade-thumb">
					  <div class="yt-play-btn" aria-hidden="true">
						  <svg height="100%" viewBox="0 0 68 48" width="100%">
							  <path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="#f00"/>
							  <path d="M45 24 27 14v20" fill="#fff"/>
						  </svg>
					  </div>
				  </div>
			  </div>
			  <div class="video-description">
				  <h3>Project Showcase</h3>
				  <p>In this video, I'm showcasing my Ω1 robot. Check out my YouTube channel for more robotics videos.</p>
			  </div>
		  </div>
	  </section>

	  <!--───────────────Projects───────────────-->


	  <!-- Projects Section -->
	  <section id="projects" aria-labelledby="projects-heading">
		  <h2 id="projects-heading">Projects</h2>
    <p>Selected work in robotics, autonomy, and systems engineering.</p>
		  
		  <!-- Projects Grid -->
		  <div class="projects-grid">
			  <article class="project-card">
  <picture><source srcset="images/omega1selfie.webp" type="image/webp"><img class="project-card-image" src="images/omega1selfie.png" alt="Omega-1 Autonomous Robotics Platform" loading="lazy" width="300" height="200"></picture>
  <div class="project-card-content">
    <h3 class="project-card-title">Omega-1 — Autonomous Robotics Platform</h3>
    <p class="project-card-description">A fully operational autonomous robot running on Raspberry Pi 4B — drives, navigates, streams live video, and tracks its own position in real time. Controlled from a custom web dashboard with Xbox controller support, live sensor feeds, and a mission control map.</p>
    <p class="project-card-description">Built as a distributed system across three machines: the Pi handles real-time motor control and sensor fusion, a web UI runs on any laptop with no robot software installed, and an NVIDIA Jetson Orin handles GPU-accelerated object detection — all communicating over a VPN-secured network.</p>
    <div class="project-metrics">
      <span class="metric" aria-label="Autonomous Navigation">🤖 Autonomous Navigation</span>
      <span class="metric" aria-label="Live Video Streaming">📷 Live Video Streaming</span>
      <span class="metric" aria-label="Real-Time Localization">📍 Real-Time Localization</span>
      <span class="metric" aria-label="Multi-Machine Network">📡 Multi-Machine Network</span>
    </div>
    <ul class="project-card-features">
      <li>Drives autonomously with obstacle avoidance — ultrasonic sensor triggers deceleration, pivot, and heading recovery without stopping abruptly</li>
      <li>Estimates its own position using a Kalman filter that fuses dead-reckoning (motor commands) with visual landmark corrections (ArUco markers) — no GPS required</li>
      <li>Streams live camera video to the browser with under 100 ms latency via a custom MJPEG proxy</li>
      <li>Runs a full software simulation mode: the robot's physics and sensor geometry are modeled so the entire stack can be developed and tested without hardware</li>
      <li>Detects objects with YOLOv8 on the Jetson Orin and relays results back to the Pi in real time over a compressed image stream (~500 KB/s vs 9 MB/s raw)</li>
      <li>Solved a hardware bug where the motor driver corrupted servo signals at power-on — traced to a shared PWM clock; fixed with register verification and hard pulse clamping on every write</li>
      <li>Eliminated ~240 unnecessary HTTP requests/minute from the frontend by introducing circuit breakers, shared polling contexts, and WebSocket health checks</li>
      <li>Stack: Python · Go · TypeScript · React · Next.js · FastAPI · ROS2 · OpenCV · WebSockets · Docker · TailwindCSS</li>
      <li>Status: Fully operational — live teleoperation, sensor streaming, localization, and multi-machine communication all running.</li>
    </ul>
  </div>
  <div class="project-card-buttons">
    <a href="https://omega1-robot-controller.vercel.app/" target="_blank" rel="noopener noreferrer" class="project-button demo-button">Live Demo</a>
    <a href="https://github.com/abelxmendoza/Omega-Code" target="_blank" rel="noopener noreferrer" class="project-button code-button">See Code</a>
  </div>
</article>

			  <article class="project-card">
                    <picture><source srcset="images/PX4ProjectImage2.webp" type="image/webp"><img class="project-card-image" src="images/PX4ProjectImage2.png" alt="PX4 / ROS 2 Autonomy and Verification Platform" loading="lazy" width="300" height="200"></picture>
					<div class="project-card-content">
                        <h3 class="project-card-title">PX4 / ROS 2 Autonomy &amp; Verification Platform</h3>
                        <p class="project-card-description">Autonomous UAV development and verification platform built with PX4, ROS 2 Humble, Gazebo Harmonic, MAVSDK, MAVLink, Python, and C++. Features autonomous navigation, cooperative multi-UAV missions, fault injection, sensor integration, and requirements-based verification. Includes an interactive 3D flight replay application built with Three.js.</p>
                        <div class="project-metrics">
                            <span class="metric" aria-label="Autonomous Navigation">🚁 Autonomous Navigation</span>
                            <span class="metric" aria-label="Multi-UAV Coordination">🤖 Multi-UAV Coordination</span>
                            <span class="metric" aria-label="Fault Injection and Recovery">🛡️ Fault Injection &amp; Recovery</span>
                            <span class="metric" aria-label="Verification and CI/CD">🧪 Verification &amp; CI/CD</span>
                            <span class="metric" aria-label="Interactive 3D Replay">🌐 Interactive 3D Replay</span>
                        </div>
					<ul class="project-card-features">
                            <li>ROS 2 mission state machines, A* path planning, LiDAR-based reactive obstacle avoidance, geofencing, failsafe handling, and resource-aware mission control</li>
                            <li>Cooperative two-UAV missions with task allocation, route reservations, separation monitoring, watchdogs, and automatic task reassignment after confirmed vehicle failure</li>
                            <li>Requirements-based verification: a 26-requirement catalog, independent telemetry analysis, fault injection, regression testing, and PASS/FAIL/SKIP reporting</li>
                            <li>450 ROS-enabled Python tests, 27 browser tests, and 41 C++ checks, with GitHub Actions CI/CD and reproducible evidence reports</li>
                            <li>Stereo visual odometry, IMU fusion, velocity PID control, ArUco precision landing, and simulated GPS-aiding-loss handling</li>
                            <li>MAVLink v2 communication utilities, vehicle abstraction interfaces, and telemetry pipelines for simulated and hardware-facing integration</li>
                            <li>Two-UAV fault-recovery mission verified across 641 telemetry samples, two task reassignments, and 8.095 m minimum sampled horizontal separation against a 2.5 m requirement</li>
                            <li>Mission-completion defects found and corrected through independent verification, with the failing evidence kept as regression tests</li>
                            <li>Browser-based Three.js flight replay that visualizes recorded missions and fault recovery without a local PX4/Gazebo install</li>
                            <li>Stack: PX4 v1.15+ · ROS 2 Humble · Gazebo Harmonic · Python · C++ · MAVSDK · MAVLink · Micro XRCE-DDS · OpenCV · Three.js · GitHub Actions</li>
					</ul>
				</div>
                    <div class="project-card-buttons">
                        <a href="https://replay-sepia-tau.vercel.app/demo/" target="_blank" rel="noopener noreferrer" class="project-button demo-button">Live Demo</a>
                        <a href="https://github.com/abelxmendoza/PX4-Autonomous-Missions" target="_blank" rel="noopener noreferrer" class="project-button code-button">See Code</a>
			</div>
			  </article>

			              <article class="project-card">
                    <picture><source srcset="images/Jetson-RealSense-PerceptionProject.webp" type="image/webp"><img class="project-card-image" src="images/Jetson-RealSense-PerceptionProject.png" alt="Jetson RealSense Perception System project preview" loading="lazy" width="300" height="200"></picture>
                    <div class="project-card-content">
                        <h3 class="project-card-title">Jetson RealSense Perception</h3>
                        <p class="project-card-description">Embedded RGB-D perception toolkit for NVIDIA Jetson Orin Nano and Intel RealSense D455. Supports standalone pyrealsense2 workflows and ROS2 Humble integration, validated on Ubuntu 22.04 / JetPack L4T 36.4.7.</p>
                        <div class="project-metrics">
                            <span class="metric" aria-label="Platform">🟦 NVIDIA Jetson Orin Nano</span>
                            <span class="metric" aria-label="Camera">📷 Intel RealSense D455</span>
                            <span class="metric" aria-label="SDK">🛠️ librealsense 2.0 (RSUSB)</span>
                            <span class="metric" aria-label="ROS2">🐢 ROS2 Humble</span>
                        </div>
                        <ul class="project-card-features">
                            <li>Standalone scripts: capture, camera info probe, obstacle detection, point clouds, IMU, occupancy mapping</li>
                            <li>ROS2 wrapper validation: realsense2_camera launch, topic sanity, camera_info intrinsics, topic publishers</li>
                            <li>Documentation + onboarding: hardware setup, software setup, ROS2 setup, troubleshooting, validation checklist</li>
                            <li>Full validation: rs-enumerate-devices and check_realsense.py; depth/color streaming capture; ROS2 topic and intrinsics checks</li>
                        </ul>
                    </div>
                    <div class="project-card-buttons single-button">
                        <a href="https://github.com/abelxmendoza/Jetson-RealSense-Perception" target="_blank" rel="noopener noreferrer" class="project-button code-button">See Code</a>
                    </div>
              </article>

		  <article class="project-card">
                    <picture><source srcset="images/TitanRover.webp" type="image/webp"><img class="project-card-image" src="images/TitanRover.jpg" alt="Titan Rover Autonomous Navigation project" loading="lazy" width="300" height="200"></picture>
                    <div class="project-card-content">
                        <h3 class="project-card-title">Titan Rover — Autonomous Navigation</h3>
                        <p class="project-card-description">Group project with the Titan Rover university club — a team of Cal State Fullerton engineering students. Built and contributed to an autonomous rover using ROS, OpenCV, and sensor fusion for real-world terrain navigation and obstacle avoidance.</p>
                        <div class="project-metrics">
                            <span class="metric" aria-label="ROS">🤖 ROS</span>
                            <span class="metric" aria-label="Computer Vision">👁️ OpenCV</span>
                            <span class="metric" aria-label="Sensor Fusion">📡 Sensor Fusion</span>
                            <span class="metric" aria-label="Autonomous Navigation">🗺️ Autonomous Navigation</span>
                        </div>
                        <ul class="project-card-features">
                            <li>Autonomous terrain navigation with real-time obstacle detection using OpenCV</li>
                            <li>Sensor fusion pipeline integrating camera, IMU, and encoder data</li>
                            <li>ROS-based architecture with custom nodes for perception and motion planning</li>
                        </ul>
                    </div>
                    <div class="project-card-buttons">
                        <a href="https://www.youtube.com/watch?v=-djsw5KM_Hs" target="_blank" rel="noopener noreferrer" class="project-button demo-button">▶ Watch Video</a>
                        <a href="https://fullerton.campuslabs.com/engage/organization/titanrover" target="_blank" rel="noopener noreferrer" class="project-button code-button">Titan Rover Club</a>
                    </div>
              </article>

			  <article class="project-card">
                    <picture><source srcset="images/LoreBookLogo2.webp" type="image/webp"><img class="project-card-image" src="images/LoreBookLogo2.jpg" alt="LoreBook — AI Life Engine" loading="lazy" width="300" height="200"></picture>
					<div class="project-card-content">
                        <h3 class="project-card-title">LoreBook — AI Life Engine</h3>
                        <p class="project-card-description">A full-stack AI platform that transforms journals, conversations, and memories into a continuously evolving knowledge base of a person's life. LoreBook automatically builds timelines, biographies, relationship intelligence, life arcs, and evidence-backed personal knowledge from unstructured entries.</p>
                        <div class="project-metrics">
                            <span class="metric" aria-label="Autobiographical Memory System">🧠 Autobiographical Memory</span>
                            <span class="metric" aria-label="Narrative & Biography Generation">📖 Biography Generation</span>
                            <span class="metric" aria-label="Hybrid Retrieval Architecture">🔎 Hybrid Retrieval</span>
                            <span class="metric" aria-label="30+ Analytical Engines">⚙️ 30+ Analysis Engines</span>
                        </div>
                        <ul class="project-card-features">
                            <li>Autobiographical Memory System — converts journal entries into structured events, timelines, relationships, and life arcs that persist over time</li>
                            <li>Knowledge Crystallization Engine — detects recurring behavioral patterns and converts them into evidence-backed knowledge claims with confidence scoring and traceable supporting evidence</li>
                            <li>Continuity Intelligence — identifies contradictions, identity drift, abandoned goals, emotional arcs, and recurring behavioral patterns across a user's history</li>
                            <li>Relationship Intelligence System — tracks relationship evolution, influence, interaction patterns, drift, and autobiographical impact across a user's life story</li>
                            <li>Hybrid Retrieval Architecture — combines vector search (pgvector), BM25 keyword search, entity-aware retrieval, temporal weighting, and MMR reranking for context-aware memory retrieval</li>
                            <li>Temporal Reasoning Engine — builds causal chains, life arcs, chronology graphs, and hierarchical timelines from years of journaled experiences</li>
                            <li>Custom orchestration framework: 30+ specialized analysis engines with dependency-aware scheduling, parallel execution, 10–100× caching improvements, and eliminated N+1 bottlenecks</li>
                            <li>Stack: TypeScript · React · Node.js · Supabase/PostgreSQL · pgvector · OpenAI · Stripe · GitHub Actions</li>
                        </ul>
					</div>
                    <div class="project-card-buttons">
                        <a href="https://lorebookai.com/" target="_blank" rel="noopener noreferrer" class="project-button demo-button">Live Demo</a>
                        <a href="https://github.com/abelxmendoza/Lore-Book" target="_blank" rel="noopener noreferrer" class="project-button code-button">See Code</a>
                    </div>
			  </article>

			  <article class="project-card">
                    <picture><source srcset="images/cerberus-guardian.webp" type="image/webp"><img class="project-card-image project-card-image--logo" src="images/cerberus-guardian.png" alt="CERBERUS, the Guardian Security Suite — neon artwork of three guardian wolves for Windows, Linux, and macOS" loading="lazy" width="1536" height="1024"></picture>
					<div class="project-card-content">
                        <h3 class="project-card-title">CERBERUS — The Guardian Security Suite</h3>
                        <p class="project-card-description">An open-source security monitoring and system hardening ecosystem for Windows, Linux, and macOS. Three separate Guardian desktop apps — one for each platform — share one landing page: integrity checks, security posture, network exposure, threat detection, and remediation that stays dry-run until the operator confirms a change.</p>
                        <div class="project-metrics">
                            <span class="metric" aria-label="Cross-platform">🖥️ Windows · Linux · macOS</span>
                            <span class="metric" aria-label="Threat Detection">🛡️ Threat Detection</span>
                            <span class="metric" aria-label="System Hardening">🔒 System Hardening</span>
                            <span class="metric" aria-label="Open Source">📖 Open Source</span>
                        </div>
						<ul class="project-card-features">
                            <li>Three desktop Guardians — Windows (WinUI 3 / .NET 8), Linux, and macOS — each in its own repository</li>
							<li>System integrity, security posture, network monitoring, and threat detection on every platform</li>
                            <li>Controlled remediation: dry-run or confirmation-gated until the operator approves a change</li>
                            <li>React landing page that documents what each public Guardian repository actually ships</li>
                            <li>Stack: TypeScript · React · Vite · Tailwind CSS · .NET · Python · Shell</li>
						</ul>
					</div>
                    <div class="project-card-buttons">
                        <a href="https://cerberus-guardian-suite.vercel.app/" target="_blank" rel="noopener noreferrer" class="project-button demo-button">Live Demo</a>
                        <a href="https://github.com/abelxmendoza/cerberus-guardian-suite" target="_blank" rel="noopener noreferrer" class="project-button code-button">See Code</a>
                    </div>
                </article>

			  <!-- SoundSurfer iOS App - commented out
			  <article class="project-card">
                    <picture><source srcset="images/soundSurferAppScreenshot.webp" type="image/webp"><img class="project-card-image" src="images/soundSurferAppScreenshot.png" alt="Screenshot of SoundSurfer iOS App" loading="lazy" width="300" height="200"></picture>
        <div class="project-card-content">
                        <h3 class="project-card-title">SoundSurfer iOS App</h3>
                        <p class="project-card-description">SoundSurfer helps listeners discover music with song search, playlist generation, and a custom iOS experience.</p>
                        <div class="project-metrics">
                            <span class="metric" aria-label="iOS Native">📱 iOS Native</span>
                            <span class="metric" aria-label="Music Discovery">🎵 Music Discovery</span>
                            <span class="metric" aria-label="Custom UI">🎨 Custom UI</span>
                            <span class="metric" aria-label="Playlist Generation">📋 Playlist Generation</span>
                        </div>
            <ul class="project-card-features">
                            <li>Song search by title</li>
                            <li>Playlist generator with mood and genre filters</li>
                            <li>Liked songs library</li>
                            <li>Tailored UI with animated toggles</li>
            </ul>
        </div>
                    <div class="project-card-buttons single-button">
                        <a href="https://github.com/abelxmendoza/SoundSurferIOS-FrontEnd" target="_blank" rel="noopener noreferrer" class="project-button code-button">See Code</a>
</div>
                </article>
			  -->

			  <!-- Pet Store Backend - commented out
			  <article class="project-card">
                    <picture><source srcset="images/petStoreScreenshot.webp" type="image/webp"><img class="project-card-image" src="images/petStoreScreenshot.png" alt="Screenshot of Pet Store Backend" loading="lazy" width="300" height="200"></picture>
        <div class="project-card-content">
                        <h3 class="project-card-title">Pet Store Backend</h3>
                        <p class="project-card-description">A scalable backend system for a pet store application with secure authentication, caching, and load balancing.</p>
                        <div class="project-metrics">
                            <span class="metric" aria-label="Secure Authentication">🔐 Secure Auth</span>
                            <span class="metric" aria-label="Redis Caching">⚡ Redis Caching</span>
                            <span class="metric" aria-label="Load Balancing">⚖️ Load Balancing</span>
                            <span class="metric" aria-label="Docker">🐳 Docker</span>
                        </div>
            <ul class="project-card-features">
                            <li>Auth handled via Flask-JWT-Extended and Flask-Bcrypt</li>
                            <li>Redis cache layer for performance</li>
                            <li>Nginx load balancer</li>
                            <li>RESTful API endpoints</li>
            </ul>
        </div>
                    <div class="project-card-buttons single-button">
                        <a href="https://github.com/erwinmedina/PetStoreBackendProject" target="_blank" rel="noopener noreferrer" class="project-button code-button">See Code</a>
</div>
                </article>
			  -->

			  <!-- Compas — Tinder for Friends - commented out
			  <article class="project-card">
                    <picture><source srcset="images/CompasProjectScreenshot2.webp" type="image/webp"><img class="project-card-image" src="images/CompasProjectScreenshot2.png" alt="Screenshot of Compas - Tinder for Friends" loading="lazy" width="300" height="200"></picture>
        <div class="project-card-content">
                        <h3 class="project-card-title">Compas — Tinder for Friends</h3>
                        <p class="project-card-description">A social discovery experience inspired by Tinder, focused on swiping to meet new friends.</p>
                        <div class="project-metrics">
                            <span class="metric" aria-label="Social App">👥 Social App</span>
                            <span class="metric" aria-label="Swipe Interface">📱 Swipe Interface</span>
                            <span class="metric" aria-label="Full Stack">🌐 Full Stack</span>
                            <span class="metric" aria-label="Responsive Design">📱 Responsive</span>
                        </div>
            <ul class="project-card-features">
                            <li>Swipe gestures for match decisions</li>
                            <li>Responsive layout optimized for mobile</li>
            </ul>
        </div>
                    <div class="project-card-buttons">
                        <a href="https://compas-abelxmendoza.vercel.app/" target="_blank" rel="noopener noreferrer" class="project-button demo-button">Live Demo</a>
                        <a href="https://github.com/abelxmendoza/Tinder-Clone" target="_blank" rel="noopener noreferrer" class="project-button code-button">See Code</a>
</div>
                </article>
			  -->

			  <!-- Rock Paper Scissors - commented out
			  <article class="project-card">
                    <picture><source srcset="images/rockPaperScissorsImage.webp" type="image/webp"><img class="project-card-image" src="images/rockPaperScissorsImage.png" alt="Screenshot of Rock Paper Scissors Game" loading="lazy" width="300" height="200"></picture>
        <div class="project-card-content">
                        <h3 class="project-card-title">Rock Paper Scissors</h3>
                        <p class="project-card-description">Classic Rock Paper Scissors game to challenge friends or the computer, complete with audio and scoring.</p>
                        <div class="project-metrics">
                            <span class="metric" aria-label="Interactive Game">🎮 Interactive Game</span>
                            <span class="metric" aria-label="Audio Feedback">🎵 Audio Feedback</span>
                            <span class="metric" aria-label="Score Tracking">📊 Score Tracking</span>
                            <span class="metric" aria-label="Responsive Design">📱 Responsive</span>
</div>
            <ul class="project-card-features">
                            <li>Dynamic gameplay against computer opponent</li>
                            <li>Random choices powered by <code>Math.random()</code></li>
                            <li>Persistent score tracking during sessions</li>
                            <li>Sound effects for wins, losses, and draws</li>
            </ul>
        </div>
                    <div class="project-card-buttons">
                        <a href="https://rock-paper-scissors-min6nzuu2-abelxmendoza.vercel.app/" target="_blank" rel="noopener noreferrer" class="project-button demo-button">Live Demo</a>
                        <a href="https://github.com/abelxmendoza/rock-paper-scissors" target="_blank" rel="noopener noreferrer" class="project-button code-button">See Code</a>
</div>
                </article>
			  -->

			  <!-- Fighting Game - commented out
			  <article class="project-card">
                    <picture><source srcset="images/FightingGameSS.webp" type="image/webp"><img class="project-card-image" src="images/FightingGameSS.png" alt="Screenshot of Fighting Game" loading="lazy" width="300" height="200"></picture>
        <div class="project-card-content">
                        <h3 class="project-card-title">Fighting Game</h3>
                        <p class="project-card-description">A 2D fighting game with player name input, attack and heal mechanics, and a resettable match flow.</p>
                        <div class="project-metrics">
                            <span class="metric" aria-label="Combat System">🥊 Combat System</span>
                            <span class="metric" aria-label="Player Input">🎮 Player Input</span>
                            <span class="metric" aria-label="Sound Effects">🎵 Sound Effects</span>
                            <span class="metric" aria-label="Health System">💊 Health System</span>
                        </div>
            <ul class="project-card-features">
                            <li>Two-player keyboard controls</li>
                            <li>Attack, heal, and victory states</li>
                            <li>Audio feedback for key actions</li>
                            <li>Reset functionality for quick rematches</li>
            </ul>
        </div>
                    <div class="project-card-buttons">
                        <a href="https://fighting-game-84rbpt7xa-abelxmendoza.vercel.app/" target="_blank" rel="noopener noreferrer" class="project-button demo-button">Live Demo</a>
                        <a href="https://github.com/abelxmendoza/fightingGame" target="_blank" rel="noopener noreferrer" class="project-button code-button">See Code</a>
</div>
                </article>
			  -->

			</div>
	  </section>

		 
		<!--──────────────Contact────────────────-->
	  <style>
    #contact-card {
      max-width: 600px;
      width: 100%;
      margin: 0 auto;
      padding: 2.5rem 2.5rem 2rem;
      background: rgb(0 0 0 / 0.45);
      backdrop-filter: blur(20px) saturate(150%);
      border: 1px solid rgba(184,66,223,0.45);
      border-radius: 20px;
      box-shadow:
        0 15px 35px rgb(0 0 0 / 0.4),
        0 0 50px rgba(184,66,223,0.12),
        inset 0 1px 0 rgba(255,255,255,0.08);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.25rem;
    }
    #contact-card > p {
      color: #fff;
      font-size: 1.1rem;
      line-height: 1.6;
      text-align: center;
      margin: 0;
      text-shadow: 0 2px 4px rgb(0 0 0 / 0.8);
    }
    .contact-email-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.65rem;
      padding: 0.75rem 1.75rem;
      border-radius: 50px;
      border: 1.5px solid rgba(184,66,223,0.85);
      background: rgba(184,66,223,0.25);
      color: #fff;
      text-decoration: none;
      font-family: var(--main-font-family);
      font-size: 1rem;
      font-weight: 600;
      letter-spacing: 0.03em;
      text-shadow: 0 1px 3px rgb(0 0 0 / 0.6);
      box-shadow: 0 0 12px rgba(184,66,223,0.2);
      transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
    }
    .contact-email-btn:hover {
      border-color: rgba(184,66,223,1);
      background: rgba(184,66,223,0.38);
      box-shadow: 0 0 28px rgba(184,66,223,0.55);
    }
    .contact-social-row {
      display: flex;
      gap: 1.5rem;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      padding-top: 0.25rem;
    }
    .contact-social-row a {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.4rem;
      text-decoration: none;
      color: rgba(255,255,255,0.9);
      font-family: var(--main-font-family);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      text-shadow: 0 1px 3px rgb(0 0 0 / 0.8);
      transition: color 200ms ease, filter 200ms ease;
    }
    .contact-social-row a:hover {
      color: #fff;
      filter: drop-shadow(0 0 6px rgba(184,66,223,0.8));
    }
    .contact-social-row img {
      width: 28px;
      height: 28px;
      opacity: 1;
      filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.6));
      transition: opacity 200ms ease, filter 200ms ease;
    }
    .contact-social-row a:hover img {
      filter: drop-shadow(0 0 6px rgba(184,66,223,0.7));
    }
    @media (max-width: 640px) {
      #contact-card {
        padding: 1.5rem 1rem 1.25rem;
        border-radius: 14px;
        gap: 1rem;
        width: 100%;
        box-sizing: border-box;
      }
      #contact-card > p {
        font-size: 1rem;
      }
      .contact-email-btn {
        font-size: 0.875rem;
        padding: 0.6rem 1rem;
        letter-spacing: 0;
        word-break: break-all;
        text-align: center;
      }
      .contact-social-row {
        gap: 1rem;
      }
    }
  </style>
  <section id="contact" aria-labelledby="contact-heading">
    <h2 id="contact-heading">Contact</h2>
    <hr>
    <div id="contact-card">
      <p>Open to UAV, robotics, electronics, aerospace, and defense roles. Based in Southern California — open to relocation. US Citizen.</p>
      <a href="mailto:abelxmendoza@gmail.com" class="contact-email-btn" aria-label="Send email to Abel Mendoza">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="rgba(184,66,223,1)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
        abelxmendoza@gmail.com
      </a>
      <div class="contact-social-row" role="list" aria-label="Social links">
        <a href="https://x.com/CyberNautAbel" target="_blank" rel="noopener noreferrer" aria-label="Follow me on X" role="listitem">
          <img src="images/twitter-icon.svg" alt="" aria-hidden="true">
          X
        </a>
        <a href="https://github.com/abelxmendoza" target="_blank" rel="noopener noreferrer" aria-label="View my GitHub profile" role="listitem">
          <img src="images/github-icon.svg" alt="" aria-hidden="true">
          GitHub
        </a>
        <a href="https://www.linkedin.com/in/abelxmendoza/" target="_blank" rel="noopener noreferrer" aria-label="Connect with me on LinkedIn" role="listitem">
          <img src="images/linkedin-icon.svg" alt="" aria-hidden="true">
          LinkedIn
        </a>
        <a href="https://www.youtube.com/@Omega-Technologies" target="_blank" rel="noopener noreferrer" aria-label="Subscribe to my YouTube channel" role="listitem">
          <img src="images/youtube-icon.svg" alt="" aria-hidden="true">
          YouTube
        </a>
      </div>
    </div>
  </section>





	  </main>

	  <footer class="copyright">© 2025 <a href="#home">Abel Mendoza.</a></footer>
	  
        </div>
  </body>
</html>

