<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>Dave Onkels — AI Product Leader in Healthcare</title>
    <meta name="description" content="Building agentic AI products that transform healthcare. Head of Product & Design at Amazon One Medical, leading the Health AI assistant serving millions.">

    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="favicon.svg">

    <!-- Open Graph -->
    <meta property="og:title" content="Dave Onkels — AI Product Leader in Healthcare">
    <meta property="og:description" content="Building agentic AI products that transform healthcare. Head of Product & Design at Amazon One Medical.">
    <meta property="og:type" content="website">

    <!-- Rybbit Analytics -->
    <script
        src="https://app.rybbit.io/api/script.js"
        data-site-id="d370ddc4f963"
        defer
    ></script>
    <script
        src="https://metrics.dv.nu/api/script.js"
        data-site-id="9581ade94e33"
        defer
    ></script>

    <!-- Google Fonts - Plus Jakarta Sans -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Tailwind Configuration -->
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['"Plus Jakarta Sans"', 'system-ui', 'sans-serif'],
                        mono: ['"JetBrains Mono"', 'monospace'],
                    },
                    colors: {
                        'brand-black': '#000000',
                        'brand-white': '#FFFFFF',
                        'brand-cobalt': '#2563EB',
                        'brand-cobalt-dark': '#1D4ED8',
                        'brand-gray': '#6B7280',
                        'brand-gray-light': '#9CA3AF',
                        'text-secondary': '#525252',
                        'text-secondary-dark': '#A3A3A3',
                        'bg-subtle': '#FAFAFA',
                        'bg-subtle-dark': '#0A0A0A',
                        'bg-gray': '#E5E7EB',
                        'border-light': '#E5E5E5',
                        'border-dark': '#1F1F1F',
                    },
                    fontSize: {
                        'display': ['4.5rem', { lineHeight: '1.05', letterSpacing: '-0.03em' }],
                        'display-sm': ['2.25rem', { lineHeight: '1.15', letterSpacing: '-0.02em' }],
                    },
                }
            }
        }
    </script>

    <!-- Custom Styles -->
    <link rel="stylesheet" href="styles.css">
</head>
<body class="min-h-screen text-brand-black dark:text-brand-white font-sans antialiased">
    <!-- Scroll Progress Indicator -->
    <div class="scroll-progress" aria-hidden="true"></div>

    <div class="max-w-4xl mx-auto px-6 md:px-8 py-8 md:py-16">

        <!-- Header -->
        <header class="flex justify-between items-center mb-24 md:mb-32 emerge emerge-delay-1">
            <a href="/" class="text-base font-semibold tracking-tight name-sparkle">
                dave onkels
            </a>
            <div class="flex items-center gap-4 md:gap-8 overflow-hidden">
                <nav class="hidden md:flex items-center gap-8 text-sm font-medium">
                    <a href="#featured" class="hover-line text-text-secondary dark:text-text-secondary-dark hover:text-brand-black dark:hover:text-brand-white transition-colors">Featured</a>
                    <a href="#experience" class="hover-line text-text-secondary dark:text-text-secondary-dark hover:text-brand-black dark:hover:text-brand-white transition-colors">Experience</a>
                    <a href="#philosophy" class="hover-line text-text-secondary dark:text-text-secondary-dark hover:text-brand-black dark:hover:text-brand-white transition-colors">Philosophy</a>
                    <a href="#projects" class="hover-line text-text-secondary dark:text-text-secondary-dark hover:text-brand-black dark:hover:text-brand-white transition-colors">Projects</a>
                    <a href="#contact" class="hover-line text-text-secondary dark:text-text-secondary-dark hover:text-brand-black dark:hover:text-brand-white transition-colors">Contact</a>
                </nav>
                <button
                    id="theme-toggle"
                    class="p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors focus:outline-none focus:ring-2 focus:ring-brand-gray focus:ring-offset-2 dark:focus:ring-offset-black"
                    aria-label="Toggle theme"
                >
                    <svg class="icon-moon w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
                    <svg class="icon-sun w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></svg>
                </button>
            </div>
        </header>

        <!-- Hero Section -->
        <section class="mb-32 md:mb-40">
            <!-- Status indicator -->
            <div class="mb-6 status-indicator">
                <span class="inline-flex items-center gap-2 text-sm font-mono text-brand-gray">
                    <span class="status-dot w-2 h-2 bg-brand-gray rounded-full"></span>
                    Building agentic AI for healthcare
                </span>
            </div>

            <!-- Main headline with word-by-word emergence -->
            <h1 class="text-display-sm md:text-display font-bold leading-tight tracking-tight mb-8">
                <span class="headline-word">AI</span>
                <span class="headline-word">product</span>
                <span class="headline-word">leader</span>
                <br class="hidden md:block" />
                <span class="headline-word">transforming</span>
                <span class="headline-word the-gray">healthcare</span>
                <br class="hidden md:block" />
                <span class="headline-word">with</span>
                <span class="headline-word">agentic</span>
                <span class="headline-word">systems.</span>
            </h1>

            <!-- Subheadline -->
            <div class="max-w-2xl emerge emerge-delay-4">
                <p class="text-lg md:text-xl leading-relaxed text-text-secondary dark:text-text-secondary-dark mb-8">
                    Head of Product & Design at <span class="text-brand-black dark:text-brand-white font-medium">Amazon One Medical</span>,
                    where I own the on-demand care experience that powers the <span class="text-brand-black dark:text-brand-white font-medium">Health AI assistant</span>—an agentic AI providing 24/7 personalized health guidance. Previously scaled computer vision at Just Walk Out, led engagement for Kindle, and co-founded an acquired SaaS startup.
                </p>
            </div>

            <!-- CTA buttons -->
            <div class="flex flex-wrap gap-4 mt-10 emerge emerge-delay-5">
                <a href="#contact" class="btn-primary inline-flex items-center gap-2 px-5 py-2.5 text-brand-white text-sm font-medium rounded-lg">
                    Get in touch
                    <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
                </a>
                <a href="https://www.linkedin.com/in/onkels/" target="_blank" rel="noopener" class="social-linkedin-btn inline-flex items-center gap-2 px-5 py-2.5 border border-brand-gray-light dark:border-border-dark text-sm font-medium rounded-lg transition-colors" data-rybbit-event="outbound_click" data-rybbit-prop-destination="linkedin" data-rybbit-prop-location="hero">
                    LinkedIn
                    <svg class="w-4 h-4 transition-colors" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z"/><rect width="4" height="12" x="2" y="9"/><circle cx="4" cy="4" r="2"/></svg>
                </a>
            </div>
        </section>

        <!-- Featured Work Section -->
        <section id="featured" class="mb-32 md:mb-40 section-emerge">
            <div class="flex items-baseline justify-between mb-8">
                <h2 class="text-xs font-mono uppercase tracking-widest text-text-secondary dark:text-text-secondary-dark">Featured Work</h2>
            </div>

            <a href="https://www.aboutamazon.com/news/retail/amazon-health-ai-agent-one-medical" target="_blank" rel="noopener" class="featured-card group block p-8 rounded-2xl border border-gray-200 dark:border-gray-800 hover:border-brand-cobalt dark:hover:border-brand-cobalt transition-all">
                <div class="flex items-center gap-2 mb-4">
                    <span class="text-xs font-mono uppercase tracking-widest text-brand-cobalt">Now Live</span>
                    <span class="text-xs text-text-secondary dark:text-text-secondary-dark">· March 2026</span>
                </div>
                <h3 class="text-2xl md:text-3xl font-semibold tracking-tight mb-4 group-hover:text-brand-cobalt transition-colors">
                    Amazon One Medical Health AI Agent
                </h3>
                <p class="text-base leading-relaxed text-text-secondary dark:text-text-secondary-dark mb-6 max-w-2xl">
                    Your personalized health agent on Amazon.com and in the Amazon app. Knows your medications, allergies, and conditions. Get insights, book appointments, manage prescriptions, and connect to a One Medical provider for treatment. On-demand care included with Prime for 30+ common conditions for a limited time.
                </p>
                <div class="flex flex-wrap gap-2 mb-6">
                    <span class="tag text-xs font-mono py-1.5 px-3 rounded-full bg-gray-100 dark:bg-gray-900 text-brand-gray">Health AI</span>
                    <span class="tag text-xs font-mono py-1.5 px-3 rounded-full bg-gray-100 dark:bg-gray-900 text-brand-gray">Personalized Care</span>
                    <span class="tag text-xs font-mono py-1.5 px-3 rounded-full bg-gray-100 dark:bg-gray-900 text-brand-gray">Amazon Bedrock</span>
                    <span class="tag text-xs font-mono py-1.5 px-3 rounded-full bg-gray-100 dark:bg-gray-900 text-brand-gray">Prime</span>
                </div>
                <span class="inline-flex items-center gap-2 text-sm font-medium text-brand-cobalt group-hover:gap-3 transition-all">
                    Read the announcement
                    <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
                </span>
            </a>
        </section>

        <!-- Experience Section -->
        <section id="experience" class="mb-32 md:mb-40 section-emerge">
            <div class="flex items-baseline justify-between mb-12">
                <h2 class="text-xs font-mono uppercase tracking-widest text-text-secondary dark:text-text-secondary-dark">Experience</h2>
            </div>

            <div class="space-y-16">
                <!-- Amazon One Medical -->
                <article class="group">
                    <div class="flex flex-col md:flex-row md:items-baseline justify-between gap-2 mb-4">
                        <h3 class="text-2xl md:text-3xl font-semibold tracking-tight">Amazon One Medical</h3>
                        <span class="font-mono text-sm text-text-secondary dark:text-text-secondary-dark">2021 — Present</span>
                    </div>
                    <p class="text-lg font-medium text-brand-gray mb-4">Head of Product & Design</p>
                    <p class="text-base leading-relaxed text-text-secondary dark:text-text-secondary-dark mb-6 max-w-2xl">
                        Led product strategy for virtual care, culminating in the launch of the <strong class="text-brand-black dark:text-brand-white font-medium">Health AI assistant</strong>—Amazon's first agentic AI in healthcare. Own the product vision for AI-first care delivery across 30+ conditions, balancing clinical safety with consumer experience at scale.
                    </p>
                    <div class="flex flex-wrap gap-2">
                        <span class="tag text-xs font-mono py-1.5 px-3 rounded-full bg-gray-100 dark:bg-gray-900 text-brand-gray">Agentic AI</span>
                        <span class="tag text-xs font-mono py-1.5 px-3 rounded-full bg-gray-100 dark:bg-gray-900 text-brand-gray">Healthcare</span>
                        <span class="tag text-xs font-mono py-1.5 px-3 rounded-full bg-gray-100 dark:bg-gray-900 text-brand-gray">LLM Products</span>
                        <span class="tag text-xs font-mono py-1.5 px-3 rounded-full bg-gray-100 dark:bg-gray-900 text-brand-gray">Clinical AI</span>
                    </div>
                </article>

                <!-- Just Walk Out -->
                <article class="group">
                    <div class="flex flex-col md:flex-row md:items-baseline justify-between gap-2 mb-4">
                        <h3 class="text-2xl md:text-3xl font-semibold tracking-tight">Amazon Just Walk Out</h3>
                        <span class="font-mono text-sm text-text-secondary dark:text-text-secondary-dark">2018 — 2020</span>
                    </div>
                    <p class="text-lg font-medium text-brand-gray mb-4">Principal Product Manager-Technical</p>
                    <p class="text-base leading-relaxed text-text-secondary dark:text-text-secondary-dark mb-6 max-w-2xl">
                        Scaled the world's most advanced checkout-free shopping technology. Orchestrated <strong class="text-brand-black dark:text-brand-white font-medium">computer vision and ML systems</strong> at the frontier of retail automation—hundreds of cameras, sensor fusion, real-time inference at scale.
                    </p>
                    <div class="flex flex-wrap gap-2">
                        <span class="tag text-xs font-mono py-1.5 px-3 rounded-full bg-gray-100 dark:bg-gray-900 text-brand-gray">Computer Vision</span>
                        <span class="tag text-xs font-mono py-1.5 px-3 rounded-full bg-gray-100 dark:bg-gray-900 text-brand-gray">ML at Scale</span>
                        <span class="tag text-xs font-mono py-1.5 px-3 rounded-full bg-gray-100 dark:bg-gray-900 text-brand-gray">Sensor Fusion</span>
                        <span class="tag text-xs font-mono py-1.5 px-3 rounded-full bg-gray-100 dark:bg-gray-900 text-brand-gray">Retail Tech</span>
                    </div>
                </article>

                <!-- Amazon Kindle -->
                <article class="group">
                    <div class="flex flex-col md:flex-row md:items-baseline justify-between gap-2 mb-4">
                        <h3 class="text-2xl md:text-3xl font-semibold tracking-tight">Amazon Kindle</h3>
                        <span class="font-mono text-sm text-text-secondary dark:text-text-secondary-dark">2017 — 2018</span>
                    </div>
                    <p class="text-lg font-medium text-brand-gray mb-4">Senior Product Manager-Technical</p>
                    <p class="text-base leading-relaxed text-text-secondary dark:text-text-secondary-dark mb-6 max-w-2xl">
                        Led growth initiatives across Kindle devices and apps. Entry point into big tech—learned Amazon's mechanisms for operating at scale.
                    </p>
                    <div class="flex flex-wrap gap-2">
                        <span class="tag text-xs font-mono py-1.5 px-3 rounded-full bg-gray-100 dark:bg-gray-900 text-brand-gray">Growth</span>
                        <span class="tag text-xs font-mono py-1.5 px-3 rounded-full bg-gray-100 dark:bg-gray-900 text-brand-gray">Consumer Devices</span>
                    </div>
                </article>

                <!-- Magnt -->
                <article class="group">
                    <div class="flex flex-col md:flex-row md:items-baseline justify-between gap-2 mb-4">
                        <h3 class="text-2xl md:text-3xl font-semibold tracking-tight">Magnt</h3>
                        <span class="font-mono text-sm text-text-secondary dark:text-text-secondary-dark">2008 — 2012</span>
                    </div>
                    <p class="text-lg font-medium text-brand-gray mb-4">Co-Founder → Acquired</p>
                    <p class="text-base leading-relaxed text-text-secondary dark:text-text-secondary-dark mb-6 max-w-2xl">
                        Built an early SaaS platform for personal brand websites with integrated social media and custom CMS. Featured by Mashable and TechCrunch. <strong class="text-brand-black dark:text-brand-white font-medium">Acquired in 2012</strong>.
                    </p>
                    <div class="flex flex-wrap gap-2">
                        <span class="tag text-xs font-mono py-1.5 px-3 rounded-full bg-gray-100 dark:bg-gray-900 text-brand-gray">Founder</span>
                        <span class="tag text-xs font-mono py-1.5 px-3 rounded-full bg-gray-100 dark:bg-gray-900 text-brand-gray">SaaS</span>
                        <span class="tag text-xs font-mono py-1.5 px-3 rounded-full bg-gray-100 dark:bg-gray-900 text-brand-gray">Exit</span>
                    </div>
                </article>

                <!-- Earlier Career -->
                <article class="group border-t border-gray-200 dark:border-gray-800 pt-12">
                    <div class="flex flex-col md:flex-row md:items-baseline justify-between gap-2 mb-4">
                        <h3 class="text-xl font-semibold tracking-tight text-text-secondary dark:text-text-secondary-dark">Earlier: Dotvita, Oven Bits, RadioShack, Identity Mark</h3>
                        <span class="font-mono text-sm text-text-secondary dark:text-text-secondary-dark opacity-60">1993 — 2017</span>
                    </div>
                    <p class="text-base leading-relaxed text-text-secondary dark:text-text-secondary-dark max-w-2xl">
                        Director of store design at national retailer, CPO for a mobile commerce platform, and BD lead managing carrier partnerships—foundations for my later work in retail tech and platform products.
                    </p>
                </article>
            </div>
        </section>

        <!-- Philosophy Section -->
        <section id="philosophy" class="mb-32 md:mb-40 section-emerge">
            <div class="flex items-baseline justify-between mb-12">
                <h2 class="text-xs font-mono uppercase tracking-widest text-text-secondary dark:text-text-secondary-dark">Philosophy</h2>
            </div>

            <div class="grid md:grid-cols-2 gap-12 md:gap-16">
                <div>
                    <h3 class="text-xl md:text-2xl font-semibold tracking-tight mb-4">Flip the problem</h3>
                    <p class="text-base leading-relaxed text-text-secondary dark:text-text-secondary-dark">
                        I look for the constraint everyone treats as fixed, then question whether it is.
                    </p>
                </div>

                <div>
                    <h3 class="text-xl md:text-2xl font-semibold tracking-tight mb-4">Systems over heroics</h3>
                    <p class="text-base leading-relaxed text-text-secondary dark:text-text-secondary-dark">
                        Build systems, not heroes. The best implementations are boring and just work, reliably, at scale.
                    </p>
                </div>

                <div>
                    <h3 class="text-xl md:text-2xl font-semibold tracking-tight mb-4">Builder mindset</h3>
                    <p class="text-base leading-relaxed text-text-secondary dark:text-text-secondary-dark">
                        Don't just specify; build. I run a homelab, prototype with local AI, and automate my own workflows. My passion for tech crosses over from work to play.
                    </p>
                </div>

                <div>
                    <h3 class="text-xl md:text-2xl font-semibold tracking-tight mb-4">Thrive in the gray</h3>
                    <p class="text-base leading-relaxed text-text-secondary dark:text-text-secondary-dark">
                        Drive clarity where others stall. Navigate uncertainty; be that technical, ethical, or regulatory. This is where I add the most value.
                    </p>
                </div>
            </div>

            <!-- Pull quote -->
            <blockquote class="mt-16 pt-8 border-t border-gray-200 dark:border-gray-800">
                <p class="text-2xl md:text-3xl font-semibold tracking-tight leading-snug max-w-3xl">
                    &#8220;I'd rather ship a prototype <span class="text-brand-gray">than polish a spec</span>.&#8221;
                </p>
                <footer class="mt-4 text-base text-text-secondary dark:text-text-secondary-dark">&#8212;Dave Onkels</footer>
            </blockquote>
        </section>

        <!-- Projects Section -->
        <section id="projects" class="mb-32 md:mb-40 section-emerge">
            <div class="flex items-baseline justify-between mb-12">
                <h2 class="text-xs font-mono uppercase tracking-widest text-text-secondary dark:text-text-secondary-dark">Things I'm Building Personally</h2>
            </div>

            <div class="grid md:grid-cols-2 gap-6">
                <!-- Shelldex -->
                <a href="https://shelldex.com" target="_blank" rel="noopener noreferrer" class="md:col-span-2 project-card group p-6 rounded-xl border border-gray-200 dark:border-gray-800 hover:border-brand-gray dark:hover:border-brand-gray transition-colors block">
                    <div class="flex items-start justify-between mb-4">
                        <div class="project-icon p-2 rounded-lg bg-gray-100 dark:bg-gray-900">
                            <svg class="w-5 h-5 text-brand-gray" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/></svg>
                        </div>
                    </div>
                    <h3 class="text-lg font-semibold mb-2 group-hover:text-brand-gray transition-colors">Shelldex</h3>
                    <p class="text-sm leading-relaxed text-text-secondary dark:text-text-secondary-dark mb-4">
                        A directory and leaderboard for OpenClaw-inspired personal AI agent projects. Tracks GitHub stats, growth, and rankings across 29+ projects in the ecosystem.
                    </p>
                    <div class="flex flex-wrap gap-2">
                        <span class="tag text-xs font-mono py-1.5 px-3 rounded-full bg-gray-100 dark:bg-gray-900 text-brand-gray">Open Source</span>
                        <span class="tag text-xs font-mono py-1.5 px-3 rounded-full bg-gray-100 dark:bg-gray-900 text-brand-gray">AI Agents</span>
                    </div>
                </a>

                <!-- Labby -->
                <a href="https://labby.casa" target="_blank" rel="noopener noreferrer" class="project-card group p-6 rounded-xl border border-gray-200 dark:border-gray-800 hover:border-brand-gray dark:hover:border-brand-gray transition-colors block">
                    <div class="flex items-start justify-between mb-4">
                        <div class="project-icon p-2 rounded-lg bg-gray-100 dark:bg-gray-900">
                            <svg class="w-5 h-5 text-brand-gray" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/></svg>
                        </div>
                    </div>
                    <h3 class="text-lg font-semibold mb-2 group-hover:text-brand-gray transition-colors">Labby</h3>
                    <p class="text-sm leading-relaxed text-text-secondary dark:text-text-secondary-dark">
                        Native iOS companion for Homepage dashboards. Monitor services, browse with persistent sessions, and manage your homelab from anywhere—self-signed certs included.
                    </p>
                </a>

                <!-- CentralChat -->
                <a href="https://centralchat.fyi" target="_blank" rel="noopener noreferrer" class="project-card group p-6 rounded-xl border border-gray-200 dark:border-gray-800 hover:border-brand-gray dark:hover:border-brand-gray transition-colors block">
                    <div class="flex items-start justify-between mb-4">
                        <div class="project-icon p-2 rounded-lg bg-gray-100 dark:bg-gray-900">
                            <svg class="w-5 h-5 text-brand-gray" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><circle cx="11" cy="9" r="2"/><path d="m16 14-2.5-2.5"/></svg>
                        </div>
                    </div>
                    <h3 class="text-lg font-semibold mb-2 group-hover:text-brand-gray transition-colors">CentralChat</h3>
                    <p class="text-sm leading-relaxed text-text-secondary dark:text-text-secondary-dark">
                        Unified archive viewer for ChatGPT, Claude, and Raycast AI conversations. Full-text search across all platforms, entirely local—your AI history, searchable forever.
                    </p>
                </a>

                <!-- Project 1 -->
                <div class="project-card group p-6 rounded-xl border border-gray-200 dark:border-gray-800 hover:border-brand-gray dark:hover:border-brand-gray transition-colors">
                    <div class="flex items-start justify-between mb-4">
                        <div class="project-icon p-2 rounded-lg bg-gray-100 dark:bg-gray-900">
                            <svg class="w-5 h-5 text-brand-gray" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="6" r="3"/><path d="M5 9v6"/><circle cx="5" cy="18" r="3"/><path d="M12 3v18"/><circle cx="19" cy="6" r="3"/><path d="M16 15.7A9 9 0 0 0 19 9"/></svg>
                        </div>
                    </div>
                    <h3 class="text-lg font-semibold mb-2 group-hover:text-brand-gray transition-colors">Agentic Workflows</h3>
                    <p class="text-sm leading-relaxed text-text-secondary dark:text-text-secondary-dark">
                        N8N + local LLMs (Ollama) for automated triage, document processing, and context-aware routing. Privacy-first, self-hosted.
                    </p>
                </div>

                <!-- Project 2 -->
                <div class="project-card group p-6 rounded-xl border border-gray-200 dark:border-gray-800 hover:border-brand-gray dark:hover:border-brand-gray transition-colors">
                    <div class="flex items-start justify-between mb-4">
                        <div class="project-icon p-2 rounded-lg bg-gray-100 dark:bg-gray-900">
                            <svg class="w-5 h-5 text-brand-gray" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.29 7 12 12 20.71 7"/><line x1="12" y1="22" x2="12" y2="12"/></svg>
                        </div>
                    </div>
                    <h3 class="text-lg font-semibold mb-2 group-hover:text-brand-gray transition-colors">Memory Systems</h3>
                    <p class="text-sm leading-relaxed text-text-secondary dark:text-text-secondary-dark">
                        PKM architecture in Obsidian with AI augmentation. Memory Guardian for context persistence, Daily Bootstrap for routine automation.
                    </p>
                </div>

                <!-- Project 3 -->
                <div class="project-card group p-6 rounded-xl border border-gray-200 dark:border-gray-800 hover:border-brand-gray dark:hover:border-brand-gray transition-colors">
                    <div class="flex items-start justify-between mb-4">
                        <div class="project-icon p-2 rounded-lg bg-gray-100 dark:bg-gray-900">
                            <svg class="w-5 h-5 text-brand-gray" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
                        </div>
                    </div>
                    <h3 class="text-lg font-semibold mb-2 group-hover:text-brand-gray transition-colors">Home Automation</h3>
                    <p class="text-sm leading-relaxed text-text-secondary dark:text-text-secondary-dark">
                        3,860+ entity Home Assistant deployment. Proxmox cluster, TrueNAS/ZFS, Frigate NVR, Tailscale mesh—systems thinking at home scale.
                    </p>
                </div>

                <!-- OpenClaw -->
                <a href="https://openclaw.ai" target="_blank" rel="noopener noreferrer" class="project-card group p-6 rounded-xl border border-gray-200 dark:border-gray-800 hover:border-brand-gray dark:hover:border-brand-gray transition-colors block">
                    <div class="flex items-start justify-between mb-4">
                        <div class="project-icon p-2 rounded-lg bg-gray-100 dark:bg-gray-900">
                            <svg class="w-5 h-5 text-brand-gray" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8V4H8"/><rect x="4" y="8" width="16" height="12" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M9 13v2"/><path d="M15 13v2"/></svg>
                        </div>
                    </div>
                    <h3 class="text-lg font-semibold mb-2 group-hover:text-brand-gray transition-colors">OpenClaw</h3>
                    <p class="text-sm leading-relaxed text-text-secondary dark:text-text-secondary-dark">
                        Running a fully agentic personal AI setup on OpenClaw — 3 agents, 21 cron jobs, 7 channels. Building custom skills, contributing to the ecosystem, and daily-driving the future of personal AI.
                    </p>
                </a>

            </div>
        </section>

        <!-- Contact Section -->
        <footer id="contact" class="pt-16 border-t border-gray-200 dark:border-gray-800 section-emerge">
            <div class="mb-8">
                <h2 class="text-3xl md:text-4xl font-semibold tracking-tight mb-4">Let's talk.</h2>
                <p class="text-lg text-text-secondary dark:text-text-secondary-dark max-w-xl">
                    I'm interested in removing unnecesasry overhead in the US healthcare system, transforming teams and products with AI, high-performance product management, aviation, astronomy, homelabbing, and drones. I've also <a href="https://cinema.onk.io" target="_blank" class="body-link" data-rybbit-event="outbound_click" data-rybbit-prop-destination="cinema" data-rybbit-prop-location="contact">seen a few movies</a>.
                </p>
            </div>

            <!-- Chat Interface -->
            <div class="chat-container mb-12">
                <div id="chat-messages" class="chat-messages">
                    <!-- AI greeting will be inserted here -->
                </div>
                <form id="chat-form" class="chat-input-form" action="javascript:void(0)">
                    <button type="button" id="chat-new" class="chat-new" aria-label="Start new conversation" title="New conversation">
                        <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="M5 12h14"/></svg>
                    </button>
                    <input
                        type="text"
                        id="chat-input"
                        class="chat-input"
                        placeholder="Ask a question or introduce yourself..."
                        autocomplete="off"
                        maxlength="1000"
                    />
                    <button type="submit" id="chat-submit" class="chat-submit">
                        <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/></svg>
                    </button>
                </form>
                <p class="chat-footer">
                    <span class="chat-footer-icon">
                        <svg class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg>
                    </span>
                    Responses powered by AI
                </p>
            </div>

            <!-- Social links -->
            <div class="flex flex-wrap gap-6 mb-12">
                <a href="https://www.linkedin.com/in/onkels/" target="_blank" rel="noopener" class="social-linkedin inline-flex items-center gap-2 text-base font-medium" aria-label="LinkedIn" data-rybbit-event="outbound_click" data-rybbit-prop-destination="linkedin" data-rybbit-prop-location="footer">
                    <svg class="w-5 h-5 transition-colors" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z"/><rect width="4" height="12" x="2" y="9"/><circle cx="4" cy="4" r="2"/></svg>
                </a>
                <a href="https://x.com/daveonkels" target="_blank" rel="noopener" class="social-x inline-flex items-center gap-2 text-base font-medium" aria-label="X (formerly Twitter)" data-rybbit-event="outbound_click" data-rybbit-prop-destination="x" data-rybbit-prop-location="footer">
                    <svg class="w-5 h-5 transition-colors" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
                </a>
                <a href="https://github.com/daveonkels" target="_blank" rel="noopener" class="social-github inline-flex items-center gap-2 text-base font-medium" aria-label="GitHub" data-rybbit-event="outbound_click" data-rybbit-prop-destination="github" data-rybbit-prop-location="footer">
                    <svg class="w-5 h-5 transition-colors" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18c-4.51 2-5-2-7-2"/></svg>
                </a>
            </div>

            <!-- Credentials bar -->
            <div class="flex flex-wrap gap-x-8 gap-y-4 py-8 border-t border-gray-200 dark:border-gray-800 text-sm text-text-secondary dark:text-text-secondary-dark">
                <span>Shipping AI products at Amazon since 2017</span>
                <span>20+ years in tech</span>
                <span>Made with <span class="text-red-500">&#9829;</span> in Seattle <span id="seattle-weather" class="opacity-70"></span></span>
            </div>

            <div class="pt-8 text-xs font-mono text-text-secondary dark:text-text-secondary-dark opacity-50">
                © <span id="copyright-year"></span> Dave Onkels
            </div>
        </footer>

    </div>

    <!-- Confetti Container -->
    <div id="confetti-container" class="confetti-container" aria-hidden="true"></div>

    <!-- Scripts -->
    <script src="main.js"></script>
</body>
</html>
