<!DOCTYPE html><html lang="en"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><link rel="shortcut icon" href="/favicon.ico"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><meta name="apple-mobile-web-app-title" content="ŁK"><link rel="preload" href="/fonts/InterVariable.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="/fonts/InterVariable-Italic.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="/fonts/JetBrainsMono-Variable.ttf" as="font" type="font/ttf" crossorigin><link rel="preload" href="/fonts/JetBrainsMono-Italic-Variable.ttf" as="font" type="font/ttf" crossorigin><link rel="manifest" href="/site.webmanifest"><meta name="theme-color" content="#1D1E26"><title>Łukasz Kliś — Product Engineering Partner</title><link rel="canonical" href="https://lukaszklis.com/"><meta name="description" content="Most startups struggle to ship fast without accumulating technical debt. I help product teams build reliable software with speed and craft — from hands-on coding to technical leadership."><meta name="robots" content="index, follow"><meta property="og:title" content="Łukasz Kliś — Product Engineering Partner"><meta property="og:type" content="website"><meta property="og:image" content="https://lukaszklis.com/web-app-manifest-512x512.png"><meta property="og:url" content="https://lukaszklis.com/"><meta property="og:description" content="Most startups struggle to ship fast without accumulating technical debt. I help product teams build reliable software with speed and craft — from hands-on coding to technical leadership."><meta property="og:locale" content="en_US"><meta property="og:site_name" content="Łukasz Kliś"><meta property="og:image:url" content="https://lukaszklis.com/web-app-manifest-512x512.png"><meta property="og:image:alt" content="Łukasz Kliś"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="Łukasz Kliś — Product Engineering Partner"><meta name="twitter:description" content="Most startups struggle to ship fast without accumulating technical debt. I help product teams build reliable software with speed and craft — from hands-on coding to technical leadership."><meta name="twitter:image" content="https://lukaszklis.com/web-app-manifest-512x512.png"><script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"WebSite","@id":"https://lukaszklis.com/#website","url":"https://lukaszklis.com/","name":"Łukasz Kliś","publisher":{"@id":"https://lukaszklis.com/#org"}},{"@type":["LocalBusiness","ProfessionalService"],"@id":"https://lukaszklis.com/#org","name":"Łukasz Kliś","legalName":"Łukasz Kliś","url":"https://lukaszklis.com/","email":"hi@lukaszklis.com","logo":"https://lukaszklis.com/logo.png","address":{"@type":"PostalAddress","streetAddress":"Rynek 60/2","addressLocality":"Wrocław","postalCode":"50-116","addressCountry":"PL"},"vatID":"PL5842655968","taxID":"5842655968","identifier":[{"@type":"PropertyValue","propertyID":"REGON","value":"221177256"},{"@type":"PropertyValue","propertyID":"Registry","value":"CEIDG"}],"founder":{"@id":"https://lukaszklis.com/#person"},"areaServed":"Global"},{"@type":"Person","@id":"https://lukaszklis.com/#person","name":"Łukasz Kliś","jobTitle":"Product Engineering Partner","url":"https://lukaszklis.com/","worksFor":{"@id":"https://lukaszklis.com/#org"},"sameAs":["https://www.linkedin.com/in/lukaszklis","https://github.com/lukaszklis","https://gitlab.com/lukaszklis","https://bsky.app/profile/lukaszklis.com","https://dev.to/lukaszklis","https://mastodon.social/@lukaszklis"],"knowsAbout":["Frontend Engineering","React","TypeScript","Engineering Management","Product Development","Technical Leadership","Web Performance","Design Systems"],"alumniOf":{"@type":"EducationalOrganization","name":"Gdańsk University of Technology"}}]}</script><script type="module">"fonts"in document&&Promise.all([document.fonts.load("400 18px InterVariable"),document.fonts.load("500 18px InterVariable"),document.fonts.load("600 18px InterVariable"),document.fonts.load("700 18px InterVariable"),document.fonts.load("800 18px InterVariable"),document.fonts.load("900 18px InterVariable"),document.fonts.load("italic 400 18px InterVariable"),document.fonts.load("italic 500 18px InterVariable"),document.fonts.load("400 18px JetBrainsMonoVariable"),document.fonts.load("italic 400 18px JetBrainsMonoVariable")]).then(()=>{document.documentElement.classList.add("fonts-loaded")}).catch(()=>{document.documentElement.classList.add("fonts-fallback")});</script><style>:where([data-astro-image]){height:auto}:where([data-astro-image=full-width]){width:100%}:where([data-astro-image=constrained]){max-width:100%}[data-astro-image-fit=fill]{object-fit:fill}[data-astro-image-fit=contain]{object-fit:contain}[data-astro-image-fit=cover]{object-fit:cover}[data-astro-image-fit=scale-down]{object-fit:scale-down}
@keyframes scroll-pulse{0%,to{opacity:.4;transform:translateY(0)}50%{opacity:1;transform:translateY(4px)}}
</style>
<link rel="stylesheet" href="/_astro/Layout.Bz387YtD.css"></head> <body> <a href="#main-content" class="focus:bg-primary focus:text-crust sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-100 focus:rounded-lg focus:px-4 focus:py-2 focus:text-sm focus:font-medium">
Skip to main content
</a> <svg aria-hidden="true" class="pointer-events-none fixed inset-0 -z-10" width="100%" height="100%"> <defs> <linearGradient id="fadeGradient" x1="100%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stop-color="#ffffff" stop-opacity="1"></stop> <stop offset="55%" stop-color="#ffffff" stop-opacity="0.45"></stop> <stop offset="100%" stop-color="#ffffff" stop-opacity="0"></stop> </linearGradient> <mask id="fadeMask"> <rect width="100%" height="100%" fill="url(#fadeGradient)"></rect> </mask> <pattern id="dotsPattern" width="56" height="56" patternUnits="userSpaceOnUse"> <circle cx="4" cy="4" r="1" fill="var(--color-rosewater)" fill-opacity="0.25"></circle> <circle cx="12" cy="4" r="1" fill="var(--color-flamingo)" fill-opacity="0.25"></circle> <circle cx="20" cy="4" r="1" fill="var(--color-pink)" fill-opacity="0.25"></circle> <circle cx="28" cy="4" r="1" fill="var(--color-mauve)" fill-opacity="0.25"></circle> <circle cx="36" cy="4" r="1" fill="var(--color-red)" fill-opacity="0.25"></circle> <circle cx="44" cy="4" r="1" fill="var(--color-maroon)" fill-opacity="0.25"></circle> <circle cx="52" cy="4" r="1" fill="var(--color-peach)" fill-opacity="0.25"></circle> <circle cx="4" cy="12" r="1" fill="var(--color-yellow)" fill-opacity="0.25"></circle> <circle cx="12" cy="12" r="1" fill="var(--color-green)" fill-opacity="0.25"></circle> <circle cx="20" cy="12" r="1" fill="var(--color-teal)" fill-opacity="0.25"></circle> <circle cx="28" cy="12" r="1" fill="var(--color-sky)" fill-opacity="0.25"></circle> <circle cx="36" cy="12" r="1" fill="var(--color-sapphire)" fill-opacity="0.25"></circle> <circle cx="44" cy="12" r="1" fill="var(--color-blue)" fill-opacity="0.25"></circle> <circle cx="52" cy="12" r="1" fill="var(--color-lavender)" fill-opacity="0.25"></circle> <circle cx="4" cy="20" r="1" fill="var(--color-rosewater)" fill-opacity="0.25"></circle> <circle cx="12" cy="20" r="1" fill="var(--color-flamingo)" fill-opacity="0.25"></circle> <circle cx="20" cy="20" r="1" fill="var(--color-pink)" fill-opacity="0.25"></circle> <circle cx="28" cy="20" r="1" fill="var(--color-mauve)" fill-opacity="0.25"></circle> <circle cx="36" cy="20" r="1" fill="var(--color-red)" fill-opacity="0.25"></circle> <circle cx="44" cy="20" r="1" fill="var(--color-maroon)" fill-opacity="0.25"></circle> <circle cx="52" cy="20" r="1" fill="var(--color-peach)" fill-opacity="0.25"></circle> <circle cx="4" cy="28" r="1" fill="var(--color-yellow)" fill-opacity="0.25"></circle> <circle cx="12" cy="28" r="1" fill="var(--color-green)" fill-opacity="0.25"></circle> <circle cx="20" cy="28" r="1" fill="var(--color-teal)" fill-opacity="0.25"></circle> <circle cx="28" cy="28" r="1" fill="var(--color-sky)" fill-opacity="0.25"></circle> <circle cx="36" cy="28" r="1" fill="var(--color-sapphire)" fill-opacity="0.25"></circle> <circle cx="44" cy="28" r="1" fill="var(--color-blue)" fill-opacity="0.25"></circle> <circle cx="52" cy="28" r="1" fill="var(--color-lavender)" fill-opacity="0.25"></circle> <circle cx="4" cy="36" r="1" fill="var(--color-rosewater)" fill-opacity="0.25"></circle> <circle cx="12" cy="36" r="1" fill="var(--color-flamingo)" fill-opacity="0.25"></circle> <circle cx="20" cy="36" r="1" fill="var(--color-pink)" fill-opacity="0.25"></circle> <circle cx="28" cy="36" r="1" fill="var(--color-mauve)" fill-opacity="0.25"></circle> <circle cx="36" cy="36" r="1" fill="var(--color-red)" fill-opacity="0.25"></circle> <circle cx="44" cy="36" r="1" fill="var(--color-maroon)" fill-opacity="0.25"></circle> <circle cx="52" cy="36" r="1" fill="var(--color-peach)" fill-opacity="0.25"></circle> <circle cx="4" cy="44" r="1" fill="var(--color-yellow)" fill-opacity="0.25"></circle> <circle cx="12" cy="44" r="1" fill="var(--color-green)" fill-opacity="0.25"></circle> <circle cx="20" cy="44" r="1" fill="var(--color-teal)" fill-opacity="0.25"></circle> <circle cx="28" cy="44" r="1" fill="var(--color-sky)" fill-opacity="0.25"></circle> <circle cx="36" cy="44" r="1" fill="var(--color-sapphire)" fill-opacity="0.25"></circle> <circle cx="44" cy="44" r="1" fill="var(--color-blue)" fill-opacity="0.25"></circle> <circle cx="52" cy="44" r="1" fill="var(--color-lavender)" fill-opacity="0.25"></circle> <circle cx="4" cy="52" r="1" fill="var(--color-rosewater)" fill-opacity="0.25"></circle> <circle cx="12" cy="52" r="1" fill="var(--color-flamingo)" fill-opacity="0.25"></circle> <circle cx="20" cy="52" r="1" fill="var(--color-pink)" fill-opacity="0.25"></circle> <circle cx="28" cy="52" r="1" fill="var(--color-mauve)" fill-opacity="0.25"></circle> <circle cx="36" cy="52" r="1" fill="var(--color-red)" fill-opacity="0.25"></circle> <circle cx="44" cy="52" r="1" fill="var(--color-maroon)" fill-opacity="0.25"></circle> <circle cx="52" cy="52" r="1" fill="var(--color-peach)" fill-opacity="0.25"></circle> </pattern> </defs> <rect width="100%" height="100%" fill="url(#dotsPattern)" mask="url(#fadeMask)"></rect> </svg> <header class="bg-bg/75 border-overlay/10 fixed top-0 right-0 left-0 z-50 border-b backdrop-blur-lg backdrop-saturate-[1.3]"> <div class="container mx-auto flex max-w-300 items-center justify-between px-8 py-4"> <a href="/" class="text-2xl" aria-label="Home"> <svg width="1.11em" height="1em" aria-label="ŁK's Logo" class="text-fg" data-icon="lk">   <symbol id="ai:local:lk" viewBox="0 0 109 99"><g fill="none"><path fill="currentColor" d="m36.946 27.21-1.018 8.895L0 45.713l.98-8.82zM3.431 76.863 16.249 0h16.324L22.017 63.465H55.08l-2.262 13.398z"/><path fill="#BD93F9" d="m36.195 98.646 12.776-76.863h16.271l-5.918 36.199 1.446-1.652 28.728-34.154H109L79.296 56.199l21.719 42.447H81.55l-15.707-31.6-9.695 9.832-3.682 21.768z"/></g></symbol><use href="#ai:local:lk"></use>  </svg> </a> <!-- Desktop navigation --> <nav class="hidden items-center gap-6 md:flex"> <ul class="flex items-center gap-1"> <li> <a class="group text-fg/80 hover:text-fg relative px-4 py-2 text-sm transition-colors sm:text-base" href="/#services"> Services <span class="bg-fg/25 pointer-events-none absolute inset-x-4 -bottom-0.5 h-0.5 rounded-full opacity-0 transition-opacity group-hover:opacity-100" aria-hidden="true"></span> </a> </li><li> <a class="group text-fg/80 hover:text-fg relative px-4 py-2 text-sm transition-colors sm:text-base" href="/#process"> Process <span class="bg-fg/25 pointer-events-none absolute inset-x-4 -bottom-0.5 h-0.5 rounded-full opacity-0 transition-opacity group-hover:opacity-100" aria-hidden="true"></span> </a> </li><li> <a class="group text-fg/80 hover:text-fg relative px-4 py-2 text-sm transition-colors sm:text-base" href="/#contact"> Contact <span class="bg-fg/25 pointer-events-none absolute inset-x-4 -bottom-0.5 h-0.5 rounded-full opacity-0 transition-opacity group-hover:opacity-100" aria-hidden="true"></span> </a> </li> </ul> <a target="_blank" rel="noopener noreferrer" href="https://cal.com/lukaszklis/intro" class="inline-flex items-center rounded-lg px-6 py-3 text-sm font-medium transition-all focus:outline-none focus-visible:ring-2 sm:text-base bg-primary focus-visible:ring-primary/40 text-crust shadow-[0_2px_4px_rgba(0,0,0,0.15),inset_0_1px_0_rgba(255,255,255,0.15)] hover:-translate-y-0.5 hover:shadow-[0_4px_12px_rgba(136,57,239,0.35)] active:translate-y-0 active:shadow-[0_1px_2px_rgba(0,0,0,0.1)]">
Book a call
</a> </nav> <button id="mobile-menu-button" class="hover:bg-fg/5 focus:ring-primary/50 inline-flex items-center justify-center rounded p-1 focus:ring-2 focus:outline-none md:hidden" aria-expanded="false" aria-controls="mobile-menu"> <span class="sr-only">Toggle menu</span> <svg width="1em" height="1em" class="size-6" data-icon="menu" data-icon="menu-01">   <symbol id="ai:local:menu-01" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12h18M3 6h18M3 18h18"/></symbol><use href="#ai:local:menu-01"></use>  </svg> <svg width="1em" height="1em" class="hidden size-6" data-icon="close" data-icon="x-close">   <symbol id="ai:local:x-close" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6 6 18M6 6l12 12"/></symbol><use href="#ai:local:x-close"></use>  </svg> </button> <nav id="mobile-menu" aria-label="Mobile navigation" class="absolute top-full right-0 left-0 hidden md:hidden"> <div class="border-overlay/10 bg-bg/95 mx-0 border-t backdrop-blur"> <ul class="mx-auto flex max-w-300 flex-col py-2"> <li> <a class="hover:bg-fg/5 block px-4 py-3 text-base" href="/#services"> Services </a> </li><li> <a class="hover:bg-fg/5 block px-4 py-3 text-base" href="/#process"> Process </a> </li><li> <a class="hover:bg-fg/5 block px-4 py-3 text-base" href="/#contact"> Contact </a> </li> <li class="px-4 py-2"> <a target="_blank" rel="noopener noreferrer" href="https://cal.com/lukaszklis/intro" class="inline-flex items-center rounded-lg px-6 py-3 text-sm font-medium transition-all focus:outline-none focus-visible:ring-2 sm:text-base bg-primary focus-visible:ring-primary/40 text-crust shadow-[0_2px_4px_rgba(0,0,0,0.15),inset_0_1px_0_rgba(255,255,255,0.15)] hover:-translate-y-0.5 hover:shadow-[0_4px_12px_rgba(136,57,239,0.35)] active:translate-y-0 active:shadow-[0_1px_2px_rgba(0,0,0,0.1)]">
Book a call
</a> </li> </ul> </div> </nav> </div> </header> <script type="module">const t=document.getElementById("mobile-menu-button"),i=document.getElementById("mobile-menu"),c=t?t.querySelector('[data-icon="menu"]'):null,d=t?t.querySelector('[data-icon="close"]'):null;function r(){return i?Array.from(i.querySelectorAll("a[href], button:not([disabled])")):[]}function a(e){!t||!i||(t.setAttribute("aria-expanded",e?"true":"false"),i.classList.toggle("hidden",!e),c&&d&&(c.classList.toggle("hidden",e),d.classList.toggle("hidden",!e)),e?r()[0]?.focus():t.focus())}t?.addEventListener("click",()=>{const e=t.getAttribute("aria-expanded")==="true";a(!e)});document.addEventListener("click",e=>{const n=e.target;t?.getAttribute("aria-expanded")==="true"&&i&&n instanceof Node&&!i.contains(n)&&t&&!t.contains(n)&&a(!1)});document.addEventListener("keydown",e=>{if(e.key==="Escape"&&t?.getAttribute("aria-expanded")==="true"&&a(!1),e.key==="Tab"&&t?.getAttribute("aria-expanded")==="true"){const n=r();if(n.length===0)return;const s=n[0],o=n[n.length-1];e.shiftKey&&document.activeElement===s?(e.preventDefault(),o.focus()):!e.shiftKey&&document.activeElement===o&&(e.preventDefault(),s.focus())}});window.addEventListener("resize",()=>{window.innerWidth>=768&&a(!1)});i?.addEventListener("click",e=>{const n=e.target;n instanceof Element&&n.tagName==="A"&&a(!1)});</script> <main id="main-content" class="flex grow flex-col">  <section id="hero" class="relative flex min-h-svh items-center justify-center overflow-hidden" data-astro-cid-shwxrd6l> <div class="relative z-10 container mx-auto max-w-300 px-8 py-24" data-astro-cid-shwxrd6l> <div class="flex items-center gap-16" data-astro-cid-shwxrd6l> <div class="flex flex-col gap-10" data-astro-cid-shwxrd6l> <div class="flex flex-col gap-6" data-astro-cid-shwxrd6l> <p class="label" data-animate="fade-up" data-astro-cid-shwxrd6l>
Product Engineering Partner
</p> <div class="flex items-center gap-5 sm:gap-6" data-animate="fade-up" style="animation-delay: 80ms" data-astro-cid-shwxrd6l> <h1 class="hero-name text-[clamp(3.5rem,12vw,10rem)] leading-[0.9] tracking-[-0.05em]" data-astro-cid-shwxrd6l>
Łukasz<br data-astro-cid-shwxrd6l> <span class="text-primary" data-astro-cid-shwxrd6l>Kliś</span> </h1> <!-- Photo: inline with name on mobile --> <div class="shrink-0 md:hidden" data-astro-cid-shwxrd6l> <img src="/_astro/dark.BTtnlSYd_Z12Kn2T.webp" srcset="/_astro/dark.BTtnlSYd_Z8N41l.webp 80w, /_astro/dark.BTtnlSYd_7uIB1.webp 112w, /_astro/dark.BTtnlSYd_1kwrOJ.webp 160w, /_astro/dark.BTtnlSYd_sd9rK.webp 224w" alt="Łukasz Kliś" data-astro-cid-shwxrd6l="true" loading="lazy" decoding="async" sizes="(min-width: 864px) 864px, 100vw" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center" width="864" height="864" class="size-20 rounded-full object-cover sm:size-28"> </div> </div> </div> <div class="flex max-w-xl flex-col gap-8" data-astro-cid-shwxrd6l> <p class="text-muted text-lg sm:text-xl" data-animate="fade-up" style="animation-delay: 160ms" data-astro-cid-shwxrd6l>
Most startups struggle to ship fast without accumulating technical debt. I help product
            teams build reliable software with speed and craft &mdash; from hands-on coding to
            technical leadership.
</p> <div class="flex flex-wrap items-center gap-4" data-animate="fade-up" style="animation-delay: 240ms" data-astro-cid-shwxrd6l> <a target="_blank" rel="noopener noreferrer" href="https://cal.com/lukaszklis/intro" class="inline-flex items-center rounded-lg px-6 py-3 text-sm font-medium transition-all focus:outline-none focus-visible:ring-2 sm:text-base bg-primary focus-visible:ring-primary/40 text-crust shadow-[0_2px_4px_rgba(0,0,0,0.15),inset_0_1px_0_rgba(255,255,255,0.15)] hover:-translate-y-0.5 hover:shadow-[0_4px_12px_rgba(136,57,239,0.35)] active:translate-y-0 active:shadow-[0_1px_2px_rgba(0,0,0,0.1)]">
Book a call
</a> <a href="#process" class="inline-flex items-center rounded-lg px-6 py-3 text-sm font-medium transition-all focus:outline-none focus-visible:ring-2 sm:text-base text-primary ring-primary/25 hover:ring-primary/50 hover:bg-primary/5 active:bg-primary/10 focus-visible:ring-primary/40 bg-transparent ring-1">
See how I work
</a> </div> </div> </div> <!-- Photo: large on the right for desktop --> <div class="hidden shrink-0 md:block" data-animate="fade-in" style="animation-delay: 320ms" data-astro-cid-shwxrd6l> <img src="/_astro/dark.BTtnlSYd_Z12Kn2T.webp" srcset="/_astro/dark.BTtnlSYd_FJffT.webp 256w, /_astro/dark.BTtnlSYd_1yT6TU.webp 320w, /_astro/dark.BTtnlSYd_21MQNf.webp 512w, /_astro/dark.BTtnlSYd_Z1IbdJn.webp 640w" alt="Łukasz Kliś" data-astro-cid-shwxrd6l="true" loading="lazy" decoding="async" sizes="(min-width: 864px) 864px, 100vw" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center" width="864" height="864" class="size-64 rounded-full object-cover lg:size-80"> </div> </div> </div> <div class="reduce-motion:animate-none reduce-motion:opacity-50 absolute bottom-8 left-1/2 -translate-x-1/2 animate-[scroll-pulse_2s_ease-in-out_infinite] [animation-delay:600ms]" data-animate="fade-in" data-astro-cid-shwxrd6l> <div class="flex flex-col items-center gap-2" data-astro-cid-shwxrd6l> <span class="text-muted text-xs font-medium tracking-widest uppercase" data-astro-cid-shwxrd6l>Scroll</span> <div class="bg-overlay h-10 w-px opacity-40" data-astro-cid-shwxrd6l></div> </div> </div> </section> <section> <div class="bg-mantle"> <div class="container mx-auto max-w-300 px-8 py-24 md:py-36" data-animate="fade-up"> <div class="flex flex-col gap-8"> <p class="text-fg text-[clamp(2rem,5vw,4rem)] leading-[1.05] font-extrabold tracking-tight">
Move fast.<br> <span class="text-primary">Build right.</span> </p> <div class="bg-primary h-1 w-16 rounded-full"></div> <p class="text-muted max-w-2xl text-lg md:text-xl">
Scaling teams, chaotic roadmaps, technical debt piling up &mdash; been there. With 15+
          years across SaaS, fintech, and e-commerce, my job is helping product teams ship fast
          without the shortcuts that cost you later. Bridging product goals and engineering execution.
</p> </div> </div> </div> </section> <section class="container mx-auto max-w-300 px-8 py-24 md:py-36"> <div class="flex flex-col gap-6" data-animate="fade-up"> <p class="label">Clients</p> <h2>Trusted by startups and product teams</h2> <p class="text-muted max-w-3xl text-base md:text-lg">
I've partnered with SaaS, fintech, e-commerce, and early-stage startups — environments where
      speed and reliability must coexist.
</p> </div> <div class="mt-14 flex flex-wrap items-center justify-center gap-8 md:mt-20 md:justify-start md:gap-16" data-animate="fade-in"> <svg fill="none" aria-labelledby="logo-title" viewBox="0 0 134 25" class="h-7 w-auto opacity-70 transition-all duration-500 hover:opacity-100" role="img" aria-label="Surfer"><title>Surfer | SEO Content Optimization Platform</title><g fill="currentColor"><path d="M18.63.24a5.61 5.61 0 0 1 5.61 5.61v1.479l-2.51.77V5.842a3.1 3.1 0 0 0-3.1-3.093H5.675A3.1 3.1 0 0 0 2.574 5.85v5.982c0 1.039 0 1.558-.285 1.945-.286.387-.782.54-1.776.845l-.447.137V5.85A5.61 5.61 0 0 1 5.676.24zm5.162 9.846.447-.138v8.9a5.61 5.61 0 0 1-5.61 5.61H5.676a5.61 5.61 0 0 1-5.61-5.61v-1.47l2.508-.77v2.25a3.1 3.1 0 0 0 3.102 3.092h12.953a3.1 3.1 0 0 0 3.102-3.101v-5.973c0-1.04 0-1.559.285-1.945.286-.387.783-.54 1.776-.845" /><path d="M6.825 16.15v-4.683c0-1.235.258-1.492 1.493-1.492h.461c1.235 0 1.492.257 1.492 1.492v4.684c0 1.234-.257 1.492-1.492 1.492h-.461c-1.235 0-1.493-.258-1.493-1.492m8.701-9.093c-1.235 0-1.492.258-1.492 1.492v7.6c0 1.235.257 1.493 1.492 1.493h.461c1.235 0 1.493-.258 1.493-1.492v-7.6c0-1.235-.258-1.493-1.493-1.493z" /></g><g fill="currentColor" style="opacity:1"><path d="M41.29 6.512q.853.627.965 1.76h3.886q-.03-1.713-.918-3.015-.89-1.3-2.49-2.031-1.591-.73-3.726-.73-2.098 0-3.745.73t-2.594 2.031q-.936 1.302-.927 3.043-.008 2.126 1.395 3.38 1.405 1.254 3.83 1.844l2.087.525a11 11 0 0 1 1.77.561q.73.309 1.105.75.383.44.383 1.085 0 .693-.421 1.227-.42.533-1.189.833-.758.3-1.788.3-1.049 0-1.882-.319a3.07 3.07 0 0 1-1.32-.964q-.487-.645-.552-1.61h-3.923q.046 2.069 1.002 3.473.963 1.395 2.677 2.106 1.723.712 4.045.712 2.34 0 3.997-.702 1.666-.713 2.547-1.994.889-1.293.899-3.052-.01-1.2-.44-2.126a4.8 4.8 0 0 0-1.19-1.61 7 7 0 0 0-1.816-1.151 12 12 0 0 0-2.303-.75l-1.722-.411a10 10 0 0 1-1.18-.337 5 5 0 0 1-.974-.478 2.25 2.25 0 0 1-.664-.665 1.6 1.6 0 0 1-.216-.898q0-.618.356-1.105.365-.487 1.049-.758.683-.281 1.675-.281 1.461 0 2.313.627m24.044-3.754h-4.053v12.105q0 1.096-.487 1.947a3.4 3.4 0 0 1-1.358 1.34q-.87.486-2.05.486-1.17 0-2.05-.487a3.5 3.5 0 0 1-1.367-1.339q-.478-.852-.478-1.947V2.758h-4.054V15.21q0 2.096.993 3.67.992 1.573 2.78 2.452 1.788.87 4.176.871 2.378 0 4.166-.87 1.788-.88 2.78-2.453 1.002-1.574 1.002-3.67z" /><path fill-rule="evenodd" d="M68.98 21.932V2.758h7.564q2.172 0 3.708.777 1.545.768 2.35 2.181.814 1.404.814 3.305 0 1.91-.824 3.286-.825 1.367-2.387 2.097l-.174.079L84.1 21.93h-4.476l-3.631-6.796h-2.96v6.797zm6.806-10.055h-2.753V6.072h2.734q1.17 0 1.938.346.777.337 1.152.993.383.655.383 1.61 0 .946-.383 1.582-.374.637-1.142.955t-1.93.319" clip-rule="evenodd" /><path d="M86.59 2.758V21.93h4.054v-7.92h7.798v-3.34h-7.798V6.1h8.641V2.758zm15.731 19.174V2.758h12.92V6.1h-8.867v4.569h8.202v3.342h-8.202v4.578h8.904v3.343z" /><path fill-rule="evenodd" d="M118.772 2.758V21.93h4.054v-6.796h2.959l3.632 6.797h4.475l-4.068-7.45q.088-.037.174-.078 1.563-.73 2.387-2.097.824-1.376.824-3.286 0-1.9-.815-3.305-.805-1.414-2.35-2.181-1.535-.777-3.707-.777zm4.054 9.119h2.753q1.161 0 1.928-.319.768-.318 1.143-.955.383-.636.383-1.582 0-.955-.383-1.61-.375-.655-1.152-.993-.768-.345-1.938-.346h-2.734z" clip-rule="evenodd" /></g></svg> <svg xml:space="preserve" id="Ebene_1" x="0" y="0" viewBox="0 0 284 73" class="h-5.5 w-auto opacity-70 transition-all duration-500 hover:opacity-100" role="img" aria-label="Coya"><g id="Coya-Logo-wordmark-darkindigo"><g id="Group" transform="translate(60.587 60.837)"><path id="Fill-16-2_16_" d="M20.1 1c3.1 3.3 6.8 5.9 11 7.7 8.6 3.8 18.3 3.8 26.9 0 4.1-1.8 7.9-4.4 11-7.7 3.2-3.3 5.7-7.1 7.4-11.4 3.6-8.9 3.6-18.9 0-27.9-1.7-4.2-4.2-8.1-7.4-11.4-3.1-3.3-6.8-5.9-11-7.7-8.6-3.8-18.3-3.8-26.9 0-4.1 1.8-7.9 4.4-11 7.7-3.2 3.3-5.7 7.1-7.4 11.4-3.6 8.9-3.6 18.9 0 27.9 1.7 4.2 4.2 8.1 7.4 11.4m24.7-46c11 0 19.9 9.3 19.9 20.7S55.8-3.6 44.8-3.6s-20-9.4-20-20.8 9-20.6 20-20.6" fill="currentColor" /><path id="Fill-16-2_15_" d="M119.8-4.5c4.2 0 7.7 3.6 7.7 8s-3.5 8-7.7 8-7.7-3.6-7.7-8 3.5-8 7.7-8" fill="currentColor" /><path id="Path" d="M140.7-56.6c-13.8 21.3-30.4 17.9-42 0-5.4-8.2-16.9-.8-12.5 7.7 20.5 32.6 51 26.3 67 0 4.6-8.3-7-16.2-12.5-7.7" fill="currentColor" /><path id="Path_1_" d="M-1.9-10.1c-1.2-1.2-2.9-1.8-4.5-1.9-1.7-.1-3.3.6-4.6 1.6-2.5 1.9-5 3.8-7.9 5-5.7 2.2-12.7 1.6-17.7-2-2.5-1.8-4.7-4.2-6.2-6.9-1.6-2.7-2.4-6.2-2.4-10.1 0-4 .8-7.4 2.4-10.1s3.7-5.1 6.2-6.9c5.1-3.6 12-4.3 17.7-2 2.8 1.2 5.3 3.2 7.9 5 1.3 1 2.9 1.7 4.6 1.6s3.3-.8 4.5-1.9S.2-41.4.5-43c.3-1.7.1-3.4-.7-4.9-.7-1.5-1.8-2.8-3-3.8-1.2-1.1-2.4-2.1-3.8-2.9-5.3-3.7-11.7-5.5-18-5.6-6.4-.1-12.7 1.7-18.2 5-2.7 1.7-5.2 3.7-7.4 6s-4 4.9-5.5 7.8c-3 5.6-4 11.4-4.1 17 .1 5.6 1.1 11.4 4.1 17 1.5 2.8 3.3 5.4 5.5 7.8 2.2 2.3 4.7 4.3 7.4 6 5.5 3.3 11.8 5 18.2 5 6.4-.1 12.7-1.9 18.1-5.4 1.3-.9 2.6-1.9 3.8-2.9C-1.9 2-.8.8-.1-.7s1-3.2.7-4.9C.2-7.4-.6-8.9-1.9-10.1" fill="currentColor" /><path id="Shape" d="m222-.2-29.8-55.9c-2.9-5.6-10.5-5.6-13.4.1L150.3-.1c-4.3 9.4 8.3 16.2 13.5 7.4l5.6-10.9h33.4l5.9 11.1c5.8 9.2 17.7.8 13.3-7.7m-48-17.2 11.9-23 11.9 23z" fill="currentColor" /></g></g></svg> <svg viewBox="0 0 1503.9 573" class="h-9.5 w-auto opacity-70 transition-all duration-500 hover:opacity-100" role="img" aria-label="rebuy"><path d="m184.2 211.8 19.9-55.8a146.8 146.8 0 0 0-55.1-10.6A149.14 149.14 0 0 0 0 294.2v138.7h59.2V294.2a89.73 89.73 0 0 1 89.7-89.6 87.8 87.8 0 0 1 35.3 7.2m978.5-55.4v139.7a148.85 148.85 0 0 1-297.7 0V156.4h59.2v139.7a89.7 89.7 0 0 0 179.4 0V156.4zm282.2 0v139.7a89.7 89.7 0 0 1-179.4 0V156.4h-59.2v139.7a149 149 0 0 0 148.8 148.8c32.4 0 64.6-12.2 89.7-33.1v12.4a89.79 89.79 0 0 1-89.7 89.6V573a149 149 0 0 0 148.8-148.8V156.4zm-909.4 4.8a193.6 193.6 0 0 1 55.7-42.1V0H532v164.9z" fill="currentColor" /><path d="M681 144.6A149.26 149.26 0 0 0 569 195L417.3 357.5a89.73 89.73 0 1 1-16.7-138.3l-67.9 73.7 43.6 40.9L484.7 218l-18.6-20.7a149.8 149.8 0 1 0-2.3 198.4s148.7-159.2 148.8-159.2a89.73 89.73 0 1 1 1.8 118l-24.6-26.1-41.2 43.9 24.7 26.1A149.77 149.77 0 1 0 681 144.6" fill="currentColor" /></svg> <svg width="124" height="24" viewBox="0 0 124 24" fill="none" class="h-5 w-auto opacity-70 transition-all duration-500 hover:opacity-100" role="img" aria-label="Wimdu">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5147 7.70588L10.3529 16.3824L5.01471 0H0L7.83824 23.3088H12.5441L15.9412 14.2353L13.5147 7.70588ZM36.3676 0H41.1176V23.3088H36.3676V0ZM58.3088 23.3676L53.6029 9.32353L49.7941 23.3088H44.9706L51.2794 0H55.1912L60.1029 14.7794L65 0H68.9118L75.2206 23.3088H70.3824L66.6029 9.32353L61.8824 23.3676H58.3088Z" fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.9558 0L22.6028 16.3971L19.4264 7.66176H14.5293L20.4116 23.3088H25.1175L32.9558 0H27.9558Z" fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M87.1322 0H79.0293V23.3088H87.1175C94.294 23.3088 99.4999 18.3971 99.4999 11.6029C99.4852 4.88235 94.2793 0 87.1322 0ZM87.1322 18.9118H83.794V4.38235H87.1322C91.4999 4.38235 94.5587 7.36765 94.5587 11.6618C94.5146 16.0147 91.544 18.9118 87.1322 18.9118ZM118.412 0V13.3529C118.412 17.1324 116.559 19.2206 113.191 19.2206C109.794 19.2206 107.926 17.0735 107.926 13.1912V0H103.191V13.3529C103.191 19.8971 106.809 23.6618 113.132 23.6618C119.5 23.6618 123.147 19.8235 123.147 13.1765V0H118.412Z" fill="currentColor" />
</svg> </div> <div class="mt-16 grid gap-6 md:mt-24 md:grid-cols-2" data-stagger> <blockquote class="bg-surface/40 group relative flex flex-col justify-between overflow-hidden rounded-2xl p-6 sm:p-8" data-animate="fade-up"> <span class="text-primary pointer-events-none absolute -top-2 -left-1 text-[6rem] leading-none font-black opacity-[0.07] select-none" aria-hidden="true">&ldquo;</span> <p class="text-fg relative text-base leading-relaxed font-medium italic sm:text-lg"> Support and sales teams love working with him — they always know what&#39;s been shipped. A true frontend at heart who cares about typography, layout, and pixels. </p> <footer class="relative mt-6"> <p class="text-fg text-sm font-semibold">Maciej Karpeta</p> <p class="text-muted text-sm">Principal Product Designer, Surfer</p> </footer> </blockquote> <blockquote class="bg-surface/40 group relative flex flex-col justify-between overflow-hidden rounded-2xl p-6 sm:p-8" data-animate="fade-up"> <span class="text-primary pointer-events-none absolute -top-2 -left-1 text-[6rem] leading-none font-black opacity-[0.07] select-none" aria-hidden="true">&ldquo;</span> <p class="text-fg relative text-base leading-relaxed font-medium italic sm:text-lg"> Incredibly supportive, constructive, and pro-active mindset. </p> <footer class="relative mt-6"> <p class="text-fg text-sm font-semibold">Michael Krenz</p> <p class="text-muted text-sm">CTO, Wimdu</p> </footer> </blockquote> <blockquote class="bg-surface/40 group relative flex flex-col justify-between overflow-hidden rounded-2xl p-6 sm:p-8" data-animate="fade-up"> <span class="text-primary pointer-events-none absolute -top-2 -left-1 text-[6rem] leading-none font-black opacity-[0.07] select-none" aria-hidden="true">&ldquo;</span> <p class="text-fg relative text-base leading-relaxed font-medium italic sm:text-lg"> Passionate, personable, knowledgeable, and humble. Could take ownership of complex problems and see them through. </p> <footer class="relative mt-6"> <p class="text-fg text-sm font-semibold">James Brooke</p> <p class="text-muted text-sm">CPO, Wimdu</p> </footer> </blockquote> <blockquote class="bg-surface/40 group relative flex flex-col justify-between overflow-hidden rounded-2xl p-6 sm:p-8" data-animate="fade-up"> <span class="text-primary pointer-events-none absolute -top-2 -left-1 text-[6rem] leading-none font-black opacity-[0.07] select-none" aria-hidden="true">&ldquo;</span> <p class="text-fg relative text-base leading-relaxed font-medium italic sm:text-lg"> Goes out of his way to enable coworkers. Sees where help is needed and gets stuff done. </p> <footer class="relative mt-6"> <p class="text-fg text-sm font-semibold">Kristina Schneider</p> <p class="text-muted text-sm">CSSconf EU</p> </footer> </blockquote> </div> </section> <section id="services" class="container mx-auto max-w-300 px-8 py-24 md:py-36"> <div class="flex flex-col gap-6"> <p class="label" data-animate="fade-up">
How I Help
</p> <h2 data-animate="fade-up">Services</h2> </div> <div class="mt-14 grid gap-6 md:mt-20 md:grid-cols-3" data-stagger> <div class="bg-surface/40 group hover:border-primary/20 hover:bg-surface/70 relative flex flex-col overflow-hidden rounded-2xl border border-transparent p-8 transition-all duration-300 md:p-10" data-animate="scale-in"> <span class="text-primary/10 group-hover:text-primary/20 pointer-events-none absolute -top-5 -right-2 text-[120px] leading-none font-black transition-all duration-300 select-none" aria-hidden="true"> 1 </span> <div class="relative flex flex-col gap-4"> <h3 class="text-fg text-xl font-bold sm:text-2xl">Product Development</h3> <p class="text-muted mt-auto text-base leading-relaxed">Your team is at capacity but the roadmap won&#39;t wait. I embed with your team to ship features fast — clean code, tight feedback loops, no shortcuts.</p> </div> </div> <div class="bg-surface/40 group hover:border-primary/20 hover:bg-surface/70 relative flex flex-col overflow-hidden rounded-2xl border border-transparent p-8 transition-all duration-300 md:p-10" data-animate="scale-in"> <span class="text-primary/10 group-hover:text-primary/20 pointer-events-none absolute -top-5 -right-2 text-[120px] leading-none font-black transition-all duration-300 select-none" aria-hidden="true"> 2 </span> <div class="relative flex flex-col gap-4"> <h3 class="text-fg text-xl font-bold sm:text-2xl">Technical Strategy & Architecture</h3> <p class="text-muted mt-auto text-base leading-relaxed">Wrong technical decisions cost months. I help you choose the right architecture, stack, and patterns — so technology accelerates your business.</p> </div> </div> <div class="bg-surface/40 group hover:border-primary/20 hover:bg-surface/70 relative flex flex-col overflow-hidden rounded-2xl border border-transparent p-8 transition-all duration-300 md:p-10" data-animate="scale-in"> <span class="text-primary/10 group-hover:text-primary/20 pointer-events-none absolute -top-5 -right-2 text-[120px] leading-none font-black transition-all duration-300 select-none" aria-hidden="true"> 3 </span> <div class="relative flex flex-col gap-4"> <h3 class="text-fg text-xl font-bold sm:text-2xl">Team Leadership & Augmentation</h3> <p class="text-muted mt-auto text-base leading-relaxed">Missing senior engineering leadership? I ship production code and lead architecture decisions — raising the bar for the whole team.</p> </div> </div> </div> </section> <section class="container mx-auto max-w-300 px-8 py-24 md:py-36"> <div class="flex flex-col gap-6"> <p class="label" data-animate="fade-up">
Technology
</p> <h2 data-animate="fade-up">Tools I enjoy shipping with</h2> </div> <div class="mt-14 grid grid-cols-3 gap-4 sm:grid-cols-4 md:mt-20 md:grid-cols-6 md:gap-6" data-stagger> <div class="bg-surface/40 group flex flex-col items-center gap-3 rounded-2xl px-2 py-6 transition-all duration-200 hover:-translate-y-0.5 md:px-4" data-animate="fade-up"> <svg width="1em" height="1em" class="text-muted group-hover:text-fg size-8 transition-colors duration-200" aria-hidden="true" data-icon="tech-typescript">   <symbol id="ai:local:tech-typescript" viewBox="0 0 24 24"><path fill="currentColor" d="M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75q.918 0 1.627.111a6.4 6.4 0 0 1 1.306.34v2.458a4 4 0 0 0-.643-.361 5 5 0 0 0-.717-.26 5.5 5.5 0 0 0-1.426-.2q-.45 0-.819.086a2.1 2.1 0 0 0-.623.242q-.254.156-.393.374a.9.9 0 0 0-.14.49q0 .294.156.529.156.234.443.444c.287.21.423.276.696.41q.41.203.926.416.705.296 1.266.628.561.333.963.753.402.418.614.957.213.538.214 1.253 0 .986-.373 1.656a3 3 0 0 1-1.012 1.085 4.4 4.4 0 0 1-1.487.596q-.85.18-1.79.18a10 10 0 0 1-1.84-.164 5.5 5.5 0 0 1-1.512-.493v-2.63a5.03 5.03 0 0 0 3.237 1.2q.5 0 .872-.09.373-.09.623-.25.249-.162.373-.38a1.02 1.02 0 0 0-.074-1.089 2.1 2.1 0 0 0-.537-.5 5.6 5.6 0 0 0-.807-.444 28 28 0 0 0-1.007-.436q-1.377-.575-2.053-1.405t-.676-2.005q0-.92.369-1.582.368-.662 1.004-1.089a4.5 4.5 0 0 1 1.47-.629 7.5 7.5 0 0 1 1.77-.201m-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z"/></symbol><use href="#ai:local:tech-typescript"></use>  </svg> <span class="text-muted group-hover:text-fg text-center text-sm font-medium transition-colors duration-200"> TypeScript </span> </div><div class="bg-surface/40 group flex flex-col items-center gap-3 rounded-2xl px-2 py-6 transition-all duration-200 hover:-translate-y-0.5 md:px-4" data-animate="fade-up"> <svg width="1em" height="1em" class="text-muted group-hover:text-fg size-8 transition-colors duration-200" aria-hidden="true" data-icon="tech-python">   <symbol id="ai:local:tech-python" viewBox="0 0 24 24"><path fill="currentColor" d="m14.25.18.9.2.73.26.59.3.45.32.34.34.25.34.16.33.1.3.04.26.02.2-.01.13V8.5l-.05.63-.13.55-.21.46-.26.38-.3.31-.33.25-.35.19-.35.14-.33.1-.3.07-.26.04-.21.02H8.77l-.69.05-.59.14-.5.22-.41.27-.33.32-.27.35-.2.36-.15.37-.1.35-.07.32-.04.27-.02.21v3.06H3.17l-.21-.03-.28-.07-.32-.12-.35-.18-.36-.26-.36-.36-.35-.46-.32-.59-.28-.73-.21-.88-.14-1.05-.05-1.23.06-1.22.16-1.04.24-.87.32-.71.36-.57.4-.44.42-.33.42-.24.4-.16.36-.1.32-.05.24-.01h.16l.06.01h8.16v-.83H6.18l-.01-2.75-.02-.37.05-.34.11-.31.17-.28.25-.26.31-.23.38-.2.44-.18.51-.15.58-.12.64-.1.71-.06.77-.04.84-.02 1.27.05zm-6.3 1.98-.23.33-.08.41.08.41.23.34.33.22.41.09.41-.09.33-.22.23-.34.08-.41-.08-.41-.23-.33-.33-.22-.41-.09-.41.09zm13.09 3.95.28.06.32.12.35.18.36.27.36.35.35.47.32.59.28.73.21.88.14 1.04.05 1.23-.06 1.23-.16 1.04-.24.86-.32.71-.36.57-.4.45-.42.33-.42.24-.4.16-.36.09-.32.05-.24.02-.16-.01h-8.22v.82h5.84l.01 2.76.02.36-.05.34-.11.31-.17.29-.25.25-.31.24-.38.2-.44.17-.51.15-.58.13-.64.09-.71.07-.77.04-.84.01-1.27-.04-1.07-.14-.9-.2-.73-.25-.59-.3-.45-.33-.34-.34-.25-.34-.16-.33-.1-.3-.04-.25-.02-.2.01-.13v-5.34l.05-.64.13-.54.21-.46.26-.38.3-.32.33-.24.35-.2.35-.14.33-.1.3-.06.26-.04.21-.02.13-.01h5.84l.69-.05.59-.14.5-.21.41-.28.33-.32.27-.35.2-.36.15-.36.1-.35.07-.32.04-.28.02-.21V6.07h2.09l.14.01zm-6.47 14.25-.23.33-.08.41.08.41.23.33.33.23.41.08.41-.08.33-.23.23-.33.08-.41-.08-.41-.23-.33-.33-.23-.41-.08-.41.08z"/></symbol><use href="#ai:local:tech-python"></use>  </svg> <span class="text-muted group-hover:text-fg text-center text-sm font-medium transition-colors duration-200"> Python </span> </div><div class="bg-surface/40 group flex flex-col items-center gap-3 rounded-2xl px-2 py-6 transition-all duration-200 hover:-translate-y-0.5 md:px-4" data-animate="fade-up"> <svg width="1em" height="1em" class="text-muted group-hover:text-fg size-8 transition-colors duration-200" aria-hidden="true" data-icon="tech-graphql">   <symbol id="ai:local:tech-graphql" viewBox="0 0 24 24"><path fill="currentColor" d="M12.002 0a2.138 2.138 0 1 0 0 4.277 2.138 2.138 0 1 0 0-4.277m8.54 4.931a2.138 2.138 0 1 0 0 4.277 2.138 2.138 0 1 0 0-4.277m0 9.862a2.138 2.138 0 1 0 0 4.277 2.138 2.138 0 1 0 0-4.277m-8.54 4.931a2.138 2.138 0 1 0 0 4.276 2.138 2.138 0 1 0 0-4.276m-8.542-4.93a2.138 2.138 0 1 0 0 4.276 2.138 2.138 0 1 0 0-4.277zm0-9.863a2.138 2.138 0 1 0 0 4.277 2.138 2.138 0 1 0 0-4.277m8.542-3.378L2.953 6.777v10.448l9.049 5.224 9.047-5.224V6.777zm0 1.601 7.66 13.27H4.34zm-1.387.371L3.97 15.037V7.363zm2.774 0 6.646 3.838v7.674zM5.355 17.44h13.293l-6.646 3.836z"/></symbol><use href="#ai:local:tech-graphql"></use>  </svg> <span class="text-muted group-hover:text-fg text-center text-sm font-medium transition-colors duration-200"> GraphQL </span> </div><div class="bg-surface/40 group flex flex-col items-center gap-3 rounded-2xl px-2 py-6 transition-all duration-200 hover:-translate-y-0.5 md:px-4" data-animate="fade-up"> <svg width="1em" height="1em" class="text-muted group-hover:text-fg size-8 transition-colors duration-200" aria-hidden="true" data-icon="tech-react">   <symbol id="ai:local:tech-react" viewBox="0 0 24 24"><path fill="currentColor" d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236m2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38a2.17 2.17 0 0 0-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44a23.5 23.5 0 0 0-3.107-.534A24 24 0 0 0 12.769 4.7c1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442a23 23 0 0 0-3.113.538 15 15 0 0 1-.254-1.42c-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05q.684.704 1.36 1.564c-.44-.02-.89-.034-1.345-.034q-.691-.001-1.36.034c.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093q.61.874 1.183 1.86.557.961 1.018 1.946c-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87a25.6 25.6 0 0 1-4.412.005 27 27 0 0 1-1.183-1.86q-.557-.961-1.018-1.946a25 25 0 0 1 1.013-1.954c.38-.66.773-1.286 1.18-1.868A25 25 0 0 1 12 8.098zm-3.635.254c-.24.377-.48.763-.704 1.16q-.336.585-.635 1.174c-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0q1.044.153 2.006.387c-.18.632-.405 1.282-.66 1.933a26 26 0 0 0-1.345-2.32zm3.063.675q.727.226 1.375.498c1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493a24 24 0 0 0-1.1-2.98c.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98a23 23 0 0 0-1.086 2.964c-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474s1.12-1.742 2.852-2.476c.42-.18.88-.342 1.356-.494m11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39a26 26 0 0 0 1.341-2.338zm-9.945.02c.2.392.41.783.64 1.175q.345.586.705 1.143a22 22 0 0 1-2.006-.386c.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295a1.2 1.2 0 0 1-.553-.132c-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64q.661.032 1.345.034.691.001 1.36-.034c-.44.572-.895 1.095-1.345 1.565q-.684-.706-1.36-1.565"/></symbol><use href="#ai:local:tech-react"></use>  </svg> <span class="text-muted group-hover:text-fg text-center text-sm font-medium transition-colors duration-200"> React </span> </div><div class="bg-surface/40 group flex flex-col items-center gap-3 rounded-2xl px-2 py-6 transition-all duration-200 hover:-translate-y-0.5 md:px-4" data-animate="fade-up"> <svg width="1em" height="1em" class="text-muted group-hover:text-fg size-8 transition-colors duration-200" aria-hidden="true" data-icon="tech-tailwindcss">   <symbol id="ai:local:tech-tailwindcss" viewBox="0 0 24 24"><path fill="currentColor" d="M12.001 4.8q-4.8 0-6 4.8 1.8-2.4 4.2-1.8c.913.228 1.565.89 2.288 1.624C13.666 10.618 15.027 12 18.001 12q4.8 0 6-4.8-1.8 2.4-4.2 1.8c-.913-.228-1.565-.89-2.288-1.624C16.337 6.182 14.976 4.8 12.001 4.8m-6 7.2q-4.8 0-6 4.8 1.8-2.4 4.2-1.8c.913.228 1.565.89 2.288 1.624 1.177 1.194 2.538 2.576 5.512 2.576q4.8 0 6-4.8-1.8 2.4-4.2 1.8c-.913-.228-1.565-.89-2.288-1.624C10.337 13.382 8.976 12 6.001 12"/></symbol><use href="#ai:local:tech-tailwindcss"></use>  </svg> <span class="text-muted group-hover:text-fg text-center text-sm font-medium transition-colors duration-200"> Tailwind CSS </span> </div><div class="bg-surface/40 group flex flex-col items-center gap-3 rounded-2xl px-2 py-6 transition-all duration-200 hover:-translate-y-0.5 md:px-4" data-animate="fade-up"> <svg width="1em" height="1em" class="text-muted group-hover:text-fg size-8 transition-colors duration-200" aria-hidden="true" data-icon="tech-nodejs">   <symbol id="ai:local:tech-nodejs" viewBox="0 0 24 24"><path fill="currentColor" d="M11.998 24c-.321 0-.641-.084-.922-.247L8.14 22.016c-.438-.245-.224-.332-.08-.383.585-.203.703-.25 1.328-.604.065-.037.151-.023.218.017l2.256 1.339a.29.29 0 0 0 .272 0l8.795-5.076a.28.28 0 0 0 .134-.238V6.921a.28.28 0 0 0-.137-.242l-8.791-5.072a.28.28 0 0 0-.271 0L3.075 6.68a.28.28 0 0 0-.139.241v10.15a.27.27 0 0 0 .139.235l2.409 1.392c1.307.654 2.108-.116 2.108-.89V7.787c0-.142.114-.253.256-.253h1.115c.139 0 .255.112.255.253v10.021c0 1.745-.95 2.745-2.604 2.745-.508 0-.909 0-2.026-.551L2.28 18.675a1.86 1.86 0 0 1-.922-1.604V6.921c0-.659.353-1.275.922-1.603L11.075.236a1.93 1.93 0 0 1 1.848 0l8.794 5.082c.57.329.924.944.924 1.603v10.15a1.86 1.86 0 0 1-.924 1.604l-8.794 5.078c-.28.163-.599.247-.925.247m7.101-10.007c0-1.9-1.284-2.406-3.987-2.763-2.731-.361-3.009-.548-3.009-1.187 0-.528.235-1.233 2.258-1.233 1.807 0 2.473.389 2.747 1.607a.254.254 0 0 0 .247.199h1.141a.26.26 0 0 0 .186-.081.26.26 0 0 0 .067-.196c-.177-2.098-1.571-3.076-4.388-3.076-2.508 0-4.004 1.058-4.004 2.833 0 1.925 1.488 2.457 3.895 2.695 2.88.282 3.103.703 3.103 1.269 0 .983-.789 1.402-2.642 1.402-2.327 0-2.839-.584-3.011-1.742a.255.255 0 0 0-.253-.215h-1.137a.25.25 0 0 0-.254.253c0 1.482.806 3.248 4.655 3.248 2.788.001 4.386-1.096 4.386-3.013"/></symbol><use href="#ai:local:tech-nodejs"></use>  </svg> <span class="text-muted group-hover:text-fg text-center text-sm font-medium transition-colors duration-200"> Node.js </span> </div><div class="bg-surface/40 group flex flex-col items-center gap-3 rounded-2xl px-2 py-6 transition-all duration-200 hover:-translate-y-0.5 md:px-4" data-animate="fade-up"> <svg width="1em" height="1em" class="text-muted group-hover:text-fg size-8 transition-colors duration-200" aria-hidden="true" data-icon="tech-astro">   <symbol id="ai:local:tech-astro" viewBox="0 0 24 24"><path fill="currentColor" d="M8.358 20.162c-1.186-1.07-1.532-3.316-1.038-4.944.856 1.026 2.043 1.352 3.272 1.535 1.897.283 3.76.177 5.522-.678.202-.098.388-.229.608-.36.166.473.209.95.151 1.437-.14 1.185-.738 2.1-1.688 2.794-.38.277-.782.525-1.175.787-1.205.804-1.531 1.747-1.078 3.119l.044.148a3.16 3.16 0 0 1-1.407-1.188 3.3 3.3 0 0 1-.544-1.815c-.004-.32-.004-.642-.048-.958-.106-.769-.472-1.113-1.161-1.133-.707-.02-1.267.411-1.415 1.09-.012.053-.028.104-.045.165zm-5.961-4.445s3.24-1.575 6.49-1.575l2.451-7.565c.092-.366.36-.614.662-.614s.57.248.662.614l2.45 7.565c3.85 0 6.491 1.575 6.491 1.575L16.088.727C15.93.285 15.663 0 15.303 0H8.697c-.36 0-.615.285-.784.727z"/></symbol><use href="#ai:local:tech-astro"></use>  </svg> <span class="text-muted group-hover:text-fg text-center text-sm font-medium transition-colors duration-200"> Astro </span> </div><div class="bg-surface/40 group flex flex-col items-center gap-3 rounded-2xl px-2 py-6 transition-all duration-200 hover:-translate-y-0.5 md:px-4" data-animate="fade-up"> <svg width="1em" height="1em" class="text-muted group-hover:text-fg size-8 transition-colors duration-200" aria-hidden="true" data-icon="tech-postgresql">   <symbol id="ai:local:tech-postgresql" viewBox="0 0 24 24"><path fill="currentColor" d="M23.56 14.723a.5.5 0 0 0-.057-.12q-.21-.395-1.007-.231c-1.654.34-2.294.13-2.526-.02 1.342-2.048 2.445-4.522 3.041-6.83.272-1.05.798-3.523.122-4.73a1.6 1.6 0 0 0-.15-.236C21.693.91 19.8.025 17.51.001c-1.495-.016-2.77.346-3.116.479a10 10 0 0 0-.516-.082 8 8 0 0 0-1.312-.127c-1.182-.019-2.203.264-3.05.84C8.66.79 4.729-.534 2.296 1.19.935 2.153.309 3.873.43 6.304c.041.818.507 3.334 1.243 5.744q.69 2.26 1.433 3.582.83 1.493 1.714 1.79c.448.148 1.133.143 1.858-.729a56 56 0 0 1 1.945-2.206c.435.235.906.362 1.39.377v.004a11 11 0 0 0-.247.305c-.339.43-.41.52-1.5.745-.31.064-1.134.233-1.146.811a.6.6 0 0 0 .091.327c.227.423.922.61 1.015.633 1.335.333 2.505.092 3.372-.679-.017 2.231.077 4.418.345 5.088.221.553.762 1.904 2.47 1.904q.375.001.829-.094c1.782-.382 2.556-1.17 2.855-2.906.15-.87.402-2.875.539-4.101.017-.07.036-.12.057-.136 0 0 .07-.048.427.03l.044.007.254.022.015.001c.847.039 1.911-.142 2.531-.43.644-.3 1.806-1.033 1.595-1.67M2.37 11.876c-.744-2.435-1.178-4.885-1.212-5.571-.109-2.172.417-3.683 1.562-4.493 1.837-1.299 4.84-.54 6.108-.13l-.01.01C6.795 3.734 6.843 7.226 6.85 7.44c0 .082.006.199.016.36.034.586.1 1.68-.074 2.918-.16 1.15.194 2.276.973 3.089q.12.126.252.237c-.347.371-1.1 1.193-1.903 2.158-.568.682-.96.551-1.088.508-.392-.13-.813-.587-1.239-1.322-.48-.839-.963-2.032-1.415-3.512m6.007 5.088a1.6 1.6 0 0 1-.432-.178c.089-.039.237-.09.483-.14 1.284-.265 1.482-.451 1.915-1a8 8 0 0 1 .367-.443.4.4 0 0 0 .074-.13c.17-.151.272-.11.436-.042.156.065.308.26.37.475.03.102.062.295-.045.445-.904 1.266-2.222 1.25-3.168 1.013m2.094-3.988-.052.14c-.133.357-.257.689-.334 1.004-.667-.002-1.317-.288-1.81-.803-.628-.655-.913-1.566-.783-2.5.183-1.308.116-2.447.08-3.059l-.013-.22c.296-.262 1.666-.996 2.643-.772.446.102.718.406.83.928.585 2.704.078 3.83-.33 4.736a9 9 0 0 0-.23.546m7.364 4.572q-.024.266-.062.596l-.146.438a.4.4 0 0 0-.018.108c-.006.475-.054.649-.115.87a4.8 4.8 0 0 0-.18 1.057c-.11 1.414-.878 2.227-2.417 2.556-1.515.325-1.784-.496-2.02-1.221a7 7 0 0 0-.078-.227c-.215-.586-.19-1.412-.157-2.555.016-.561-.025-1.901-.33-2.646q.006-.44.019-.892a.4.4 0 0 0-.016-.113 2 2 0 0 0-.044-.208c-.122-.428-.42-.786-.78-.935-.142-.059-.403-.167-.717-.087.067-.276.183-.587.309-.925l.053-.142c.06-.16.134-.325.213-.5.426-.948 1.01-2.246.376-5.178-.237-1.098-1.03-1.634-2.232-1.51-.72.075-1.38.366-1.709.532a6 6 0 0 0-.196.104c.092-1.106.439-3.174 1.736-4.482a4 4 0 0 1 .303-.276.35.35 0 0 0 .145-.064c.752-.57 1.695-.85 2.802-.833q.616.01 1.174.081c1.94.355 3.244 1.447 4.036 2.383.814.962 1.255 1.931 1.431 2.454-1.323-.134-2.223.127-2.68.78-.992 1.418.544 4.172 1.282 5.496.135.242.252.452.289.54.24.583.551.972.778 1.256.07.087.138.171.189.245-.4.116-1.12.383-1.055 1.717a35 35 0 0 1-.084.815c-.046.208-.07.46-.1.766m.89-1.621c-.04-.832.27-.919.597-1.01l.135-.041a1 1 0 0 0 .134.103c.57.376 1.583.421 3.007.134-.202.177-.519.4-.953.601-.41.19-1.096.333-1.747.364-.72.034-1.086-.08-1.173-.151m.57-9.271a7 7 0 0 1-.105 1.001c-.055.358-.112.728-.127 1.177-.014.436.04.89.093 1.33.107.887.216 1.8-.207 2.701a4 4 0 0 1-.188-.385 8 8 0 0 0-.325-.617c-.616-1.104-2.057-3.69-1.32-4.744.38-.543 1.342-.566 2.179-.463m.228 7.013-.085-.107-.035-.044c.726-1.2.584-2.387.457-3.439-.052-.432-.1-.84-.088-1.222.013-.407.066-.755.118-1.092.064-.415.13-.844.111-1.35a.6.6 0 0 0 .012-.19c-.046-.486-.6-1.938-1.73-3.253a7.8 7.8 0 0 0-2.688-2.04A9.3 9.3 0 0 1 17.62.746c2.052.046 3.675.814 4.824 2.283a1 1 0 0 1 .067.1c.723 1.356-.276 6.275-2.987 10.54m-8.816-6.116c-.025.18-.31.423-.621.423l-.081-.006a.8.8 0 0 1-.506-.315c-.046-.06-.12-.178-.106-.285a.22.22 0 0 1 .093-.149c.118-.089.352-.122.61-.086.316.044.642.193.61.418m7.93-.411c.011.08-.049.2-.153.31a.72.72 0 0 1-.408.223l-.075.005c-.293 0-.541-.234-.56-.371-.024-.177.264-.31.56-.352.298-.042.612.009.636.185"/></symbol><use href="#ai:local:tech-postgresql"></use>  </svg> <span class="text-muted group-hover:text-fg text-center text-sm font-medium transition-colors duration-200"> PostgreSQL </span> </div><div class="bg-surface/40 group flex flex-col items-center gap-3 rounded-2xl px-2 py-6 transition-all duration-200 hover:-translate-y-0.5 md:px-4" data-animate="fade-up"> <svg width="1em" height="1em" class="text-muted group-hover:text-fg size-8 transition-colors duration-200" aria-hidden="true" data-icon="tech-mongodb">   <symbol id="ai:local:tech-mongodb" viewBox="0 0 24 24"><path fill="currentColor" d="M17.193 9.555c-1.264-5.58-4.252-7.414-4.573-8.115-.28-.394-.53-.954-.735-1.44-.036.495-.055.685-.523 1.184-.723.566-4.438 3.682-4.74 10.02-.282 5.912 4.27 9.435 4.888 9.884l.07.05A74 74 0 0 1 11.91 24h.481a29 29 0 0 1 .51-3.07c.417-.296.604-.463.85-.693a11.34 11.34 0 0 0 3.639-8.464c.01-.814-.103-1.662-.197-2.218m-5.336 8.195s0-8.291.275-8.29c.213 0 .49 10.695.49 10.695-.381-.045-.765-1.76-.765-2.405"/></symbol><use href="#ai:local:tech-mongodb"></use>  </svg> <span class="text-muted group-hover:text-fg text-center text-sm font-medium transition-colors duration-200"> MongoDB </span> </div><div class="bg-surface/40 group flex flex-col items-center gap-3 rounded-2xl px-2 py-6 transition-all duration-200 hover:-translate-y-0.5 md:px-4" data-animate="fade-up"> <svg width="1em" height="1em" class="text-muted group-hover:text-fg size-8 transition-colors duration-200" aria-hidden="true" data-icon="tech-supabase">   <symbol id="ai:local:tech-supabase" viewBox="0 0 24 24"><path fill="currentColor" d="M11.9 1.036c-.015-.986-1.26-1.41-1.874-.637L.764 12.05C-.33 13.427.65 15.455 2.409 15.455h9.579l.113 7.51c.014.985 1.259 1.408 1.873.636l9.262-11.653c1.093-1.375.113-3.403-1.645-3.403h-9.642z"/></symbol><use href="#ai:local:tech-supabase"></use>  </svg> <span class="text-muted group-hover:text-fg text-center text-sm font-medium transition-colors duration-200"> Supabase </span> </div><div class="bg-surface/40 group flex flex-col items-center gap-3 rounded-2xl px-2 py-6 transition-all duration-200 hover:-translate-y-0.5 md:px-4" data-animate="fade-up"> <svg width="1em" height="1em" class="text-muted group-hover:text-fg size-8 transition-colors duration-200" aria-hidden="true" data-icon="tech-sentry">   <symbol id="ai:local:tech-sentry" viewBox="0 0 24 24"><path fill="currentColor" d="M13.91 2.505c-.873-1.448-2.972-1.448-3.844 0L6.904 7.92a15.48 15.48 0 0 1 8.53 12.811h-2.221A13.3 13.3 0 0 0 5.784 9.814l-2.926 5.06a7.65 7.65 0 0 1 4.435 5.848H2.194a.365.365 0 0 1-.298-.534l1.413-2.402a5.2 5.2 0 0 0-1.614-.913L.296 19.275a2.18 2.18 0 0 0 .812 2.999 2.24 2.24 0 0 0 1.086.288h6.983a9.32 9.32 0 0 0-3.845-8.318l1.11-1.922a11.47 11.47 0 0 1 4.95 10.24h5.915a17.24 17.24 0 0 0-7.885-15.28l2.244-3.845a.37.37 0 0 1 .504-.13c.255.14 9.75 16.708 9.928 16.9a.365.365 0 0 1-.327.543h-2.287q.043.918 0 1.831h2.297a2.206 2.206 0 0 0 1.922-3.31z"/></symbol><use href="#ai:local:tech-sentry"></use>  </svg> <span class="text-muted group-hover:text-fg text-center text-sm font-medium transition-colors duration-200"> Sentry </span> </div><div class="bg-surface/40 group flex flex-col items-center gap-3 rounded-2xl px-2 py-6 transition-all duration-200 hover:-translate-y-0.5 md:px-4" data-animate="fade-up"> <svg width="1em" height="1em" class="text-muted group-hover:text-fg size-8 transition-colors duration-200" aria-hidden="true" data-icon="tech-github">   <symbol id="ai:local:tech-github" viewBox="0 0 24 24"><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></symbol><use href="#ai:local:tech-github"></use>  </svg> <span class="text-muted group-hover:text-fg text-center text-sm font-medium transition-colors duration-200"> GitHub </span> </div> </div> <p class="text-muted mt-10 max-w-2xl text-base" data-animate="fade-up">
These are the tools I reach for most — but the stack is always chosen for your product, not my
    resume. I adapt to what your team and codebase need.
</p> </section> <section id="process"> <div class="bg-mantle"> <div class="container mx-auto max-w-300 px-8 py-24 md:py-36"> <div class="flex flex-col gap-6"> <p class="label" data-animate="fade-up">
Process
</p> <h2 data-animate="fade-up">From idea to reliable software</h2> <p class="text-muted max-w-2xl text-base md:text-lg" data-animate="fade-up">
A repeatable approach that keeps scope tight and momentum high.
</p> </div> <div class="mt-14 grid gap-6 sm:grid-cols-2 md:mt-20" data-stagger> <div class="bg-surface/40 group relative overflow-hidden rounded-2xl p-6 sm:p-8" data-animate="fade-up"> <span class="text-primary pointer-events-none absolute -top-4 -right-2 text-[8rem] leading-none font-black tracking-tighter opacity-[0.07] transition-opacity duration-300 select-none group-hover:opacity-10" aria-hidden="true"> 1 </span> <div class="relative flex flex-col gap-3"> <p class="label text-primary/60">Step 1</p> <h3 class="text-fg text-xl font-extrabold sm:text-2xl">Understand</h3> <p class="text-muted text-base leading-relaxed">We start with a focused discovery call to align on what matters most — your goals, constraints, and timeline.</p> </div> </div><div class="bg-surface/40 group relative overflow-hidden rounded-2xl p-6 sm:p-8" data-animate="fade-up"> <span class="text-primary pointer-events-none absolute -top-4 -right-2 text-[8rem] leading-none font-black tracking-tighter opacity-[0.07] transition-opacity duration-300 select-none group-hover:opacity-10" aria-hidden="true"> 2 </span> <div class="relative flex flex-col gap-3"> <p class="label text-primary/60">Step 2</p> <h3 class="text-fg text-xl font-extrabold sm:text-2xl">Plan</h3> <p class="text-muted text-base leading-relaxed">I trace a pragmatic path with measurable milestones. No over-engineering, no guesswork — just a clear plan you can trust.</p> </div> </div><div class="bg-surface/40 group relative overflow-hidden rounded-2xl p-6 sm:p-8" data-animate="fade-up"> <span class="text-primary pointer-events-none absolute -top-4 -right-2 text-[8rem] leading-none font-black tracking-tighter opacity-[0.07] transition-opacity duration-300 select-none group-hover:opacity-10" aria-hidden="true"> 3 </span> <div class="relative flex flex-col gap-3"> <p class="label text-primary/60">Step 3</p> <h3 class="text-fg text-xl font-extrabold sm:text-2xl">Build</h3> <p class="text-muted text-base leading-relaxed">I ship high-leverage work in tight feedback loops. You see progress every week, not after months of silence.</p> </div> </div><div class="bg-surface/40 group relative overflow-hidden rounded-2xl p-6 sm:p-8" data-animate="fade-up"> <span class="text-primary pointer-events-none absolute -top-4 -right-2 text-[8rem] leading-none font-black tracking-tighter opacity-[0.07] transition-opacity duration-300 select-none group-hover:opacity-10" aria-hidden="true"> 4 </span> <div class="relative flex flex-col gap-3"> <p class="label text-primary/60">Step 4</p> <h3 class="text-fg text-xl font-extrabold sm:text-2xl">Deliver</h3> <p class="text-muted text-base leading-relaxed">Clean handover, monitoring, and production support. Your team owns the code and can maintain it long after I leave.</p> </div> </div> </div> <div class="mt-14 flex justify-center md:mt-20" data-animate="fade-up"> <a target="_blank" rel="noopener noreferrer" href="https://cal.com/lukaszklis/intro" class="inline-flex items-center rounded-lg px-6 py-3 text-sm font-medium transition-all focus:outline-none focus-visible:ring-2 sm:text-base bg-primary focus-visible:ring-primary/40 text-crust shadow-[0_2px_4px_rgba(0,0,0,0.15),inset_0_1px_0_rgba(255,255,255,0.15)] hover:-translate-y-0.5 hover:shadow-[0_4px_12px_rgba(136,57,239,0.35)] active:translate-y-0 active:shadow-[0_1px_2px_rgba(0,0,0,0.1)]">
Book a call
</a> </div> </div> </div> </section> <section id="edge" class="overflow-hidden"> <div class="bg-crust"> <div class="container mx-auto max-w-300 px-8 py-24 md:py-36"> <div class="flex flex-col gap-6"> <p class="label" data-animate="fade-up">
What Sets Me Apart
</p> <h2 data-animate="fade-up">Why me</h2> </div> <div class="mt-14 grid gap-6 sm:grid-cols-2 md:mt-20 lg:grid-cols-3" data-stagger> <div class="bg-surface/40 flex flex-col gap-3 rounded-2xl p-6 sm:p-8" data-animate="fade-up"> <h3 class="text-fg text-xl font-extrabold">IC + Leadership hybrid</h3> <p class="text-muted text-base">Shipping code and leading architecture decisions — you get both.</p> </div> <div class="bg-surface/40 flex flex-col gap-3 rounded-2xl p-6 sm:p-8" data-animate="fade-up"> <h3 class="text-fg text-xl font-extrabold">Design-sensitive engineer</h3> <p class="text-muted text-base">Typography, layout, and pixels matter — design is not someone else&#39;s problem.</p> </div> <div class="bg-surface/40 flex flex-col gap-3 rounded-2xl p-6 sm:p-8" data-animate="fade-up"> <h3 class="text-fg text-xl font-extrabold">Product thinker, not a ticket executor</h3> <p class="text-muted text-base">Understanding why features matter, not just how to implement them.</p> </div> <div class="bg-surface/40 flex flex-col gap-3 rounded-2xl p-6 sm:p-8" data-animate="fade-up"> <h3 class="text-fg text-xl font-extrabold">Community builder</h3> <p class="text-muted text-base">CSSconf EU organizer, JSConf EU volunteer, Rails Girls coach.</p> </div> <div class="bg-surface/40 flex flex-col gap-3 rounded-2xl p-6 sm:p-8" data-animate="fade-up"> <h3 class="text-fg text-xl font-extrabold">Battle-tested in scale-up chaos</h3> <p class="text-muted text-base">Wimdu, rebuy, Coya, Surfer. No panic — just shipping.</p> </div> <div class="bg-surface/40 flex flex-col gap-3 rounded-2xl p-6 sm:p-8" data-animate="fade-up"> <h3 class="text-fg text-xl font-extrabold">Exceptional communicator</h3> <p class="text-muted text-base">Every testimonial mentions communication, proactivity, and clarity.</p> </div> </div> </div> </div> </section> <section id="contact" class="overflow-hidden"> <div class="bg-primary"> <div class="relative z-10 container mx-auto max-w-300 px-8 py-24 md:py-36" data-animate="fade-up"> <div class="flex max-w-2xl flex-col gap-10"> <div class="flex flex-col gap-5"> <h2 class="text-crust text-[clamp(2.5rem,7vw,5rem)] leading-[0.95] font-extrabold tracking-tight">
Ready to ship<br>faster and<br>build right?
</h2> <p class="text-crust/80 text-lg md:text-xl">
Every month without the right engineering partner is another month of accumulated debt
            and delayed launches. You bring the product vision — I bring the craft to make it real.
</p> </div> <div class="flex flex-wrap items-center gap-4"> <a href="https://cal.com/lukaszklis/intro" target="_blank" rel="noopener noreferrer" class="bg-crust text-primary inline-flex items-center rounded-lg px-8 py-4 text-base font-bold transition-all hover:-translate-y-0.5 hover:shadow-lg sm:text-lg">
Book a call
</a> <a href="mailto:hi@lukaszklis.com" class="text-crust ring-crust/30 hover:bg-crust/10 inline-flex items-center rounded-lg px-8 py-4 text-base font-medium ring-1 transition-all sm:text-lg">
Drop me an email
</a> </div> <div class="text-crust/50 flex flex-wrap items-center gap-x-8 gap-y-2 text-sm font-medium"> <a href="https://github.com/lukaszklis" target="_blank" rel="noopener noreferrer" class="hover:text-crust transition-colors">
GitHub
</a> <a href="https://www.linkedin.com/in/lukaszklis" target="_blank" rel="noopener noreferrer" class="hover:text-crust transition-colors">
LinkedIn
</a> </div> </div> </div> </div> </section>  </main> <footer class="text-muted flex flex-col gap-2 px-8 py-16 text-center text-sm"> <div>
&copy; 2026 Łukasz Kliś
</div> <div class="flex flex-wrap justify-center gap-x-4 gap-y-2"> <a href="/privacy-policy/" class="inline-flex underline decoration-current/25 decoration-2 underline-offset-4 transition-colors hover:decoration-current/60 text-fg/80 hover:text-fg text-sm"> 
Privacy Policy
 </a> <a href="/legal/" class="inline-flex underline decoration-current/25 decoration-2 underline-offset-4 transition-colors hover:decoration-current/60 text-fg/80 hover:text-fg text-sm"> 
Legal
 </a> </div> </footer> <script type="module">const t=new IntersectionObserver(e=>{e.forEach(r=>{r.isIntersecting&&(r.target.classList.add("is-visible"),t.unobserve(r.target))})},{threshold:.15,rootMargin:"0px 0px -60px 0px"});document.querySelectorAll("[data-stagger]").forEach(e=>{e.querySelectorAll(":scope > [data-animate]").forEach((r,a)=>{r.style.setProperty("--stagger-index",String(a))})});document.querySelectorAll("[data-animate]").forEach(e=>t.observe(e));</script> </body> </html>