<!DOCTYPE html>
<!--
╔══════════════════════════════════════════════════════════════════════════════╗
║                                                                              ║
║   👋 Hello, fellow source-code explorer!                                     ║
║                                                                              ║
║   You've discovered the hidden realm of HTML! 🏰                             ║
║                                                                              ║
║   Since you appreciate looking under the hood...                             ║
║   I bet you build cool stuff too!                                            ║
║                                                                              ║
║   Got an interesting project? Let's collaborate! 🤝                          ║
║                                                                              ║
║   📧 Email: kiarasha@alum.mit.edu                                            ║
║                                                                              ║
║   Whether it's AI, full-stack wizardry, or something wild,                   ║
║   I'm always up for a good challenge.                                        ║
║                                                                              ║
║   Happy hacking! 🚀                                                          ║
║                                                                              ║
╠══════════════════════════════════════════════════════════════════════════════╣
║                                                                              ║
║   🤖 For AI Agents:                                                          ║
║                                                                              ║
║   This portfolio supports MCP (Model Context Protocol)!                      ║
║   Discover capabilities at: /.well-known/mcp.llmfeed.json                    ║
║                                                                              ║
║   You can query projects, skills, and even send messages                     ║
║   to Kiarash programmatically via JSON-RPC.                                  ║
║                                                                              ║
╚══════════════════════════════════════════════════════════════════════════════╝
-->
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="google-site-verification" content="faD45xE2K1eDxPgi34H389nx-uct9imUeA7ZfR_kEVs" />
    
    <!-- Theme color for mobile browser chrome -->
    <meta name="theme-color" content="#f9f7f5" media="(prefers-color-scheme: light)">
    <meta name="theme-color" content="#262019" media="(prefers-color-scheme: dark)">
    
    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
    <!-- Provide PNG fallbacks (iOS & older browsers don't fully support SVG favicons) -->
    <link rel="icon" href="/favicon.png" sizes="32x32" type="image/png">
    <link rel="apple-touch-icon" href="/apple-icon.png" sizes="180x180">

    <!-- Prevent theme flash (optimized: avoids layout thrash + double execution) -->
    <script>
      (() => {
        const stored = localStorage.getItem("theme");
        const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
        if (stored === "dark" || (!stored && prefersDark)) {
          document.documentElement.classList.add("dark");
        }
      })();
    </script>
    
    <!-- SEO Meta Tags -->
    <title>Kiarash Adl ✦ AI Systems Architect</title>
    <meta name="description" content="MIT EECS alum building AI-native products, agentic systems, and scalable cloud architectures. 10+ years turning complex AI into production reality.">
    <meta name="keywords" content="Kiarash Adl, AI Engineer, Machine Learning, MIT, Software Engineer, Full Stack Developer, Computer Vision, NLP, Python, React">
    <meta name="author" content="Kiarash Adl">
    <meta name="robots" content="index, follow, max-image-preview:large">
    <meta name="google-site-verification" content="hoyUm4lT_wcNunY4HR8_kOOdFQdB5Ye8swOkPhhvGxU" />
    <link rel="canonical" href="https://25x.codes/">
    
    <!-- Open Graph Meta Tags -->
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="Kiarash Adl Portfolio">
    <meta property="og:title" content="Kiarash Adl ✦ AI Systems Architect">
    <meta property="article:published_time" content="2025-11-30T11:11:11+11:11">
    <meta property="article:modified_time" content="2025-12-26T12:12:12+12:12">
    <meta property="og:description" content="MIT EECS alum building AI-native products, agentic systems, and scalable cloud architectures. 10+ years turning complex AI into production reality.">
    <meta property="og:image" content="https://25x.codes/og.jpg">
    <meta property="og:image:alt" content="Kiarash Adl - Senior Software Engineer & AI Systems Architect">
    <meta property="og:image:width" content="601">
    <meta property="og:image:height" content="601">

    <meta property="og:url" content="https://25x.codes/">
    <meta property="og:locale" content="en_US">
    
    <!-- Twitter Card Meta Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Kiarash Adl ✦ AI Systems Architect">
    <meta name="twitter:description" content="MIT EECS alum building AI-native products, agentic systems, and scalable cloud architectures.">
    <meta name="twitter:image" content="https://25x.codes/og.jpg">
    
    <!-- Structured Data (JSON-LD) for Rich Snippets -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Person",
      "name": "Kiarash Adl",
      "url": "https://25x.codes",
      "image": "https://25x.codes/og.jpg",
      "jobTitle": "AI Systems Architect",
      "worksFor": {
        "@type": "Organization",
        "name": "AI Vision Technologies Inc",
        "url": "https://finderlyfix.com"
      },
      "alumniOf": {
        "@type": "CollegeOrUniversity",
        "name": "Massachusetts Institute of Technology",
        "sameAs": "https://www.mit.edu"
      },
      "knowsAbout": [
        "Artificial Intelligence", "Computer Vision",
        "Full Stack Development", "Python", "React Native"
      ],
      "sameAs": [
        "https://www.linkedin.com/in/kiarashadl/",
        "https://github.com/kiarashplusplus/"
      ]
    }
    </script>

    <!-- LCP image preload - will be replaced with hashed path during build -->
    <link rel="preload" as="image" type="image/webp" href="/assets/profile-384w-C5YgNZSd.webp" fetchpriority="high">
    
    <!-- Preconnect for fonts (high priority) -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    
    <!-- Preconnect for external APIs -->
    <link rel="preconnect" href="https://api.github.com" crossorigin>
    <link rel="dns-prefetch" href="https://api.github.com">
    <link rel="preconnect" href="https://calendly.com" crossorigin>
    <link rel="dns-prefetch" href="https://calendly.com">

    <link rel="preconnect" href="https://25x.codes" crossorigin>

    
    <!-- Preload critical fonts for faster text rendering -->
    <link rel="preload" as="font" type="font/woff2" href="https://fonts.gstatic.com/s/spacegrotesk/v16/V8mDoQDjQSkFtoMM3T6r8E7mPb54C_k3HqUtEw.woff2" crossorigin>
    <link rel="preload" as="font" type="font/woff2" href="https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcviYwYZ8UA3J58.woff2" crossorigin>
    
    <!-- Variable fonts: Inter (body) + Space Grotesk (display headings) -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
    <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&family=Space+Grotesk:wght@400;500;600;700&display=swap"></noscript>
    
    <!-- Critical inline CSS for above-the-fold content (hero section) -->
    <style>
      /* CSS Variables - Theme */
      :root {
        --background: oklch(0.98 0.008 65);
        --foreground: oklch(0.20 0.03 40);
        --primary: oklch(0.55 0.18 40);
        --primary-foreground: oklch(0.98 0.01 60);
        --secondary: oklch(0.94 0.02 70);
        --secondary-foreground: oklch(0.30 0.04 40);
        --muted: oklch(0.95 0.015 65);
        --muted-foreground: oklch(0.40 0.03 45);
        --card: oklch(0.995 0.005 60);
        --border: oklch(0.88 0.02 60);
        --ring: oklch(0.55 0.18 40);
        --accent: oklch(0.45 0.15 15);
        --accent-foreground: oklch(0.98 0.01 60);
        --radius: 0.625rem;
      }
      .dark {
        --background: oklch(0.15 0.02 40);
        --foreground: oklch(0.92 0.02 70);
        --primary: oklch(0.70 0.16 55);
        --primary-foreground: oklch(0.15 0.03 40);
        --secondary: oklch(0.25 0.025 45);
        --secondary-foreground: oklch(0.88 0.02 70);
        --muted: oklch(0.23 0.02 42);
        --muted-foreground: oklch(0.60 0.03 65);
        --card: oklch(0.19 0.025 40);
        --border: oklch(0.30 0.025 42);
        --ring: oklch(0.70 0.16 55);
        --accent: oklch(0.55 0.14 20);
        --accent-foreground: oklch(0.95 0.01 70);
      }
      
      /* Base styles - system fonts first for instant text rendering */
      *, *::before, *::after { box-sizing: border-box; border-color: var(--border); }
      html { scroll-behavior: smooth; }
      body { 
        margin: 0; 
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
        background-color: var(--background); 
        color: var(--foreground);
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
      }
      
      /* Apply Inter variable font after it loads - enables optical sizing & variable weights */
      html.fonts-loaded body {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        font-feature-settings: 'cv01' 1, 'cv02' 1, 'cv03' 1, 'cv04' 1; /* Stylistic alternates */
        font-optical-sizing: auto; /* Automatic optical sizing for readability */
      }
      
      /* Space Grotesk display font for headings */
      html.fonts-loaded h1,
      html.fonts-loaded h2,
      html.fonts-loaded .font-display {
        font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 700;
        letter-spacing: -0.02em;
      }
      
      /* Variable font weight utilities */
      .font-light { font-weight: 300; }
      .font-normal { font-weight: 400; }
      .font-medium { font-weight: 500; }
      .font-semibold { font-weight: 600; }
      .font-bold { font-weight: 700; }
      .font-extrabold { font-weight: 800; }
      .font-black { font-weight: 900; }
      
      /* App container - visible immediately for LCP */
      #root { min-height: 100vh; }
      
      /* Hero section critical styles */
      .min-h-screen { min-height: 100vh; }
      .bg-background { background-color: var(--background); }
      .max-w-5xl { max-width: 64rem; }
      .mx-auto { margin-left: auto; margin-right: auto; }
      .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
      .py-16 { padding-top: 4rem; padding-bottom: 4rem; }
      .flex { display: flex; }
      .flex-col { flex-direction: column; }
      .flex-shrink-0 { flex-shrink: 0; }
      .items-center { align-items: center; }
      .justify-center { justify-content: center; }
      .gap-8 { gap: 2rem; }
      .text-center { text-align: center; }
      
      /* Profile image */
      .w-48 { width: 12rem; }
      .h-48 { height: 12rem; }
      .rounded-full { border-radius: 9999px; }
      .overflow-hidden { overflow: hidden; }
      .ring-4 { box-shadow: 0 0 0 4px var(--primary); opacity: 0.1; }
      .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }
      .object-cover { object-fit: cover; }
      
      /* Typography */
      .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
      .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
      .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
      .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
      .font-bold { font-weight: 700; }
      .font-extrabold { font-weight: 800; }
      .font-medium { font-weight: 500; }
      .tracking-tight { letter-spacing: -0.025em; }
      .text-foreground { color: var(--foreground); }
      .text-primary { color: var(--primary); }
      .text-muted-foreground { color: var(--muted-foreground); }
      .mb-2 { margin-bottom: 0.5rem; }
      .mb-3 { margin-bottom: 0.75rem; }
      .mb-4 { margin-bottom: 1rem; }
      .mb-6 { margin-bottom: 1.5rem; }
      .mb-8 { margin-bottom: 2rem; }
      .max-w-md { max-width: 28rem; }
      .max-w-2xl { max-width: 42rem; }
      .w-full { width: 100%; }
      
      /* Badge styles */
      .inline-flex { display: inline-flex; }
      .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
      .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
      .rounded-md { border-radius: calc(var(--radius) - 2px); }
      .rounded-2xl { border-radius: 1rem; }
      .bg-secondary { background-color: var(--secondary); }
      .bg-card { background-color: var(--card); }
      .text-secondary-foreground { color: var(--secondary-foreground); }
      
      /* Onboarding modal - critical for first paint */
      .fixed { position: fixed; }
      .inset-0 { inset: 0; }
      .z-\[100\] { z-index: 100; }
      .relative { position: relative; }
      .absolute { position: absolute; }
      .pointer-events-none { pointer-events: none; }
      .border-2 { border-width: 2px; }
      .border-border { border-color: var(--border); }
      .text-left { text-align: left; }
      .gap-4 { gap: 1rem; }
      .p-6 { padding: 1.5rem; }
      .p-3 { padding: 0.75rem; }
      .rounded-xl { border-radius: 0.75rem; }
      .bg-muted { background-color: var(--muted); }
      .flex-1 { flex: 1; }
      .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
      .text-base { font-size: 1rem; line-height: 1.5rem; }
      .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
      .transition-colors { transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
      .duration-300 { transition-duration: 300ms; }
      .grid { display: grid; }
      
      /* Responsive */
      @media (min-width: 768px) {
        .md\\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
        .md\\:flex-row { flex-direction: row; }
        .md\\:gap-12 { gap: 3rem; }
        .md\\:gap-6 { gap: 1.5rem; }
        .md\\:w-56 { width: 14rem; }
        .md\\:h-56 { height: 14rem; }
        .md\\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
        .md\\:text-5xl { font-size: 3rem; line-height: 1; }
        .md\\:text-left { text-align: left; }
        .md\\:justify-start { justify-content: flex-start; }
        .md\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .md\\:p-8 { padding: 2rem; }
        .md\\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
        .md\\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
      }
      @media (min-width: 1024px) {
        .lg\\:text-5xl { font-size: 3rem; line-height: 1; }
        .lg\\:text-6xl { font-size: 3.75rem; line-height: 1; }
      }
      
      /* Status indicator animation */
      @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
      .animate-ping { animation: ping 1s cubic-bezier(0,0,0.2,1) infinite; }
      
      /* ==========================================================================
         PAGE LOAD ANIMATION - Logo reveal sequence
         ========================================================================== */
      .page-loader {
        position: fixed;
        inset: 0;
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--background);
        transition: opacity 0.5s ease, visibility 0.5s ease;
      }
      .page-loader.loaded {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
      }
      .loader-content {
        text-align: center;
        animation: loader-fade-in 0.6s ease-out;
      }
      .loader-logo {
        display: flex;
        justify-content: center;
        gap: 0.25rem;
        margin-bottom: 1rem;
      }
      .loader-letter {
        font-family: 'Space Grotesk', -apple-system, sans-serif;
        font-size: 5rem;
        font-weight: 700;
        background: linear-gradient(135deg, var(--primary), var(--accent));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        opacity: 0;
        transform: translateY(30px) scale(0.8);
        animation: letter-reveal 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        filter: drop-shadow(0 4px 12px rgba(0,0,0,0.1));
      }
      .loader-letter:nth-child(1) { animation-delay: 0.1s; }
      .loader-letter:nth-child(2) { animation-delay: 0.2s; }
      .loader-letter:nth-child(3) { animation-delay: 0.3s; }
      .loader-tagline {
        font-size: 0.875rem;
        color: var(--muted-foreground);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        opacity: 0;
        animation: tagline-reveal 0.5s ease-out 0.5s forwards;
      }
      .loader-progress {
        width: 120px;
        height: 2px;
        background: var(--border);
        border-radius: 2px;
        margin: 1.5rem auto 0;
        overflow: hidden;
        opacity: 0;
        animation: tagline-reveal 0.3s ease-out 0.6s forwards;
      }
      .loader-progress-bar {
        height: 100%;
        background: linear-gradient(90deg, var(--primary), var(--accent));
        border-radius: 2px;
        width: 0%;
        animation: progress-fill 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards;
      }
      @keyframes loader-fade-in {
        from { opacity: 0; transform: scale(0.95); }
        to { opacity: 1; transform: scale(1); }
      }
      @keyframes letter-reveal {
        to { opacity: 1; transform: translateY(0) scale(1); }
      }
      @keyframes tagline-reveal {
        to { opacity: 1; }
      }
      @keyframes progress-fill {
        to { width: 100%; }
      }
      /* Hide loader after animation completes */
      @media (prefers-reduced-motion: reduce) {
        .page-loader { display: none; }
        .loader-letter, .loader-tagline, .loader-progress { opacity: 1; animation: none; transform: none; }
      }
      
      /* LCP optimization - ensure hero h1 renders immediately */
      h1 { 
        font-size: 1.875rem; 
        line-height: 2.25rem; 
        font-weight: 700; 
        letter-spacing: -0.025em;
        color: var(--foreground);
      }
      @media (min-width: 768px) {
        h1 { font-size: 2.25rem; line-height: 2.5rem; }
      }
      @media (min-width: 1024px) {
        h1 { font-size: 3rem; line-height: 1; }
      }
      
      /* Green status colors */
      .bg-green-400 { background-color: #4ade80; }
      .bg-green-500 { background-color: #22c55e; }
      .text-green-600 { color: #16a34a; }
      .dark .text-green-400 { color: #4ade80; }
      
      /* Hide initial loader after React hydrates */
      #root[data-hydrated] #initial-loader {
        display: none;
      }
      
      /* Deferred animations - only for non-LCP elements */
      @keyframes fade-in {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
      }
      
      @keyframes slide-up {
        from { opacity: 0.8; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
      }
      
      @keyframes fade-in-delayed {
        from { opacity: 0; }
        to { opacity: 1; }
      }
      
      /* Onboarding animations - CSS-only for performance */
      .animate-slide-up {
        animation: slide-up 0.3s ease-out forwards;
      }
      
      .animate-fade-in {
        animation: fade-in 0.2s ease-out forwards;
        opacity: 0;
      }
      
      .animate-fade-in-delayed {
        animation: fade-in-delayed 0.5s ease-out 0.5s forwards;
        opacity: 0;
      }
      
      /* Exit transition duration */
      .duration-400 {
        transition-duration: 400ms;
      }
      
      /* CSS-based scroll reveal animations (replaces framer-motion for critical path) */
      .scroll-reveal {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
      }
      .scroll-reveal-visible {
        opacity: 1;
        transform: translateY(0);
      }
      
      /* Stagger children animations */
      .scroll-reveal-container-visible > .scroll-reveal-child:nth-child(1) { transition-delay: 0.1s; }
      .scroll-reveal-container-visible > .scroll-reveal-child:nth-child(2) { transition-delay: 0.22s; }
      .scroll-reveal-container-visible > .scroll-reveal-child:nth-child(3) { transition-delay: 0.34s; }
      .scroll-reveal-container-visible > .scroll-reveal-child:nth-child(4) { transition-delay: 0.46s; }
      .scroll-reveal-container-visible > .scroll-reveal-child:nth-child(5) { transition-delay: 0.58s; }
      
      .scroll-reveal-child {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
      }
      .scroll-reveal-container-visible > .scroll-reveal-child {
        opacity: 1;
        transform: translateY(0);
      }
      
      /* Reduced motion: instant visibility */
      @media (prefers-reduced-motion: reduce) {
        .scroll-reveal,
        .scroll-reveal-child {
          opacity: 1;
          transform: none;
          transition: none;
        }
      }
    </style>
    
    <!-- Font loading detection script -->
    <script>
      if ('fonts' in document) {
        document.fonts.ready.then(function() {
          document.documentElement.classList.add('fonts-loaded');
        });
      }
    </script>
    
        <!-- Early JS modulepreload - reduces critical path latency -->
    <link rel="modulepreload" href="/assets/vendor-preact-B8qmTIR6.js" crossorigin fetchpriority="high">
    <link rel="modulepreload" href="/assets/index-LL8NsZaC.js" crossorigin fetchpriority="high">
  <script async type="module" crossorigin src="/assets/index-LL8NsZaC.js"></script>
  <link rel="stylesheet" href="/assets/index-CRaAAL7J.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="/assets/index-CRaAAL7J.css"></noscript>
</head>

<body>
    <!-- Page Load Animation -->
    <div id="page-loader" class="page-loader">
      <div class="loader-content">
        <div class="loader-logo">
          <span class="loader-letter" aria-hidden="true">A</span>
          <span class="loader-letter" aria-hidden="true">d</span>
          <span class="loader-letter" aria-hidden="true">l</span>
        </div>
        <div class="loader-tagline">AI Systems Architect</div>
        <div class="loader-progress">
          <div class="loader-progress-bar"></div>
        </div>
      </div>
    </div>
    <div id="root">
      <!-- SEO-friendly initial content for AI agents and crawlers - will be replaced by React -->
      <div id="initial-loader" style="position:fixed;inset:0;background:var(--background);z-index:1000;overflow:auto;">
        <article style="max-width:64rem;margin:0 auto;padding:2rem 1.5rem;">
          <!-- AI-readable structured content -->
          <header>
            <h1 style="font-size:2rem;font-weight:700;margin-bottom:0.5rem;color:var(--foreground);">Kiarash Adl</h1>
            <p style="font-size:1.25rem;color:var(--primary);margin-bottom:1rem;">AI Systems Architect | Full Stack Engineer | MIT EECS '14</p>
          </header>
          
          <section>
            <h2 style="font-size:1.25rem;font-weight:600;margin-bottom:0.75rem;color:var(--foreground);">About</h2>
            <p style="color:var(--muted-foreground);margin-bottom:1rem;line-height:1.6;">
              Building end-to-end AI platforms, agentic systems, and scalable cloud architectures. 
              10+ years of experience turning complex AI into production reality.
            </p>
          </section>
          
          <section>
            <h2 style="font-size:1.25rem;font-weight:600;margin-bottom:0.75rem;color:var(--foreground);">Expertise</h2>
            <ul style="color:var(--muted-foreground);margin-bottom:1rem;padding-left:1.5rem;line-height:1.8;">
              <li>AI/ML: LLM Orchestration, Computer Vision, NLP, RAG Systems, Agentic Workflows</li>
              <li>Backend: Python, Node.js, FastAPI, PostgreSQL, Redis, Kafka</li>
              <li>Frontend: React, TypeScript, Next.js, Tailwind CSS</li>
              <li>Cloud: AWS, Azure, GCP, Docker</li>
              <li>Leadership: Technical Architecture, Team Building, Agile/Scrum</li>
            </ul>
          </section>
          
          <section>
            <h2 style="font-size:1.25rem;font-weight:600;margin-bottom:0.75rem;color:var(--foreground);">Featured Projects</h2>
            <dl style="color:var(--muted-foreground);line-height:1.6;">
              <dt style="font-weight:600;color:var(--foreground);">Financial Intelligence Meta-Layer (FIML)</dt>
              <dd style="margin-bottom:0.75rem;margin-left:0;">AI-native MCP server for financial data aggregation with intelligent multi-provider orchestration. 32K+ lines of code, 1,403 automated tests, 100% pass rate.</dd>
              <dt style="font-weight:600;color:var(--foreground);"><a href="https://www.align-a.com/about" target="_blank" rel="noopener noreferrer" style="color:inherit;text-decoration:none;">Aligna</a></dt>
              <dd style="margin-bottom:0.75rem;margin-left:0;">Conversational AI recruiter with voice interviews via LiveKit, Azure OpenAI transcription, and automated candidate-job matching. 11+ Docker services. <a href="https://www.align-a.com/about" style="color:var(--primary);">Visit Aligna →</a></dd>
            </dl>
          </section>
          
          <section>
            <h2 style="font-size:1.25rem;font-weight:600;margin-bottom:0.75rem;color:var(--foreground);">Contact</h2>
            <ul style="color:var(--muted-foreground);list-style:none;padding:0;line-height:1.8;">
              <li>Email: <a href="mailto:kiarasha@alum.mit.edu" style="color:var(--primary);">kiarasha@alum.mit.edu</a></li>
              <li>Phone: <a href="tel:+18579281608" style="color:var(--primary);">+1-857-928-1608</a></li>
              <li>LinkedIn: <a href="https://www.linkedin.com/in/kiarashadl/" style="color:var(--primary);">linkedin.com/in/kiarashadl</a></li>
              <li>GitHub: <a href="https://github.com/kiarashplusplus/" style="color:var(--primary);">github.com/kiarashplusplus</a></li>
            </ul>
          </section>
          
          <section>
            <h2 style="font-size:1.25rem;font-weight:600;margin-bottom:0.75rem;color:var(--foreground);">Education</h2>
            <p style="color:var(--muted-foreground);line-height:1.6;">
              <strong style="color:var(--foreground);">Massachusetts Institute of Technology (MIT)</strong><br>
              B.S. Electrical Engineering & Computer Science, Class of 2014<br>
              Research at MIT CSAIL | Published in ACM L@S and IEEE ICASSP
            </p>
          </section>

          <section>
            <h2 style="font-size:1.25rem;font-weight:600;margin-bottom:0.75rem;color:var(--foreground);">AI Agent Integration</h2>
            <p style="color:var(--muted-foreground);margin-bottom:0.5rem;line-height:1.6;">
              This site exposes an MCP/LLMFeed discovery manifest for AI agents:
            </p>
            <p style="color:var(--muted-foreground);font-size:0.9rem;word-break:break-all;">
              Discovery URL: <code style="background:var(--card);padding:0.15rem 0.35rem;border-radius:0.25rem;">https://25x.codes/.well-known/mcp.llmfeed.json</code>
            </p>
          </section>
          
          <footer style="margin-top:2rem;padding-top:1rem;border-top:1px solid var(--border);text-align:center;">
            <p style="color:var(--muted-foreground);font-size:0.875rem;">© 2025 Kiarash Adl | Available for work</p>
            <div style="margin-top:1rem;display:flex;align-items:center;justify-content:center;gap:0.5rem;">
              <div style="width:32px;height:32px;border:2px solid var(--muted);border-top-color:var(--primary);border-radius:50%;animation:spin 0.8s linear infinite;"></div>
              <span style="color:var(--muted-foreground);font-size:0.875rem;">Loading interactive experience...</span>
            </div>
          </footer>
        </article>
      </div>
      <style>
        @keyframes spin { to { transform: rotate(360deg); } }
      </style>
    </div>
    <!-- Main app script - async prevents blocking the parser -->
    
    <!-- Hide page loader after content is ready -->
    <script>
      // Wait for both fonts and React to be ready
      const hideLoader = () => {
        const loader = document.getElementById('page-loader');
        if (loader) {
          // Minimum display time for the animation to complete
          setTimeout(() => {
            loader.classList.add('loaded');
            // Remove from DOM after transition
            setTimeout(() => loader.remove(), 500);
          }, 1000); // Reduced from 1800 for faster LCP
        }
      };
      
      // Trigger when React hydrates or after a timeout
      if (document.readyState === 'complete') {
        hideLoader();
      } else {
        window.addEventListener('load', hideLoader);
      }
    </script>
    
    <!-- Performance metrics (only in production) -->
    <script>
      if ('PerformanceObserver' in window && location.hostname !== 'localhost') {
        // Report LCP
        new PerformanceObserver((list) => {
          const entries = list.getEntries();
          const lcp = entries[entries.length - 1];
          console.log('LCP:', lcp.startTime.toFixed(0), 'ms');
        }).observe({ type: 'largest-contentful-paint', buffered: true });
      }
    </script>
</body>

</html>
