<html lang="en"><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daniel Snell — Full-Stack Developer</title>
<link href="https://fonts.googleapis.com/css2?family=Inter: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>
<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="bg-black text-white antialiased selection:bg-white/10 overflow-x-hidden" 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 h-screen -z-10 absolute"><div class="spline-container absolute top-0 left-0 w-full h-full z-0"><iframe src="https://my.spline.design/glowingplanetparticles-HmCVKutonlFn3Oqqe6DI9nWi/" frameborder="0" width="100%" height="100%"></iframe></div></div>
<!-- Navigation -->
<header class="bg-black/80 backdrop-blur-xl w-full fixed top-0 z-50 border-b border-white/10">
<nav class="max-w-7xl mx-auto px-6">
<div class="flex h-16 items-center justify-between">
<!-- Left: Brand -->
<div class="flex items-center">
<a href="#" class="flex items-center">
<img src="https://broke.dev/wp-content/themes/portfolio/public/BROKE.svg" alt="BROKE" class="h-6" />
</a>
</div>
<!-- Center: Navigation Tabs -->
<div class="hidden md:flex gap-6 absolute left-1/2 -translate-x-1/2 text-sm items-center">
<a href="#work" class="nav-link group relative inline-flex items-center hover:text-white whitespace-nowrap text-sm py-2 px-1 text-white/80 transition-colors duration-200">
Work
<span class="pointer-events-none absolute left-0 -bottom-0.5 h-[2px] w-full origin-left scale-x-0 bg-white/70 transition-transform duration-300 ease-out group-hover:scale-x-100"></span>
</a>
<a href="#about" class="nav-link group relative inline-flex items-center hover:text-white whitespace-nowrap text-sm py-2 px-1 text-white/80 transition-colors duration-200">
About
<span class="pointer-events-none absolute left-0 -bottom-0.5 h-[2px] w-full origin-left scale-x-0 bg-white/70 transition-transform duration-300 ease-out group-hover:scale-x-100"></span>
</a>
<a href="#services" class="nav-link group relative inline-flex items-center hover:text-white whitespace-nowrap text-sm py-2 px-1 text-white/80 transition-colors duration-200">
Services
<span class="pointer-events-none absolute left-0 -bottom-0.5 h-[2px] w-full origin-left scale-x-0 bg-white/70 transition-transform duration-300 ease-out group-hover:scale-x-100"></span>
</a>
<a href="#contact" class="nav-link group relative inline-flex items-center hover:text-white whitespace-nowrap text-sm py-2 px-1 text-white/80 transition-colors duration-200">
Contact
<span class="pointer-events-none absolute left-0 -bottom-0.5 h-[2px] w-full origin-left scale-x-0 bg-white/70 transition-transform duration-300 ease-out group-hover:scale-x-100"></span>
</a>
</div>
<!-- Right: CTA -->
<div class="flex gap-3 items-center">
<a href="/resume.pdf" class="group relative inline-flex items-center hover:text-white whitespace-nowrap text-sm text-white/80 py-2 px-2">
<span class="relative overflow-hidden">
<span class="block transition-transform duration-300 ease-out group-hover:-translate-y-full">Resume</span>
<span class="block absolute inset-0 transition-transform duration-300 ease-out group-hover:translate-y-0 translate-y-full">Resume</span>
</span>
<span class="pointer-events-none absolute left-0 -bottom-0.5 h-[2px] w-full origin-left scale-x-0 bg-white/70 transition-transform duration-300 ease-out group-hover:scale-x-100"></span>
</a>
<button class="group relative inline-flex min-w-[120px] cursor-pointer transition-all duration-[1000ms] ease-[cubic-bezier(0.15,0.83,0.66,1)] hover:-translate-y-[3px] hover:text-white overflow-hidden font-semibold text-white/70 tracking-tight bg-white/5 border-white/10 border rounded-xl pt-[12px] pr-[20px] pb-[12px] pl-[20px] shadow-[0_2.8px_2.2px_rgba(0,0,0,0.3),_0_6.7px_5.3px_rgba(0,0,0,0.35),_0_12.5px_10px_rgba(0,0,0,0.4)] items-center justify-center">
<!-- Original text (slides down on hover) -->
<span class="relative z-10 font-medium transition-all duration-500 ease-out group-hover:transform group-hover:translate-y-8 group-hover:opacity-0 group-hover:blur-md rounded-xl font-geist">Let's Talk</span>
<!-- Clone text (slides in from top on hover) -->
<span class="absolute inset-0 z-10 flex items-center justify-center transition-all duration-300 ease-in-out transform -translate-y-8 group-hover:translate-y-0 group-hover:opacity-100 group-hover:blur-none font-medium font-geist opacity-0 rounded-xl blur-md">Let's Talk</span>
<!-- replaces the old ::before underline -->
<span aria-hidden="true" class="absolute bottom-0 left-1/2 h-[1px] w-[70%] -translate-x-1/2 transition-all duration-[1000ms] ease-[cubic-bezier(0.15,0.83,0.66,1)] group-hover:opacity-80 bg-gradient-to-r from-transparent via-white/40 to-transparent blur-[2px] rounded-xl"></span>
<!-- bottom light gradient on hover -->
<span aria-hidden="true" class="absolute bottom-0 left-0 right-0 h-[100%] group-hover:opacity-60 transition-all duration-[1000ms] ease-[cubic-bezier(0.15,0.83,0.66,1)] pointer-events-none bg-gradient-to-t from-white/10 via-white/5 to-transparent rounded-xl"></span>
</button>
<!-- Mobile menu toggle -->
<button id="mobile-menu-btn" class="md:hidden p-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="menu" class="lucide lucide-menu w-5 h-5" style="stroke-width: 1.5px;"><path d="M4 5h16"></path><path d="M4 12h16"></path><path d="M4 19h16"></path></svg>
</button>
</div>
</div>
</nav>
<!-- Mobile Navigation -->
<div id="mobile-menu" class="md:hidden fixed inset-x-0 top-16 bg-black/95 backdrop-blur-xl border-b border-white/10 transform -translate-y-full transition-transform duration-300 ease-out">
<nav class="px-6 py-6">
<div class="space-y-4">
<a href="#work" class="mobile-nav-link block text-lg font-medium text-white/80 hover:text-white transition-colors">Work</a>
<a href="#about" class="mobile-nav-link block text-lg font-medium text-white/80 hover:text-white transition-colors">About</a>
<a href="#services" class="mobile-nav-link block text-lg font-medium text-white/80 hover:text-white transition-colors">Services</a>
<a href="#contact" class="mobile-nav-link block text-lg font-medium text-white/80 hover:text-white transition-colors">Contact</a>
</div>
</nav>
</div>
</header>
<!-- Progress Indicator -->
<div class="fixed top-0 left-0 h-1 bg-gradient-to-r from-blue-500 to-purple-600 z-50 transition-all duration-150 ease-out" id="progress-bar" style="width: 84.7265%;"></div>
<!-- Side Navigation -->
<aside class="fixed left-6 top-1/2 -translate-y-1/2 z-40 hidden xl:block">
<nav class="space-y-6">
<div class="space-y-4">
<a href="#hero" class="side-nav-link group flex items-center gap-3 transition-all duration-300 hover:text-white" data-section="hero">
<div class="w-2 h-2 rounded-full transition-all duration-300 hover:bg-white/60 bg-white/30"></div>
<span class="text-xs text-white/60 opacity-0 group-hover:opacity-100 transition-all duration-300 whitespace-nowrap">Home</span>
</a>
<a href="#work" class="side-nav-link group flex items-center gap-3 transition-all duration-300 hover:text-white" data-section="work">
<div class="w-2 h-2 rounded-full transition-all duration-300 hover:bg-white/60 bg-white/30"></div>
<span class="text-xs text-white/60 opacity-0 group-hover:opacity-100 transition-all duration-300 whitespace-nowrap">Work</span>
</a>
<a href="#about" class="side-nav-link group flex items-center gap-3 transition-all duration-300 hover:text-white" data-section="about">
<div class="w-2 h-2 rounded-full transition-all duration-300 hover:bg-white/60 bg-white/30"></div>
<span class="text-xs text-white/60 opacity-0 group-hover:opacity-100 transition-all duration-300 whitespace-nowrap">About</span>
</a>
<a href="#services" class="side-nav-link group flex items-center gap-3 transition-all duration-300 hover:text-white" data-section="services">
<div class="w-2 h-2 rounded-full transition-all duration-300 hover:bg-white/60 bg-white/30"></div>
<span class="text-xs text-white/60 opacity-0 group-hover:opacity-100 transition-all duration-300 whitespace-nowrap">Services</span>
</a>
<a href="#experience" class="side-nav-link group flex items-center gap-3 transition-all duration-300 hover:text-white" data-section="experience">
<div class="w-2 h-2 rounded-full transition-all duration-300 hover:bg-white/60 bg-white/80"></div>
<span class="text-xs text-white/60 opacity-0 group-hover:opacity-100 transition-all duration-300 whitespace-nowrap">Experience</span>
</a>
<a href="#testimonials" class="side-nav-link group flex items-center gap-3 transition-all duration-300 hover:text-white" data-section="testimonials">
<div class="w-2 h-2 rounded-full transition-all duration-300 hover:bg-white/60 bg-white/60 bg-white/30"></div>
<span class="text-xs text-white/60 opacity-0 group-hover:opacity-100 transition-all duration-300 whitespace-nowrap">Testimonials</span>
</a>
<a href="#contact" class="side-nav-link group flex items-center gap-3 transition-all duration-300 hover:text-white" data-section="contact">
<div class="w-2 h-2 rounded-full transition-all duration-300 hover:bg-white/60 bg-white/30"></div>
<span class="text-xs text-white/60 opacity-0 group-hover:opacity-100 transition-all duration-300 whitespace-nowrap">Contact</span>
</a>
</div>
<div class="w-px h-12 bg-white/20 ml-0.5"></div>
<div class="space-y-3">
<a href="https://github.com/danielsnell" target="_blank" rel="noopener noreferrer" class="block text-white/40 hover:text-white/80 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="github" class="lucide lucide-github w-4 h-4" style="stroke-width: 1.5px;"><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://linkedin.com/in/danielsnell" target="_blank" rel="noopener noreferrer" class="block text-white/40 hover:text-white/80 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="linkedin" class="lucide lucide-linkedin w-4 h-4" style="stroke-width: 1.5px;"><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>
<a href="https://twitter.com/danielsnell_" target="_blank" rel="noopener noreferrer" class="block text-white/40 hover:text-white/80 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="twitter" class="lucide lucide-twitter w-4 h-4" style="stroke-width: 1.5px;"><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>
</div>
</nav>
</aside>
<!-- Hero Section -->
<main class="relative">
<section id="hero" class="min-h-screen flex pt-16 items-center">
<div class="max-w-7xl mx-auto px-6 w-full">
<div class="grid xl:grid-cols-12 gap-6 items-center">
<!-- Left: Quick info -->
<div class="hidden xl:block xl:col-span-3">
<div class="space-y-8">
<div class="">
<h3 class="text-xs font-medium text-white/60 uppercase tracking-wider mb-3">Stack</h3>
<ul class="text-sm text-white/70 space-y-2">
<li class="flex items-center gap-2">
<div class="w-1 h-1 bg-white/50 rounded-full"></div>
WordPress & Block Themes
</li>
<li class="flex items-center gap-2">
<div class="w-1 h-1 bg-white/50 rounded-full"></div>
Astro & React
</li>
<li class="flex items-center gap-2">
<div class="w-1 h-1 bg-white/50 rounded-full"></div>
Laravel & PHP
</li>
<li class="flex items-center gap-2">
<div class="w-1 h-1 bg-white/50 rounded-full"></div>
Tailwind CSS
</li>
<li class="flex items-center gap-2">
<div class="w-1 h-1 bg-white/50 rounded-full"></div>
Node.js & TypeScript
</li>
</ul>
</div>
<div>
<h3 class="text-xs font-medium text-white/60 uppercase tracking-wider mb-3">Currently</h3>
<p class="text-sm text-white/70">Available for freelance projects & full-time opportunities</p>
<div class="flex items-center gap-2 mt-2">
<div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
<span class="text-xs text-green-400">Open to work</span>
</div>
</div>
</div>
</div>
<!-- Main content -->
<div class="xl:col-span-9">
<div class="max-w-4xl">
<div class="mb-6">
<span class="inline-flex items-center gap-2 text-sm font-medium text-white/80 bg-white/10 ring-1 ring-white/10 rounded-full px-3 py-1">
<div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
Available for new projects
</span>
</div>
<h1 class="text-4xl sm:text-5xl lg:text-6xl xl:text-7xl leading-[0.9] font-medium tracking-tight mb-6">
Full-Stack Developer<br>
<span class="text-neutral-50/70">Building Fast, Clean Web Apps</span>
</h1>
<p class="text-lg leading-relaxed font-normal text-white/80 max-w-2xl mb-8">
Austin-based developer focused on WordPress, Astro, Laravel, and modern web tech.
I build fast sites with clean code—no fluff, no BS.
Just performance that matters and UX that works.
</p>
<!-- CTAs -->
<div class="flex flex-col sm:flex-row gap-4 mb-12">
<a href="#work" class="group relative inline-flex items-center justify-center hover:scale-95 transition-transform duration-300 ease-out text-sm font-medium text-black bg-white ring-black/10 ring-1 rounded-lg py-3 px-6">
<span class="relative overflow-hidden">
<span class="block transition-transform duration-300 ease-out group-hover:-translate-y-full">View My Work</span>
<span class="block absolute inset-0 transition-transform duration-300 ease-out group-hover:translate-y-0 translate-y-full">View My Work</span>
</span>
<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-down" class="lucide lucide-arrow-down w-4 h-4 ml-2" style="stroke-width: 1.5px;"><path d="M12 5v14"></path><path d="m19 12-7 7-7-7"></path></svg>
</a>
<button class="group relative inline-flex min-w-[120px] cursor-pointer transition-all duration-[1000ms] ease-[cubic-bezier(0.15,0.83,0.66,1)] hover:-translate-y-[3px] hover:text-white overflow-hidden font-semibold text-white/70 tracking-tight bg-white/5 border-white/10 border rounded-xl pt-[12px] pr-[20px] pb-[12px] pl-[20px] shadow-[0_2.8px_2.2px_rgba(0,0,0,0.3),_0_6.7px_5.3px_rgba(0,0,0,0.35),_0_12.5px_10px_rgba(0,0,0,0.4)] items-center justify-center">
<!-- Original text (slides down on hover) -->
<span class="relative z-10 font-medium transition-all duration-500 ease-out group-hover:transform group-hover:translate-y-8 group-hover:opacity-0 group-hover:blur-md rounded-xl font-geist">About Me</span>
<!-- Clone text (slides in from top on hover) -->
<span class="absolute inset-0 z-10 flex items-center justify-center transition-all duration-300 ease-in-out transform -translate-y-8 group-hover:translate-y-0 group-hover:opacity-100 group-hover:blur-none font-medium font-geist opacity-0 rounded-xl blur-md">About Me</span>
<!-- replaces the old ::before underline -->
<span aria-hidden="true" class="absolute bottom-0 left-1/2 h-[1px] w-[70%] -translate-x-1/2 transition-all duration-[1000ms] ease-[cubic-bezier(0.15,0.83,0.66,1)] group-hover:opacity-80 bg-gradient-to-r from-transparent via-white/40 to-transparent blur-[2px] rounded-xl"></span>
<!-- bottom light gradient on hover -->
<span aria-hidden="true" class="absolute bottom-0 left-0 right-0 h-[100%] group-hover:opacity-60 transition-all duration-[1000ms] ease-[cubic-bezier(0.15,0.83,0.66,1)] pointer-events-none bg-gradient-to-t from-white/10 via-white/5 to-transparent rounded-xl"></span>
</button>
<a href="mailto:[email protected]" class="group relative inline-flex items-center justify-center gap-2 hover:bg-white/5 text-sm font-medium text-white/80 hover:text-white transition-colors py-3 px-6">
<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" style="stroke-width: 1.5px;"><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>
<div class="relative overflow-hidden">
<span class="block transition-transform duration-300 ease-out group-hover:-translate-y-full">[email protected]</span>
<span class="block absolute inset-0 transition-transform duration-300 ease-out group-hover:translate-y-0 translate-y-full">[email protected]</span>
</div>
</a>
</div>
<!-- Stats -->
<div class="grid grid-cols-3 gap-8 max-w-md">
<div class="">
<p class="text-3xl font-semibold tracking-tight text-white mb-1">100+</p>
<p class="text-sm text-white/60">Projects Delivered</p>
</div>
<div class="">
<p class="text-3xl font-semibold tracking-tight text-white mb-1">15+</p>
<p class="text-sm text-white/60">Years Self-Taught</p>
</div>
<div class="">
<p class="text-3xl font-semibold tracking-tight text-white mb-1">7+</p>
<p class="text-sm text-white/60">Acquisitions</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Featured Work Section -->
<section id="work" class="relative border-white/10 border-t pt-24 pb-24" style="opacity: 1; transform: translateY(0px); transition: opacity 0.6s ease-out, transform 0.6s ease-out;">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="sm:text-4xl md:text-5xl leading-[1.05] text-3xl font-medium tracking-tight mb-4">
Featured Work
</h2>
<p class="text-lg text-white/70 max-w-2xl mx-auto">
Recent projects spanning e-commerce, SaaS products, and growth engineering systems
</p>
</div>
<div class="grid lg:grid-cols-2 gap-8 mb-12">
<!-- Project 1 -->
<article class="group overflow-hidden hover:bg-white/[0.03] transition-all duration-500 ring-white/10 ring-1 rounded-xl">
<div class="aspect-video relative overflow-hidden bg-gradient-to-br from-purple-600 via-blue-600 to-cyan-500">
<div class="absolute inset-0 bg-black/20"></div>
<div class="absolute inset-0 flex bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/db127e05-8c5a-4002-9a45-18c89436e905_1600w.jpg)] bg-cover items-center justify-center">
<button class="flex group-hover:scale-110 transition-transform text-black bg-white/20 w-16 h-16 border-0 ring-black/5 ring-0 rounded-full backdrop-blur-sm items-center justify-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="play" class="lucide lucide-play ml-1 w-[24px] h-[24px] text-neutral-50" style="stroke-width: 1.5px; width: 24px; height: 24px;" data-icon-replaced="true"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg>
</button>
</div>
<div class="absolute top-4 right-4">
<span class="text-xs bg-black/50 text-white px-2 py-1 rounded backdrop-blur-sm">Live Project</span>
</div>
</div>
<div class="p-6">
<div class="flex items-center justify-between mb-3">
<h3 class="text-xl font-medium text-white/90">Shopify Plus Store</h3>
<a href="#" class="text-white/60 hover:text-white 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="external-link" class="lucide lucide-external-link w-4 h-4" style="stroke-width: 1.5px;"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg>
</a>
</div>
<p class="text-sm text-white/70 mb-4 leading-relaxed">Custom Shopify Plus theme with headless checkout, advanced product filtering, and conversion-focused UX. Optimized for speed and mobile performance with sub-2s load times.</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">Shopify</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">Liquid</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">React</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">Tailwind</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">GraphQL</span>
</div>
<div class="flex items-center gap-4 text-xs text-white/60">
<div class="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="calendar" class="lucide lucide-calendar w-3 h-3" style="stroke-width: 1.5px;"><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>2024</span>
</div>
<div class="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="user" class="lucide lucide-user w-3 h-3" style="stroke-width: 1.5px;"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
<span>TechCorp Inc.</span>
</div>
</div>
</div>
</article>
<!-- Project 2 -->
<article class="group overflow-hidden hover:bg-white/[0.03] transition-all duration-500 ring-white/10 ring-1 rounded-xl">
<div class="aspect-video relative overflow-hidden bg-gradient-to-br from-orange-500 via-red-500 to-pink-600">
<div class="absolute inset-0 bg-black/20"></div>
<div class="absolute inset-0 flex bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/422957f1-8df2-4c14-b16b-6a5798e09b5b_1600w.jpg)] bg-cover items-center justify-center">
<button class="flex group-hover:scale-110 transition-transform text-black bg-white/20 w-16 h-16 border-0 ring-black/5 ring-0 rounded-full backdrop-blur-sm items-center justify-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="play" class="lucide lucide-play ml-1 w-[24px] h-[24px] text-neutral-50" style="stroke-width: 1.5px; width: 24px; height: 24px;" data-icon-replaced="true"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg>
</button>
</div>
<div class="absolute top-4 right-4">
<span class="text-xs bg-black/50 text-white px-2 py-1 rounded backdrop-blur-sm">Case Study</span>
</div>
</div>
<div class="p-6">
<div class="flex items-center justify-between mb-3">
<h3 class="text-xl font-medium text-white/90">FinTech Brand Identity</h3>
<a href="#" class="text-white/60 hover:text-white 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="external-link" class="lucide lucide-external-link w-4 h-4" style="stroke-width: 1.5px;"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg>
</a>
</div>
<p class="text-sm text-white/70 mb-4 leading-relaxed">Complete visual identity and digital presence for a fintech startup, including logo design, brand guidelines, and responsive web application with complex data visualization.</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">Figma</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">Next.js</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">Framer Motion</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">D3.js</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">Branding</span>
</div>
<div class="flex items-center gap-4 text-xs text-white/60">
<div class="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="calendar" class="lucide lucide-calendar w-3 h-3" style="stroke-width: 1.5px;"><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>2024</span>
</div>
<div class="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="user" class="lucide lucide-user w-3 h-3" style="stroke-width: 1.5px;"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
<span>PayFlow</span>
</div>
</div>
</div>
</article>
<!-- Project 3 -->
<article class="group overflow-hidden hover:bg-white/[0.03] transition-all duration-500 ring-white/10 ring-1 rounded-xl">
<div class="aspect-video relative overflow-hidden bg-gradient-to-br from-green-500 via-teal-500 to-blue-600">
<div class="absolute inset-0 bg-black/20"></div>
<div class="absolute inset-0 flex bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/9d2e8bbf-cec8-4dfd-a76d-6fc5e8c50d64_1600w.jpg)] bg-cover items-center justify-center">
<button class="flex group-hover:scale-110 transition-transform text-black bg-white/20 w-16 h-16 border-0 ring-black/5 ring-0 rounded-full backdrop-blur-sm items-center justify-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="play" class="lucide lucide-play ml-1 w-[24px] h-[24px] text-neutral-50" style="stroke-width: 1.5px; width: 24px; height: 24px;" data-icon-replaced="true"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg>
</button>
</div>
<div class="absolute top-4 right-4">
<span class="text-xs bg-black/50 text-white px-2 py-1 rounded backdrop-blur-sm">Award Winner</span>
</div>
</div>
<div class="p-6">
<div class="flex items-center justify-between mb-3">
<h3 class="text-xl font-medium text-white/90">Creative Portfolio Site</h3>
<a href="#" class="text-white/60 hover:text-white 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="external-link" class="lucide lucide-external-link w-4 h-4" style="stroke-width: 1.5px;"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg>
</a>
</div>
<p class="text-sm text-white/70 mb-4 leading-relaxed">Interactive portfolio website featuring WebGL animations, smooth scroll effects, and creative transitions. Optimized for performance while maintaining visual impact.</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">Three.js</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">WebGL</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">GSAP</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">Vanilla JS</span>
</div>
<div class="flex items-center gap-4 text-xs text-white/60">
<div class="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="calendar" class="lucide lucide-calendar w-3 h-3" style="stroke-width: 1.5px;"><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>2023</span>
</div>
<div class="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="user" class="lucide lucide-user w-3 h-3" style="stroke-width: 1.5px;"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
<span>Creative Agency</span>
</div>
</div>
</div>
</article>
<!-- Project 4 -->
<article class="group overflow-hidden hover:bg-white/[0.03] transition-all duration-500 ring-white/10 ring-1 rounded-xl">
<div class="aspect-video relative overflow-hidden bg-gradient-to-br from-yellow-500 via-orange-500 to-red-500">
<div class="absolute inset-0 bg-black/20"></div>
<div class="absolute inset-0 flex bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/7ee361ca-4978-4130-bab8-b605105c04b4_1600w.jpg)] bg-cover items-center justify-center">
<button class="flex group-hover:scale-110 transition-transform text-black bg-white/20 w-16 h-16 border-0 ring-black/5 ring-0 rounded-full backdrop-blur-sm items-center justify-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="play" class="lucide lucide-play ml-1 w-[24px] h-[24px] text-neutral-50" style="stroke-width: 1.5px; width: 24px; height: 24px;" data-icon-replaced="true"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg>
</button>
</div>
<div class="absolute top-4 right-4">
<span class="text-xs bg-black/50 text-white px-2 py-1 rounded backdrop-blur-sm">Open Source</span>
</div>
</div>
<div class="p-6">
<div class="flex items-center justify-between mb-3">
<h3 class="text-xl font-medium text-white/90">Design System & UI Kit</h3>
<a href="#" class="text-white/60 hover:text-white 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="external-link" class="lucide lucide-external-link w-4 h-4" style="stroke-width: 1.5px;"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg>
</a>
</div>
<p class="text-sm text-white/70 mb-4 leading-relaxed">Comprehensive design system with 50+ components, design tokens, and documentation. Built for consistency and scalability across multiple products.</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">Figma</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">Storybook</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">React</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">Design Tokens</span>
</div>
<div class="flex items-center gap-4 text-xs text-white/60">
<div class="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="calendar" class="lucide lucide-calendar w-3 h-3" style="stroke-width: 1.5px;"><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 class="">2023</span>
</div>
<div class="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="user" class="lucide lucide-user w-3 h-3" style="stroke-width: 1.5px;"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
<span>Open Source</span>
</div>
</div>
</div>
</article>
</div>
<div class="text-center">
<a href="#" class="group relative inline-flex items-center text-sm font-medium text-white/80 hover:text-white transition-colors">
<span class="relative overflow-hidden">
<span class="block transition-transform duration-300 ease-out group-hover:-translate-y-full">View All Projects</span>
<span class="block absolute inset-0 transition-transform duration-300 ease-out group-hover:translate-y-0 translate-y-full">View All Projects</span>
</span>
<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 group-hover:translate-x-1 transition-transform" style="stroke-width: 1.5px;"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
</a>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="relative border-white/10 border-t pt-24 pb-24" style="opacity: 1; transform: translateY(0px); transition: opacity 0.6s ease-out, transform 0.6s ease-out;">
<div class="bg-gradient-to-r from-[#ffffff]/10 to-[#ffffff]/0 max-w-5xl rounded-3xl mr-auto ml-auto pt-4 pr-4 pb-4 pl-4">
<div class="grid lg:grid-cols-12 gap-8 items-start">
<div class="lg:col-span-5 bg-gradient-to-b from-[#ffffff]/10 to-[#ffffff]/0 rounded-2xl pt-4 pr-4 pb-4 pl-4">
<div class="mb-6">
<div class="w-full h-64 bg-gradient-to-br from-blue-500 via-purple-600 to-pink-600 rounded-xl overflow-hidden ring-1 ring-white/10 mb-4">
<img src="https://broke.dev/wp-content/themes/portfolio/public/avatar.jpg" alt="Daniel Snell" class="w-full h-full object-cover grayscale">
</div>
<!-- New content added below the image -->
</div>
<h2 class="text-2xl sm:text-3xl md:text-4xl leading-[1.05] font-medium tracking-tight mb-4">
About Me
</h2>
<div class="space-y-3 text-sm leading-relaxed text-white/80">
<p class="">
Self-taught full-stack developer based in Austin, Texas. 15+ years of building web applications that actually perform—fast load times, clean code, and user experiences that don't get in the way.
</p>
<p class="">
No degree, no bootcamp—just hard-earned experience from shipping real products, solving real problems, and learning what actually works in production. Supplemented with programs from Udacity and Coursera when I needed structured learning.
</p>
<p class="">
My focus is on WordPress block themes, Astro for static sites, Laravel for backend systems, and Tailwind CSS for everything visual. I don't chase trends—I use tools that solve real problems efficiently.
</p>
<p class="">
No fluff, no BS. Just well-architected solutions that scale, perform, and make sense when you have to maintain them six months later.
</p>
</div>
</div>
<div class="lg:col-span-7">
<div class="grid md:grid-cols-2 gap-4">
<!-- Skills -->
<div class="bg-white/[0.03] ring-1 ring-white/10 rounded-lg p-4">
<h3 class="text-base font-medium mb-3 flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="code-2" class="lucide lucide-code-2 w-4 h-4 text-white/70" style="stroke-width: 1.5px;"><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>
Technical Skills
</h3>
<div class="space-y-2">
<div class="flex justify-between items-center">
<span class="text-xs text-white/80">WordPress & PHP</span>
<span class="text-xs text-white/60">Expert</span>
</div>
<div class="flex justify-between items-center">
<span class="text-xs text-white/80">Astro & React</span>
<span class="text-xs text-white/60">Expert</span>
</div>
<div class="flex justify-between items-center">
<span class="text-xs text-white/80">Laravel</span>
<span class="text-xs text-white/60">Advanced</span>
</div>
<div class="flex justify-between items-center">
<span class="text-xs text-white/80">Tailwind CSS</span>
<span class="text-xs text-white/60">Advanced</span>
</div>
<div class="flex justify-between items-center">
<span class="text-xs text-white/80">TypeScript & Node.js</span>
<span class="text-xs text-white/60">Advanced</span>
</div>
</div>
</div>
<!-- Tools -->
<div class="bg-white/[0.03] ring-1 ring-white/10 rounded-lg p-4">
<h3 class="text-base font-medium mb-3 flex items-center gap-2">
<i data-lucide="tool" class="w-4 h-4 text-white/70" style="stroke-width: 1.5px;"></i>
Tools & Software
</h3>
<div class="grid grid-cols-2 gap-1">
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded text-center">VS Code</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded text-center">Git</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded text-center">Docker</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded text-center">Vite</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded text-center">Composer</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded text-center">npm</span>
</div>
</div>
<!-- Education -->
<div class="bg-white/[0.03] ring-1 ring-white/10 rounded-lg p-4">
<h3 class="text-base font-medium mb-3 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="graduation-cap" class="lucide lucide-graduation-cap w-4 h-4 text-white/70" style="stroke-width: 1.5px;"><path d="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z"></path><path d="M22 10v6"></path><path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5"></path></svg>
Education
</h3>
<div class="space-y-2">
<div class="">
<p class="text-xs font-medium text-white/90">School of Life</p>
<p class="text-xs text-white/60">University of Hard Knocks • 1988</p>
</div>
</div>
</div>
<!-- Interests -->
<div class="bg-white/[0.03] ring-1 ring-white/10 rounded-lg p-4">
<h3 class="text-base font-medium mb-3 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="heart" class="lucide lucide-heart w-4 h-4 text-white/70" style="stroke-width: 1.5px;"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"></path></svg>
Interests
</h3>
<div class="flex flex-wrap gap-1">
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">Photography</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">Hiking</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">Music</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">Gaming</span>
</div>
</div>
</div><div class="grid md:grid-cols-2 gap-4 py-3">
<!-- Expertise -->
<div class="bg-white/[0.03] ring-1 ring-white/10 rounded-lg p-4">
<h3 class="text-base font-medium mb-3 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="star" class="lucide lucide-star w-4 h-4 text-white/70" style="stroke-width: 1.5px;"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg>
Core Expertise
</h3>
<div class="space-y-2">
<div class="flex justify-between items-center">
<span class="text-xs text-white/80">WordPress & PHP</span>
<span class="text-xs text-white/60">Expert</span>
</div>
<div class="flex justify-between items-center">
<span class="text-xs text-white/80">Shopify & Liquid</span>
<span class="text-xs text-white/60">Expert</span>
</div>
<div class="flex justify-between items-center">
<span class="text-xs text-white/80">JavaScript & Node.js</span>
<span class="text-xs text-white/60">Expert</span>
</div>
<div class="flex justify-between items-center">
<span class="text-xs text-white/80">Growth Engineering</span>
<span class="text-xs text-white/60">Expert</span>
</div>
<div class="flex justify-between items-center">
<span class="text-xs text-white/80">Technical SEO</span>
<span class="text-xs text-white/60">Advanced</span>
</div>
</div>
</div>
<!-- Technology Stack -->
<div class="bg-white/[0.03] ring-1 ring-white/10 rounded-lg p-4">
<h3 class="text-base font-medium mb-3 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="code-2" class="lucide lucide-code-2 w-4 h-4 text-white/70" style="stroke-width: 1.5px;"><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>
Tech Stack
</h3>
<div class="grid grid-cols-2 gap-1">
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded text-center">WordPress</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded text-center">Shopify</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded text-center">React</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded text-center">Node.js</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded text-center">Tailwind</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded text-center">MySQL</span>
</div>
</div>
<!-- Achievements -->
<div class="bg-white/[0.03] ring-1 ring-white/10 rounded-lg p-4">
<h3 class="text-base font-medium mb-3 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="trophy" class="lucide lucide-trophy w-4 h-4 text-white/70" style="stroke-width: 1.5px;"><path d="M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978"></path><path d="M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978"></path><path d="M18 9h1.5a1 1 0 0 0 0-5H18"></path><path d="M4 22h16"></path><path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z"></path><path d="M6 9H4.5a1 1 0 0 1 0-5H6"></path></svg>
Recognition
</h3>
<div class="flex flex-wrap gap-1">
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">Awwwards Winner</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">CSS Awards</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">Dev Speaker</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">Tech Mentor</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="relative py-24 border-t border-white/10" style="opacity: 1; transform: translateY(0px); transition: opacity 0.6s ease-out, transform 0.6s ease-out;">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl sm:text-4xl md:text-5xl leading-[1.05] font-medium tracking-tight mb-4">
What I Do
</h2>
<p class="text-lg text-white/70 max-w-2xl mx-auto">
Revenue-focused engineering and technical marketing that actually moves the needle
</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<article class="bg-white/[0.03] ring-1 ring-white/10 rounded-xl p-6 hover:bg-white/[0.05] transition-colors">
<div class="flex bg-neutral-50/5 w-12 h-12 border-neutral-50/20 border rounded-lg mb-4 items-center justify-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="code-2" class="lucide lucide-code-2 w-6 h-6 text-white" style="stroke-width: 1.5px;"><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>
</div>
<h3 class="text-lg font-medium mb-3">E-commerce Development</h3>
<p class="text-sm text-white/70 mb-4 leading-relaxed">Shopify Plus stores and WooCommerce platforms built for conversion. Custom themes, headless architecture, and performance optimization that drives revenue.</p>
<div class="flex flex-wrap gap-2">
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">Shopify</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">WordPress</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">Laravel</span>
</div>
</article>
<article class="bg-white/[0.03] ring-1 ring-white/10 rounded-xl p-6 hover:bg-white/[0.05] transition-colors">
<div class="flex bg-neutral-50/5 w-12 h-12 border-neutral-50/20 border rounded-lg mb-4 items-center justify-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="palette" class="lucide lucide-palette w-6 h-6 text-white" style="stroke-width: 1.5px;"><path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"></path><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle></svg>
</div>
<h3 class="text-lg font-medium mb-3">Growth Engineering</h3>
<p class="text-sm text-white/70 mb-4 leading-relaxed">Technical marketing systems that scale. Event-based tracking, ETL pipelines, data warehousing, and demand generation infrastructure for predictable revenue growth.</p>
<div class="flex flex-wrap gap-2">
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">Analytics</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">ETL</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">Automation</span>
</div>
</article>
<article class="bg-white/[0.03] ring-1 ring-white/10 rounded-xl p-6 hover:bg-white/[0.05] transition-colors">
<div class="flex bg-neutral-50/5 w-12 h-12 border-neutral-50/20 border rounded-lg mb-4 items-center justify-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="zap" class="lucide lucide-zap w-6 h-6 text-white" style="stroke-width: 1.5px;"><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>
</div>
<h3 class="text-lg font-medium mb-3">Full-Stack Development</h3>
<p class="text-sm text-white/70 mb-4 leading-relaxed">Modern web apps with Astro, React, and Laravel. WordPress block themes with Timber/Twig. Fast sites with clean code that's actually maintainable.</p>
<div class="flex flex-wrap gap-2">
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">Astro</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">React</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">Laravel</span>
</div>
</article>
<article class="bg-white/[0.03] ring-1 ring-white/10 rounded-xl p-6 hover:bg-white/[0.05] transition-colors">
<div class="flex bg-neutral-50/5 w-12 h-12 border-neutral-50/20 border rounded-lg mb-4 items-center justify-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="smartphone" class="lucide lucide-smartphone w-6 h-6 text-white" style="stroke-width: 1.5px;"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"></rect><path d="M12 18h.01"></path></svg>
</div>
<h3 class="text-lg font-medium mb-3">Technical SEO</h3>
<p class="text-sm text-white/70 mb-4 leading-relaxed">Performance optimization, site speed improvements, and technical SEO that drives organic traffic. Core Web Vitals, structured data, and indexability.</p>
<div class="flex flex-wrap gap-2">
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">Core Web Vitals</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">Schema</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">GTM</span>
</div>
</article>
<article class="bg-white/[0.03] ring-1 ring-white/10 rounded-xl p-6 hover:bg-white/[0.05] transition-colors">
<div class="flex bg-neutral-50/5 w-12 h-12 border-neutral-50/20 border rounded-lg mb-4 items-center justify-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="layers" class="lucide lucide-layers w-6 h-6 text-white" style="stroke-width: 1.5px;"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"></path></svg>
</div>
<h3 class="text-lg font-medium mb-3">SaaS Development</h3>
<p class="text-sm text-white/70 mb-4 leading-relaxed">Zero-to-one product development for SaaS companies. MVP development, feature validation, and scaling infrastructure for subscription-based businesses.</p>
<div class="flex flex-wrap gap-2">
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">Product Dev</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">MVPs</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">Scaling</span>
</div>
</article>
<article class="bg-white/[0.03] ring-1 ring-white/10 rounded-xl p-6 hover:bg-white/[0.05] transition-colors">
<div class="flex bg-neutral-50/5 w-12 h-12 border-neutral-50/20 border rounded-lg mb-4 items-center justify-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="users" class="lucide lucide-users w-6 h-6 text-white" style="stroke-width: 1.5px;"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><path d="M16 3.128a4 4 0 0 1 0 7.744"></path><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><circle cx="9" cy="7" r="4"></circle></svg>
</div>
<h3 class="text-lg font-medium mb-3">Growth Strategy</h3>
<p class="text-sm text-white/70 mb-4 leading-relaxed">Demand generation, funnel optimization, and conversion rate improvement. Building scalable, repeatable revenue engines for e-commerce, SaaS, and B2B companies.</p>
<div class="flex flex-wrap gap-2">
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">Demand Gen</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">CRO</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">Funnels</span>
</div>
</article>
</div>
</div>
</section>
<!-- Experience Section -->
<section id="experience" class="relative py-24 border-t border-white/10" style="opacity: 1; transform: translateY(0px); transition: opacity 0.6s ease-out, transform 0.6s ease-out;">
<div class="max-w-4xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl sm:text-4xl md:text-5xl leading-[1.05] font-medium tracking-tight mb-4">
Experience
</h2>
<p class="text-lg text-white/70">
15+ years of self-taught expertise building revenue-focused web applications
</p>
</div>
<div class="space-y-8">
<!-- Experience 1 -->
<div class="relative pl-8 before:content-[''] before:absolute before:left-0 before:top-0 before:w-px before:h-full before:bg-white/20">
<div class="absolute -left-1 top-0 w-2 h-2 bg-white rounded-full"></div>
<div class="bg-white/[0.03] ring-1 ring-white/10 rounded-xl p-6">
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-3">
<h3 class="text-lg font-medium text-white/90">Developer Relations & Growth Engineering</h3>
<span class="text-sm text-white/60">2021 - 2023</span>
</div>
<p class="text-sm text-white/70 font-medium mb-2">Edgio • Remote</p>
<p class="text-sm text-white/70 leading-relaxed mb-4">
Built technical content, growth infrastructure, and developer tools for edge computing platform. Designed event-based tracking systems and demand generation pipelines that scaled developer acquisition across multiple channels.
</p>
<div class="flex flex-wrap gap-2">
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">JavaScript</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">Node.js</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">ETL</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">Growth</span>
</div>
</div>
</div>
<!-- Experience 2 -->
<div class="relative pl-8 before:content-[''] before:absolute before:left-0 before:top-0 before:w-px before:h-full before:bg-white/20">
<div class="absolute -left-1 top-0 w-2 h-2 bg-white/60 rounded-full"></div>
<div class="bg-white/[0.03] ring-1 ring-white/10 rounded-xl p-6">
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-3">
<h3 class="text-lg font-medium text-white/90">Growth Engineer</h3>
<span class="text-sm text-white/60">2016 - 2018</span>
</div>
<p class="text-sm text-white/70 font-medium mb-2">Shipt & DoorDash • Remote</p>
<p class="text-sm text-white/70 leading-relaxed mb-4">
Engineered growth systems for on-demand delivery platforms. Built data pipelines, tracking infrastructure, and optimization tools that drove customer acquisition and retention at scale during hypergrowth phases.
</p>
<div class="flex flex-wrap gap-2">
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">Python</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">SQL</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">Analytics</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">A/B Testing</span>
</div>
</div>
</div>
<!-- Experience 3 -->
<div class="relative pl-8 before:content-[''] before:absolute before:left-0 before:top-0 before:w-px before:h-full before:bg-white/20">
<div class="absolute -left-1 top-0 w-2 h-2 bg-white/60 rounded-full"></div>
<div class="bg-white/[0.03] ring-1 ring-white/10 rounded-xl p-6">
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-3">
<h3 class="text-lg font-medium text-white/90">Head of Demand Generation</h3>
<span class="text-sm text-white/60">2012 - 2014</span>
</div>
<p class="text-sm text-white/70 font-medium mb-2">Shopify • Ottawa, Canada</p>
<p class="text-sm text-white/70 leading-relaxed mb-4">
Led demand generation during Shopify's early growth phase. Built acquisition systems, optimized conversion funnels, and scaled paid channels. Established technical marketing infrastructure that supported millions in revenue growth.
</p>
<div class="flex flex-wrap gap-2">
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">Marketing</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">Analytics</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">SEO</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">Conversion</span>
</div>
</div>
</div>
<!-- Experience 4 -->
<div class="relative pl-8">
<div class="absolute -left-1 top-0 w-2 h-2 bg-white/40 rounded-full"></div>
<div class="bg-white/[0.03] ring-1 ring-white/10 rounded-xl p-6">
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-3">
<h3 class="text-lg font-medium text-white/90">WordPress Developer</h3>
<span class="text-sm text-white/60">2008 - 2011</span>
</div>
<p class="text-sm text-white/70 font-medium mb-2">IDWEB STUDIOS • Idaho Falls, ID</p>
<p class="text-sm text-white/70 leading-relaxed mb-4">
Built custom WordPress themes and plugins for clients. Developed e-commerce solutions, membership sites, and content management systems. Foundation work that established expertise in WordPress ecosystem and PHP development.
</p>
<div class="flex flex-wrap gap-2">
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">WordPress</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">PHP</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">MySQL</span>
<span class="text-xs bg-white/10 ring-1 ring-white/10 text-white/80 px-2 py-1 rounded">jQuery</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section id="testimonials" class="relative border-white/10 border-t pt-24 pb-24" style="opacity: 1; transform: translateY(0px); transition: opacity 0.6s ease-out, transform 0.6s ease-out;">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl sm:text-4xl md:text-5xl leading-[1.05] font-medium tracking-tight mb-4">
Client Results
</h2>
<p class="text-lg text-white/70">
Real outcomes from businesses that chose performance over promises
</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Testimonial 1 -->
<div class="bg-white/[0.03] ring-1 ring-white/10 rounded-xl p-6">
<div class="flex items-center gap-1 mb-4">
<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="star" class="lucide lucide-star w-4 h-4 text-yellow-400 fill-current" style="stroke-width: 1.5px;"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></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="star" class="lucide lucide-star w-4 h-4 text-yellow-400 fill-current" style="stroke-width: 1.5px;"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></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="star" class="lucide lucide-star w-4 h-4 text-yellow-400 fill-current" style="stroke-width: 1.5px;"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></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="star" class="lucide lucide-star w-4 h-4 text-yellow-400 fill-current" style="stroke-width: 1.5px;"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></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="star" class="lucide lucide-star w-4 h-4 text-yellow-400 fill-current" style="stroke-width: 1.5px;"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg>
</div>
<p class="text-sm text-white/80 mb-4 leading-relaxed">"Daniel rebuilt our Shopify Plus store with a focus on speed and conversions. Load time dropped to under 2 seconds, revenue increased 34% in the first quarter. No fluff—just results that moved the business forward."</p>
<div class="flex items-center gap-3">
<div class="flex w-10 h-10 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a31dbf91-204f-4185-a78a-a8bd2e46454a_320w.jpg)] bg-cover rounded-full items-center justify-center">
</div>
<div class="">
<p class="text-sm font-medium text-white/90">Jennifer Park</p>
<p class="text-xs text-white/60">Founder, E-commerce Brand</p>
</div>
</div>
</div>
<!-- Testimonial 2 -->
<div class="bg-white/[0.03] ring-1 ring-white/10 rounded-xl p-6">
<div class="flex items-center gap-1 mb-4">
<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="star" class="lucide lucide-star w-4 h-4 text-yellow-400 fill-current" style="stroke-width: 1.5px;"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></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="star" class="lucide lucide-star w-4 h-4 text-yellow-400 fill-current" style="stroke-width: 1.5px;"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></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="star" class="lucide lucide-star w-4 h-4 text-yellow-400 fill-current" style="stroke-width: 1.5px;"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></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="star" class="lucide lucide-star w-4 h-4 text-yellow-400 fill-current" style="stroke-width: 1.5px;"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></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="star" class="lucide lucide-star w-4 h-4 text-yellow-400 fill-current" style="stroke-width: 1.5px;"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg>
</div>
<p class="text-sm text-white/80 mb-4 leading-relaxed">"Needed a growth tracking system that could handle complex attribution across multiple channels. Daniel built ETL pipelines and dashboards that gave us clear visibility into what actually drove revenue. Scaled it from prototype to handling 50k+ events per day."</p>
<div class="flex items-center gap-3">
<div class="flex w-10 h-10 bg-cover rounded-full items-center justify-center bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/5533c972-d56c-4275-9cf7-d2442845b2cb_320w.jpg)] bg-center">
</div>
<div class="">
<p class="text-sm font-medium text-white/90">Marcus Thompson</p>
<p class="text-xs text-white/60">VP Growth, SaaS Platform</p>
</div>
</div>
</div>
<!-- Testimonial 3 -->
<div class="bg-white/[0.03] ring-1 ring-white/10 rounded-xl p-6">
<div class="flex items-center gap-1 mb-4">
<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="star" class="lucide lucide-star w-4 h-4 text-yellow-400 fill-current" style="stroke-width: 1.5px;"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></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="star" class="lucide lucide-star w-4 h-4 text-yellow-400 fill-current" style="stroke-width: 1.5px;"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></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="star" class="lucide lucide-star w-4 h-4 text-yellow-400 fill-current" style="stroke-width: 1.5px;"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></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="star" class="lucide lucide-star w-4 h-4 text-yellow-400 fill-current" style="stroke-width: 1.5px;"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></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="star" class="lucide lucide-star w-4 h-4 text-yellow-400 fill-current" style="stroke-width: 1.5px;"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg>
</div>
<p class="text-sm text-white/80 mb-4 leading-relaxed">"Daniel rebuilt our WordPress site with a custom block theme and headless architecture. Lighthouse score went from 62 to 98, bounce rate dropped 40%. He focused on what mattered—performance and conversions—instead of over-engineering solutions we didn't need."</p>
<div class="flex items-center gap-3">
<div class="flex w-10 h-10 bg-cover rounded-full items-center justify-center bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/fc856f12-4738-4299-91f7-4f7be1502a47_320w.jpg)] bg-center">
</div>
<div class="">
<p class="text-sm font-medium text-white/90">Rachel Kim</p>
<p class="text-xs text-white/60">CEO, Digital Agency</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="relative py-24 border-t border-white/10" style="opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out;">
<div class="max-w-4xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl sm:text-4xl md:text-5xl leading-[1.05] font-medium tracking-tight mb-4">
Let's Build Something
</h2>
<p class="text-lg text-white/70 max-w-2xl mx-auto">
Need a developer who understands revenue, performance, and clean code? Let's talk about your project and what actually needs to happen.
</p>
</div>
<div class="grid md:grid-cols-2 gap-12">
<!-- Contact Info -->
<div class="space-y-8">
<div>
<h3 class="text-lg font-medium mb-6">Get In Touch</h3>
<div class="space-y-4">
<a href="mailto:[email protected]" class="group flex items-center gap-3 text-white/80 hover:text-white transition-colors">
<div class="flex w-10 h-10 bg-white/5 ring-1 ring-white/10 rounded-lg items-center justify-center group-hover:bg-white/10 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="mail" class="lucide lucide-mail w-4 h-4" style="stroke-width: 1.5px;"><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>
</div>
<div>
<p class="text-sm font-medium">Email</p>
<p class="text-sm text-white/60">[email protected]</p>
</div>
</a>
<a href="tel:+1234567890" class="group flex items-center gap-3 text-white/80 hover:text-white transition-colors">
<div class="flex w-10 h-10 bg-white/5 ring-1 ring-white/10 rounded-lg items-center justify-center group-hover:bg-white/10 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="phone" class="lucide lucide-phone w-4 h-4" style="stroke-width: 1.5px;"><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"></path></svg>
</div>
<div>
<p class="text-sm font-medium">Phone</p>
<p class="text-sm text-white/60">+1 (555) 123-4567</p>
</div>
</a>
<div class="flex items-center gap-3 text-white/80">
<div class="flex w-10 h-10 bg-white/5 ring-1 ring-white/10 rounded-lg items-center justify-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="map-pin" class="lucide lucide-map-pin w-4 h-4" style="stroke-width: 1.5px;"><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>
<div>
<p class="text-sm font-medium">Location</p>
<p class="text-sm text-white/60">Austin, Texas</p>
</div>
</div>
</div>
</div>
<div>
<h3 class="text-lg font-medium mb-6">Connect</h3>
<div class="flex gap-3">
<a href="https://github.com/danielsnell" target="_blank" rel="noopener noreferrer" class="flex w-10 h-10 bg-white/5 ring-1 ring-white/10 hover:bg-white/10 rounded-lg items-center justify-center 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="github" class="lucide lucide-github w-4 h-4" style="stroke-width: 1.5px;"><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://linkedin.com/in/danielsnell" target="_blank" rel="noopener noreferrer" class="flex w-10 h-10 bg-white/5 ring-1 ring-white/10 hover:bg-white/10 rounded-lg items-center justify-center 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="linkedin" class="lucide lucide-linkedin w-4 h-4" style="stroke-width: 1.5px;"><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>
<a href="https://twitter.com/danielsnell_" target="_blank" rel="noopener noreferrer" class="flex w-10 h-10 bg-white/5 ring-1 ring-white/10 hover:bg-white/10 rounded-lg items-center justify-center 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="twitter" class="lucide lucide-twitter w-4 h-4" style="stroke-width: 1.5px;"><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>
</div>
</div>
</div>
<!-- Contact Form -->
<div class="bg-white/[0.03] ring-1 ring-white/10 rounded-xl p-6">
<form class="space-y-6">
<div class="grid sm:grid-cols-2 gap-4">
<div>
<label for="name" class="block text-sm font-medium text-white/80 mb-2">Name</label>
<input type="text" id="name" name="name" class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 text-white placeholder-white/50 focus:outline-none focus:border-white/30 focus:bg-white/10 transition-colors" placeholder="Your name">
</div>
<div>
<label for="email" class="block text-sm font-medium text-white/80 mb-2">Email</label>
<input type="email" id="email" name="email" class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 text-white placeholder-white/50 focus:outline-none focus:border-white/30 focus:bg-white/10 transition-colors" placeholder="[email protected]">
</div>
</div>
<div>
<label for="subject" class="block text-sm font-medium text-white/80 mb-2">Subject</label>
<input type="text" id="subject" name="subject" class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 text-white placeholder-white/50 focus:outline-none focus:border-white/30 focus:bg-white/10 transition-colors" placeholder="Project inquiry">
</div>
<div>
<label for="message" class="block text-sm font-medium text-white/80 mb-2">Message</label>
<textarea id="message" name="message" rows="5" class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 text-white placeholder-white/50 focus:outline-none focus:border-white/30 focus:bg-white/10 transition-colors resize-none" placeholder="Tell me about your project..."></textarea>
</div>
<button type="submit" class="group relative inline-flex min-w-full cursor-pointer transition-all duration-[1000ms] ease-[cubic-bezier(0.15,0.83,0.66,1)] hover:-translate-y-[3px] hover:text-white overflow-hidden font-semibold text-white/70 tracking-tight bg-white/5 border-white/10 border rounded-xl pt-[12px] pr-[20px] pb-[12px] pl-[20px] shadow-[0_2.8px_2.2px_rgba(0,0,0,0.3),_0_6.7px_5.3px_rgba(0,0,0,0.35),_0_12.5px_10px_rgba(0,0,0,0.4)] items-center justify-center">
<!-- Original text (slides down on hover) -->
<span class="relative z-10 font-medium transition-all duration-500 ease-out group-hover:transform group-hover:translate-y-8 group-hover:opacity-0 group-hover:blur-md rounded-xl font-geist">Send Message</span>
<!-- Clone text (slides in from top on hover) -->
<span class="absolute inset-0 z-10 flex items-center justify-center transition-all duration-300 ease-in-out transform -translate-y-8 group-hover:translate-y-0 group-hover:opacity-100 group-hover:blur-none font-medium font-geist opacity-0 rounded-xl blur-md">Send Message</span>
<!-- replaces the old ::before underline -->
<span aria-hidden="true" class="absolute bottom-0 left-1/2 h-[1px] w-[70%] -translate-x-1/2 transition-all duration-[1000ms] ease-[cubic-bezier(0.15,0.83,0.66,1)] group-hover:opacity-80 bg-gradient-to-r from-transparent via-white/40 to-transparent blur-[2px] rounded-xl"></span>
<!-- bottom light gradient on hover -->
<span aria-hidden="true" class="absolute bottom-0 left-0 right-0 h-[100%] group-hover:opacity-60 transition-all duration-[1000ms] ease-[cubic-bezier(0.15,0.83,0.66,1)] pointer-events-none bg-gradient-to-t from-white/10 via-white/5 to-transparent rounded-xl"></span>
</button>
</form>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="relative py-12 border-t border-white/10">
<div class="max-w-7xl mx-auto px-6">
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
<div class="flex items-center gap-2">
<span class="text-lg font-semibold">Daniel Snell</span>
<span class="text-white/60">© 2024</span>
</div>
<div class="flex items-center gap-6 text-sm text-white/60">
<a href="https://github.com/danielsnell" target="_blank" rel="noopener noreferrer" class="hover:text-white transition-colors">GitHub</a>
<a href="https://linkedin.com/in/danielsnell" target="_blank" rel="noopener noreferrer" class="hover:text-white transition-colors">LinkedIn</a>
<a href="https://twitter.com/danielsnell_" target="_blank" rel="noopener noreferrer" class="hover:text-white transition-colors">Twitter</a>
</div>
</div>
<div class="mt-8 pt-8 border-t border-white/10 text-center">
<p class="text-sm text-white/50">
Built with Astro, Tailwind, and WordPress.
<span class="text-white/70">Austin, Texas</span>
</p>
</div>
</div>
</footer>
<!-- Scripts -->
<script>
// Mobile menu toggle
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuBtn.addEventListener('click', () => {
mobileMenu.classList.toggle('-translate-y-full');
});
// Close mobile menu when clicking links
document.querySelectorAll('.mobile-nav-link').forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.add('-translate-y-full');
});
});
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetSection = document.querySelector(targetId);
if (targetSection) {
targetSection.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Progress bar and section highlighting
function updateProgressAndHighlight() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
const progress = (scrollTop / scrollHeight) * 100;
document.getElementById('progress-bar').style.width = progress + '%';
// Highlight current section in side navigation
const sections = document.querySelectorAll('section[id]');
const sideNavLinks = document.querySelectorAll('.side-nav-link');
let currentSection = '';
sections.forEach(section => {
const sectionTop = section.offsetTop - 100;
const sectionHeight = section.offsetHeight;
if (scrollTop >= sectionTop && scrollTop < sectionTop + sectionHeight) {
currentSection = section.getAttribute('id');
}
});
sideNavLinks.forEach(link => {
const targetSection = link.getAttribute('data-section');
const dot = link.querySelector('div');
if (targetSection === currentSection) {
dot.classList.remove('bg-white/30');
dot.classList.add('bg-white/80');
} else {
dot.classList.remove('bg-white/80');
dot.classList.add('bg-white/30');
}
});
}
// Intersection Observer for fade-in animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0px)';
}
});
}, observerOptions);
// Observe all sections except hero and work (which are already visible)
document.querySelectorAll('#services, #experience, #testimonials, #contact').forEach(section => {
observer.observe(section);
});
// Event listeners
window.addEventListener('scroll', updateProgressAndHighlight);
window.addEventListener('load', updateProgressAndHighlight);
// Initialize lucide icons
if (typeof lucide !== 'undefined') {
lucide.createIcons();
}
</script>
</body></html>