<html lang="en"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BROKE — Growth Engineering & Development</title>
<parameter name="description" content="Revenue-focused growth engineering, e-commerce development, and full-stack solutions. Austin-based, 15+ years self-taught.">
<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=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<link id="all-fonts-link-font-geist" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-geist">.font-geist { font-family: 'Geist', sans-serif !important; }</style><link id="all-fonts-link-font-roboto" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-roboto">.font-roboto { font-family: 'Roboto', sans-serif !important; }</style><link id="all-fonts-link-font-montserrat" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-montserrat">.font-montserrat { font-family: 'Montserrat', sans-serif !important; }</style><link id="all-fonts-link-font-poppins" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-poppins">.font-poppins { font-family: 'Poppins', sans-serif !important; }</style><link id="all-fonts-link-font-playfair" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;900&display=swap"><style id="all-fonts-style-font-playfair">.font-playfair { font-family: 'Playfair Display', serif !important; }</style><link id="all-fonts-link-font-instrument-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Serif:wght@400;500;600;700&display=swap"><style id="all-fonts-style-font-instrument-serif">.font-instrument-serif { font-family: 'Instrument Serif', serif !important; }</style><link id="all-fonts-link-font-merriweather" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap"><style id="all-fonts-style-font-merriweather">.font-merriweather { font-family: 'Merriweather', serif !important; }</style><link id="all-fonts-link-font-bricolage" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-bricolage">.font-bricolage { font-family: 'Bricolage Grotesque', sans-serif !important; }</style><link id="all-fonts-link-font-jakarta" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-jakarta">.font-jakarta { font-family: 'Plus Jakarta Sans', sans-serif !important; }</style><link id="all-fonts-link-font-manrope" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-manrope">.font-manrope { font-family: 'Manrope', sans-serif !important; }</style><link id="all-fonts-link-font-space-grotesk" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-space-grotesk">.font-space-grotesk { font-family: 'Space Grotesk', sans-serif !important; }</style><link id="all-fonts-link-font-work-sans" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-work-sans">.font-work-sans { font-family: 'Work Sans', sans-serif !important; }</style><link id="all-fonts-link-font-pt-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap"><style id="all-fonts-style-font-pt-serif">.font-pt-serif { font-family: 'PT Serif', serif !important; }</style><link id="all-fonts-link-font-geist-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-geist-mono">.font-geist-mono { font-family: 'Geist Mono', monospace !important; }</style><link id="all-fonts-link-font-space-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap"><style id="all-fonts-style-font-space-mono">.font-space-mono { font-family: 'Space Mono', monospace !important; }</style><link id="all-fonts-link-font-quicksand" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-quicksand">.font-quicksand { font-family: 'Quicksand', sans-serif !important; }</style><link id="all-fonts-link-font-nunito" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-nunito">.font-nunito { font-family: 'Nunito', sans-serif !important; }</style></head>
<body class="antialiased bg-neutral-50 text-neutral-900" style="font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji"><div class="aura-background-component top-0 w-full -z-10 absolute h-[1300px]"><div data-us-project="ojBMr9PbDiBpKIrmzIHh" class="absolute w-full h-full left-0 top-0 -z-10"></div>
<script type="text/javascript">
!function(){if(!window.UnicornStudio){window.UnicornStudio={isInitialized:!1};var i=document.createElement("script");i.src="https://cdn.jsdelivr.net/gh/hiunicornstudio/[email protected]/dist/unicornStudio.umd.js",i.onload=function(){window.UnicornStudio.isInitialized||(UnicornStudio.init(),window.UnicornStudio.isInitialized=!0)},(document.head || document.body).appendChild(i)}}();
</script></div>
<!-- Strap -->
<div class="relative w-full overflow-hidden">
<div class="flex w-full mr-auto ml-auto justify-center">
</div>
</div>
<!-- Badge: Full-width hero -->
<section class="relative w-full sm:px-6 md:px-10 mt-12 mr-auto mb-12 ml-auto pr-4 pl-4 max-w-7xl">
<div class="relative -mt-2 w-full shadow-[0_30px_80px_-30px_rgba(0,0,0,0.25)] bg-white/90 border-neutral-200/70 rounded-[40px] border-t backdrop-blur-xl">
<div class="sm:px-6 md:px-10 pt-8 pr-4 pb-10 pl-4">
<!-- Meta row -->
<header class="w-full">
<header class="flex gap-4 w-full mb-8 items-center justify-between">
<div class="flex items-center gap-3">
<img src="https://broke.dev/wp-content/themes/portfolio/public/BROKE-black.svg" alt="BROKE" class="h-6" />
</div>
<nav class="hidden md:flex items-center gap-6 text-sm text-neutral-700">
<a href="#work" class="hover:text-black transition-colors font-medium">Work</a>
<a href="#services" class="hover:text-black transition-colors font-medium">Services</a>
<a href="#about" class="hover:text-black transition-colors font-medium">About</a>
<a href="#contact" class="hover:text-black transition-colors font-medium">Contact</a>
</nav>
<div class="flex items-center gap-3">
<button class="md:hidden inline-flex items-center justify-center h-10 w-10 rounded-lg ring-1 ring-black/20 bg-black text-white hover:bg-neutral-800 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="menu" class="lucide lucide-menu h-5 w-5"><path d="M4 12h16"></path><path d="M4 18h16"></path><path d="M4 6h16"></path></svg>
</button>
<a href="mailto:[email protected]" class="inline-flex items-center justify-center text-sm font-medium text-white bg-gradient-to-r from-neutral-800 to-neutral-900 rounded-full px-6 py-2.5 shadow-sm ring-1 ring-black/10 hover:from-neutral-700 hover:to-neutral-800 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-black/20">Get In Touch</a>
</div>
</header>
</header>
<!-- Headline -->
<h1 class="max-w-3xl sm:text-5xl md:text-6xl lg:text-8xl leading-[1.05] text-4xl font-normal text-neutral-900 tracking-tighter">
Growth engineering<img alt="Daniel Snell" class="inline-block align-middle h-10 w-10 sm:h-12 sm:w-12 md:h-16 md:w-16 ring-1 ring-neutral-200 object-cover rounded-xl mr-2 ml-2 grayscale" src="https://broke.dev/wp-content/themes/portfolio/public/avatar.jpg"> that drives revenue.
</h1>
<!-- Subcopy -->
<p class="mt-4 text-base sm:text-lg text-neutral-600 max-w-[85ch]">
E-commerce platforms, growth systems, and full-stack development. 15+ years self-taught, building what actually moves the needle. No fluff—just performance that converts.
</p>
<!-- Tech badges -->
<div class="mt-6 flex flex-wrap gap-2.5">
<span class="inline-flex items-center gap-2 rounded-full bg-neutral-100 text-neutral-800 text-xs px-3 py-1.5 ring-1 ring-neutral-200">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="trending-up" class="lucide lucide-trending-up w-3.5 h-3.5 text-neutral-600"><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path></svg>
Revenue-focused
</span>
<span class="inline-flex items-center gap-2 rounded-full bg-neutral-100 text-neutral-800 text-xs px-3 py-1.5 ring-1 ring-neutral-200">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="zap" class="lucide lucide-zap w-3.5 h-3.5 text-neutral-600"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg>
Lighthouse 98+
</span>
<span class="inline-flex items-center gap-2 rounded-full bg-neutral-100 text-neutral-800 text-xs px-3 py-1.5 ring-1 ring-neutral-200">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="code-2" class="lucide lucide-code-2 w-3.5 h-3.5 text-neutral-600"><path d="m18 16 4-4-4-4"></path><path d="m6 8-4 4 4 4"></path><path d="m14.5 4-5 16"></path></svg>
Self-taught 15+ years
</span>
<span class="inline-flex items-center gap-2 rounded-full bg-neutral-100 text-neutral-800 text-xs px-3 py-1.5 ring-1 ring-neutral-200">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="map-pin" class="lucide lucide-map-pin w-3.5 h-3.5 text-neutral-600"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx="12" cy="10" r="3"></circle></svg>
Austin, Texas
</span>
</div>
<!-- CTAs -->
<div class="mt-8 flex flex-col sm:flex-row gap-3 sm:gap-4">
<a href="mailto:[email protected]" class="group inline-flex items-center justify-center gap-3 text-base font-medium text-white bg-gradient-to-tr from-neutral-900 to-neutral-800 rounded-full px-6 py-3 shadow-lg shadow-neutral-900/20 ring-1 ring-black/10 transition duration-150 ease-out hover:-translate-y-0.5">
Let's talk revenue
<span class="inline-flex h-7 w-7 items-center justify-center rounded-full bg-white/15 ring-1 ring-white/25">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right w-4 h-4"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg>
</span>
</a>
<a href="#work" class="inline-flex items-center justify-center text-base font-medium text-neutral-800 bg-neutral-100/60 border border-neutral-200 rounded-full px-6 py-3 hover:bg-neutral-100">
See the work
</a>
</div>
<!-- Footer bar in badge -->
<section class="sm:p-8 bg-zinc-900 border-zinc-800 border rounded-3xl mt-8 pt-6 pr-6 pb-6 pl-6" style="position: relative; overflow: hidden;">
<!-- Background dividers -->
<div class="absolute inset-0 opacity-10 pointer-events-none">
<div class="absolute top-1/4 left-0 right-0 h-px bg-gradient-to-r from-transparent via-zinc-600 to-transparent"></div>
<div class="absolute top-3/4 left-0 right-0 h-px bg-gradient-to-r from-transparent via-zinc-600 to-transparent"></div>
<div class="absolute top-0 bottom-0 left-1/3 w-px bg-gradient-to-b from-transparent via-zinc-600 to-transparent"></div>
<div class="absolute top-0 bottom-0 right-1/3 w-px bg-gradient-to-b from-transparent via-zinc-600 to-transparent"></div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 sm:gap-10 items-start relative z-10">
<!-- Left: Heading + copy -->
<div class="flex flex-col justify-between min-h-full">
<div class="">
<span class="text-sm font-normal text-zinc-500 font-geist" style="">Core Services</span>
<h2 class="text-[44px] sm:text-6xl lg:text-7xl leading-[0.9] text-zinc-100 mt-2 font-geist font-medium tracking-tighter" style="">What I build and how it drives revenue.</h2>
<!-- subtle plus markers with divider -->
<div class="mt-8 relative">
<div class="absolute inset-0 flex items-center">
<div class="w-full h-px bg-gradient-to-r from-zinc-800 via-zinc-700 to-zinc-800"></div>
</div>
<div class="hidden sm:grid grid-cols-3 gap-6 text-zinc-600 bg-zinc-900 px-4 relative">
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus h-4 w-4"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
<span class="text-sm font-normal font-geist" style="">E-commerce</span>
</div>
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus h-4 w-4"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
<span class="text-sm font-normal font-geist" style="">Growth Systems</span>
</div>
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus h-4 w-4"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
<span class="text-sm font-normal font-geist" style="">Full-Stack</span>
</div>
</div>
</div>
</div>
<div class="mt-10 grid grid-cols-1 sm:grid-cols-2 gap-8">
<div class="">
<p class="text-sm text-zinc-100 font-medium tracking-tight font-geist" style="">15+ years solving revenue problems</p>
<p class="mt-1 text-sm text-zinc-400 font-geist" style="">From Shopify Plus stores to growth engineering pipelines—I build systems that scale, convert, and actually move the business forward.</p>
<a href="mailto:[email protected]" class="mt-4 inline-flex items-center gap-2 h-10 px-4 rounded-full bg-zinc-100 text-zinc-900 text-sm font-normal hover:bg-zinc-200 transition font-geist" style="">
Talk about your project
<span class="inline-flex h-2 w-2 rounded-full bg-zinc-900"></span>
</a>
</div>
<!-- Vertical divider -->
<div class="relative">
<div class="absolute left-0 top-0 bottom-0 w-px bg-gradient-to-b from-transparent via-zinc-700 to-transparent sm:block hidden"></div>
<p class="text-base text-zinc-300 leading-relaxed sm:text-right sm:pl-8 font-geist" style="">
Real experience from <span class="font-medium text-zinc-100 font-geist" style="">Shopify, DoorDash, Shipt, and Edgio</span>—focused on performance, conversions, and clean architecture that drives revenue.
</p>
</div>
</div>
</div>
<!-- Right: Services grid -->
<div class="grid grid-cols-2 gap-4 relative">
<!-- Service 1 -->
<article class="relative overflow-hidden h-[200px] bg-gradient-to-br from-zinc-800 to-zinc-900 border border-zinc-800 rounded-2xl">
<div class="absolute inset-0 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/dc543ce0-b776-4e3a-a6d5-933229659050_800w.jpg)] bg-cover hover:scale-105 transition-transform duration-500">
</div>
<div class="absolute top-3 left-3">
<span class="inline-flex h-7 w-7 items-center justify-center rounded-full bg-zinc-100/90 text-zinc-900 border border-zinc-700">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="shopping-cart" class="lucide lucide-shopping-cart h-3.5 w-3.5"><circle cx="8" cy="21" r="1"></circle><circle cx="19" cy="21" r="1"></circle><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"></path></svg>
</span>
</div>
<div class="absolute top-3 right-3">
<span class="px-2 py-1 rounded-md bg-zinc-900/60 backdrop-blur text-[11px] text-zinc-300 font-normal border border-zinc-800 font-geist">E-commerce</span>
</div>
<div class="absolute bottom-3 left-3 right-3">
<p class="text-white text-lg font-medium tracking-tight leading-tight font-geist">Shopify Plus & WooCommerce</p>
</div>
</article>
<!-- Service 2 -->
<article class="relative overflow-hidden h-[200px] bg-gradient-to-br from-zinc-800 to-zinc-900 border border-zinc-800 rounded-2xl">
<div class="absolute inset-0 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/51178af2-893c-4b8c-98ab-8023bddbc403_800w.jpg)] bg-cover hover:scale-105 transition-transform duration-500">
</div>
<div class="absolute top-3 left-3">
<span class="inline-flex h-7 w-7 items-center justify-center rounded-full bg-zinc-100/90 text-zinc-900 border border-zinc-700">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="trending-up" class="lucide lucide-trending-up h-3.5 w-3.5"><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path></svg>
</span>
</div>
<div class="absolute top-3 right-3">
<span class="px-2 py-1 rounded-md bg-zinc-900/60 backdrop-blur text-[11px] text-zinc-300 font-normal border border-zinc-800 font-geist">Growth</span>
</div>
<div class="absolute bottom-3 left-3 right-3">
<p class="text-white text-lg font-medium tracking-tight leading-tight font-geist">ETL Pipelines & Tracking</p>
</div>
</article>
<!-- Service 3 -->
<article class="relative overflow-hidden h-[200px] bg-gradient-to-br from-zinc-800 to-zinc-900 border border-zinc-800 rounded-2xl">
<div class="absolute inset-0 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/1459a924-0e1f-45a6-a3e5-87850677a537_800w.jpg)] bg-cover hover:scale-105 transition-transform duration-500">
</div>
<div class="absolute top-3 left-3">
<span class="inline-flex h-7 w-7 items-center justify-center rounded-full bg-zinc-100/90 text-zinc-900 border border-zinc-700">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="code-2" class="lucide lucide-code-2 h-3.5 w-3.5"><path d="m18 16 4-4-4-4"></path><path d="m6 8-4 4 4 4"></path><path d="m14.5 4-5 16"></path></svg>
</span>
</div>
<div class="absolute top-3 right-3">
<span class="px-2 py-1 rounded-md bg-zinc-900/60 backdrop-blur text-[11px] text-zinc-300 font-normal border border-zinc-800 font-geist">Full-Stack</span>
</div>
<div class="absolute bottom-3 left-3 right-3">
<p class="text-white text-lg font-medium tracking-tight leading-tight font-geist">WordPress & Laravel Apps</p>
</div>
</article>
<!-- Service 4 -->
<article class="relative overflow-hidden h-[200px] bg-gradient-to-br from-zinc-800 to-zinc-900 border border-zinc-800 rounded-2xl">
<div class="absolute inset-0 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/6d5e0510-9196-4a94-b2d3-5e95eddcbce9_800w.jpg)] bg-cover hover:scale-105 transition-transform duration-500">
</div>
<div class="absolute top-3 left-3">
<span class="inline-flex h-7 w-7 items-center justify-center rounded-full bg-zinc-100/90 text-zinc-900 border border-zinc-700">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="zap" class="lucide lucide-zap h-3.5 w-3.5"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg>
</span>
</div>
<div class="absolute top-3 right-3">
<span class="px-2 py-1 rounded-md bg-zinc-900/60 backdrop-blur text-[11px] text-zinc-300 font-normal border border-zinc-800 font-geist">Performance</span>
</div>
<div class="absolute bottom-3 left-3 right-3">
<p class="text-white text-lg font-medium tracking-tight leading-tight font-geist">Core Web Vitals & SEO</p>
</div>
</article>
</div>
</div>
</section>
</div>
</div>
</section>
<!-- Work (full-bleed grid) -->
<section id="work" class="w-full sm:px-6 md:px-10 mx-auto pt-12 pr-4 pb-6 pl-4 max-w-7xl">
<div class="flex items-end justify-between mb-6 sm:mb-8">
<div class="">
<p class="text-[11px] sm:text-xs uppercase text-neutral-500 tracking-[0.2em]">(01) Selected Work</p>
<h2 class="mt-2 text-2xl sm:text-3xl font-semibold tracking-tight">Recent projects that drove results.</h2>
</div>
<a href="mailto:[email protected]" class="hidden sm:inline-flex items-center gap-2 ring-1 ring-neutral-200 hover:shadow text-sm text-neutral-700 bg-white rounded-full px-4 py-2">
Discuss your project
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right w-4 h-4"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg>
</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-5">
<!-- Col 1 -->
<div class="group relative overflow-hidden ring-1 ring-neutral-200 cursor-pointer bg-white rounded-3xl shadow-sm h-80">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a64e6770-50ba-4159-829d-d5f20fab2595_800w.jpg" alt="Shopify Plus e-commerce store" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-100 group-hover:opacity-0 transition-opacity duration-300"></div>
<div class="absolute bottom-0 left-0 right-0 p-5">
<p class="text-xs text-white/70">E-commerce • Shopify Plus</p>
<div class="mt-1 flex items-center justify-between">
<h3 class="text-base sm:text-lg font-semibold tracking-tight text-white">Premium Store Build</h3>
<span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/90 text-neutral-900">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
</span>
</div>
</div>
<div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex bg-black/40 pt-6 pr-6 pb-6 pl-6 backdrop-blur-md items-center justify-center">
<div class="transform group-hover:translate-y-0 transition-transform duration-300 delay-75 text-center translate-y-8">
<h3 class="text-xl sm:text-2xl font-semibold tracking-tight text-white mb-3">Premium Store Build</h3>
<p class="text-sm text-white/90 leading-relaxed mb-4">Custom Shopify Plus theme with headless architecture. Optimized checkout flow increased conversion by 28%. Sub-2s load times on mobile.</p>
<div class="inline-flex items-center gap-2 rounded-full bg-white/20 text-white text-xs px-3 py-1.5 backdrop-blur-sm">
<span class="h-2 w-2 rounded-full bg-emerald-400"></span>
Live & Converting
</div>
</div>
</div>
</div>
<div class="group relative overflow-hidden ring-1 ring-neutral-200 bg-white rounded-3xl shadow-sm cursor-pointer h-80">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/dc543ce0-b776-4e3a-a6d5-933229659050_800w.jpg" alt="Growth tracking dashboard" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-100 group-hover:opacity-0 transition-opacity duration-300"></div>
<div class="absolute bottom-0 left-0 right-0 p-5">
<p class="text-xs text-white/70">Growth • Analytics</p>
<div class="mt-1 flex items-center justify-between">
<h3 class="text-base sm:text-lg font-semibold tracking-tight text-white">Revenue Dashboard</h3>
<span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/90 text-neutral-900">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
</span>
</div>
</div>
<div class="absolute inset-0 backdrop-blur-md bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center p-6">
<div class="text-center transform translate-y-8 group-hover:translate-y-0 transition-transform duration-300 delay-75">
<h3 class="text-xl sm:text-2xl font-semibold tracking-tight text-white mb-3">Revenue Dashboard</h3>
<p class="text-sm text-white/90 leading-relaxed mb-4">Custom ETL pipeline processing 50k+ events daily. Real-time attribution tracking across paid channels. Built with Laravel and React for a SaaS platform.</p>
<div class="inline-flex items-center gap-2 rounded-full bg-white/20 text-white text-xs px-3 py-1.5 backdrop-blur-sm">
<span class="h-2 w-2 rounded-full bg-emerald-400"></span>
Production Ready
</div>
</div>
</div>
</div>
<div class="group relative overflow-hidden ring-1 ring-neutral-200 bg-white rounded-3xl shadow-sm cursor-pointer h-80">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/51178af2-893c-4b8c-98ab-8023bddbc403_800w.jpg" alt="WordPress block theme" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-100 group-hover:opacity-0 transition-opacity duration-300"></div>
<div class="absolute bottom-0 left-0 right-0 p-5">
<p class="text-xs text-white/70">WordPress • FSE</p>
<div class="mt-1 flex items-center justify-between">
<h3 class="text-base sm:text-lg font-semibold tracking-tight text-white">Portfolio Block Theme</h3>
<span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/90 text-neutral-900">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
</span>
</div>
</div>
<div class="absolute inset-0 backdrop-blur-md bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center p-6">
<div class="text-center transform translate-y-8 group-hover:translate-y-0 transition-transform duration-300 delay-75">
<h3 class="text-xl sm:text-2xl font-semibold tracking-tight text-white mb-3">Portfolio Block Theme</h3>
<p class="text-sm text-white/90 leading-relaxed mb-4">Custom WordPress FSE theme with Timber/Twig templating. Lighthouse 98 score. Dynamic blocks for portfolio showcase and case studies with clean architecture.</p>
<div class="inline-flex items-center gap-2 rounded-full bg-white/20 text-white text-xs px-3 py-1.5 backdrop-blur-sm">
<span class="h-2 w-2 rounded-full bg-emerald-400"></span>
Live Site
</div>
</div>
</div>
</div>
<!-- Col 2 -->
<div class="group relative overflow-hidden ring-1 ring-neutral-200 bg-white rounded-3xl shadow-sm cursor-pointer h-80">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/1459a924-0e1f-45a6-a3e5-87850677a537_800w.jpg" alt="Billing platform" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" style="">
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-100 group-hover:opacity-0 transition-opacity duration-300"></div>
<div class="absolute bottom-0 left-0 right-0 p-5">
<p class="text-xs text-white/70">Fintech • Platform</p>
<div class="mt-1 flex items-center justify-between">
<h3 class="text-base sm:text-lg font-semibold tracking-tight text-white">LedgerFlow</h3>
<span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/90 text-neutral-900">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
</span>
</div>
</div>
<div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex bg-black/40 pt-6 pr-6 pb-6 pl-6 backdrop-blur-md items-center justify-center">
<div class="text-center transform translate-y-8 group-hover:translate-y-0 transition-transform duration-300 delay-75">
<h3 class="text-xl sm:text-2xl font-semibold tracking-tight text-white mb-3">LedgerFlow</h3>
<p class="text-sm text-white/90 leading-relaxed mb-4">Modern billing platform with automated invoicing, subscription management, and real-time financial reporting for growing businesses.</p>
<div class="inline-flex items-center gap-2 rounded-full bg-white/20 text-white text-xs px-3 py-1.5 backdrop-blur-sm">
<span class="h-2 w-2 rounded-full bg-emerald-400"></span>
Production Ready
</div>
</div>
</div>
</div>
<div class="group relative overflow-hidden ring-1 ring-neutral-200 bg-white rounded-3xl shadow-sm cursor-pointer h-80">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/6d5e0510-9196-4a94-b2d3-5e95eddcbce9_800w.jpg" alt="Mobile CI/CD" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-100 group-hover:opacity-0 transition-opacity duration-300"></div>
<div class="absolute bottom-0 left-0 right-0 p-5">
<p class="text-xs text-white/70">Infra • DevOps</p>
<div class="mt-1 flex items-center justify-between">
<h3 class="text-base sm:text-lg font-semibold tracking-tight text-white">Runway Pipelines</h3>
<span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/90 text-neutral-900">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
</span>
</div>
</div>
<div class="absolute inset-0 backdrop-blur-md bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center p-6">
<div class="text-center transform translate-y-8 group-hover:translate-y-0 transition-transform duration-300 delay-75">
<h3 class="text-xl sm:text-2xl font-semibold tracking-tight text-white mb-3">Runway Pipelines</h3>
<p class="text-sm text-white/90 leading-relaxed mb-4">Advanced CI/CD pipeline for mobile applications with automated testing, deployment orchestration, and rollback capabilities.</p>
<div class="inline-flex items-center gap-2 rounded-full bg-white/20 text-white text-xs px-3 py-1.5 backdrop-blur-sm">
<span class="h-2 w-2 rounded-full bg-emerald-400"></span>
Enterprise Scale
</div>
</div>
</div>
</div>
<div class="group relative overflow-hidden ring-1 ring-neutral-200 bg-white rounded-3xl shadow-sm cursor-pointer h-80">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c8e6a60a-b3fb-4b34-83c2-ead36a2abc7f_800w.jpg" alt="Realtime collaboration" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" style="">
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-100 group-hover:opacity-0 transition-opacity duration-300"></div>
<div class="absolute bottom-0 left-0 right-0 p-5">
<p class="text-xs text-white/70">Realtime • Collab</p>
<div class="mt-1 flex items-center justify-between">
<h3 class="text-base sm:text-lg font-semibold tracking-tight text-white">Syncboard</h3>
<span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/90 text-neutral-900">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
</span>
</div>
</div>
<div class="absolute inset-0 backdrop-blur-md bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center p-6">
<div class="text-center transform translate-y-8 group-hover:translate-y-0 transition-transform duration-300 delay-75">
<h3 class="text-xl sm:text-2xl font-semibold tracking-tight text-white mb-3">Syncboard</h3>
<p class="text-sm text-white/90 leading-relaxed mb-4">Real-time collaboration platform with live cursors, shared workspaces, and conflict-free synchronization across teams.</p>
<div class="inline-flex items-center gap-2 rounded-full bg-white/20 text-white text-xs px-3 py-1.5 backdrop-blur-sm">
<span class="h-2 w-2 rounded-full bg-amber-400"></span>
Coming Soon
</div>
</div>
</div>
</div>
</div>
<div class="mt-8 sm:mt-10 flex justify-center">
<a href="#work" class="inline-flex items-center gap-2 rounded-full bg-white ring-1 ring-neutral-200 px-5 py-3 text-sm text-neutral-700 hover:shadow">
View all work
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right w-4 h-4"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg>
</a>
</div>
</section>
<!-- Capabilities (dark, full-width) -->
<section class="w-full sm:px-6 md:px-10 mx-auto pt-12 pr-4 pb-12 pl-4 max-w-7xl">
<div class="relative overflow-hidden rounded-3xl ring-1 ring-neutral-800 bg-neutral-900">
<div class="relative z-10 px-5 py-5 sm:p-8 md:p-12">
<div class="flex items-start justify-between">
<div class="flex items-center gap-2 text-white/80 text-xs">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="sparkles" class="lucide lucide-sparkles w-3.5 h-3.5"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg>
<span>What we do</span>
</div>
<h2 class="text-5xl sm:text-6xl md:text-7xl text-white font-semibold tracking-tight leading-[1.05]">Capabilities.</h2>
</div>
<div class="mt-8 bg-white/5 backdrop-blur-3xl rounded-2xl ring-1 ring-white/10 overflow-hidden">
<!-- 001 -->
<details class="group open:bg-white/5" open="">
<summary class="list-none">
<div class="flex items-center gap-4 justify-between border-b border-white/10 p-4 sm:p-5">
<div class="text-white/50 text-[11px]">(001)</div>
<div class="flex-1 min-w-0">
<p class="text-white font-semibold tracking-tight">Full‑stack product development</p>
</div>
<div class="shrink-0 h-8 w-8 rounded-full bg-white/10 ring-1 ring-white/15 flex items-center justify-center text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus w-4 h-4 group-open:hidden"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="minus" class="lucide lucide-minus w-4 h-4 hidden group-open:block"><path d="M5 12h14"></path></svg>
</div>
</div>
</summary>
<div class="p-4 sm:p-6">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
<div class="lg:col-span-7 flex items-start gap-4">
<div class="shrink-0 h-14 w-20 rounded-xl overflow-hidden ring-1 ring-white/20 bg-white/10">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/1d73ea37-684c-4cd9-97fd-02bf2d7528d4_320w.jpg" alt="Product dev" class="h-full w-full object-cover" style="">
</div>
<div class="">
<h3 class="text-white font-semibold tracking-tight">From spec to shipping</h3>
<p class="text-neutral-300 text-sm mt-1">Architecture, data, APIs, and slick UIs. We own delivery and keep velocity high with tight CI/CD.</p>
</div>
</div>
<div class="lg:col-span-5">
<p class="text-white/80 text-xs">Toolbox</p>
<div class="mt-3 flex flex-wrap gap-2">
<span class="inline-flex items-center rounded-full bg-white text-neutral-900 text-xs px-2.5 py-1">TypeScript</span>
<span class="inline-flex items-center rounded-full bg-white text-neutral-900 text-xs px-2.5 py-1">React</span>
<span class="inline-flex items-center rounded-full bg-white text-neutral-900 text-xs px-2.5 py-1">Node</span>
<span class="inline-flex items-center rounded-full bg-white text-neutral-900 text-xs px-2.5 py-1">Postgres</span>
<span class="inline-flex items-center rounded-full bg-white text-neutral-900 text-xs px-2.5 py-1">GraphQL</span>
<span class="inline-flex items-center rounded-full bg-white/80 text-neutral-900 text-xs px-2.5 py-1">+ more</span>
</div>
</div>
</div>
<div class="mt-6">
<a href="#contact" class="inline-flex items-center justify-center rounded-xl bg-amber-500 text-neutral-900 px-4 py-2.5 text-sm font-medium shadow-sm hover:bg-amber-400 transition">
Get started
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4 ml-2"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
</a>
</div>
</div>
</details>
<!-- 002 -->
<details class="group">
<summary class="list-none">
<div class="flex items-center gap-4 justify-between border-t border-b border-white/10 p-4 sm:p-5">
<div class="text-white/50 text-[11px]">(002)</div>
<div class="flex-1 min-w-0">
<p class="text-white font-semibold tracking-tight">Frontend systems & performance</p>
</div>
<div class="shrink-0 h-8 w-8 rounded-full bg-white/10 ring-1 ring-white/15 flex items-center justify-center text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus w-4 h-4 group-open:hidden"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="minus" class="lucide lucide-minus w-4 h-4 hidden group-open:block"><path d="M5 12h14"></path></svg>
</div>
</div>
</summary>
<div class="p-4 sm:p-6">
<p class="text-neutral-300 text-sm max-w-[90ch]">Design systems, accessibility, animations, and Lighthouse 95+. We build maintainable interfaces that feel instant.</p>
</div>
</details>
<!-- 003 -->
<details class="group">
<summary class="list-none">
<div class="flex items-center gap-4 justify-between border-t border-b border-white/10 p-4 sm:p-5">
<div class="text-white/50 text-[11px]">(003)</div>
<div class="flex-1 min-w-0">
<p class="text-white font-semibold tracking-tight">AI integrations & agents</p>
</div>
<div class="shrink-0 h-8 w-8 rounded-full bg-white/10 ring-1 ring-white/15 flex items-center justify-center text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus w-4 h-4 group-open:hidden"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="minus" class="lucide lucide-minus w-4 h-4 hidden group-open:block"><path d="M5 12h14"></path></svg>
</div>
</div>
</summary>
<div class="p-4 sm:p-6">
<p class="text-neutral-300 text-sm max-w-[90ch]">Retrieval, function calling, evals, and production monitoring. We make AI useful, reliable, and fast.</p>
</div>
</details>
<!-- 004 -->
<details class="group">
<summary class="list-none">
<div class="flex items-center gap-4 justify-between border-t border-white/10 p-4 sm:p-5">
<div class="text-white/50 text-[11px]">(004)</div>
<div class="flex-1 min-w-0">
<p class="text-white font-semibold tracking-tight">Cloud & DevOps</p>
</div>
<div class="shrink-0 h-8 w-8 rounded-full bg-white/10 ring-1 ring-white/15 flex items-center justify-center text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus w-4 h-4 group-open:hidden"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="minus" class="lucide lucide-minus w-4 h-4 hidden group-open:block"><path d="M5 12h14"></path></svg>
</div>
</div>
</summary>
<div class="p-4 sm:p-6">
<p class="text-neutral-300 text-sm max-w-[90ch]">Infra-as-code, observability, and autoscaling across clouds. Zero-downtime releases and strong security posture.</p>
</div>
</details>
</div>
</div>
</div>
</section>
<!-- Stack pills -->
<section class="w-full sm:px-6 md:px-10 max-w-7xl mx-auto pt-12 pr-4 pb-12 pl-4">
<div class="flex items-end justify-between mb-6 sm:mb-8">
<div>
<p class="text-[11px] sm:text-xs uppercase text-neutral-500 tracking-[0.2em]">(02) Platform</p>
<h2 class="mt-2 text-2xl sm:text-3xl lg:text-4xl font-semibold tracking-tight">Scale your business operations.</h2>
</div>
<a href="#contact" class="hidden sm:inline-flex items-center gap-2 ring-1 ring-neutral-200 hover:shadow text-sm text-neutral-700 bg-white rounded-full px-4 py-2">
Explore platform
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right w-4 h-4"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg>
</a>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
<!-- Revenue & Analytics -->
<article class="relative bg-white ring-1 ring-neutral-200 rounded-3xl p-5 sm:p-8 flex flex-col hover:-translate-y-0.5 transition-transform duration-200">
<div class="flex items-center gap-3 mb-4">
<span class="inline-flex items-center gap-2 rounded-full bg-emerald-400/10 text-emerald-600 text-xs px-2.5 py-1">
<span class="h-1.5 w-1.5 rounded-full bg-emerald-400"></span>
Revenue Engine
</span>
</div>
<h3 class="text-2xl sm:text-3xl font-semibold tracking-tight text-neutral-900 leading-tight mb-4">Revenue & Analytics</h3>
<p class="text-neutral-600 text-base leading-relaxed mb-6 flex-1">Transform your business with intelligent revenue tracking, predictive analytics, and automated growth optimization.</p>
<div class="grid grid-cols-2 gap-3">
<span class="inline-flex items-center gap-2 ring-1 ring-neutral-200 text-xs text-neutral-800 bg-zinc-100 rounded-xl pt-2 pr-3.5 pb-2 pl-3.5">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="bar-chart-3" class="lucide lucide-bar-chart-3 w-4 h-4 text-neutral-700"><path d="M3 3v16a2 2 0 0 0 2 2h16"></path><path d="M18 17V9"></path><path d="M13 17V5"></path><path d="M8 17v-3"></path></svg>
Real-time Metrics
</span>
<span class="inline-flex items-center gap-2 ring-1 ring-neutral-200 text-xs text-neutral-800 bg-zinc-100 rounded-xl pt-2 pr-3.5 pb-2 pl-3.5">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="target" class="lucide lucide-target w-4 h-4 text-neutral-700"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="6"></circle><circle cx="12" cy="12" r="2"></circle></svg>
Growth Targets
</span>
<span class="inline-flex items-center gap-2 ring-1 ring-neutral-200 text-xs text-neutral-800 bg-zinc-100 rounded-xl pt-2 pr-3.5 pb-2 pl-3.5">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="zap" class="lucide lucide-zap w-4 h-4 text-neutral-700"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg>
Auto Optimization
</span>
<span class="inline-flex items-center gap-2 ring-1 ring-neutral-200 text-xs text-neutral-800 bg-zinc-100 rounded-xl pt-2 pr-3.5 pb-2 pl-3.5">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="shield-check" class="lucide lucide-shield-check w-4 h-4 text-neutral-700"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path><path d="m9 12 2 2 4-4"></path></svg>
Secure Platform
</span>
</div>
</article>
<!-- Team Collaboration -->
<article class="relative bg-white ring-1 ring-neutral-200 rounded-3xl p-5 sm:p-8 flex flex-col hover:-translate-y-0.5 transition-transform duration-200">
<div class="flex items-center gap-3 mb-4">
<span class="inline-flex items-center gap-2 rounded-full bg-amber-400/10 text-amber-600 text-xs px-2.5 py-1">
<span class="h-1.5 w-1.5 rounded-full bg-amber-400"></span>
Collaboration Hub
</span>
</div>
<h3 class="text-2xl sm:text-3xl font-semibold tracking-tight text-neutral-900 leading-tight mb-4">Team Collaboration</h3>
<p class="text-neutral-600 text-base leading-relaxed mb-6 flex-1">Streamline teamwork with unified workspaces, real-time collaboration, and intelligent project management.</p>
<!-- Team member stack -->
<div class="mt-auto relative">
<div class="absolute inset-x-6 -top-1.5 h-12 rounded-xl bg-zinc-100/60 ring-1 ring-neutral-200"></div>
<div class="relative">
<div class="flex items-center gap-3 rounded-2xl bg-zinc-100 ring-1 ring-neutral-200 p-4">
<div class="flex -space-x-2">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/096dab35-ecaf-418f-a932-5b514543b035_320w.jpg" alt="Team member" class="h-8 w-8 rounded-full object-cover ring-2 ring-white" style="">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/fc935cb1-ef8c-4e13-8bce-c3fd8e402f63_320w.jpg" alt="Team member" class="h-8 w-8 rounded-full object-cover ring-2 ring-white" style="">
<div class="h-8 w-8 rounded-full bg-neutral-200 ring-2 ring-white flex items-center justify-center">
<span class="text-xs font-medium text-neutral-600">+3</span>
</div>
</div>
<div class="min-w-0 flex-1">
<p class="text-neutral-900 font-medium tracking-tight text-sm">Team Alpha</p>
<p class="text-xs text-neutral-600">5 active projects • Online</p>
</div>
<div class="h-2 w-2 rounded-full bg-emerald-400"></div>
</div>
</div>
</div>
</article>
<!-- AI-Powered Insights -->
<article class="relative bg-white ring-1 ring-neutral-200 rounded-3xl p-5 sm:p-8 flex flex-col hover:-translate-y-0.5 transition-transform duration-200">
<div class="flex items-center gap-3 mb-4">
<span class="inline-flex items-center gap-2 rounded-full bg-indigo-400/10 text-indigo-600 text-xs px-2.5 py-1">
<span class="h-1.5 w-1.5 rounded-full bg-indigo-400"></span>
AI Intelligence
</span>
</div>
<h3 class="text-2xl sm:text-3xl font-semibold tracking-tight text-neutral-900 leading-tight mb-4">AI-Powered Insights</h3>
<p class="text-neutral-600 text-base leading-relaxed mb-6 flex-1">Leverage artificial intelligence for predictive analytics, automated decision-making, and strategic insights.</p>
<!-- AI insights panel -->
<div class="mt-auto">
<div class="rounded-2xl bg-zinc-100 ring-1 ring-neutral-200 p-4">
<div class="flex items-center justify-between mb-3">
<p class="text-sm font-medium text-neutral-900 flex items-center gap-2">
</p><div class="h-2 w-2 rounded-full bg-indigo-400 animate-pulse"></div>
AI Analysis
<p></p>
<span class="text-xs font-medium text-indigo-600">Active</span>
</div>
<div class="space-y-2">
<div class="flex items-center justify-between px-3.5 py-2 rounded-lg bg-white/60 ring-1 ring-neutral-200">
<span class="text-sm text-neutral-600 flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="trending-up" class="lucide lucide-trending-up w-3.5 h-3.5 text-emerald-500"><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path></svg>
Performance Score
</span>
<span class="text-sm font-medium text-neutral-900">94%</span>
</div>
<div class="flex items-center justify-between px-3.5 py-2 rounded-lg bg-white/60 ring-1 ring-neutral-200">
<span class="text-sm text-neutral-600 flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="lightbulb" class="lucide lucide-lightbulb w-3.5 h-3.5 text-amber-500"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"></path><path d="M9 18h6"></path><path d="M10 22h4"></path></svg>
Recommendations
</span>
<span class="text-sm font-medium text-neutral-900">12 new</span>
</div>
</div>
</div>
</div>
</article>
</div>
<!-- CTA section at bottom -->
<div class="mt-8 sm:mt-10 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 p-6 bg-neutral-50 rounded-2xl ring-1 ring-neutral-200">
<div class="">
<h3 class="text-lg font-semibold text-neutral-900 tracking-tight">Ready to transform your operations?</h3>
<p class="text-sm text-neutral-600 mt-1">Join thousands of businesses scaling with our platform.</p>
</div>
<div class="flex items-center gap-3">
<a href="#work" class="inline-flex items-center gap-2 rounded-xl bg-white ring-1 ring-neutral-200 px-4 py-2.5 text-sm text-neutral-700 hover:shadow transition">
View case studies
</a>
<a href="#contact" class="inline-flex items-center gap-2 rounded-xl bg-neutral-900 text-white px-4 py-2.5 text-sm font-medium hover:bg-neutral-800 transition shadow">
Get started
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="w-full sm:px-6 md:px-10 mx-auto pt-12 pr-4 pb-10 pl-4 max-w-7xl">
<div class="relative overflow-hidden bg-neutral-900 rounded-3xl">
<div class="relative z-10 sm:p-12 md:p-16 pt-12 pr-8 pb-8 pl-8">
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8 pb-12 border-b border-white/10">
<div class="lg:col-span-4">
<div class="flex items-center gap-2 mb-4">
<img src="https://broke.dev/wp-content/themes/portfolio/public/BROKE.svg" alt="BROKE" class="h-6" />
</div>
<p class="text-white/70 max-w-3xl">Growth engineering and full-stack development. Based in Austin, Texas. 15+ years self-taught. Let's talk about what actually drives revenue for your business.</p>
<div id="contact" class="mt-6 rounded-2xl border border-white/10 bg-white/5 p-5 sm:p-6 md:p-8">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="space-y-4">
<div class="inline-flex items-center gap-2 rounded-full bg-emerald-400/10 text-emerald-300 ring-1 ring-emerald-300/20 px-2.5 py-1 text-xs">
<span class="h-1.5 w-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
Available Now
</div>
<h4 class="text-white font-semibold tracking-tight">Ready to build</h4>
<ul class="space-y-2 text-sm text-neutral-300">
<li class="flex items-start gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-4 h-4 text-emerald-400 mt-0.5"><path d="M20 6 9 17l-5-5"></path></svg>
<span class="">15+ years self-taught experience—no middleman, just results.</span>
</li>
<li class="flex items-start gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-4 h-4 text-emerald-400 mt-0.5"><path d="M20 6 9 17l-5-5"></path></svg>
<span class="">Revenue-focused development. Every decision tied to business outcomes.</span>
</li>
<li class="flex items-start gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-4 h-4 text-emerald-400 mt-0.5"><path d="M20 6 9 17l-5-5"></path></svg>
<span class="">Performance, SEO, and conversions built-in from day one.</span>
</li>
</ul>
<div class="flex items-center gap-3 pt-2 text-sm">
<a href="mailto:[email protected]" class="inline-flex items-center gap-2 text-white hover:text-amber-300 transition">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="mail" class="lucide lucide-mail w-4 h-4"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect x="2" y="4" width="20" height="16" rx="2"></rect></svg>
[email protected]
</a>
<span class="text-white/20">•</span>
<a href="https://linkedin.com/in/danielsnell" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 text-white hover:text-amber-300 transition">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="linkedin" class="lucide lucide-linkedin w-4 h-4"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect width="4" height="12" x="2" y="9"></rect><circle cx="4" cy="4" r="2"></circle></svg>
LinkedIn
</a>
</div>
</div>
<form id="contact-form" class="lg:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="sm:col-span-1">
<label for="name" class="block text-xs font-medium text-white/80 mb-1">Your name</label>
<input id="name" name="name" type="text" required="" placeholder="Jane Doe" class="w-full placeholder-white/40 outline-none focus:ring-2 focus:ring-amber-400/60 focus:border-amber-300 transition text-sm text-white bg-white/10 border-white/10 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3">
</div>
<div class="sm:col-span-1">
<label for="email" class="block text-xs font-medium text-white/80 mb-1">Email</label>
<input id="email" name="email" type="email" required="" placeholder="[email protected]" class="w-full placeholder-white/40 outline-none focus:ring-2 focus:ring-amber-400/60 focus:border-amber-300 transition text-sm text-white bg-white/10 border-white/10 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3">
</div>
<div class="sm:col-span-1">
<label for="company" class="block text-xs font-medium text-white/80 mb-1">Company</label>
<input id="company" name="company" type="text" placeholder="Acme Inc." class="w-full placeholder-white/40 outline-none focus:ring-2 focus:ring-amber-400/60 focus:border-amber-300 transition text-sm text-white bg-white/10 border-white/10 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3">
</div>
<div class="sm:col-span-1">
<label for="project-type" class="block text-xs font-medium text-white/80 mb-1">Project type</label>
<select id="project-type" name="projectType" class="w-full appearance-none outline-none focus:ring-2 focus:ring-amber-400/60 focus:border-amber-300 transition text-sm text-white bg-white/10 border-white/10 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3">
<option class="bg-neutral-900" value="ecommerce">E-commerce Platform</option>
<option class="bg-neutral-900" value="growth">Growth Engineering</option>
<option class="bg-neutral-900" value="fullstack">Full-Stack Development</option>
<option class="bg-neutral-900" value="seo">Performance & SEO</option>
</select>
</div>
<div class="sm:col-span-2">
<label for="message" class="block text-xs font-medium text-white/80 mb-1">What are you building?</label>
<textarea id="message" name="message" rows="4" placeholder="A few sentences about your goals, timeline, and success metrics." class="w-full placeholder-white/40 outline-none focus:ring-2 focus:ring-amber-400/60 focus:border-amber-300 transition text-sm text-white bg-white/10 border-white/10 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3"></textarea>
</div>
<div class="sm:col-span-2 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
<div class="flex gap-2 text-xs text-white/70 items-center">
<input id="nda" name="nda" type="checkbox" class="h-4 w-4 rounded bg-white/10 border-white/20 text-amber-400 focus:ring-amber-400/60">
<label for="nda" class="">Please send an NDA</label>
</div>
<div class="flex items-center gap-2">
<button type="submit" class="inline-flex gap-2 ring-1 ring-amber-300 hover:bg-amber-300 transition text-sm font-medium text-neutral-900 bg-amber-400 rounded-xl pt-2.5 pr-4 pb-2.5 pl-4 shadow items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="send" class="lucide lucide-send w-4 h-4"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"></path><path d="m21.854 2.147-10.94 10.939"></path></svg>
Send request
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8 pt-12">
<div class="">
<h4 class="text-white/80 text-xs uppercase tracking-[0.2em]">Services</h4>
<ul class="mt-3 space-y-2 text-sm">
<li class=""><a href="#work" class="text-neutral-300 hover:text-white transition inline-flex items-center gap-2">E-commerce Development</a></li>
<li class=""><a href="#work" class="text-neutral-300 hover:text-white transition inline-flex items-center gap-2">Growth Engineering</a></li>
<li class=""><a href="#work" class="text-neutral-300 hover:text-white transition inline-flex items-center gap-2">Full-Stack Apps</a></li>
<li class=""><a href="#work" class="hover:text-white transition inline-flex items-center gap-2 text-neutral-300">Performance & SEO</a></li>
</ul>
</div>
<div>
<h4 class="text-white/80 text-xs uppercase tracking-[0.2em]">Stack</h4>
<ul class="mt-3 space-y-2 text-sm">
<li><span class="text-neutral-300">WordPress & PHP</span></li>
<li><span class="text-neutral-300">Astro & React</span></li>
<li><span class="text-neutral-300">Laravel</span></li>
<li><span class="text-neutral-300">Tailwind CSS</span></li>
</ul>
</div>
<div class="">
<h4 class="text-white/80 text-xs uppercase tracking-[0.2em]">Connect</h4>
<ul class="mt-3 space-y-2 text-sm">
<li><a href="#work" class="text-neutral-300 hover:text-white transition">Work</a></li>
<li><a href="#services" class="text-neutral-300 hover:text-white transition">Services</a></li>
<li><a href="#contact" class="text-neutral-300 hover:text-white transition">Contact</a></li>
<li class=""><a href="mailto:[email protected]" class="text-neutral-300 hover:text-white transition">Email</a></li>
</ul>
</div>
<div class="">
<h4 class="uppercase text-xs text-white/80 tracking-[0.2em]">Social</h4>
<div class="mt-4 flex items-center gap-3">
<a href="https://github.com/danielsnell" target="_blank" rel="noopener noreferrer" aria-label="GitHub" class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-white/5 ring-1 ring-white/10 text-white/80 hover:text-white hover:bg-white/10 transition">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="github" class="lucide lucide-github w-[16px] h-[16px]" data-icon-replaced="true" style="width: 16px; height: 16px; color: rgb(255, 255, 255);"><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><path d="M9 18c-4.51 2-5-2-7-2"></path></svg>
</a>
<a href="https://twitter.com/danielsnell_" target="_blank" rel="noopener noreferrer" aria-label="Twitter" class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-white/5 ring-1 ring-white/10 text-white/80 hover:text-white hover:bg-white/10 transition">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="twitter" class="lucide lucide-twitter w-[16px] h-[16px]" data-icon-replaced="true" style="width: 16px; height: 16px; color: rgb(255, 255, 255);"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path></svg>
</a>
<a href="https://linkedin.com/in/danielsnell" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-white/5 ring-1 ring-white/10 text-white/80 hover:text-white hover:bg-white/10 transition">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="linkedin" class="lucide lucide-linkedin w-[16px] h-[16px]" data-icon-replaced="true" style="width: 16px; height: 16px; color: rgb(255, 255, 255);"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect width="4" height="12" x="2" y="9"></rect><circle cx="4" cy="4" r="2"></circle></svg>
</a>
</div>
</div>
</div>
<div class="mt-10 pt-6 border-t border-white/10 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
<p class="text-white/60 text-sm">© <span id="year">2025</span> Daniel Snell / BROKE. Austin, Texas.</p>
<div class="flex items-center gap-4 text-white/60 text-sm">
<a href="#" class="hover:text-white transition">Privacy</a>
<span class="hidden sm:block text-white/20">•</span>
<a href="#" class="hover:text-white transition">Terms</a>
<span class="hidden sm:block text-white/20">•</span>
<a href="#" class="hover:text-white transition inline-flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-up" class="lucide lucide-arrow-up w-4 h-4"><path d="m5 12 7-7 7 7"></path><path d="M12 19V5"></path></svg> Back to top
</a>
</div>
</div>
</div>
<!-- Decorative glows -->
<div aria-hidden="true" class="pointer-events-none absolute -top-16 -right-10 h-72 w-72 rounded-full bg-amber-400/10 blur-3xl"></div>
<div aria-hidden="true" class="pointer-events-none absolute -bottom-20 -left-10 h-80 w-80 rounded-full bg-indigo-400/10 blur-3xl"></div>
</div>
</footer>
<!-- Toast -->
<div id="toast" role="status" aria-live="polite" class="hidden fixed bottom-6 left-1/2 -translate-x-1/2 z-50">
<div class="inline-flex items-center gap-3 rounded-xl bg-neutral-900 text-white px-4 py-3 ring-1 ring-white/10 shadow-xl">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle2" class="lucide lucide-check-circle2 w-5 h-5 text-emerald-400"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg>
<span class="text-sm">Thanks — we’ll be in touch shortly.</span>
</div>
</div>
<script>
// Icons
document.addEventListener('DOMContentLoaded', function () {
try { lucide.createIcons(); } catch (e) { /* noop */ }
});
// Timezone clock
function updateClock() {
const timeEl = document.getElementById('tz-time');
const offEl = document.getElementById('tz-offset');
const now = new Date();
if (timeEl) {
timeEl.textContent = now.toLocaleTimeString([], { hour12: false });
}
if (offEl) {
const parts = new Intl.DateTimeFormat([], { timeZoneName: 'short' }).formatToParts(now);
const abbr = parts.find(p => p.type === 'timeZoneName')?.value || 'Local';
offEl.textContent = `(${abbr})`;
}
}
updateClock();
setInterval(updateClock, 1000);
// Footer year
const y = document.getElementById('year');
if (y) y.textContent = new Date().getFullYear();
// Contact form (demo)
const form = document.getElementById('contact-form');
const toast = document.getElementById('toast');
function showToast() {
if (!toast) return;
toast.classList.remove('hidden');
setTimeout(() => toast.classList.add('hidden'), 2600);
}
if (form) {
form.addEventListener('submit', (e) => {
e.preventDefault();
showToast();
form.reset();
});
}
// Subscribe (demo)
const sub = document.getElementById('subscribe');
if (sub) {
sub.addEventListener('submit', (e) => {
e.preventDefault();
showToast();
sub.reset();
});
}
// Back to top
document.querySelectorAll('a[href="#"]').forEach(a => {
a.addEventListener('click', (e) => {
if (a.textContent?.toLowerCase().includes('back to top')) {
e.preventDefault();
window.scrollTo({ top: 0, behavior: 'smooth' });
}
});
});
</script>
</body></html>