<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Conner Burton — AI Agentic Engineer</title>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Geist+Mono:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></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="invert antialiased selection:bg-white selection:text-neutral-900 text-white/90 bg-neutral-950"
style="
font-family:
Inter,
ui-sans-serif,
system-ui,
-apple-system,
'Segoe UI',
Roboto,
Helvetica,
Arial;
"
>
<div class="aura-background-component top-0 w-full -z-10 absolute h-[815px]">
<div data-us-project="cqcLtDwfoHqqRPttBbQE" class="absolute top-0 left-0 -z-10 w-full h-full"></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>
<!-- Header -->
<header class="max-w-7xl mx-auto px-4 sm:px-6 pt-6">
<nav class="flex items-center justify-between border-b border-white/10 pb-4">
<!-- Brand -->
<a href="#" class="inline-flex items-center gap-2">
<img src="https://broke.dev/wp-content/themes/portfolio/public/umbral/logo.png" alt="Umbral AI" class="" />
</a>
<!-- Nav links -->
<div class="hidden md:flex items-center gap-6">
<a href="#work" class="text-sm text-white/70 hover:text-white tracking-tight">Work</a>
<a href="#stack" class="text-sm text-white/70 hover:text-white tracking-tight">Stack</a>
<a href="#evals" class="text-sm text-white/70 hover:text-white tracking-tight">Evals</a>
<a href="#about" class="text-sm text-white/70 hover:text-white tracking-tight">About</a>
<a href="#contact" class="text-sm text-white/70 hover:text-white tracking-tight">Contact</a>
</div>
<!-- Actions -->
<div class="flex items-center gap-2">
<a
href="#"
class="hidden sm:inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-sm font-medium tracking-tight text-white bg-white/10 hover:bg-white/15 border border-white/10 shadow-sm"
>
<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="download"
class="lucide lucide-download w-4 h-4"
>
<path d="M12 15V3"></path>
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<path d="m7 10 5 5 5-5"></path>
</svg>
<span>Resume</span>
</a>
<button
type="button"
data-menu-toggle=""
class="md:hidden inline-flex items-center justify-center rounded-full p-2 border border-white/10 bg-white/5 hover:bg-white/10"
>
<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="menu"
class="lucide lucide-menu w-4 h-4"
>
<path d="M4 12h16"></path>
<path d="M4 18h16"></path>
<path d="M4 6h16"></path>
</svg>
<span class="sr-only">Open menu</span>
</button>
</div>
</nav>
<!-- Mobile menu -->
<div
data-menu-panel=""
class="md:hidden hidden mt-3 rounded-2xl border border-white/10 bg-white/5 shadow-sm overflow-hidden"
>
<div class="px-4 py-3 grid gap-2">
<a href="#work" class="text-sm text-white/90 tracking-tight py-1.5">Work</a>
<a href="#stack" class="text-sm text-white/90 tracking-tight py-1.5">Stack</a>
<a href="#evals" class="text-sm text-white/90 tracking-tight py-1.5">Evals</a>
<a href="#about" class="text-sm text-white/90 tracking-tight py-1.5">About</a>
<a href="#contact" class="text-sm text-white/90 tracking-tight py-1.5">Contact</a>
</div>
<div class="border-t border-white/10 px-4 py-3">
<a
href="#"
class="inline-flex w-full items-center justify-center gap-2 rounded-full px-4 py-2 text-sm font-medium tracking-tight text-neutral-900 bg-white hover:bg-white/90 border border-white/10"
>
<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="download"
class="lucide lucide-download w-4 h-4"
>
<path d="M12 15V3"></path>
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<path d="m7 10 5 5 5-5"></path>
</svg>
<span>Download Resume</span>
</a>
</div>
</div>
</header>
<!-- Hero -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 mt-10 sm:mt-16">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
<div class="lg:col-span-7">
<h1 class="leading-none text-white tracking-tight">
<span class="block text-[12vw] sm:text-[10vw] md:text-[8vw] lg:text-[7vw] font-semibold">
<span
data-letter=""
style="display: inline-block; transform: translateY(0px); opacity: 1"
class="tracking-tighter"
>Conner</span
>
<span class="block"></span>
<span
data-letter=""
style="display: inline-block; transform: translateY(0px); opacity: 1"
class="tracking-tighter"
>Burton</span
>
</span>
</h1>
<p class="sm:mt-5 sm:text-3xl leading-relaxed max-w-2xl text-base text-white/70 tracking-tight mt-4">
AI Agentic Engineer — building practical AI agents for real businesses using N8N, Voiceflow, React, and
Laravel. No hype, just solutions that work.
</p>
<div class="mt-6 flex flex-col sm:flex-row gap-3">
<a
href="#work"
class="inline-flex items-center justify-center gap-2 rounded-full px-5 py-3 text-sm font-medium tracking-tight text-neutral-900 bg-white hover:bg-white/90 border border-white/10"
>
<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="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>View Work</span>
</a>
<a
href="mailto:[email protected]"
class="inline-flex items-center justify-center gap-2 hover:bg-white/15 text-sm font-medium text-white tracking-tight bg-white/10 border-white/10 border rounded-full pt-3 pr-5 pb-3 pl-5 shadow-sm backdrop-blur"
>
<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="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>
<span class="">[email protected]</span>
</a>
</div>
<div class="mt-8 grid grid-cols-1 sm:grid-cols-3 gap-4">
<div class="flex items-start gap-3 border-t border-white/10 pt-4">
<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="map-pin"
class="lucide lucide-map-pin w-[18px] h-[18px] text-white/50 mt-0.5"
>
<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>
<div>
<p class="text-sm font-medium tracking-tight">Based in United States</p>
<p class="text-xs text-white/60 mt-0.5">Remote AI agent projects</p>
</div>
</div>
<div class="flex items-start gap-3 border-t border-white/10 pt-4">
<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="cpu"
class="lucide lucide-cpu w-[18px] h-[18px] text-white/50 mt-0.5"
>
<path d="M12 20v2"></path>
<path d="M12 2v2"></path>
<path d="M17 20v2"></path>
<path d="M17 2v2"></path>
<path d="M2 12h2"></path>
<path d="M2 17h2"></path>
<path d="M2 7h2"></path>
<path d="M20 12h2"></path>
<path d="M20 17h2"></path>
<path d="M20 7h2"></path>
<path d="M7 20v2"></path>
<path d="M7 2v2"></path>
<rect x="4" y="4" width="16" height="16" rx="2"></rect>
<rect x="8" y="8" width="8" height="8" rx="1"></rect>
</svg>
<div>
<p class="text-sm font-medium tracking-tight">AI Agent Development</p>
<p class="text-xs text-white/60 mt-0.5">N8N, Voiceflow, React</p>
</div>
</div>
<div class="flex items-start gap-3 border-t border-white/10 pt-4">
<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="check"
class="lucide lucide-check w-[18px] h-[18px] text-white/50 mt-0.5"
>
<path d="M20 6 9 17l-5-5"></path>
</svg>
<div>
<p class="text-sm font-medium tracking-tight">Taking new projects</p>
<p class="text-xs text-white/60 mt-0.5">Practical AI solutions</p>
</div>
</div>
</div>
</div>
<div class="lg:col-span-5">
<div
class="relative aspect-[4/5] sm:aspect-[5/6] overflow-hidden shadow-[0_8px_30px_rgba(0,0,0,0.35)] bg-white/5 rounded-3xl border border-white/10"
>
<img
src="https://broke.dev/wp-content/themes/portfolio/public/umbral/conner-burton.jpeg"
alt="Conner Burton"
class="!invert grayscale absolute inset-0 w-full h-full object-cover"
style="filter: grayscale(100%) saturate(0.7) contrast(1.1)"
/>
<div class="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent"></div>
<div class="absolute bottom-4 left-4 right-4 grid grid-cols-3 gap-3">
<div class="invert rounded-xl bg-white/10 backdrop-blur-md border border-white/15 p-3 shadow-lg">
<div class="flex items-center gap-2 mb-1">
<div class="w-2 h-2 rounded-full bg-white/10"></div>
<div class="text-lg font-semibold tracking-tight text-white">82%</div>
</div>
<p class="text-[11px] text-white/70">pass@1 eval</p>
</div>
<div class="invert rounded-xl bg-white/10 backdrop-blur-md border border-white/15 p-3 shadow-lg">
<div class="flex items-center gap-2 mb-1">
<div class="w-2 h-2 rounded-full bg-white/10"></div>
<div class="text-lg font-semibold tracking-tight text-white">780ms</div>
</div>
<p class="text-[11px] text-white/70">p95 latency</p>
</div>
<div class="invert rounded-xl bg-white/10 backdrop-blur-md border border-white/15 p-3 shadow-lg">
<div class="flex items-center gap-2 mb-1">
<div class="w-2 h-2 rounded-full bg-white/50"></div>
<div class="text-lg font-semibold tracking-tight text-white">1.2k</div>
</div>
<p class="text-[11px] text-white/70">tests</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Work -->
<section
id="work"
class="max-w-7xl invert sm:px-6 sm:mt-20 border-white/10 border-t mt-16 mr-auto ml-auto pt-10 pr-4 pl-4"
>
<div class="flex items-center justify-between">
<h2 class="text-xl sm:text-2xl tracking-tight">Recent Work</h2>
<a href="#" class="inline-flex items-center gap-2 text-sm tracking-tight text-white/70 hover:text-white">
<span class="">View all</span>
<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="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="mt-6 columns-1 sm:columns-2 lg:columns-3 gap-5 space-y-5">
<!-- Item 1 - Tall -->
<article
class="group break-inside-avoid mb-5 overflow-hidden rounded-2xl border border-white/10 bg-white/[0.03]"
>
<div class="relative aspect-[16/9]">
<img
src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/f16eab49-7c29-4933-aca8-f41b2c337f6f_800w.jpg"
alt="RAG dashboard"
class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-[1.03]"
/>
<div class="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent"></div>
</div>
<div class="p-4 border-t border-white/10">
<div class="flex items-center gap-2 text-xs text-white/60">
<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="bot"
class="lucide lucide-bot w-4 h-4"
>
<path d="M12 8V4H8"></path>
<rect width="16" height="12" x="4" y="8" rx="2"></rect>
<path d="M2 14h2"></path>
<path d="M20 14h2"></path>
<path d="M15 13v2"></path>
<path d="M9 13v2"></path>
</svg>
<span class="">E-commerce Agent</span>
</div>
<h3 class="mt-2 text-base font-semibold tracking-tight">Order Automation System</h3>
<p class="text-sm text-white/70 mt-1">
N8N workflows handling customer inquiries, order updates, and fulfillment tracking.
</p>
</div>
</article>
<!-- Item 2 - Medium -->
<article
class="group break-inside-avoid mb-5 overflow-hidden rounded-2xl border border-white/10 bg-white/[0.03]"
>
<div class="relative aspect-[4/3]">
<img
src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/41f44e91-a4d8-4042-8253-0c6a79be833b_800w.jpg"
alt="Agentic workflow"
class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-[1.03]"
/>
<div class="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent"></div>
</div>
<div class="p-4 border-t border-white/10">
<div class="flex items-center gap-2 text-xs text-white/60">
<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="workflow"
class="lucide lucide-workflow w-4 h-4"
>
<rect width="8" height="8" x="3" y="3" rx="2"></rect>
<path d="M7 11v4a2 2 0 0 0 2 2h4"></path>
<rect width="8" height="8" x="13" y="13" rx="2"></rect>
</svg>
<span>Voice Agent</span>
</div>
<h3 class="mt-2 text-base font-semibold tracking-tight">Customer Service Bot</h3>
<p class="text-sm text-white/70 mt-1">
Voiceflow conversational agent handling appointment scheduling and common inquiries 24/7.
</p>
</div>
</article>
<!-- Item 3 - Short -->
<article
class="group break-inside-avoid mb-5 overflow-hidden rounded-2xl border border-white/10 bg-white/[0.03]"
>
<div class="relative aspect-[4/3]">
<img
src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/7fc6a2de-15db-4034-8a23-06b7a43997f6_800w.jpg"
alt="Code copilot"
class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-[1.03]"
style=""
/>
<div class="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent"></div>
</div>
<div class="p-4 border-t border-white/10">
<div class="flex items-center gap-2 text-xs text-white/60">
<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 w-4 h-4"
>
<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 class="">Internal Tool</span>
</div>
<h3 class="mt-2 text-base font-semibold tracking-tight">Data Processing Agent</h3>
<p class="text-sm text-white/70 mt-1">
Automated data extraction, validation, and reporting for operations teams.
</p>
</div>
</article>
<!-- Item 4 - Medium Tall -->
<article
class="group break-inside-avoid mb-5 overflow-hidden rounded-2xl border border-white/10 bg-white/[0.03]"
>
<div class="relative aspect-[16/9]">
<img
src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a2cd53da-e321-41c2-9467-565b1a1b0b52_800w.jpg"
alt="Data pipeline"
class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-[1.03]"
/>
<div class="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent"></div>
</div>
<div class="p-4 border-t border-white/10">
<div class="flex items-center gap-2 text-xs text-white/60">
<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="database"
class="lucide lucide-database w-4 h-4"
>
<ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
<path d="M3 5V19A9 3 0 0 0 21 19V5"></path>
<path d="M3 12A9 3 0 0 0 21 12"></path>
</svg>
<span>Service Business</span>
</div>
<h3 class="mt-2 text-base font-semibold tracking-tight">Lead Qualification Agent</h3>
<p class="text-sm text-white/70 mt-1">
N8N agent that qualifies leads, schedules demos, and routes to the right sales rep.
</p>
</div>
</article>
<!-- Item 5 - Square -->
<article
class="group break-inside-avoid mb-5 overflow-hidden rounded-2xl border border-white/10 bg-white/[0.03]"
>
<div class="relative aspect-[16/9]">
<img
src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/f826149d-7e8d-4b68-a4fd-cc16fb762142_800w.jpg"
alt="ML model"
class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-[1.03]"
/>
<div class="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent"></div>
</div>
<div class="p-4 border-t border-white/10">
<div class="flex items-center gap-2 text-xs text-white/60">
<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="brain"
class="lucide lucide-brain w-4 h-4"
>
<path d="M12 18V5"></path>
<path d="M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4"></path>
<path d="M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5"></path>
<path d="M17.997 5.125a4 4 0 0 1 2.526 5.77"></path>
<path d="M18 18a4 4 0 0 0 2-7.464"></path>
<path d="M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517"></path>
<path d="M6 18a4 4 0 0 1-2-7.464"></path>
<path d="M6.003 5.125a4 4 0 0 0-2.526 5.77"></path>
</svg>
<span class="">Machine Learning</span>
</div>
<h3 class="mt-2 text-base font-semibold tracking-tight">Custom Model Training</h3>
<p class="text-sm text-white/70 mt-1">
Fine‑tuned transformers for domain‑specific tasks with custom datasets.
</p>
</div>
</article>
<!-- Item 6 - Medium -->
<article
class="group break-inside-avoid mb-5 overflow-hidden rounded-2xl border border-white/10 bg-white/[0.03]"
>
<div class="relative aspect-[4/3]">
<img
src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/36460156-d7ce-43aa-89af-e013fb87ccfc_800w.jpg"
alt="API system"
class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-[1.03]"
style=""
/>
<div class="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent"></div>
</div>
<div class="p-4 border-t border-white/10">
<div class="flex items-center gap-2 text-xs text-white/60">
<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="server"
class="lucide lucide-server w-4 h-4"
>
<rect width="20" height="8" x="2" y="2" rx="2" ry="2"></rect>
<rect width="20" height="8" x="2" y="14" rx="2" ry="2"></rect>
<line x1="6" x2="6.01" y1="6" y2="6"></line>
<line x1="6" x2="6.01" y1="18" y2="18"></line>
</svg>
<span>API Architecture</span>
</div>
<h3 class="mt-2 text-base font-semibold tracking-tight">Scalable Backend</h3>
<p class="text-sm text-white/70 mt-1">
Microservices architecture with GraphQL, Redis caching, and auto‑scaling.
</p>
</div>
</article>
</div>
</section>
<!-- Logos / Social proof (compact, dark) -->
<section class="invert max-w-7xl sm:px-6 sm:mt-16 mt-12 mr-auto ml-auto pr-4 pl-4">
<div
class="relative overflow-hidden sm:p-8 text-white text-center bg-neutral-950 border-white/10 border rounded-3xl pt-6 pr-6 pb-6 pl-6"
>
<div class="absolute inset-0 pointer-events-none">
<div
class="absolute inset-0 bg-[radial-gradient(1200px_600px_at_20%_-20%,rgba(255,255,255,0.06),transparent_60%)]"
></div>
<div
class="absolute inset-0 bg-[radial-gradient(1200px_600px_at_80%_120%,rgba(255,255,255,0.05),transparent_60%)]"
></div>
<div
class="absolute inset-0 bg-[radial-gradient(#ffffff0d_1px,transparent_1px)] [background-size:20px_20px] opacity-[0.12]"
></div>
</div>
<div class="relative">
<h2 class="text-2xl sm:text-3xl tracking-tight">Trusted by product teams</h2>
<p class="text-white/70 mt-2">From seed‑stage startups to enterprise platform groups.</p>
<div class="grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-7 gap-4 mt-8 mb-8 items-center">
<div
class="flex gap-3 hover:text-white transition-colors duration-300 text-zinc-400 items-center justify-center"
>
<span class="text-lg font-normal tracking-tighter">TechFlow</span>
</div>
<div
class="flex gap-3 hover:text-white transition-colors duration-300 text-zinc-400 items-center justify-center"
>
<span class="text-lg font-bold tracking-tighter font-bricolage">Nexus Labs</span>
</div>
<div
class="flex gap-3 hover:text-white transition-colors duration-300 text-zinc-400 items-center justify-center"
>
<span class="text-lg font-semibold tracking-tighter font-merriweather">DataSync</span>
</div>
<div
class="flex gap-3 hover:text-white transition-colors duration-300 text-zinc-400 items-center justify-center"
>
<span class="text-lg font-normal tracking-tighter font-instrument-serif">VisionCorp</span>
</div>
<div
class="flex gap-3 hover:text-white transition-colors duration-300 text-zinc-400 items-center justify-center"
>
<span class="text-lg font-semibold tracking-tighter font-playfair">CloudBase</span>
</div>
<div
class="flex gap-3 hover:text-white transition-colors duration-300 text-zinc-400 items-center justify-center"
>
<span class="text-lg font-normal tracking-tighter">InnovateTech</span>
</div>
<div
class="flex gap-3 hover:text-white transition-colors duration-300 text-zinc-400 items-center justify-center"
>
<span class="text-lg font-bold tracking-tighter">FlowState</span>
</div>
</div>
</div>
</div>
</section>
<!-- Stack + Code + Timeline -->
<section id="stack" class="invert max-w-7xl sm:px-6 sm:mt-20 border-t border-white/10 mt-16 mx-auto pt-10 px-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
<!-- Skills -->
<div class="bg-white/5 border-white/10 border rounded-2xl pt-4 pr-4 pb-4 pl-4">
<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="sparkles"
class="lucide lucide-sparkles w-4 h-4 text-white/80"
>
<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>
<h3 class="text-xl font-semibold tracking-tight">Tech Stack</h3>
</div>
<div class="mt-3 space-y-4">
<div>
<h4 class="text-sm font-medium text-white/80 mb-2">Agent Platforms</h4>
<div class="flex flex-wrap gap-2">
<span class="px-2.5 py-1 text-xs rounded-md bg-white/10 border border-white/10">N8N</span>
<span class="px-2.5 py-1 text-xs rounded-md bg-white/10 border border-white/10">Voiceflow</span>
<span class="px-2.5 py-1 text-xs rounded-md bg-white/10 border border-white/10">Make.com</span>
<span class="px-2.5 py-1 text-xs rounded-md bg-white/10 border border-white/10">Zapier</span>
<span class="px-2.5 py-1 text-xs rounded-md bg-white/10 border border-white/10">Flowise</span>
</div>
</div>
<div class="">
<h4 class="text-sm font-medium text-white/80 mb-2">Development Stack</h4>
<div class="flex flex-wrap gap-2">
<span class="px-2.5 py-1 text-xs rounded-md bg-white/10 border border-white/10">React</span>
<span class="px-2.5 py-1 text-xs rounded-md bg-white/10 border border-white/10">Laravel</span>
<span class="px-2.5 py-1 text-xs rounded-md bg-white/10 border border-white/10">TypeScript</span>
<span class="px-2.5 py-1 text-xs rounded-md bg-white/10 border border-white/10">OpenAI API</span>
<span class="px-2.5 py-1 text-xs rounded-md bg-white/10 border border-white/10">Claude API</span>
<span class="px-2.5 py-1 text-xs rounded-md bg-white/10 border border-white/10">Webhooks</span>
<span class="px-2.5 py-1 text-xs rounded-md bg-white/10 border border-white/10">REST APIs</span>
</div>
</div>
</div>
<div class="mt-4 p-3 bg-black/30 rounded-lg border border-white/10">
<p class="text-xs text-white/70 leading-relaxed">
<span class="font-medium text-white/80">Focus areas:</span> Business process automation, conversational AI
agents, workflow orchestration, service integrations, and production-ready agent systems.
</p>
</div>
</div>
<!-- Code Snippet -->
<div class="rounded-2xl border border-white/10 bg-white/5 p-4">
<div class="flex items-center justify-between">
<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="terminal"
class="lucide lucide-terminal w-4 h-4 text-white/80"
>
<path d="M12 19h8"></path>
<path d="m4 17 6-6-6-6"></path>
</svg>
<h3 class="text-xl font-semibold tracking-tight">RAG Pipeline</h3>
</div>
<span class="text-[11px] text-white/60">~42 lines</span>
</div>
<pre
class="text-[12px] leading-relaxed overflow-auto text-white/90 bg-black/40 border-white/10 border rounded-xl mt-3 pt-3 pr-3 pb-3 pl-3"
style="font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas"
><span style="color: #ff7b72;">from</span> <span style="color: #79c0ff;">fastapi</span> <span style="color: #ff7b72;" class="">import</span> <span style="color: #79c0ff;">FastAPI</span>
<span style="color: #ff7b72;">from</span> <span style="color: #79c0ff;" class="">rag</span> <span style="color: #ff7b72;">import</span> <span style="color: #79c0ff;">embed</span>, <span style="color: #79c0ff;" class="">search</span>, <span style="color: #79c0ff;">rerank</span>, <span style="color: #79c0ff;">answer</span>
<span style="color: #ff7b72;">from</span> <span style="color: #79c0ff;">tracers</span> <span style="color: #ff7b72;" class="">import</span> <span style="color: #79c0ff;" class="">trace</span>
<span style="color: #ffa657;">app</span> = <span style="color: #79c0ff;">FastAPI</span>()
<span style="color: #a5a5a5;">@</span><span style="color: #ffa657;" class="">app</span>.<span style="color: #d2a8ff;" class="">post</span>(<span style="color: #a5d6ff;" class="">"/ask"</span>)
<span style="color: #a5a5a5;">@</span><span style="color: #d2a8ff;">trace</span>(<span style="color: #a5d6ff;">"ask"</span>)
<span style="color: #ff7b72;">def</span> <span style="color: #d2a8ff;">ask</span>(<span style="color: #ffa657;">q</span>: <span style="color: #ff7b72;">str</span>, <span style="color: #ffa657;">user_id</span>: <span style="color: #ff7b72;">str</span>):
<span style="color: #ffa657;" class="">q_vec</span> = <span style="color: #d2a8ff;" class="">embed</span>(<span style="color: #ffa657;" class="">q</span>)
<span style="color: #ffa657;">chunks</span> = <span style="color: #d2a8ff;" class="">search</span>(<span style="color: #ffa657;" class="">q_vec</span>, <span style="color: #ffa657;">k</span>=<span style="color: #a5d6ff;" class="">20</span>, <span style="color: #ffa657;" class="">filters</span>={<span style="color: #a5d6ff;" class="">"user"</span>: <span style="color: #ffa657;">user_id</span>})
<span style="color: #ffa657;" class="">ranked</span> = <span style="color: #d2a8ff;" class="">rerank</span>(<span style="color: #ffa657;" class="">q</span>, <span style="color: #ffa657;" class="">chunks</span>)[:<span style="color: #a5d6ff;">6</span>]
<span style="color: #ff7b72;">return</span> <span style="color: #d2a8ff;">answer</span>(<span style="color: #ffa657;">q</span>, <span style="color: #ffa657;">ranked</span>, <span style="color: #ffa657;" class="">tools</span>=[<span style="color: #a5d6ff;" class="">"browser"</span>, <span style="color: #a5d6ff;" class="">"code"</span>], <span style="color: #ffa657;">guardrails</span>=<span style="color: #ff7b72;">True</span>)</pre>
</div>
<!-- Timeline -->
<div class="bg-white/5 border-white/10 border rounded-2xl pt-4 pr-4 pb-4 pl-4">
<div class="flex items-center gap-2">
<svg data-lucide="timeline" class="w-4 h-4 text-white/80"></svg>
<h3 class="text-xl font-semibold tracking-tight">Timeline</h3>
</div>
<ol class="mt-3">
<li class="relative pl-6 pb-4 border-l border-white/10">
<span class="absolute left-[-5px] top-1.5 w-2 h-2 rounded-full bg-white"></span>
<p class="text-xs text-white/60">2025</p>
<p class="text-sm font-medium tracking-tight">Independent — AI Engineer</p>
<p class="text-xs text-white/60 mt-1">
Building production AI systems, RAG pipelines, and agentic workflows for startups and enterprise teams.
</p>
</li>
<li class="relative pl-6 pb-4 border-l border-white/10">
<span class="absolute left-[-5px] top-1.5 w-2 h-2 rounded-full bg-white/80"></span>
<p class="text-xs text-white/60">2022 — 2024</p>
<p class="text-sm font-medium tracking-tight">AI Agentic Engineer — Business Automation</p>
<p class="text-xs text-white/60 mt-1">
Led design for data visualization platform, shipped ML-powered insights dashboard used by 10k+ analysts.
</p>
</li>
<li class="relative pl-6 border-l border-white/10">
<span class="absolute left-[-5px] top-1.5 w-2 h-2 rounded-full bg-white/60"></span>
<p class="text-xs text-white/60">2017 — 2021</p>
<p class="text-sm font-medium tracking-tight">Frontend Engineer — Commerce</p>
<p class="text-xs text-white/60 mt-1">
Built responsive e-commerce platform with React/Node.js, optimized for mobile conversion and
performance.
</p>
</li>
</ol>
</div>
</div>
</section>
<!-- Evals -->
<section id="evals" class="invert max-w-7xl sm:px-6 sm:mt-20 border-t border-white/10 mt-16 mx-auto pt-10 px-4">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
<div class="lg:col-span-7">
<h2 class="text-2xl sm:text-3xl tracking-tight">Model Evals</h2>
<p class="text-white/70 mt-2">
Continuous evaluation of prompts, tools, and retrieval quality across production workloads.
</p>
<div class="mt-5 rounded-2xl border border-white/10 bg-white/5 p-4">
<div class="flex items-center justify-between">
<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="line-chart"
class="lucide lucide-line-chart w-4 h-4 text-white/80"
>
<path d="M3 3v16a2 2 0 0 0 2 2h16"></path>
<path d="m19 9-5 5-4-4-3 3"></path>
</svg>
<h3 class="text-base font-semibold tracking-tight">Pass@1 by model (weekly)</h3>
</div>
<div class="flex items-center gap-2">
<div class="w-2 h-2 rounded-full bg-green-400"></div>
<span class="text-xs text-white/60">Live data</span>
</div>
</div>
<div class="mt-3">
<div class="h-48">
<canvas
id="evalChart"
width="1342"
height="384"
style="display: block; box-sizing: border-box; height: 192px; width: 671px"
class=""
></canvas>
</div>
</div>
<div class="mt-4 grid grid-cols-3 gap-3 text-sm">
<div class="rounded-lg border border-white/10 bg-black/30 p-3">
<div class="text-white/60">Current best</div>
<div class="text-lg font-semibold tracking-tight">82%</div>
<div class="text-xs text-green-400 mt-1">+4% this week</div>
</div>
<div class="rounded-lg border border-white/10 bg-black/30 p-3">
<div class="text-white/60">Context win</div>
<div class="text-lg font-semibold tracking-tight">+10% RAG</div>
<div class="text-xs text-white/50 mt-1">vs baseline</div>
</div>
<div class="rounded-lg border border-white/10 bg-black/30 p-3">
<div class="text-white/60">Latency p95</div>
<div class="text-lg font-semibold tracking-tight">780ms</div>
<div class="text-xs text-yellow-400 mt-1">Within SLA</div>
</div>
</div>
</div>
<div class="mt-5 grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="rounded-xl border border-white/10 bg-white/5 p-4">
<div class="flex items-center gap-2 mb-3">
<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="target"
class="lucide lucide-target w-4 h-4 text-white/70"
>
<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>
<h4 class="text-sm font-medium tracking-tight">Eval Categories</h4>
</div>
<div class="space-y-2">
<div class="flex justify-between items-center">
<span class="text-xs text-white/70">Code generation</span>
<span class="text-xs font-medium">87%</span>
</div>
<div class="flex justify-between items-center">
<span class="text-xs text-white/70">Q&A retrieval</span>
<span class="text-xs font-medium">82%</span>
</div>
<div class="flex justify-between items-center">
<span class="text-xs text-white/70">Tool usage</span>
<span class="text-xs font-medium">76%</span>
</div>
<div class="flex justify-between items-center">
<span class="text-xs text-white/70">Reasoning</span>
<span class="text-xs font-medium">73%</span>
</div>
</div>
</div>
<div class="rounded-xl border border-white/10 bg-white/5 p-4">
<div class="flex items-center gap-2 mb-3">
<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="activity"
class="lucide lucide-activity w-4 h-4 text-white/70"
>
<path
d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"
></path>
</svg>
<h4 class="text-sm font-medium tracking-tight">Recent Tests</h4>
</div>
<div class="space-y-3">
<div class="flex items-center justify-between">
<div>
<div class="text-xs text-white/90">GPT-4o prompt optimization</div>
<div class="text-[10px] text-white/60">2 hours ago</div>
</div>
<div class="w-2 h-2 rounded-full bg-green-400"></div>
</div>
<div class="flex items-center justify-between">
<div>
<div class="text-xs text-white/90">Claude-3.5 tool calling</div>
<div class="text-[10px] text-white/60">6 hours ago</div>
</div>
<div class="w-2 h-2 rounded-full bg-blue-400"></div>
</div>
<div class="flex items-center justify-between">
<div>
<div class="text-xs text-white/90">RAG chunk size A/B test</div>
<div class="text-[10px] text-white/60">12 hours ago</div>
</div>
<div class="w-2 h-2 rounded-full bg-yellow-400"></div>
</div>
</div>
</div>
</div>
<div class="mt-5 rounded-xl border border-white/10 bg-white/5 p-4">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
data-lucide="chart-candlestick"
class="lucide lucide-chart-candlestick lucide-beaker w-[16px] h-[16px]"
data-icon-replaced="true"
style="width: 16px; height: 16px; color: rgb(255, 255, 255)"
>
<path d="M9 5v4"></path>
<rect width="4" height="6" x="7" y="9" rx="1"></rect>
<path d="M9 15v2"></path>
<path d="M17 3v2"></path>
<rect width="4" height="8" x="15" y="5" rx="1"></rect>
<path d="M17 13v3"></path>
<path d="M3 3v16a2 2 0 0 0 2 2h16"></path>
</svg>
<h4 class="text-sm font-medium tracking-tight">Evaluation Framework</h4>
</div>
<span class="text-xs text-white/60">1,247 total tests</span>
</div>
<p class="text-xs text-white/70 leading-relaxed">
Automated testing pipeline with custom metrics, human feedback loops, and A/B testing. Tracks accuracy,
hallucination rates, tool usage effectiveness, and user satisfaction scores across different model
versions and prompt templates.
</p>
</div>
</div>
<!-- About -->
<div id="about" class="lg:col-span-5">
<div class="rounded-3xl overflow-hidden border border-white/10 bg-white/[0.03]">
<div class="relative aspect-[4/3]">
<img
src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/e636d5f8-9fec-44fe-b4dd-4ccb5a90c3da_1600w.jpg"
alt="Workspace"
class="absolute inset-0 w-full h-full object-cover"
/>
<div class="absolute inset-0 bg-gradient-to-tr from-black/30 via-transparent to-transparent"></div>
</div>
<div class="p-5">
<h3 class="text-xl font-semibold tracking-tight">About</h3>
<p class="mt-2 text-sm leading-relaxed text-white/70">
I build practical AI agents that solve real business problems. No hype, no overselling—just
production-ready automation for services, e-commerce, and internal operations using N8N, Voiceflow,
React, and Laravel.
</p>
<div class="mt-4 grid grid-cols-3 gap-4">
<div>
<div class="text-2xl tracking-tight">8+</div>
<p class="text-[11px] text-white/60 mt-0.5">Years</p>
</div>
<div>
<div class="text-2xl tracking-tight">120+</div>
<p class="text-[11px] text-white/60 mt-0.5">Projects</p>
</div>
<div class="">
<div class="text-2xl tracking-tight">50+</div>
<p class="text-[11px] text-white/60 mt-0.5">Clients</p>
</div>
</div>
<div class="mt-5 p-4 bg-black/30 rounded-xl border border-white/10">
<h4 class="text-sm font-medium tracking-tight text-white mb-2">Teaching & sharing</h4>
<p class="text-sm text-white/70">
Running the Umbral AI YouTube channel with practical tutorials on building AI agents with N8N,
Voiceflow, and other proven tools.
</p>
</div>
<a
href="#contact"
class="mt-5 inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium tracking-tight text-neutral-900 bg-white hover:bg-white/90 border border-white/10"
>
<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="handshake"
class="lucide lucide-handshake w-4 h-4"
>
<path d="m11 17 2 2a1 1 0 1 0 3-3"></path>
<path
d="m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4"
></path>
<path d="m21 3 1 11h-2"></path>
<path d="M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3"></path>
<path d="M3 4h8"></path>
</svg>
<span class="">Let’s collaborate</span>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Contact / CTA -->
<section id="contact" class="invert max-w-7xl sm:px-6 sm:mt-24 border-t border-white/10 mt-16 mx-auto mb-16 pt-10 px-4">
<div class="relative overflow-hidden rounded-3xl border border-white/10 bg-neutral-950 text-white p-6 sm:p-8">
<div class="absolute inset-0 pointer-events-none">
<div
class="absolute inset-0 bg-[radial-gradient(1200px_600px_at_20%_-20%,rgba(255,255,255,0.07),transparent_60%)]"
></div>
<div
class="absolute inset-0 bg-[radial-gradient(1200px_600px_at_80%_120%,rgba(255,255,255,0.06),transparent_60%)]"
></div>
<div
class="absolute inset-0 bg-[radial-gradient(#ffffff0d_1px,transparent_1px)] [background-size:20px_20px] opacity-[0.15]"
></div>
</div>
<div class="relative">
<h2 class="text-[14vw] sm:text-[10vw] lg:text-[7vw] leading-[0.9] font-semibold tracking-tight">
Build with <span class="text-white/70">AI.</span>
</h2>
<div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8 md:divide-x md:divide-white/10">
<div class="">
<p class="text-sm text-white/70">Email</p>
<a
href="mailto:[email protected]"
class="mt-2 inline-flex items-center gap-3 text-xl sm:text-2xl font-medium tracking-tight"
>
<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="mail"
class="lucide lucide-mail w-5 h-5"
>
<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>
<span class="break-all">[email protected]</span>
</a>
</div>
<div class="md:pl-8">
<p class="text-sm text-white/70">Schedule</p>
<a
href="#"
class="inline-flex items-center gap-2 rounded-full px-5 py-3 text-sm font-medium tracking-tight text-neutral-900 bg-white hover:bg-white/90 border border-white/10 mt-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="calendar"
class="lucide lucide-calendar w-4 h-4"
>
<path d="M8 2v4"></path>
<path d="M16 2v4"></path>
<rect width="18" height="18" x="3" y="4" rx="2"></rect>
<path d="M3 10h18"></path>
</svg>
<span>Book a call</span>
</a>
</div>
<div class="md:pl-8">
<p class="text-sm text-white/70">Social</p>
<div class="flex flex-wrap gap-3 mt-2">
<a
href="https://www.youtube.com/@Umbral-AI"
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white text-neutral-900 border border-white/10 hover:bg-white/90"
>
<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="youtube"
class="lucide lucide-youtube w-4 h-4"
>
<path
d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17"
></path>
<path d="m10 15 5-3-5-3z"></path>
</svg>
</a>
<a
href="https://www.linkedin.com/in/connerburton/"
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white text-neutral-900 border border-white/10 hover:bg-white/90"
>
<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="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>
</a>
</div>
</div>
</div>
<p class="text-[11px] text-white/60 text-center mt-6">
© Conner Burton — Building AI agents that work<span id="year">2025</span>
</p>
</div>
</div>
</section>
<script>
// Mobile menu toggle
(function () {
const btn = document.querySelector('[data-menu-toggle]');
const panel = document.querySelector('[data-menu-panel]');
if (btn && panel) {
btn.addEventListener('click', () => {
panel.classList.toggle('hidden');
});
}
})();
// Letter reveal
(function () {
const nodes = document.querySelectorAll('[data-letter]');
nodes.forEach((n, i) => {
setTimeout(
() => {
n.style.transform = 'translateY(0)';
n.style.opacity = '1';
},
120 + i * 120
);
});
})();
// Year
document.getElementById('year').textContent = new Date().getFullYear();
// Icons
document.addEventListener('DOMContentLoaded', () => {
if (window.lucide && typeof lucide.createIcons === 'function') {
lucide.createIcons({ attrs: { 'stroke-width': 1.5 } });
}
});
// Chart.js — Evals
(function () {
const el = document.getElementById('evalChart');
if (!el) return;
const ctx = el.getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, 0, 180);
gradient.addColorStop(0, 'rgba(255,255,255,0.5)');
gradient.addColorStop(1, 'rgba(255,255,255,0.05)');
new Chart(ctx, {
type: 'line',
data: {
labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6'],
datasets: [
{
label: 'gpt‑4o‑mini',
data: [64, 68, 71, 74, 78, 82],
borderColor: '#ffffff',
backgroundColor: gradient,
fill: true,
tension: 0.35,
pointRadius: 2,
borderWidth: 1.5,
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
tooltip: {
mode: 'index',
intersect: false,
backgroundColor: 'rgba(0,0,0,0.8)',
borderColor: 'rgba(255,255,255,0.1)',
borderWidth: 1,
},
},
scales: {
x: {
ticks: { color: 'rgba(255,255,255,0.7)', font: { size: 11 } },
grid: { color: 'rgba(255,255,255,0.06)' },
},
y: {
suggestedMin: 50,
suggestedMax: 90,
ticks: { color: 'rgba(255,255,255,0.7)', font: { size: 11 }, callback: v => v + '%' },
grid: { color: 'rgba(255,255,255,0.06)' },
},
},
},
});
})();
</script>
</body>
</html>