1<!doctype html> 2<html lang="en"> 3 <head> 4 <!-- Google tag (gtag.js) - Explicit Consent --> 5
5<script src="/gtm.js" defer></script>
5 6 <meta charset="UTF-8" /> 7<!-- This site is hosted on Netlify. Anyone can build and deploy a site 8 like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=b5272470-b97f-4163-acdc-7d7f6b5e1764 9 Netlify hosting facts for this site: static/SSR served via Netlify Edge. --> 10 <meta 11 name="viewport" 12 content="width=device-width, initial-scale=1.0, viewport-fit=cover" 13 /> 14 <meta name="author" content="Dhruba Datta" /> 15 <meta 16 name="keywords" 17 content="ai engineer, product lead, full-stack developer, voice ai, llm automation, n8n, supabase, next.js, dhruba datta" 18 /> 19 20 <!-- 21 Home-page defaults. Tags marked data-default are replaced per route: 22 by the pre-render script at build time and by <Seo> on the client. 23 --> 24 25 26 27 <!-- Open Graph / Facebook --> 28 29 30 31 32 33 <!-- Twitter --> 34 35 36 37 38 39
39<script type="application/ld+json"> 40 { 41 "@context": "https://schema.org", 42 "@type": "Person", 43 "name": "Dhruba Datta", 44 "url": "https://dhruba-datta.netlify.app/", 45 "image": "https://dhruba-datta.netlify.app/images/Headshot.webp", 46 "jobTitle": "Research & Development Lead", 47 "worksFor": [ 48 { "@type": "Organization", "name": "Social Engagement Group" }, 49 { "@type": "Organization", "name": "Optify Transformation Partners" } 50 ], 51 "alumniOf": { "@type": "CollegeOrUniversity", "name": "Delhi Technological University" }, 52 "knowsAbout": ["Voice AI", "Large Language Models", "AI for Software Engineering", "Full-Stack Development", "Workflow Automation", "Product Management"], 53 "sameAs": [ 54 "https://www.linkedin.com/in/dhruba-datta/", 55 "https://github.com/dhruba-datta", 56 "https://scholar.google.co.uk/citations?user=RGxdIVkAAAAJ", 57 "https://leetcode.com/u/dhruba-datta/" 58 ] 59 } 60 </script>
60 61 62 <!-- Favicon --> 63 <link rel="icon" type="image/webp" href="/images/Headshot.webp" /> 64 65 <!-- Preconnect to external domains --> 66 <link rel="preconnect" href="https://fonts.googleapis.com" /> 67 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> 68 <link 69 href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800;900&display=swap" 70 rel="stylesheet" 71 media="print" 72 onload="this.media='all'" 73 /> 74
74<script type="module" crossorigin src="/assets/index-CMnRXDm6.js"></script>
74 75 <link rel="modulepreload" crossorigin href="/assets/vendor-react-D8ZVE-1i.js"> 76 <link rel="modulepreload" crossorigin href="/assets/vendor-motion-C0Ykwh7C.js"> 77 <link rel="modulepreload" crossorigin href="/assets/vendor-icons-CZ0fHw8h.js"> 78 <link rel="stylesheet" crossorigin href="/assets/index-CSH4LZe-.css"> 79 <link rel="preload" as="image" href="/images/logo.svg"/> 80 <link rel="preload" as="image" href="/images/projects/Optify-640.webp"/> 81 <link rel="preload" as="image" imageSrcSet="/images/projects/Optify-640.webp 640w, /images/projects/Optify.webp 1200w" imageSizes="(min-width: 1024px) 60vw, 100vw" fetchPriority="high"/> 82 <title>Optify | Dhruba Datta</title> 83 <meta name="description" content="AI transformation company site with shader visuals, an MDX journal and a build-time AI-search layer."/> 84 <link rel="canonical" href="https://dhruba-datta.netlify.app/projects/optify"/> 85 <meta property="og:type" content="article"/> 86 <meta property="og:url" content="https://dhruba-datta.netlify.app/projects/optify"/> 87 <meta property="og:title" content="Optify | Dhruba Datta"/> 88 <meta property="og:description" content="AI transformation company site with shader visuals, an MDX journal and a build-time AI-search layer."/> 89 <meta property="og:image" content="https://dhruba-datta.netlify.app/images/projects/Optify.webp"/> 90 <meta name="twitter:card" content="summary_large_image"/> 91 <meta name="twitter:url" content="https://dhruba-datta.netlify.app/projects/optify"/> 92 <meta name="twitter:title" content="Optify | Dhruba Datta"/> 93 <meta name="twitter:description" content="AI transformation company site with shader visuals, an MDX journal and a build-time AI-search layer."/> 94 <meta name="twitter:image" content="https://dhruba-datta.netlify.app/images/projects/Optify.webp"/> 95 </head> 96 97 <body> 98 <div id="root"><div class="dark"><div class="min-h-screen bg-white dark:bg-[#0a0f1c] transition-colors duration-300"><!--$--><div class="min-h-screen flex flex-col transition-colors duration-300 bg-white text-gray-900 dark dark:bg-[#0a0f1c] dark:text-white">
98<script type="application/ld+json">{"@context":"https://schema.org","@type":"CreativeWork","name":"Optify","description":"AI transformation company site with shader visuals, an MDX journal and a build-time AI-search layer.","image":"https://dhruba-datta.netlify.app/images/projects/Optify.webp","url":"https://dhruba-datta.netlify.app/projects/optify","datePublished":"2026","creator":{"@type":"Person","name":"Dhruba Datta","url":"https://dhruba-datta.netlify.app"},"keywords":"React 19, TypeScript, Vite 8, Tailwind 4, MDX, Vercel","sameAs":["https://optifyllc.com/"]}</script>
98<script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://dhruba-datta.netlify.app"},{"@type":"ListItem","position":2,"name":"Projects","item":"https://dhruba-datta.netlify.app/projects"},{"@type":"ListItem","position":3,"name":"Optify","item":"https://dhruba-datta.netlify.app/projects/optify"}]}</script>
98<header class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 pt-2 md:pt-4 pb-2 md:pb-4 bg-white/20 dark:bg-[#0a0f1c]/20 backdrop-blur-none"><nav class="mx-auto max-w-7xl px-4 md:px-6"><div class="flex items-center justify-between h-12 md:h-16"><div class="flex-shrink-0"><a class="flex items-center focus-override" aria-label="Dhruba Datta â home" href="/" data-discover="true"><div class="w-10 h-10 md:w-12 md:h-12 rounded-xl flex items-center justify-center overflow-hidden border border-white/40 dark:border-white/10 bg-white dark:bg-[#0a2240] backdrop-blur-md transition-all duration-300 hover:shadow-lg" style="box-shadow:0 4px 24px -1px rgba(31, 38, 135, 0.12)"><img src="/images/logo.svg" alt="" class="w-8 h-8 md:w-10 md:h-10 object-contain drop-shadow-lg" loading="lazy" decoding="async"/></div></a></div><div class="hidden md:flex items-center justify-center flex-1"><div class="flex items-center space-x-1 bg-gray-100/80 dark:bg-gray-800/80 rounded-full px-2 py-2 shadow-lg backdrop-blur-sm"><a class="flex items-center space-x-2 px-4 py-2.5 rounded-full text-base font-outfit font-medium transition-all duration-300 min-h-[44px] focus-override text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-white/60 dark:hover:bg-gray-700/60 hover:shadow-md" href="/" data-discover="true"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="w-4 h-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M19 21H5C4.44772 21 4 20.5523 4 20V11L1 11L11.3273 1.6115C11.7087 1.26475 12.2913 1.26475 12.6727 1.6115L23 11L20 11V20C20 20.5523 19.5523 21 19 21ZM13 19H18V9.15745L12 3.7029L6 9.15745V19H11V13H13V19Z"></path></svg><span>Home</span></a><a class="flex items-center space-x-2 px-4 py-2.5 rounded-full text-base font-outfit font-medium transition-all duration-300 min-h-[44px] focus-override text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-white/60 dark:hover:bg-gray-700/60 hover:shadow-md" href="/about" data-discover="true"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="w-4 h-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M19 7H24V9H19V7ZM17 12H24V14H17V12ZM20 17H24V19H20V17ZM2 22C2 17.5817 5.58172 14 10 14C14.4183 14 18 17.5817 18 22H16C16 18.6863 13.3137 16 10 16C6.68629 16 4 18.6863 4 22H2ZM10 13C6.685 13 4 10.315 4 7C4 3.685 6.685 1 10 1C13.315 1 16 3.685 16 7C16 10.315 13.315 13 10 13ZM10 11C12.21 11 14 9.21 14 7C14 4.79 12.21 3 10 3C7.79 3 6 4.79 6 7C6 9.21 7.79 11 10 11Z"></path></svg><span>About</span></a><a class="flex items-center space-x-2 px-4 py-2.5 rounded-full text-base font-outfit font-medium transition-all duration-300 min-h-[44px] focus-override text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-white/60 dark:hover:bg-gray-700/60 hover:shadow-md" href="/projects" data-discover="true"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg><span>Projects</span></a><a class="flex items-center space-x-2 px-4 py-2.5 rounded-full text-base font-outfit font-medium transition-all duration-300 min-h-[44px] focus-override text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-white/60 dark:hover:bg-gray-700/60 hover:shadow-md" href="/contact" data-discover="true"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="w-4 h-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke-width="2" d="M1,2 L22,2 L22,18 L14,18 L6,22 L6,18 L1,18 L1,2 Z M6,10 L7,10 L7,11 L6,11 L6,10 Z M11,10 L12,10 L12,11 L11,11 L11,10 Z M16,10 L17,10 L17,11 L16,11 L16,10 Z"></path></svg><span>Contact</span></a></div></div><div class="flex items-center space-x-2 md:space-x-4"><button class="p-2.5 md:p-2 rounded-lg bg-gray-100/80 dark:bg-gray-800/80 hover:bg-gray-200/80 dark:hover:bg-gray-700/80 transition-all duration-300 shadow-md hover:shadow-lg backdrop-blur-sm focus-override" aria-label="Switch to light theme"><svg class="w-4 h-4 md:w-5 md:h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"></path></svg></button><button class="md:hidden p-2.5 rounded-lg bg-gray-100/80 dark:bg-gray-800/80 hover:bg-gray-200/80 dark:hover:bg-gray-700/80 transition-all duration-300 shadow-md hover:shadow-lg backdrop-blur-sm focus-override" aria-label="Open menu"><div class="w-5 h-5 flex flex-col justify-center items-center relative"><span class="w-4 h-0.5 bg-gray-700 dark:bg-gray-300 absolute transition-all duration-200 rotate-0 -translate-y-1"></span><span class="w-4 h-0.5 bg-gray-700 dark:bg-gray-300 absolute transition-all duration-200 opacity-100"></span><span class="w-4 h-0.5 bg-gray-700 dark:bg-gray-300 absolute transition-all duration-200 rotate-0 translate-y-1"></span></div></button></div></div></nav></header><main class="flex-grow"><div class="relative isolate overflow-hidden"><div aria-hidden="true" class="absolute inset-0 -z-10 pointer-events-none"><img src="/images/projects/Optify-640.webp" alt="" class="absolute inset-0 h-full w-full object-cover scale-125 blur-3xl saturate-150 opacity-50 dark:opacity-70" decoding="async"/><img src="/images/projects/Optify.webp" srcSet="/images/projects/Optify-640.webp 640w, /images/projects/Optify.webp 1200w" sizes="(min-width: 1024px) 60vw, 100vw" alt="" class="absolute right-0 top-0 h-full w-full lg:w-[62%] object-cover object-right opacity-25 lg:opacity-45 dark:opacity-40 lg:dark:opacity-70 [mask-image:linear-gradient(to_right,transparent_48%,black_78%),linear-gradient(to_bottom,black_55%,transparent)] [mask-composite:intersect] [-webkit-mask-composite:source-in]" fetchPriority="high" decoding="async"/><div class="absolute inset-0 bg-gradient-to-b from-transparent via-white/40 to-white dark:via-[#0a0f1c]/30 dark:to-[#0a0f1c]"></div></div><div class="h-24 sm:h-28 md:h-32"></div><div class="container mx-auto px-4 sm:px-5 pt-2 sm:pt-3 pb-3 sm:pb-4 max-w-6xl"><nav aria-label="Breadcrumb" class="flex items-center gap-1.5 text-xs sm:text-sm font-outfit text-gray-500 dark:text-gray-400" style="transform:translateX(-20px)"><a class="hover:text-gray-900 dark:hover:text-gray-100 transition-colors focus-override" href="/" data-discover="true">Home</a><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" class="lucide lucide-chevron-right w-3 h-3 sm:w-3.5 sm:h-3.5 opacity-60" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg><a class="hover:text-gray-900 dark:hover:text-gray-100 transition-colors focus-override" href="/projects" data-discover="true">Projects</a><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" class="lucide lucide-chevron-right w-3 h-3 sm:w-3.5 sm:h-3.5 opacity-60" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg><span class="text-gray-900 dark:text-gray-100 font-medium truncate" aria-current="page">Optify</span></nav></div><header class="max-w-6xl mx-auto px-4 sm:px-6 -mt-1 md:-mt-2"><div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4 lg:gap-6"><div class="flex-1"><h1 class="text-gray-900 dark:text-gray-100">Optify</h1><p class="mt-3 sm:mt-4 text-sm sm:text-base lg:text-lg text-gray-500 dark:text-gray-400 max-w-3xl mb-3 sm:mb-4">Optify is an AI transformation company that builds AI automation, AI agents and AI strategy for businesses, with the message that AI should do the work while people stay in control. It needed a website that looks like an AI company and is easy for both search engines and AI assistants to read. I built the new optifyllc.com: a statically exported React site with shader-driven visuals, a journal written in MDX, and an SEO and AI-search layer that generates structured data, sitemaps, llms.txt and Markdown versions of every page at build time.</p><div class="mt-3 sm:mt-4 flex flex-wrap gap-1.5 sm:gap-2"><span class="inline-flex items-center gap-1 sm:gap-1.5 px-2 sm:px-3 py-1 sm:py-1.5 rounded-full text-[10px] sm:text-xs font-outfit font-medium border 99 border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 100 text-gray-700 dark:text-gray-300"><span class="text-gray-500 dark:text-gray-400"><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" class="w-3 sm:w-3.5 h-3 sm:h-3.5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path 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.236zm2.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.38-.318-.184-.688-.277-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.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.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.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.
100183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.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.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.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.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z"></path></svg></span>React 19</span><span class="inline-flex items-center gap-1 sm:gap-1.5 px-2 sm:px-3 py-1 sm:py-1.5 rounded-full text-[10px] sm:text-xs font-outfit font-medium border 101 border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 102 text-gray-700 dark:text-gray-300"><span class="text-gray-500 dark:text-gray-400"><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" class="w-3 sm:w-3.5 h-3 sm:h-3.5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path 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.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z"></path></svg></span>TypeScript</span><span class="inline-flex items-center gap-1 sm:gap-1.5 px-2 sm:px-3 py-1 sm:py-1.5 rounded-full text-[10px] sm:text-xs font-outfit font-medium border 103 border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 104 text-gray-700 dark:text-gray-300"><span class="text-gray-500 dark:text-gray-400"><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" class="w-3 sm:w-3.5 h-3 sm:h-3.5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="m8.286 10.578.512-8.657a.306.306 0 0 1 .247-.282L17.377.006a.306.306 0 0 1 .353.385l-1.558 5.403a.306.306 0 0 0 .352.385l2.388-.46a.306.306 0 0 1 .332.438l-6.79 13.55-.123.19a.294.294 0 0 1-.252.14c-.177 0-.35-.152-.305-.369l1.095-5.301a.306.306 0 0 0-.388-.355l-1.433.435a.306.306 0 0 1-.389-.354l.69-3.375a.306.306 0 0 0-.37-.36l-2.32.536a.306.306 0 0 1-.374-.316zm14.976-7.926L17.284 3.74l-.544 1.887 2.077-.4a.8.8 0 0 1 .84.369.8.8 0 0 1 .034.783L12.9 19.93l-.013.025-.015.023-.122.19a.801.801 0 0 1-.672.37.826.826 0 0 1-.634-.302.8.8 0 0 1-.16-.67l1.029-4.981-1.12.34a.81.81 0 0 1-.86-.262.802.802 0 0 1-.165-.67l.63-3.08-2.027.468a.808.808
1040 0 1-.768-.233.81.81 0 0 1-.217-.6l.389-6.57-7.44-1.33a.612.612 0 0 0-.64.906L11.58 23.691a.612.612 0 0 0 1.066-.004l11.26-20.135a.612.612 0 0 0-.644-.9z"></path></svg></span>Vite 8</span><span class="inline-flex items-center gap-1 sm:gap-1.5 px-2 sm:px-3 py-1 sm:py-1.5 rounded-full text-[10px] sm:text-xs font-outfit font-medium border 105 border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 106 text-gray-700 dark:text-gray-300"><span class="text-gray-500 dark:text-gray-400"><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" class="w-3 sm:w-3.5 h-3 sm:h-3.5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z"></path></svg></span>Tailwind 4</span><span class="inline-flex items-center gap-1 sm:gap-1.5 px-2 sm:px-3 py-1 sm:py-1.5 rounded-full text-[10px] sm:text-xs font-outfit font-medium border 107 border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 108 text-gray-700 dark:text-gray-300"><span class="text-gray-500 dark:text-gray-400"><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" class="w-3 sm:w-3.5 h-3 sm:h-3.5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M.79 7.12h22.42c.436 0 .79.355.79.792v8.176c0 .436-.354.79-.79.79H.79a.79.79 0 0 1-.79-.79V7.912a.79.79 0 0 1 .79-.791V7.12Zm2.507 7.605v-3.122l1.89 1.89L7.12 11.56v3.122h1.055v-5.67l-2.99 2.99L2.24 9.056v5.67h1.055v-.001Zm8.44-1.845-1.474-1.473-.746.746 2.747 2.747 2.745-2.747-.746-.746-1.473 1.473v-4h-1.054v4Zm10.041.987-2.175-2.175 2.22-2.22-.746-.746-2.22 2.22-2.22-2.22-.747.746 2.22 2.22-2.176 2.177.746.746 2.177-2.177 2.176 2.175.745-.746Z"></path></svg></span>MDX</span><span class="inline-flex items-center gap-1 sm:gap-1.5 px-2 sm:px-3 py-1 sm:py-1.5 rounded-full text-[10px] sm:text-xs font-outfit font-medium border 109 border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 110 text-gray-700 dark:text-gray-300"><span class="text-gray-500 dark:text-gray-400"><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" class="w-3 sm:w-3.5 h-3 sm:h-3.5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M24 22.525H0l12-21.05 12 21.05z"></path></svg></span>Vercel</span></div></div><div class="flex lg:hidden items-center gap-2 mt-4"><a href="https://optifyllc.com/" target="_blank" rel="noopener noreferrer" class="flex-1 inline-flex items-center justify-center gap-2 h-11 px-4 rounded-xl 111 border border-blue-200 dark:border-blue-600 bg-blue-50 dark:bg-blue-900/20 112 text-blue-700 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-900/30 transition focus-override text-sm font-medium group font-outfit" tabindex="0">Check it out<div class="relative w-3.5 h-3.5 overflow-hidden"><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" class="lucide lucide-external-link absolute inset-0 w-full h-full transition-all duration-300 group-hover:-translate-y-full" aria-hidden="true"><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><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" class="lucide lucide-external-link absolute inset-0 w-full h-full transition-all duration-300 translate-y-full group-hover:translate-y-0" aria-hidden="true"><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></div></a></div><div class="hidden lg:flex items-center gap-2 md:gap-3"><a href="https://optifyllc.com/" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1.5 lg:gap-2 whitespace-nowrap px-3 lg:px-4 py-2 lg:py-2.5 rounded-full text-sm lg:text-base font-outfit 113 border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 114 text-gray-800 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 transition focus-override group" tabindex="0">Check it out<div class="relative w-3.5 h-3.5 lg:w-4 lg:h-4 overflow-hidden"><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" class="lucide lucide-external-link absolute inset-0 w-full h-full transition-all duration-300 group-hover:-translate-y-full" aria-hidden="true"><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><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" class="lucide lucide-external-link absolute inset-0 w-full h-full transition-all duration-300 translate-y-full group-hover:translate-y-0" aria-hidden="true"><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></div></a></div></div></header><div class="h-8 sm:h-10 md:h-12"></div></div><div class="max-w-6xl mx-auto px-4 md:px-6 mt-6 sm:mt-8 md:mt-10 grid grid-cols-1 lg:grid-cols-[1fr_260px] gap-8 sm:gap-10 md:gap-12 lg:gap-14"><div class="min-w-0"><details class="lg:hidden mb-6 sm:mb-8 group rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50/60 dark:bg-gray-800/40 open:bg-gray-50 dark:open:bg-gray-800/60 transition-colors"><summary class="flex items-center justify-between gap-2 px-4 py-3 cursor-pointer list-none text-sm font-outfit font-medium text-gray-700 dark:text-gray-300"><span class="inline-flex items-center gap-2"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" class="w-3.5 h-3.5 text-gray-400" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M120 230h496c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm0 424h496c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm784 140H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0-424H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z"></path></svg>On this page</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" class="lucide lucide-chevron-down w-4 h-4 text-gray-400 transition-transform group-open:rotate-180" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></summary><nav class="px-2 pb-2"><button class="w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm text-left text-gray-600 dark:text-gray-300 hover:bg-white dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 transition-colors focus-override font-outfit"><span class="text-gray-400"><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" class="lucide lucide-activity w-3.5 sm:w-4 h-3.5 sm:h-4" aria-hidden="true"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l
114-2.35 8.36A2 2 0 0 1 4.49 12H2"></path></svg></span>Feature Highlights</button><button class="w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm text-left text-gray-600 dark:text-gray-300 hover:bg-white dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 transition-colors focus-override font-outfit"><span class="text-gray-400"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" class="w-3.5 sm:w-4 h-3.5 sm:h-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M5.5 2A3.5 3.5 0 0 0 2 5.5v5A3.5 3.5 0 0 0 5.5 14h5a3.5 3.5 0 0 0 3.5-3.5V8a.5.5 0 0 1 1 0v2.5a4.5 4.5 0 0 1-4.5 4.5h-5A4.5 4.5 0 0 1 1 10.5v-5A4.5 4.5 0 0 1 5.5 1H8a.5.5 0 0 1 0 1z"></path><path d="M16 3a3 3 0 1 1-6 0 3 3 0 0 1 6 0"></path></svg></span>Stack</button><button class="w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm text-left text-gray-600 dark:text-gray-300 hover:bg-white dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 transition-colors focus-override font-outfit"><span class="text-gray-400"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="w-3.5 sm:w-4 h-3.5 sm:h-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M20 7h-9"></path><path d="M14 17H5"></path><circle cx="17" cy="17" r="3"></circle><circle cx="7" cy="7" r="3"></circle></svg></span>Use Cases</button><button class="w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm text-left text-gray-600 dark:text-gray-300 hover:bg-white dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 transition-colors focus-override font-outfit"><span class="text-gray-400"><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" class="lucide lucide-file-json w-3.5 sm:w-4 h-3.5 sm:h-4" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 12a1 1 0 0 0-1 1v1a1 1 0 0 1-1 1 1 1 0 0 1 1 1v1a1 1 0 0 0 1 1"></path><path d="M14 18a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1 1 1 0 0 1-1-1v-1a1 1 0 0 0-1-1"></path></svg></span>How to Use</button></nav></details><article class="space-y-12 sm:space-y-16 md:space-y-20"><section id="highlights" class="scroll-mt-24 sm:scroll-mt-28"><div class="flex items-center gap-2 mb-3 sm:mb-4" style="opacity:0"><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" class="lucide lucide-activity w-4 h-4 sm:w-5 sm:h-5 shrink-0 text-blue-500" aria-hidden="true"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"></path></svg><h2 class="text-xl sm:text-2xl md:text-2xl lg:text-3xl font-bold text-gray-900 dark:text-gray-100">Feature Highlights</h2></div><div class="rounded-xl sm:rounded-2xl overflow-hidden border border-blue-200 dark:border-gray-700 bg-blue-50/50 dark:bg-gray-800"><div class="border-b last:border-none border-blue-200 dark:border-gray-700 bg-blue-50/30 dark:bg-gray-800"><button class="w-full flex items-center justify-between gap-3 sm:gap-4 p-3 sm:p-4 text-left hover:bg-blue-100/50 dark:hover:bg-gray-700 transition" tabindex="0"><div class="flex items-start gap-2 sm:gap-3"><div class="mt-0.5 text-blue-500 text-sm sm:text-base"><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" class="lucide lucide-sparkles w-4 sm:w-5 h-4 sm:h-5" aria-hidden="true"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg></div><div class="min-w-0 flex-1"><p class="font-bold text-gray-900 dark:text-gray-100">Shader-Driven Visual System</p></div></div><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" class="lucide lucide-chevron-down w-4 h-4 text-gray-400 transition-transform duration-200 shrink-0 rotate-180" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button><div class="overflow-hidden" style="height:auto;opacity:1"><div class="px-4 sm:px-6 pb-4 sm:pb-5 pt-0"><p class="mb-3 text-xs sm:text-sm text-gray-600 dark:text-gray-300">WebGL/WebGPU shader backgrounds and scroll-driven motion</p><ul class="space-y-2"><li class="flex items-start gap-2 sm:gap-3 text-xs sm:text-sm text-gray-700 dark:text-gray-300" style="opacity:1;transform:none"><div class="w-1.5 h-1.5 rounded-full bg-blue-500 mt-1.5 sm:mt-2 shrink-0"></div><span class="leading-relaxed">Animated shader backgrounds built with Paper Design shaders</span></li><li class="flex items-start gap-2 sm:gap-3 text-xs sm:text-sm text-gray-700 dark:text-gray-300" style="opacity:1;transform:none"><div class="w-1.5 h-1.5 rounded-full bg-blue-500 mt-1.5 sm:mt-2 shrink-0"></div><span class="leading-relaxed">Scroll reveal, stacked-card scroll and a journal carousel built on IntersectionObserver</span></li><li class="flex items-start gap-2 sm:gap-3 text-xs sm:text-sm text-gray-700 dark:text-gray-300" style="opacity:1;transform:none"><div class="w-1.5 h-1.5 rounded-full bg-blue-500 mt-1.5 sm:mt-2 shrink-0"></div><span class="leading-relaxed">Services (AI Automation, AI Agents, AI Strategy &
114 Implementation) and solutions for sales, customer operations, back office and knowledge</span></li><li class="flex items-start gap-2 sm:gap-3 text-xs sm:text-sm text-gray-700 dark:text-gray-300" style="opacity:1;transform:none"><div class="w-1.5 h-1.5 rounded-full bg-blue-500 mt-1.5 sm:mt-2 shrink-0"></div><span class="leading-relaxed">A custom retro-TV 404 page</span></li></ul></div></div></div><div class="border-b last:border-none border-blue-200 dark:border-gray-700 bg-blue-50/30 dark:bg-gray-800"><button class="w-full flex items-center justify-between gap-3 sm:gap-4 p-3 sm:p-4 text-left hover:bg-blue-100/50 dark:hover:bg-gray-700 transition" tabindex="0"><div class="flex items-start gap-2 sm:gap-3"><div class="mt-0.5 text-blue-500 text-sm sm:text-base"><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" class="lucide lucide-bot w-4 sm:w-5 h-4 sm:h-5" aria-hidden="true"><path d="M12 8V4H8"></path><rect width="16" height="12" x="4" y="8" rx="2"></rect><path d="M2 14h2"></path><path d="M20 14h2"></path><path d="M15 13v2"></path><path d="M9 13v2"></path></svg></div><div class="min-w-0 flex-1"><p class="font-bold text-gray-900 dark:text-gray-100">Built for AI Search</p><div class="text-xs sm:text-sm text-gray-600 dark:text-gray-300 mt-1">Every page is published in a form AI assistants can read directly</div></div></div><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" class="lucide lucide-chevron-down w-4 h-4 text-gray-400 transition-transform duration-200 shrink-0" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></div><div class="border-b last:border-none border-blue-200 dark:border-gray-700 bg-blue-50/30 dark:bg-gray-800"><button class="w-full flex items-center justify-between gap-3 sm:gap-4 p-3 sm:p-4 text-left hover:bg-blue-100/50 dark:hover:bg-gray-700 transition" tabindex="0"><div class="flex items-start gap-2 sm:gap-3"><div class="mt-0.5 text-blue-500 text-sm sm:text-base"><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" class="lucide lucide-search w-4 sm:w-5 h-4 sm:h-5" aria-hidden="true"><path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg></div><div class="min-w-0 flex-1"><p class="font-bold text-gray-900 dark:text-gray-100">Structured Data & SEO</p><div class="text-xs sm:text-sm text-gray-600 dark:text-gray-300 mt-1">Per-page metadata and JSON-LD for the company, pages and articles</div></div></div><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" class="lucide lucide-chevron-down w-4 h-4 text-gray-400 transition-transform duration-200 shrink-0" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></div><div class="border-b last:border-none border-blue-200 dark:border-gray-700 bg-blue-50/30 dark:bg-gray-800"><button class="w-full flex items-center justify-between gap-3 sm:gap-4 p-3 sm:p-4 text-left hover:bg-blue-100/50 dark:hover:bg-gray-700 transition" tabindex="0"><div class="flex items-start gap-2 sm:gap-3"><div class="mt-0.5 text-blue-500 text-sm sm:text-base"><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" class="lucide lucide-file-text w-4 sm:w-5 h-4 sm:h-5" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg></div><div class="min-w-0 flex-1"><p class="font-bold text-gray-900 dark:text-gray-100">MDX Journal</p><div class="text-xs sm:text-sm text-gray-600 dark:text-gray-300 mt-1">A journal of notes written in MDX and compiled at build time</div></div></div><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" class="lucide lucide-chevron-down w-4 h-4 text-gray-400 transition-transform duration-200 shrink-0" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></div><div class="border-b last:border-none border-blue-200 dark:border-gray-700 bg-blue-50/30 dark:bg-gray-800"><button class="w-full flex items-center justify-between gap-3 sm:gap-4 p-3 sm:p-4 text-left hover:bg-blue-100/50 dark:hover:bg-gray-700 transition" tabindex="0"><div class="flex items-start gap-2 sm:gap-3"><div class="mt-0.5 text-blue-500 text-sm sm:text-base"><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" class="lucide lucide-route w-4 sm:w-5 h-4 sm:h-5" aria-hidden="true"><circle cx="6" cy="19" r="3"></circle><path d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15"></path><circle cx="18" cy="5" r="3"></circle></svg></div><div class="min-w-0 flex-1"><p class="font-bold text-gray-900 dark:text-gray-100">Clean Migration From WordPress</p><div class="text-xs sm:text-sm text-gray-600 dark:text-gray-300 mt-1">Old URLs handled so the move kept search equity</div></div></div><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" class="lucide lucide-chevron-down w-4 h-4 text-gray-400 transition-transform duration-200 shrink-0" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></div><div class="border-b last:border-none border-blue-200 dark:border-gray-700 bg-blue-50/30 dark:bg-gray-800"><button class="w-full flex items-center justify-between gap-3 sm:gap-4 p-3 sm:p-4 text-left hover:bg-blue-100/50 dark:hover:bg-gray-700 transition" tabindex="0"><div class="flex items-start gap-2 sm:gap-3"><div class="mt-0.5 text-blue-500 text-sm sm:text-base"><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" class="lucide lucide-shield-check w-4 sm:w-5 h-4 sm:h-5" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path><path d="m9 12 2 2 4-4"></path></svg></div><div class="min-w-0 flex-1"><p class="font-bold text-gray-900 dark:text-gray-100">Security Headers</p><div class="text-xs sm:text-sm text-gray-600 dark:text-gray-300 mt-1">A locked-down static site with strict headers</div></div></div><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" class="lucide lucide-chevron-down w-4 h-4 text-gray-400 transition-transform duration-200 shrink-0" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></div><div class="border-b last:border-none border-blue-200 dark:border-gray-700 bg-blue-50/30 dark:bg-gray-800"><button class="w-full flex items-center justify-between gap-3 sm:gap-4 p-3 sm:p-4 text-left hover:bg-blue-100/50 dark:hover:bg-gray-700 transition" tabindex="0"><div class="flex items-start gap-2 sm:gap-3"><div class="mt-0.5 text-blue-500 text-sm sm:text-base"><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" class="lucide lucide-toggle-left w-4 sm:w-5 h-4 sm:h-5" aria-hidden="true"><circle cx="9" cy="12" r="3"></circle><rect width="20" height="14" x="2" y="5" rx="7"></rect></svg></div><div class="min-w-0 flex-1"><p class="font-bold text-gray-900 dark:text-gray-100">Section Visibility Flags</p><div class="text-xs sm:text-sm text-gray-600 dark:text-gray-300 mt-1">Sections and routes can be switched on or off from one file</div></div></div><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" class="lucide lucide-chevron-down w-4 h-4 text-gray-400 transition-transform duration-200 shrink-0" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></div><div class="border-b last:border-none border-blue-200 dark:border-gray-700 bg-blue-50/30 dark:bg-gray-800"><button class="w-full flex items-center justify-between gap-3 sm:gap-4 p-3 sm:p-4 text-left hover:bg-blue-100/50 dark:hover:bg-gray-700 transition" tabindex="0"><div class="flex items-start gap-2 sm:gap-3"><div class="mt-0.5 text-blue-500 text-sm sm:text-base"><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" class="lucide lucide-test-tube-diagonal w-4 sm:w-5 h-4 sm:h-5" aria-hidden="true"><path d="M21 7 6.82 21.18a2.83 2.83 0 0 1-3.99-.01a2.83 2.83 0 0 1 0-4L17 3"></path><path d="m16 2 6 6"></path><path d="M12 16H4"></path></svg></div><div class="min-w-0 flex-1"><p class="font-bold text-gray-900 dark:text-gray-100">Tested Build Output</p><div class="text-xs sm:text-sm text-gray-600 dark:text-gray-300 mt-1">Tests run against the built HTML, not just the source</div></div></div><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" class="lucide lucide-chevron-down w-4 h-4 text-gray-400 transition-transform duration-200 shrink-0" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></div></div></section><section id="tech" class="scroll-mt-24 sm:scroll-mt-28"><div class="flex items-center gap-2 mb-3 sm:mb-4" style="opacity:0"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" class="w-4 h-4 sm:w-5 sm:h-5 shrink-0 text-blue-500" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M5.5 2A3.5 3.5 0 0 0 2 5.5v5A3.5 3.5 0 0 0 5.5 14h5a3.5 3.5 0 0 0 3.5-3.5V8a.5.5 0 0 1 1 0v2.5a4.5 4.5 0 0 1-4.5 4.5h-5A4.5 4.5 0 0 1 1 10.5v-5A4.5 4.5 0 0 1 5.5 1H8a.5.5 0 0 1 0 1z"></path><path d="M16 3a3 3 0 1 1-6 0 3 3 0 0 1 6 0"></path></svg><h2 class="text-xl sm:text-2xl md:text-2xl lg:text-3xl font-bold text-gray-900 dark:text-gray-100">Stack</h2></div><ul class="space-y-3 sm:space-y-2 text-gray-800 dark:text-gray-200"><li class="grid grid-cols-[20px_1fr] sm:grid-cols-[24px_1fr] items-start gap-2 sm:gap-3"><span class="w-3.5 h-3.5 sm:w-4 sm:h-4 mt-0.5 sm:mt-1 text-gray-500 dark:text-gray-400 shrink-0 flex items-center justify-center"><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" class="w-3.5 h-3.5 sm:w-4 sm:h-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path 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.236zm2.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.38-.318-.184-.688-.277-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.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.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.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.
114183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.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.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.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.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z"></path></svg></span><span class="text-sm sm:text-base"><strong class="font-bold">React 19<!-- -->:</strong> <!-- -->UI for every page, section and interactive component.</span></li><li class="grid grid-cols-[20px_1fr] sm:grid-cols-[24px_1fr] items-start gap-2 sm:gap-3"><span class="w-3.5 h-3.5 sm:w-4 sm:h-4 mt-0.5 sm:mt-1 text-gray-500 dark:text-gray-400 shrink-0 flex items-center justify-center"><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" class="w-3.5 h-3.5 sm:w-4 sm:h-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="m8.286 10.578.512-8.657a.306.306 0 0 1 .247-.282L17.377.006a.306.306 0 0 1 .353.385l-1.558 5.403a.306.306 0 0 0 .352.385l2.388-.46a.306.306 0 0 1 .332.438l-6.79 13.55-.123.19a.294.294 0 0 1-.252.14c-.177 0-.35-.152-.305-.369l1.095-5.301a.306.306 0 0 0-.388-.355l-1.433.435a.306.306 0 0 1-.389-.354l.69-3.375a.306.306 0 0 0-.37-.36l-2.32.536a.306.306 0 0 1-.374-.316zm14.976-7.926L17.284 3.74l-.544 1.887 2.077-.4a.8.8 0 0 1 .84.369.8.8 0 0 1 .034.783L12.9 19.93l-.013.025-.015.023-.122.19a.801.801 0 0 1-.672.37.826.826 0 0 1-.634-.302.8.8 0 0 1-.16-.67l1.029-4.981-1.12.34a.81.81 0 0 1-.86-.262.802.802 0 0 1-.165-.67l.63-3.08-2.027.468a.808.808 0 0 1-.768-.233.81.81 0 0 1-.217-.6l.389-6.57-7.44-1.33a.612.612 0 0 0-.64.906L11.58 23.691a.612.612 0 0 0 1.066-.004l11.26-20.135a.612.612 0 0 0-.644-.9z"></path></svg></span><span class="text-sm sm:text-base"><strong class="font-bold">vinext on Vite 8<!-- -->:</strong> <!-- -->Next.js App Router conventions running on Vite, exported as a static site.</span></li><li class="grid grid-cols-[20px_1fr] sm:grid-cols-[24px_1fr] items-start gap-2 sm:gap-3"><span class="w-3.5 h-3.5 sm:w-4 sm:h-4 mt-0.5 sm:mt-1 text-gray-500 dark:text-gray-400 shrink-0 flex items-center justify-center"><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" class="w-3.5 h-3.5 sm:w-4 sm:h-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path 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.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z"></path></svg></span><span class="text-sm sm:text-base"><strong class="font-bold">TypeScript<!-- -->:</strong> <!-- -->Typed company data, schema builders and content across the site.</span></li><li class="grid grid-cols-[20px_1fr] sm:grid-cols-[24px_1fr] items-start gap-2 sm:gap-3"><span class="w-3.5 h-3.5 sm:w-4 sm:h-4 mt-0.5 sm:mt-1 text-gray-500 dark:text-gray-400 shrink-0 flex items-center justify-center"><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" class="w-3.5 h-3.5 sm:w-4 sm:h-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z"></path></svg></span><span class="text-sm sm:text-base"><strong class="font-bold">Tailwind CSS 4<!-- -->:</strong> <!-- -->Utility-first styling for the visual system.</span></li><li class="grid grid-cols-[20px_1fr] sm:grid-cols-[24px_1fr] items-start gap-2 sm:gap-3"><span class="w-3.5 h-3.5 sm:w-4 sm:h-4 mt-0.5 sm:mt-1 text-gray-500 dark:text-gray-400 shrink-0 flex 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" class="lucide lucide-layers w-3.5 h-3.5 sm:w-4 sm:h-4" aria-hidden="true"><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></span><span class="text-sm sm:text-base"><strong class="font-bold">Paper Design Shaders<!-- -->:</strong> <!-- -->WebGL/WebGPU shader backgrounds.</span></li><li class="grid grid-cols-[20px_1fr] sm:grid-cols-[24px_1fr] items-start gap-2 sm:gap-3"><span class="w-3.5 h-3.5 sm:w-4 sm:h-4 mt-0.5 sm:mt-1 text-gray-500 dark:text-gray-400 shrink-0 flex items-center justify-center"><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" class="w-3.5 h-3.5 sm:w-4 sm:h-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M.79 7.12h22.42c.436 0 .79.355.79.792v8.176c0 .436-.354.79-.79.79H.79a.79.79 0 0 1-.79-.79V7.912a.79.79 0 0 1 .79-.791V7.12Zm2.507 7.605v-3.122l1.89 1.89L7.12 11.56v3.122h1.055v-5.67l-2.99 2.99L2.24 9.056v5.67h1.055v-.001Zm8.44-1.845-1.474-1.473-.746.746 2.747 2.747 2.745-2.747-.746-.746-1.473 1.473v-4h-1.054v4Zm10.041.987-2.175-2.175 2.22-2.22-.746-.746-2.22 2.22-2.22-2.22-.747.746 2.22 2.22-2.176 2.177.746.746 2.177-2.177 2.176 2.175.745-.746Z"></path></svg></span><span class="text-sm sm:text-base"><strong class="font-bold">MDX<!-- -->:</strong> <!-- -->Journal posts compiled at build time.</span></li><li class="grid grid-cols-[20px_1fr] sm:grid-cols-[24px_1fr] items-start gap-2 sm:gap-3"><span class="w-3.5 h-3.5 sm:w-4 sm:h-4 mt-0.5 sm:mt-1 text-gray-500 dark:text-gray-400 shrink-0 flex items-center justify-center"><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" class="w-3.5 h-3.5 sm:w-4 sm:h-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M24 22.525H0l12-21.05 12 21.05z"></path></svg></span><span class="text-sm sm:text-base"><strong class="font-bold">Vercel<!-- -->:</strong> <!-- -->Static hosting with redirects, clean URLs and security headers.</span></li></ul></section><section id="use-cases" class="scroll-mt-24 sm:scroll-mt-28"><div class="flex items-center gap-2 mb-3 sm:mb-4" style="opacity:0"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 sm:w-5 sm:h-5 shrink-0 text-blue-500" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M20 7h-9"></path><path d="M14 17H5"></path><circle cx="17" cy="17" r="3"></circle><circle cx="7" cy="7" r="3"></circle></svg><h2 class="text-xl sm:text-2xl md:text-2xl lg:text-3xl font-bold text-gray-900 dark:text-gray-100">Use Cases</h2></div><ul class="list-disc pl-5 sm:pl-6 space-y-2 text-sm sm:text-base text-gray-800 dark:text-gray-200"><li>AI and technology companies that need a site that matches the product</li><li>Making a company easy for ChatGPT, Claude and other assistants to read and cite</li><li>Moving off WordPress without losing search traffic</li><li>Publishing a journal without running a CMS</li><li>Staging a site launch section by section behind visibility flags</li></ul></section><section id="how-to" class="scroll-mt-24 sm:scroll-mt-28"><div class="flex items-center gap-2 mb-3 sm:mb-4" style="opacity:0"><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" class="lucide lucide-file-json w-4 h-4 sm:w-5 sm:h-5 shrink-0 text-blue-500" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 12a1 1 0 0 0-1 1v1a1 1 0 0 1-1 1 1 1 0 0 1 1 1v1a1 1 0 0 0 1 1"></path><path d="M14 18a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1 1 1 0 0 1-1-1v-1a1 1 0 0 0-1-1"></path></svg><h2 class="text-xl sm:text-2xl md:text-2xl lg:text-3xl font-bold text-gray-900 dark:text-gray-100">How to Use</h2></div><div class="rounded-lg sm:rounded-xl border border-blue-200 dark:border-gray-700 bg-blue-50/50 dark:bg-gray-800 p-4 sm:p-6 space-y-3 sm:space-y-4"><ol class="list-decimal list-inside space-y-3 sm:space-y-2 text-sm sm:text-base text-gray-800 dark:text-gray-200"><li class="leading-relaxed">Visit <a href="https://optifyllc.com/" target="_blank" rel="noopener noreferrer" class="text-blue-600 dar
114k:text-blue-400 underline">optifyllc.com</a>.</li><li class="leading-relaxed">Explore the services and solutions sections on the homepage.</li><li class="leading-relaxed">Read the <b>Journal</b> for notes on applying AI at work.</li><li class="leading-relaxed">Open <a href="https://optifyllc.com/llms.txt" target="_blank" rel="noopener noreferrer" class="text-blue-600 dark:text-blue-400 underline">/llms.txt</a> to see the site as an AI assistant reads it.</li><li class="leading-relaxed">Use <b>Contact</b> to reach the team.</li></ol></div></section></article></div><aside class="hidden lg:block"><div class="sticky top-28"><div class="flex items-center gap-2 text-xs uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2 font-outfit"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" class="w-3 h-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M120 230h496c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm0 424h496c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm784 140H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0-424H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z"></path></svg>On this page</div><div class="relative pl-3"><div class="absolute left-0 top-0 bottom-0 w-px bg-gray-300 dark:bg-gray-600"></div><nav class="space-y-1"><button class="relative flex items-center gap-2 w-full text-left px-2 py-1.5 rounded-md text-sm transition font-outfit font-semibold text-gray-900 dark:text-gray-100" aria-current="page"><span class="absolute -left-[3px] top-1.5 h-4 w-[2px] rounded bg-gray-900 dark:bg-gray-100"></span><span class="text-gray-400"><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" class="lucide lucide-activity w-3.5 sm:w-4 h-3.5 sm:h-4" aria-hidden="true"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"></path></svg></span>Feature Highlights</button><button class="relative flex items-center gap-2 w-full text-left px-2 py-1.5 rounded-md text-sm transition font-outfit text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100"><span class="text-gray-400"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" class="w-3.5 sm:w-4 h-3.5 sm:h-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M5.5 2A3.5 3.5 0 0 0 2 5.5v5A3.5 3.5 0 0 0 5.5 14h5a3.5 3.5 0 0 0 3.5-3.5V8a.5.5 0 0 1 1 0v2.5a4.5 4.5 0 0 1-4.5 4.5h-5A4.5 4.5 0 0 1 1 10.5v-5A4.5 4.5 0 0 1 5.5 1H8a.5.5 0 0 1 0 1z"></path><path d="M16 3a3 3 0 1 1-6 0 3 3 0 0 1 6 0"></path></svg></span>Stack</button><button class="relative flex items-center gap-2 w-full text-left px-2 py-1.5 rounded-md text-sm transition font-outfit text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100"><span class="text-gray-400"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="w-3.5 sm:w-4 h-3.5 sm:h-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M20 7h-9"></path><path d="M14 17H5"></path><circle cx="17" cy="17" r="3"></circle><circle cx="7" cy="7" r="3"></circle></svg></span>Use Cases</button><button class="relative flex items-center gap-2 w-full text-left px-2 py-1.5 rounded-md text-sm transition font-outfit text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100"><span class="text-gray-400"><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" class="lucide lucide-file-json w-3.5 sm:w-4 h-3.5 sm:h-4" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 12a1 1 0 0 0-1 1v1a1 1 0 0 1-1 1 1 1 0 0 1 1 1v1a1 1 0 0 0 1 1"></path><path d="M14 18a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1 1 1 0 0 1-1-1v-1a1 1 0 0 0-1-1"></path></svg></span>How to Use</button></nav></div></div></aside></div><section aria-label="Related projects" class="max-w-6xl mx-auto px-4 md:px-6 mt-16 sm:mt-20 md:mt-24"><div class="flex items-center gap-2 mb-4 sm:mb-6" style="opacity:0"><h2 class="text-lg sm:text-xl md:text-2xl font-bold text-gray-900 dark:text-gray-100">Related projects</h2></div><div class="grid gap-4 sm:gap-5 lg:gap-6 md:grid-cols-2 lg:grid-cols-3"><div class="group transform-gpu w-full min-w-0 max-w-[94%] mx-auto
114sm:max-w-none" style="opacity:0"><a aria-label="View details for Operavo" class="block rounded-3xl overflow-hidden border border-slate-200/70 bg-white dark:border-white/[0.08] dark:bg-slate-950/90 shadow-lg sm:hover:shadow-2xl sm:hover:shadow-blue-500/[0.10] dark:sm:hover:shadow-sky-500/[0.08] transition-all duration-500 sm:hover:border-blue-300/60 dark:sm:hover:border-sky-400/25 sm:hover:-translate-y-1 min-h-[44px] focus-override" href="/projects/operavo" data-discover="true"><div class="relative w-full aspect-[2/1] sm:aspect-[1.82/1] overflow-hidden isolate transform-gpu" style="-webkit-mask-image:-webkit-radial-gradient(white, black)"><img src="/images/projects/Operavo.webp" srcSet="/images/projects/Operavo-640.webp 640w, /images/projects/Operavo.webp 1200w" sizes="(min-width: 1280px) 400px, (min-width: 768px) 50vw, 94vw" width="640" height="352" alt="Operavo project cover" class="h-full w-full object-cover object-[50%_60%] transition-transform duration-700 sm:group-hover:scale-110 will-change-transform transform-gpu" style="backface-visibility:hidden;-webkit-backface-visibility:hidden" loading="lazy" fetchPriority="auto" decoding="async"/><div class="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-black/40 via-black/10 to-transparent dark:from-slate-950 dark:via-slate-950/50 dark:to-transparent z-10 pointer-events-none"></div><div class="absolute top-3 sm:top-4 right-3 sm:right-4 z-20"><span class="px-2.5 py-1 sm:px-3 sm:py-1.5 text-[10px] sm:text-xs font-outfit font-medium rounded-full bg-white/90 dark:bg-slate-900/90 text-slate-700 dark:text-slate-300 backdrop-blur-sm border border-white/20 dark:border-slate-700/50 inline-flex items-center gap-1.5 shadow-sm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-xml w-3.5 h-3.5 opacity-80" aria-hidden="true"><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>Web</span></div></div><div class="relative z-20 flex-1 bg-white dark:bg-slate-950 p-4 sm:p-5 lg:p-6 flex flex-col justify-between -mt-[1px]"><div class="min-w-0"><div class="flex items-center justify-between gap-3 mb-1.5 sm:mb-2"><h6 class="min-w-0 truncate text-slate-900 dark:text-white sm:group-hover:text-blue-600 dark:sm:group-hover:text-sky-400 transition-colors duration-300 leading-tight" title="Operavo">Operavo</h6><span aria-hidden="true" class="shrink-0 inline-flex items-center justify-center w-7 h-7 sm:w-8 sm:h-8 rounded-full text-slate-400 dark:text-slate-500 sm:opacity-0 sm:-translate-x-1 sm:group-hover:opacity-100 sm:group-hover:translate-x-0 sm:group-hover:text-blue-600 dark:sm:group-hover:text-sky-400 transition-all duration-300"><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" class="lucide lucide-arrow-up-right w-4 h-4 sm:w-5 sm:h-5" aria-hidden="true"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></span></div><p class="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-3 sm:mb-4 min-h-[32px] sm:min-h-[40px] line-clamp-2">Voice AI for real estate: answers every call, qualifies the buyer and books the showing on a live calendar.</p></div><div class="flex flex-wrap gap-1.5 sm:gap-2 mt-auto"><span class="inline-flex items-center gap-1 sm:gap-1.5 px-2.5 sm:px-3 py-1 sm:py-1.5 text-[10px] sm:text-xs font-outfit font-medium rounded-xl border border-slate-200/70 dark:border-white/[0.08] text-slate-700 dark:text-slate-300 bg-slate-50/80 dark:bg-slate-800/50 backdrop-blur-sm hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"><span class="text-slate-500 dark:text-slate-400"><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" class="w-3.5 h-3.5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M18.665 21.978C16.758 23.255 14.465 24 12 24 5.377 24 0 18.623 0 12S5.377 0 12 0s12 5.377 12 12c0 3.583-1.574 6.801-4.067 9.001L9.219 7.2H7.2v9.596h1.615V9.251l9.85 12.727Zm-3.332-8.533 1.6 2.061V7.2h-1.6v6.245Z"></path></svg></span>Next.js 16</span><span class="inline-flex items-center gap-1 sm:gap-1.5 px-2.5 sm:px-3 py-1 sm:py-1.5 text-[10px] sm:text-xs font-outfit font-medium rounded-xl border border-slate-200/70 dark:border-white/[0.08] text-slate-700 dark:text-slate-300 bg-slate-50/80 dark:bg-slate-800/50 backdrop-blur-sm hover:bg-slate-100 dar
114k:hover:bg-slate-800 transition-colors"><span class="text-slate-500 dark:text-slate-400"><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" class="lucide lucide-phone-call w-3.5 h-3.5" aria-hidden="true"><path d="M13 2a9 9 0 0 1 9 9"></path><path d="M13 6a5 5 0 0 1 5 5"></path><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></span>Voice AI</span><span class="inline-flex items-center px-2.5 sm:px-3 py-1 sm:py-1.5 text-[10px] sm:text-xs font-outfit font-medium rounded-xl border border-blue-200/70 dark:border-sky-400/20 text-blue-700 dark:text-sky-300 bg-blue-50/80 dark:bg-sky-900/20 backdrop-blur-sm">+<!-- -->4</span></div></div></a></div><div class="group transform-gpu w-full min-w-0 max-w-[94%] mx-auto sm:max-w-none" style="opacity:0"><a aria-label="View details for AllureHive" class="block rounded-3xl overflow-hidden border border-slate-200/70 bg-white dark:border-white/[0.08] dark:bg-slate-950/90 shadow-lg sm:hover:shadow-2xl sm:hover:shadow-blue-500/[0.10] dark:sm:hover:shadow-sky-500/[0.08] transition-all duration-500 sm:hover:border-blue-300/60 dark:sm:hover:border-sky-400/25 sm:hover:-translate-y-1 min-h-[44px] focus-override" href="/projects/allurehive" data-discover="true"><div class="relative w-full aspect-[2/1] sm:aspect-[1.82/1] overflow-hidden isolate transform-gpu" style="-webkit-mask-image:-webkit-radial-gradient(white, black)"><img src="/images/projects/AllureHive.webp" srcSet="/images/projects/AllureHive-640.webp 640w, /images/projects/AllureHive.webp 1200w" sizes="(min-width: 1280px) 400px, (min-width: 768px) 50vw, 94vw" width="640" height="352" alt="AllureHive project cover" class="h-full w-full object-cover object-[50%_60%] transition-transform duration-700 sm:group-hover:scale-110 will-change-transform transform-gpu" style="backface-visibility:hidden;-webkit-backface-visibility:hidden" loading="lazy" fetchPriority="auto" decoding="async"/><div class="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-black/40 via-black/10 to-transparent dark:from-slate-950 dark:via-slate-950/50 dark:to-transparent z-10 pointer-events-none"></div><div class="absolute top-3 sm:top-4 right-3 sm:right-4 z-20"><span class="px-2.5 py-1 sm:px-3 sm:py-1.5 text-[10px] sm:text-xs font-outfit font-medium rounded-full bg-white/90 dark:bg-slate-900/90 text-slate-700 dark:text-slate-300 backdrop-blur-sm border border-white/20 dark:border-slate-700/50 inline-flex items-center gap-1.5 shadow-sm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-xml w-3.5 h-3.5 opacity-80" aria-hidden="true"><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>Web</span></div></div><div class="relative z-20 flex-1 bg-white dark:bg-slate-950 p-4 sm:p-5 lg:p-6 flex flex-col justify-between -mt-[1px]"><div class="min-w-0"><div class="flex items-center justify-between gap-3 mb-1.5 sm:mb-2"><h6 class="min-w-0 truncate text-slate-900 dark:text-white sm:group-hover:text-blue-600 dark:sm:group-hover:text-sky-400 transition-colors duration-300 leading-tight" title="AllureHive">AllureHive</h6><span aria-hidden="true" class="shrink-0 inline-flex items-center justify-center w-7 h-7 sm:w-8 sm:h-8 rounded-full text-slate-400 dark:text-slate-500 sm:opacity-0 sm:-translate-x-1 sm:group-hover:opacity-100 sm:group-hover:translate-x-0 sm:group-hover:text-blue-600 dark:sm:group-hover:text-sky-400 transition-all duration-300"><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" class="lucide lucide-arrow-up-right w-4 h-4 sm:w-5 sm:h-5" aria-hidden="true"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></span></div>
114<p class="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-3 sm:mb-4 min-h-[32px] sm:min-h-[40px] line-clamp-2">Natural woven home-décor e-commerce brand â catalog, conversion, SEO and short-form video growth.</p></div><div class="flex flex-wrap gap-1.5 sm:gap-2 mt-auto"><span class="inline-flex items-center gap-1 sm:gap-1.5 px-2.5 sm:px-3 py-1 sm:py-1.5 text-[10px] sm:text-xs font-outfit font-medium rounded-xl border border-slate-200/70 dark:border-white/[0.08] text-slate-700 dark:text-slate-300 bg-slate-50/80 dark:bg-slate-800/50 backdrop-blur-sm hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"><span class="text-slate-500 dark:text-slate-400"><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" class="w-3.5 h-3.5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M15.337 23.979l7.216-1.561s-2.604-17.613-2.625-17.73c-.018-.116-.114-.192-.211-.192s-1.929-.136-1.929-.136-1.275-1.274-1.439-1.411c-.045-.037-.075-.057-.121-.074l-.914 21.104h.023zM11.71 11.305s-.81-.424-1.774-.424c-1.447 0-1.504.906-1.504 1.141 0 1.232 3.24 1.715 3.24 4.629 0 2.295-1.44 3.76-3.406 3.76-2.354 0-3.54-1.465-3.54-1.465l.646-2.086s1.245 1.066 2.28 1.066c.675 0 .975-.545.975-.932 0-1.619-2.654-1.694-2.654-4.359-.034-2.237 1.571-4.416 4.827-4.416 1.257 0 1.875.361 1.875.361l-.945 2.715-.02.01zM11.17.83c.136 0 .271.038.405.135-.984.465-2.064 1.639-2.508 3.992-.656.213-1.293.405-1.889.578C7.697 3.75 8.951.84 11.17.84V.83zm1.235 2.949v.135c-.754.232-1.583.484-2.394.736.466-1.777 1.333-2.645 2.085-2.971.193.501.309 1.176.309 2.1zm.539-2.234c.694.074 1.141.867 1.429 1.755-.349.114-.735.231-1.158.366v-.252c0-.752-.096-1.371-.271-1.871v.002zm2.992 1.289c-.02 0-.06.021-.078.021s-.289.075-.714.21c-.423-1.233-1.176-2.37-2.508-2.37h-.115C12.135.209 11.669 0 11.265 0 8.159 0 6.675 3.877 6.21 5.846c-1.194.365-2.063.636-2.16.674-.675.213-.694.232-.772.87-.075.462-1.83 14.063-1.83 14.063L15.009 24l.927-21.166z"></path></svg></span>Shopify</span><span class="inline-flex items-center gap-1 sm:gap-1.5 px-2.5 sm:px-3 py-1 sm:py-1.5 text-[10px] sm:text-xs font-outfit font-medium rounded-xl border border-slate-200/70 dark:border-white/[0.08] text-slate-700 dark:text-slate-300 bg-slate-50/80 dark:bg-slate-800/50 backdrop-blur-sm hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"><span class="text-slate-500 dark:text-slate-400"><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" class="lucide lucide-search w-3.5 h-3.5" aria-hidden="true"><path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg></span>SEO</span><span class="inline-flex items-center px-2.5 sm:px-3 py-1 sm:py-1.5 text-[10px] sm:text-xs font-outfit font-medium rounded-xl border border-blue-200/70 dark:border-sky-400/20 text-blue-700 dark:text-sky-300 bg-blue-50/80 dark:bg-sky-900/20 backdrop-blur-sm">+<!-- -->2</span></div></div></a></div><div class="group transform-gpu w-full min-w-0 max-w-[94%] mx-auto
114sm:max-w-none" style="opacity:0"><a aria-label="View details for Mantissa Design" class="block rounded-3xl overflow-hidden border border-slate-200/70 bg-white dark:border-white/[0.08] dark:bg-slate-950/90 shadow-lg sm:hover:shadow-2xl sm:hover:shadow-blue-500/[0.10] dark:sm:hover:shadow-sky-500/[0.08] transition-all duration-500 sm:hover:border-blue-300/60 dark:sm:hover:border-sky-400/25 sm:hover:-translate-y-1 min-h-[44px] focus-override" href="/projects/mantissa-design" data-discover="true"><div class="relative w-full aspect-[2/1] sm:aspect-[1.82/1] overflow-hidden isolate transform-gpu" style="-webkit-mask-image:-webkit-radial-gradient(white, black)"><img src="/images/projects/Mantissa%20Design.webp" srcSet="/images/projects/Mantissa%20Design-640.webp 640w, /images/projects/Mantissa%20Design.webp 1200w" sizes="(min-width: 1280px) 400px, (min-width: 768px) 50vw, 94vw" width="640" height="352" alt="Mantissa Design project cover" class="h-full w-full object-cover object-[50%_60%] transition-transform duration-700 sm:group-hover:scale-110 will-change-transform transform-gpu" style="backface-visibility:hidden;-webkit-backface-visibility:hidden" loading="lazy" fetchPriority="auto" decoding="async"/><div class="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-black/40 via-black/10 to-transparent dark:from-slate-950 dark:via-slate-950/50 dark:to-transparent z-10 pointer-events-none"></div><div class="absolute top-3 sm:top-4 right-3 sm:right-4 z-20"><span class="px-2.5 py-1 sm:px-3 sm:py-1.5 text-[10px] sm:text-xs font-outfit font-medium rounded-full bg-white/90 dark:bg-slate-900/90 text-slate-700 dark:text-slate-300 backdrop-blur-sm border border-white/20 dark:border-slate-700/50 inline-flex items-center gap-1.5 shadow-sm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-xml w-3.5 h-3.5 opacity-80" aria-hidden="true"><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>Web</span></div></div><div class="relative z-20 flex-1 bg-white dark:bg-slate-950 p-4 sm:p-5 lg:p-6 flex flex-col justify-between -mt-[1px]"><div class="min-w-0"><div class="flex items-center justify-between gap-3 mb-1.5 sm:mb-2"><h6 class="min-w-0 truncate text-slate-900 dark:text-white sm:group-hover:text-blue-600 dark:sm:group-hover:text-sky-400 transition-colors duration-300 leading-tight" title="Mantissa Design">Mantissa Design</h6><span aria-hidden="true" class="shrink-0 inline-flex items-center justify-center w-7 h-7 sm:w-8 sm:h-8 rounded-full text-slate-400 dark:text-slate-500 sm:opacity-0 sm:-translate-x-1 sm:group-hover:opacity-100 sm:group-hover:translate-x-0 sm:group-hover:text-blue-600 dark:sm:group-hover:text-sky-400 transition-all duration-300"><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" class="lucide lucide-arrow-up-right w-4 h-4 sm:w-5 sm:h-5" aria-hidden="true"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></span></div><p class="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-3 sm:mb-4 min-h-[32px] sm:min-h-[40px] line-clamp-2">Cinematic, scroll-driven site for a Dhaka architecture and engineering consultancy.</p></div><div class="flex flex-wrap gap-1.5 sm:gap-2 mt-auto"><span class="inline-flex items-center gap-1 sm:gap-1.5 px-2.5 sm:px-3 py-1 sm:py-1.5 text-[10px] sm:text-xs font-outfit font-medium rounded-xl border border-slate-200/70 dark:border-white/[0.08] text-slate-700 dark:text-slate-300 bg-slate-50/80 dark:bg-slate-800/50 backdrop-blur-sm hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"><span class="text-slate-500 dark:text-slate-400"><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" class="w-3.5 h-3.5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M18.665 21.978C16.758 23.255 14.465 24 12 24 5.377 24 0 18.623 0 12S5.377 0 12 0s12 5.377 12 12c0 3.583-1.574 6.801-4.067 9.001L9.219 7.2H7.2v9.596h1.615V9.251l9.85 12.727Zm-3.332-8.533 1.6 2.061V7.2h-1.6v6.245Z"></path></svg></span>Next.js 16</span><span class="inline-flex items-center gap-1 sm:gap-1.5 px-2.5 sm:px-3 py-1 sm:py-1.5 text-[10px] sm:text-xs font-outfit font-medium rounded-xl border border-slate-200/70 dark:border-white/[0.08] text-slate-700 dark:text-slate-300 bg-slate-50/80 dark:bg-slate-800/50 backdrop-blur-sm hover:bg-slate-100 dar
114k:hover:bg-slate-800 transition-colors"><span class="text-slate-500 dark:text-slate-400"><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" class="lucide lucide-search w-3.5 h-3.5" aria-hidden="true"><path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg></span>SEO</span><span class="inline-flex items-center px-2.5 sm:px-3 py-1 sm:py-1.5 text-[10px] sm:text-xs font-outfit font-medium rounded-xl border border-blue-200/70 dark:border-sky-400/20 text-blue-700 dark:text-sky-300 bg-blue-50/80 dark:bg-sky-900/20 backdrop-blur-sm">+<!-- -->2</span></div></div></a></div></div></section><nav aria-label="Project navigation" class="max-w-6xl mx-auto px-4 md:px-6 mt-12 sm:mt-16"><div class="flex items-center justify-between gap-4 pt-6 sm:pt-8 border-t border-gray-200 dark:border-gray-700"><span></span><a class="group inline-flex items-center gap-2 sm:gap-3 text-right min-w-0 max-w-[48%] ml-auto focus-override font-outfit" href="/projects/operavo" data-discover="true"><span class="min-w-0"><span class="block text-[10px] sm:text-[11px] uppercase tracking-wider text-gray-500 dark:text-gray-400">Next</span><span class="block text-sm sm:text-base font-medium text-gray-700 dark:text-gray-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors truncate">Operavo</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" class="lucide lucide-arrow-right w-3.5 h-3.5 sm:w-4 sm:h-4 shrink-0 text-gray-400 group-hover:translate-x-1 group-hover:text-blue-500 transition-all" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></a></div></nav><section class="pt-12 sm:pt-16 md:pt-20 lg:pt-28 pb-10 sm:pb-12 md:pb-16 "><div class="max-w-4xl mx-auto px-4 sm:px-6"><div class="text-center" style="opacity:0;transform:translateY(20px)"><div class="inline-flex items-center gap-1.5 sm:gap-2 bg-blue-500/10 dark:bg-blue-400/10 text-blue-600 dark:text-blue-400 px-2.5 sm:px-3 md:px-4 py-1.5 sm:py-2 rounded-full text-xs sm:text-sm font-medium mb-3 sm:mb-4 md:mb-6 border border-blue-200 dark:border-blue-800" style="opacity:0"><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" class="lucide lucide-message-square w-3 h-3 sm:w-4 sm:h-4" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>Let's Connect</div><h2 class="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold mb-3 sm:mb-4 md:mb-6 text-gray-900 dark:text-gray-100 leading-tight px-1 sm:px-2" style="opacity:0">Need a site built for AI search?</h2><p class="text-sm sm:text-base md:text-lg lg:text-xl text-gray-600 dark:text-gray-300 mb-6 sm:mb-8 md:mb-10 max-w-2xl mx-auto leading-relaxed px-1 sm:px-2" style="opacity:0">I build fast, well-structured websites that search engines and AI assistants can read. Let's talk.</p><div class="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center items-center px-1 sm:px-2" style="opacity:0"><button class="group inline-flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white px-3 sm:px-5 md:px-6 lg:px-8 py-1.5 sm:py-3 md:py-3.5 lg:py-4 rounded-lg sm:rounded-xl font-outfit font-semibold transition-all duration-300 shadow-lg hover:shadow-xl hover:shadow-blue-500/25 focus-override w-full sm:w-auto min-h-[36px] sm:min-h-[48px] md:min-h-[52px] lg:min-h-[56px] text-sm sm:text-base">Get In Touch<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" class="lucide lucide-send w-3.5 sm:w-4 h-3.5 sm:h-4 group-hover:translate-x-1 transition-transform" aria-hidden="true"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"></path><path d="m21.854 2.147-10.94 10.939"></path></svg></button><button class="group inline-flex items-center justify-center gap-2 border-2 border-gray-300 dark:border-gray-600 hover:border-blue-400 dark:hover:border-blue-500 text-gray-700 dark:text-gray-300 hover:text-blue-600 dar
114k:hover:text-blue-400 px-3 sm:px-5 md:px-6 lg:px-8 py-1.5 sm:py-3 md:py-3.5 lg:py-4 rounded-lg sm:rounded-xl font-outfit font-semibold transition-all duration-300 hover:bg-blue-50 dark:hover:bg-blue-900/10 focus-override w-full sm:w-auto min-h-[36px] sm:min-h-[48px] md:min-h-[52px] lg:min-h-[56px] text-sm sm:text-base">View All Projects<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" class="lucide lucide-arrow-right w-3.5 sm:w-4 h-3.5 sm:h-4 group-hover:translate-x-1 transition-transform" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></button></div><div class="relative mt-8 sm:mt-12 md:mt-16"><div class="absolute inset-0 flex items-center justify-center opacity-5 dark:opacity-10"><div class="w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-blue-500 rounded-full blur-3xl"></div></div></div></div></div></section></main><footer class="bg-slate-100 dark:bg-slate-950 border-t border-slate-200/70 dark:border-white/[0.06]" aria-label="Site Footer" style="opacity:0;transform:translateY(40px)"><div class="w-full max-w-7xl mx-auto px-4 sm:px-6 py-8 md:py-16 flex flex-col md:flex-row md:items-center md:justify-between gap-6 md:gap-10"><div class="flex flex-col items-center md:items-start gap-1.5 md:gap-2 font-outfit"><span class="text-sm md:text-base font-semibold text-gray-900 dark:text-white">Dhruba Datta</span><p class="text-[11px] md:text-xs text-gray-500 dark:text-gray-400">© <!-- -->2026<!-- --> | All rights reserved</p></div><div class="flex justify-center md:justify-end gap-4 md:gap-5 py-2 md:py-0 -mr-2.5 md:-mr-3"><div class="relative"><a href="https://www.linkedin.com/in/dhruba-datta/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" class="p-2.5 md:p-3 rounded-lg transition duration-300 text-gray-500 dark:text-gray-400 min-h-[40px] min-w-[40px] md:min-h-[48px] md:min-w-[48px] flex items-center justify-center focus-override hover:text-blue-600 dark:hover:text-blue-400 "><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" class="w-5 h-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path></svg></a></div><div class="relative"><a href="https://github.com/dhruba-datta" target="_blank" rel="noopener noreferrer" aria-label="GitHub" class="p-2.5 md:p-3 rounded-lg transition duration-300 text-gray-500 dark:text-gray-400 min-h-[40px] min-w-[40px] md:min-h-[48px] md:min-w-[48px] flex items-center justify-center focus-override hover:text-gray-900 dark:hover:text-white "><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" class="w-5 h-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a></div><div class="relative"><a href="mailto:[email protected]" aria-label="Gmail" class="p-2.5 md:p-3 rounded-lg transition duration-300 text-gray-500 dark:text-gray-400 min-h-[40px] min-w-[40px] md:min-
114h-[48px] md:min-w-[48px] flex items-center justify-center focus-override hover:text-red-500 dark:hover:text-red-400 "><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" class="w-5 h-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 0 1 0 19.366V5.457c0-2.023 2.309-3.178 3.927-1.964L5.455 4.64 12 9.548l6.545-4.91 1.528-1.145C21.69 2.28 24 3.434 24 5.457z"></path></svg></a></div><div class="relative"><a href="https://scholar.google.co.uk/citations?user=RGxdIVkAAAAJ" target="_blank" rel="noopener noreferrer" aria-label="Google Scholar" class="p-2.5 md:p-3 rounded-lg transition duration-300 text-gray-500 dark:text-gray-400 min-h-[40px] min-w-[40px] md:min-h-[48px] md:min-w-[48px] flex items-center justify-center focus-override hover:text-blue-600 dark:hover:text-blue-500 "><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" class="w-5 h-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M390.9 298.5c0 0 0 .1 .1 .1c9.2 19.4 14.4 41.1 14.4 64C405.3 445.1 338.5 512 256 512s-149.3-66.9-149.3-149.3c0-22.9 5.2-44.6 14.4-64h0c1.7-3.6 3.6-7.2 5.6-10.7c4.4-7.6 9.4-14.7 15-21.3c27.4-32.6 68.5-53.3 114.4-53.3c33.6 0 64.6 11.1 89.6 29.9c9.1 6.9 17.4 14.7 24.8 23.5c5.6 6.6 10.6 13.8 15 21.3c2 3.4 3.8 7 5.5 10.5zm26.4-18.8c-30.1-58.4-91-98.4-161.3-98.4s-131.2 40-161.3 98.4L0 202.7 256 0 512 202.7l-94.7 77.1z"></path></svg></a></div><div class="relative"><a href="https://www.instagram.com/dhrubz_/" target="_blank" rel="noopener noreferrer" aria-label="Instagram" class="p-2.5 md:p-3 rounded-lg transition duration-300 text-gray-500 dark:text-gray-400 min-h-[40px] min-w-[40px] md:min-h-[48px] md:min-w-[48px] flex items-center justify-center focus-override hover:text-pink-500 dark:hover:text-pink-400 "><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" class="w-5 h-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg></a></div></div></div></footer></div><!--/$--></div></div></div> 115 </body> 116</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.