<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Patrick Ryall</title><meta name="description" content="Patrick Ryall — web designer, AI and IT consultant, and software developer based in Ireland. Building websites and digital systems since 1994. No layers, …"><link rel="canonical" href="https://patrickryall.com/"><!-- Open Graph --><meta property="og:type" content="website"><meta property="og:url" content="https://patrickryall.com/"><meta property="og:title" content="Web Designer, AI &#38; IT Consultant | Patrick Ryall"><meta property="og:description" content="Patrick Ryall — web designer, AI and IT consultant, and software developer based in Ireland. Building websites and digital systems since 1994. No layers, …"><meta property="og:image" content="https://d2xsxph8kpxj0f.cloudfront.net/310519663036985142/ah7wkAUgNVB2ahQ8cV5Bq4/homepage_hero_desktop_8f34d44d.webp"><meta property="og:site_name" content="Patrick Ryall"><meta property="og:locale" content="en_IE"><!-- Twitter Card --><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="Web Designer, AI &#38; IT Consultant | Patrick Ryall"><meta name="twitter:description" content="Patrick Ryall — web designer, AI and IT consultant, and software developer based in Ireland. Building websites and digital systems since 1994. No layers, …"><meta name="twitter:image" content="https://d2xsxph8kpxj0f.cloudfront.net/310519663036985142/ah7wkAUgNVB2ahQ8cV5Bq4/homepage_hero_desktop_8f34d44d.webp"><!-- Fonts --><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet"> <link rel="preload" as="image" href="https://d2xsxph8kpxj0f.cloudfront.net/310519663036985142/ah7wkAUgNVB2ahQ8cV5Bq4/hero_unleash_desktop_b40c63e4.webp" fetchpriority="high"> <link rel="preload" as="image" href="https://d2xsxph8kpxj0f.cloudfront.net/310519663036985142/ah7wkAUgNVB2ahQ8cV5Bq4/06-dramatic-angle-hero-marketing_25b8d93a.webp"> <link rel="preload" as="image" href="https://d2xsxph8kpxj0f.cloudfront.net/310519663036985142/ah7wkAUgNVB2ahQ8cV5Bq4/hero_desktop_e7dce8df.webp"> <link rel="preload" as="image" href="https://d2xsxph8kpxj0f.cloudfront.net/310519663036985142/ah7wkAUgNVB2ahQ8cV5Bq4/hero_all_dashboards_desktop_5dd43ccd.webp"> <!-- JSON-LD Person Schema --><script type="application/ld+json">
      {JSON.stringify({
        "@context": "https://schema.org",
        "@type": "Person",
        "name": "Patrick Ryall",
        "url": "https://patrickryall.com",
        "jobTitle": "Web Designer, AI & IT Consultant, Software Developer",
        "description": "Web designer, digital consultant, and software developer based in Ireland. Building websites since 1994.",
        "sameAs": [
          "https://managedspaces.net",
          "https://aestute.com"
        ]
      })}
    </script><link rel="stylesheet" href="/_astro/about.CAF045Rw.css"><script type="module">const o=document.getElementById("site-header"),s=document.getElementById("mobile-nav"),t=document.getElementById("mobile-menu-btn"),d=document.getElementById("icon-open"),c=document.getElementById("icon-close"),i=document.getElementById("nav-logo-img"),l=document.querySelectorAll("#nav-logo source"),n=document.querySelectorAll(".nav-link"),a=document.querySelector(".nav-cta");let h=!1;function b(r){r?(o.classList.add("bg-white/95","backdrop-blur-md","shadow-sm","border-b","border-gray-100"),o.classList.remove("bg-transparent"),t.classList.remove("text-white","hover:bg-white/10"),t.classList.add("text-gray-700","hover:bg-gray-100"),l.forEach(e=>{e.srcset=e.dataset.dark||""}),i.src=i.dataset.dark||"",n.forEach(e=>{e.dataset.active==="true"?(e.classList.remove("text-white","bg-white/15"),e.classList.add("text-blue-600","bg-blue-50")):(e.classList.remove("text-white/80","hover:text-white","hover:bg-white/10"),e.classList.add("text-gray-600","hover:text-gray-900","hover:bg-gray-50"))}),a&&(a.classList.remove("bg-white","text-[#0f1f3d]","hover:bg-gray-100"),a.classList.add("bg-[#0f1f3d]","text-white","hover:bg-[#1e3a5f]"))):(o.classList.remove("bg-white/95","backdrop-blur-md","shadow-sm","border-b","border-gray-100"),o.classList.add("bg-transparent"),t.classList.add("text-white","hover:bg-white/10"),t.classList.remove("text-gray-700","hover:bg-gray-100"),l.forEach(e=>{e.srcset=e.dataset.light||""}),i.src=i.dataset.light||"",n.forEach(e=>{e.dataset.active==="true"?(e.classList.add("text-white","bg-white/15"),e.classList.remove("text-blue-600","bg-blue-50")):(e.classList.add("text-white/80","hover:text-white","hover:bg-white/10"),e.classList.remove("text-gray-600","hover:text-gray-900","hover:bg-gray-50"))}),a&&(a.classList.add("bg-white","text-[#0f1f3d]","hover:bg-gray-100"),a.classList.remove("bg-[#0f1f3d]","text-white","hover:bg-[#1e3a5f]")))}window.addEventListener("scroll",()=>b(window.scrollY>20),{passive:!0});b(window.scrollY>20);function g(r){h=r,r?(s.classList.remove("max-h-0","opacity-0","pointer-events-none"),s.classList.add("max-h-[480px]","opacity-100"),s.removeAttribute("inert"),s.setAttribute("aria-hidden","false"),t.setAttribute("aria-expanded","true"),t.setAttribute("aria-label","Close menu"),d.classList.add("hidden"),c.classList.remove("hidden"),document.body.style.overflow="hidden"):(s.classList.add("max-h-0","opacity-0","pointer-events-none"),s.classList.remove("max-h-[480px]","opacity-100"),s.setAttribute("inert",""),s.setAttribute("aria-hidden","true"),t.setAttribute("aria-expanded","false"),t.setAttribute("aria-label","Open menu"),d.classList.remove("hidden"),c.classList.add("hidden"),document.body.style.overflow="")}t.addEventListener("click",()=>g(!h));window.addEventListener("resize",()=>{window.innerWidth>=768&&g(!1)},{passive:!0});
</script><link rel="canonical" href="https://patrickryall.com/drupal-6.x-dev/rss.xml" /></head> <body>   <div style="background-color: #080c18; color: white; min-height: 100vh;"> <header id="site-header" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 bg-transparent" style="padding-top: env(safe-area-inset-top)"> <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex items-center justify-between h-20"> <!-- Logo --> <a href="/" class="flex items-center min-h-[44px] group" aria-label="Patrick Ryall — Home"> <picture id="nav-logo"> <source type="image/avif" srcset="https://d2xsxph8kpxj0f.cloudfront.net/310519663036985142/ah7wkAUgNVB2ahQ8cV5Bq4/logo-light-320_c4e13196.avif 1x, https://d2xsxph8kpxj0f.cloudfront.net/310519663036985142/ah7wkAUgNVB2ahQ8cV5Bq4/logo-light-640_433de6a5.avif 2x" data-light="https://d2xsxph8kpxj0f.cloudfront.net/310519663036985142/ah7wkAUgNVB2ahQ8cV5Bq4/logo-light-320_c4e13196.avif 1x, https://d2xsxph8kpxj0f.cloudfront.net/310519663036985142/ah7wkAUgNVB2ahQ8cV5Bq4/logo-light-640_433de6a5.avif 2x" data-dark="https://d2xsxph8kpxj0f.cloudfront.net/310519663036985142/ah7wkAUgNVB2ahQ8cV5Bq4/logo-dark-320_93e8e1bc.avif 1x, https://d2xsxph8kpxj0f.cloudfront.net/310519663036985142/ah7wkAUgNVB2ahQ8cV5Bq4/logo-dark-640_99bc8572.avif 2x"> <source type="image/webp" srcset="https://d2xsxph8kpxj0f.cloudfront.net/310519663036985142/ah7wkAUgNVB2ahQ8cV5Bq4/logo-light-320_002ed473.webp 1x, https://d2xsxph8kpxj0f.cloudfront.net/310519663036985142/ah7wkAUgNVB2ahQ8cV5Bq4/logo-light-640_89cac316.webp 2x" data-light="https://d2xsxph8kpxj0f.cloudfront.net/310519663036985142/ah7wkAUgNVB2ahQ8cV5Bq4/logo-light-320_002ed473.webp 1x, https://d2xsxph8kpxj0f.cloudfront.net/310519663036985142/ah7wkAUgNVB2ahQ8cV5Bq4/logo-light-640_89cac316.webp 2x" data-dark="https://d2xsxph8kpxj0f.cloudfront.net/310519663036985142/ah7wkAUgNVB2ahQ8cV5Bq4/logo-dark-320_7795aadc.webp 1x, https://d2xsxph8kpxj0f.cloudfront.net/310519663036985142/ah7wkAUgNVB2ahQ8cV5Bq4/logo-dark-640_1e4f18ff.webp 2x"> <img id="nav-logo-img" src="https://d2xsxph8kpxj0f.cloudfront.net/310519663036985142/ah7wkAUgNVB2ahQ8cV5Bq4/logo-light-320_002ed473.webp" data-light="https://d2xsxph8kpxj0f.cloudfront.net/310519663036985142/ah7wkAUgNVB2ahQ8cV5Bq4/logo-light-320_002ed473.webp" data-dark="https://d2xsxph8kpxj0f.cloudfront.net/310519663036985142/ah7wkAUgNVB2ahQ8cV5Bq4/logo-dark-320_7795aadc.webp" alt="Patrick Ryall" width="160" height="62" class="transition-opacity group-hover:opacity-75" style="height:52px;width:auto;max-width:220px;object-fit:contain;display:block" fetchpriority="high" decoding="async"> </picture> </a> <!-- Desktop nav --> <nav class="hidden md:flex items-center space-x-1"> <a href="/" class="nav-link px-4 py-2 rounded-md text-sm font-medium transition-colors min-h-[44px] flex items-center text-white bg-white/15" data-active="true"> Home </a><a href="/about" class="nav-link px-4 py-2 rounded-md text-sm font-medium transition-colors min-h-[44px] flex items-center text-white/80 hover:text-white hover:bg-white/10" data-active="false"> About </a><a href="/work" class="nav-link px-4 py-2 rounded-md text-sm font-medium transition-colors min-h-[44px] flex items-center text-white/80 hover:text-white hover:bg-white/10" data-active="false"> Work </a> <a href="/contact" class="nav-cta ml-3 px-5 py-2 rounded-md text-sm font-semibold transition-all min-h-[44px] flex items-center bg-white text-[#0f1f3d] hover:bg-gray-100">
Discuss your project
</a> </nav> <!-- Mobile hamburger --> <button id="mobile-menu-btn" class="md:hidden p-2 rounded-md transition-colors min-h-[44px] min-w-[44px] flex items-center justify-center text-white hover:bg-white/10" aria-label="Open menu" aria-expanded="false" aria-controls="mobile-nav"> <svg id="icon-open" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> </svg> <svg id="icon-close" class="w-6 h-6 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> </div> </div> <!-- Mobile menu --> <div id="mobile-nav" class="md:hidden overflow-hidden transition-all duration-300 ease-in-out max-h-0 opacity-0 pointer-events-none" style="background-color:#080c18;border-top:1px solid rgba(255,255,255,0.08)" aria-hidden="true" inert> <div class="px-4 py-4 space-y-1" style="padding-bottom:max(1rem, env(safe-area-inset-bottom))"> <a href="/" class="flex items-center px-4 rounded-lg text-sm font-medium transition-colors min-h-[52px] text-white bg-white/10"> Home </a><a href="/about" class="flex items-center px-4 rounded-lg text-sm font-medium transition-colors min-h-[52px] text-white/70 hover:text-white hover:bg-white/[0.08]"> About </a><a href="/work" class="flex items-center px-4 rounded-lg text-sm font-medium transition-colors min-h-[52px] text-white/70 hover:text-white hover:bg-white/[0.08]"> Work </a> <a href="/contact" class="flex items-center justify-center mt-3 px-4 rounded-lg text-sm font-semibold min-h-[52px] transition-all hover:opacity-90" style="background-color:white;color:#080c18">
Discuss your project
</a> </div> </div> </header>  <!-- ============================================================
         1. HERO — Full-bleed split layout
         Left: copy + CTAs (constrained)
         Right: full-height image panel bleeds to viewport edge
         ============================================================ --> <section class="relative overflow-hidden" style="min-height: 100vh; background: #080c18;"> <!-- Dot grid texture — left half only --> <div class="absolute inset-0 pointer-events-none" style="background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 48px 48px; right: 42%;"></div> <!-- Subtle colour glows on left --> <div class="absolute pointer-events-none" style="top: -10%; left: -5%; width: 55%; height: 70%; background: radial-gradient(ellipse at 30% 40%, rgba(37,99,235,0.14) 0%, transparent 65%); filter: blur(50px);"></div> <div class="absolute pointer-events-none" style="bottom: 0; left: 0; width: 45%; height: 50%; background: radial-gradient(ellipse at 20% 80%, rgba(124,58,237,0.1) 0%, transparent 60%); filter: blur(60px);"></div> <!-- DESKTOP layout: true split — left copy, right full-bleed image --> <div class="hidden lg:flex" style="min-height: 100vh; align-items: stretch;"> <!-- Left: copy column — constrained, vertically centred --> <div style="flex: 0 0 50%; max-width: 50%; display: flex; align-items: center; padding: 7rem 0 5rem 0;"> <div style="padding-left: max(2rem, calc((100vw - 1152px) / 2 + 2rem)); padding-right: 4rem; width: 100%;"> <!-- Location badge --> <div class="inline-flex items-center space-x-2.5 rounded-full px-4 py-1.5 mb-10" style="background-color: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);"> <span class="w-1.5 h-1.5 bg-emerald-400 rounded-full" style="animation: pulse 2s infinite;"></span> <span class="text-xs font-medium" style="color: rgba(255,255,255,0.55);">Based in Co. Louth, Ireland · Working globally since 1994</span> </div> <!-- Heading --> <h1 style="font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2.6rem, 4.5vw, 4.4rem); line-height: 1.04; margin-bottom: 1.5rem; letter-spacing: -0.02em;"> <span style="color: rgba(255,255,255,0.95);">Thirty years of</span> <br> <span style="background: linear-gradient(90deg, #60a5fa 0%, #a78bfa 50%, #60a5fa 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
building things that work.
</span> </h1> <p class="leading-relaxed mb-10" style="font-size: clamp(1rem, 1.3vw, 1.125rem); color: rgba(255,255,255,0.58); max-width: 30rem;">
Web designer, digital consultant, and software developer. I build websites, tools, and digital systems for businesses that need them to perform — not just exist. No layers. No outsourcing. Direct, experienced work.
</p> <!-- CTAs --> <div class="flex flex-row gap-4 mb-12"> <a href="/contact" class="inline-flex items-center justify-center px-7 py-3.5 text-sm font-semibold rounded-md transition-all hover:opacity-90 min-h-[44px]" style="background-color: white; color: #080c18;">
Work with me
<svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path> </svg> </a> <a href="/work" class="inline-flex items-center justify-center px-7 py-3.5 text-sm font-semibold rounded-md transition-all hover:bg-white/10 min-h-[44px]" style="background-color: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); color: white;">
View my work
</a> </div> <!-- Badges --> <div class="flex flex-wrap items-center gap-3"> <span class="inline-flex items-center gap-2 text-xs font-medium px-3 py-1.5 rounded-full" style="background-color: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.5);"> <span class="w-1 h-1 rounded-full flex-shrink-0" style="background-color: #60a5fa;"></span> No templates </span><span class="inline-flex items-center gap-2 text-xs font-medium px-3 py-1.5 rounded-full" style="background-color: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.5);"> <span class="w-1 h-1 rounded-full flex-shrink-0" style="background-color: #60a5fa;"></span> No outsourcing </span><span class="inline-flex items-center gap-2 text-xs font-medium px-3 py-1.5 rounded-full" style="background-color: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.5);"> <span class="w-1 h-1 rounded-full flex-shrink-0" style="background-color: #60a5fa;"></span> No account managers </span> </div> <!-- Project dots — clean circular indicators --> <div id="hero-dots-desk" style="display:flex; gap:6px; align-items:center; margin-top: 3rem;"> <button data-dot="0" style="height:6px; width:6px; border-radius:50%; background:white; border:none; cursor:pointer; transition:all 0.3s; padding:0;"></button> <button data-dot="1" style="height:6px; width:6px; border-radius:50%; background:rgba(255,255,255,0.22); border:none; cursor:pointer; transition:all 0.3s; padding:0;"></button> <button data-dot="2" style="height:6px; width:6px; border-radius:50%; background:rgba(255,255,255,0.22); border:none; cursor:pointer; transition:all 0.3s; padding:0;"></button> <button data-dot="3" style="height:6px; width:6px; border-radius:50%; background:rgba(255,255,255,0.22); border:none; cursor:pointer; transition:all 0.3s; padding:0;"></button> </div> </div> </div> <!-- Right: full-bleed image panel — bleeds to right viewport edge --> <div style="flex: 0 0 50%; max-width: 50%; position: relative; overflow: hidden;"> <!-- The image fills the entire right half --> <img id="hero-desk-img" src="https://d2xsxph8kpxj0f.cloudfront.net/310519663036985142/ah7wkAUgNVB2ahQ8cV5Bq4/hero_unleash_desktop_b40c63e4.webp" alt="" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:left top; transition: opacity 0.8s ease;" loading="eager"> <!-- Left-edge fade: image dissolves into page background --> <div class="absolute inset-y-0 left-0 pointer-events-none" style="width: 45%; background: linear-gradient(to right, #080c18 0%, rgba(8,12,24,0.6) 50%, transparent 100%);"></div> <!-- Top vignette --> <div class="absolute inset-x-0 top-0 pointer-events-none" style="height: 160px; background: linear-gradient(to bottom, rgba(8,12,24,0.75) 0%, transparent 100%);"></div> <!-- Bottom info overlay --> <div class="absolute inset-x-0 bottom-0 pointer-events-none" style="height: 160px; background: linear-gradient(to top, rgba(8,12,24,0.92) 30%, transparent 100%);"></div> <!-- Live badge --> <div style="position:absolute; top:24px; right:24px; display:inline-flex; align-items:center; gap:6px; padding:5px 14px; border-radius:999px; background:rgba(0,0,0,0.45); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.12); font-size:11px; font-weight:600; color:rgba(255,255,255,0.85); letter-spacing:0.03em;"> <span style="width:6px; height:6px; border-radius:50%; background:#34d399; animation:pulse 2s infinite; flex-shrink:0;"></span>
Live project
</div> <!-- Project label — bottom left of image panel --> <div style="position:absolute; bottom:28px; left:28px; right:28px;"> <div id="hero-desk-label" style="font-size:16px; font-weight:700; color:#e8650a; margin-bottom:4px; letter-spacing:-0.01em;">Per4Mance Diesel Tuning</div> <div id="hero-desk-sub" style="font-size:12px; color:rgba(255,255,255,0.48);">Website — Brisbane</div> </div> </div> </div> <!-- MOBILE layout: copy then full-width cinematic image band --> <div class="lg:hidden flex flex-col" style="min-height: 100vh;"> <!-- Copy --> <div class="flex-1 px-4 sm:px-6 pt-24 pb-8 flex flex-col justify-center"> <div class="inline-flex items-center space-x-2.5 rounded-full px-4 py-1.5 mb-8 self-start" style="background-color: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);"> <span class="w-1.5 h-1.5 bg-emerald-400 rounded-full" style="animation: pulse 2s infinite;"></span> <span class="text-xs font-medium" style="color: rgba(255,255,255,0.55);">Based in Co. Louth, Ireland · Working globally since 1994</span> </div> <h1 style="font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2.4rem, 9vw, 3.4rem); line-height: 1.05; margin-bottom: 1.25rem; letter-spacing: -0.02em;"> <span style="color: rgba(255,255,255,0.95);">Thirty years of</span> <br> <span style="background: linear-gradient(90deg, #60a5fa 0%, #a78bfa 50%, #60a5fa 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
building things that work.
</span> </h1> <p class="text-base leading-relaxed mb-8" style="color: rgba(255,255,255,0.58);">
Web designer, digital consultant, and software developer. I build websites, tools, and digital systems for businesses that need them to perform — not just exist.
</p> <div class="flex flex-col sm:flex-row gap-3 mb-8"> <a href="/contact" class="inline-flex items-center justify-center px-6 py-3.5 text-sm font-semibold rounded-md transition-all hover:opacity-90 min-h-[44px]" style="background-color: white; color: #080c18;">
Work with me →
</a> <a href="/work" class="inline-flex items-center justify-center px-6 py-3.5 text-sm font-semibold rounded-md transition-all hover:bg-white/10 min-h-[44px]" style="background-color: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); color: white;">
View my work
</a> </div> <div class="flex flex-wrap items-center gap-2"> <span class="inline-flex items-center gap-2 text-xs font-medium px-3 py-1.5 rounded-full" style="background-color: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.5);"> <span class="w-1 h-1 rounded-full flex-shrink-0" style="background-color: #60a5fa;"></span> No templates </span><span class="inline-flex items-center gap-2 text-xs font-medium px-3 py-1.5 rounded-full" style="background-color: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.5);"> <span class="w-1 h-1 rounded-full flex-shrink-0" style="background-color: #60a5fa;"></span> No outsourcing </span><span class="inline-flex items-center gap-2 text-xs font-medium px-3 py-1.5 rounded-full" style="background-color: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.5);"> <span class="w-1 h-1 rounded-full flex-shrink-0" style="background-color: #60a5fa;"></span> No account managers </span> </div> </div> <!-- Cinematic image band — bleeds edge to edge --> <div class="-mx-0 relative overflow-hidden" style="height: 260px; flex-shrink: 0;"> <img id="hero-mob-img" src="https://d2xsxph8kpxj0f.cloudfront.net/310519663036985142/ah7wkAUgNVB2ahQ8cV5Bq4/hero_unleash_desktop_b40c63e4.webp" alt="" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:left top; transition: opacity 0.7s ease;" loading="eager"> <div class="absolute inset-y-0 left-0 pointer-events-none" style="width:15%; background: linear-gradient(to right, #080c18, transparent);"></div> <div class="absolute inset-y-0 right-0 pointer-events-none" style="width:15%; background: linear-gradient(to left, #080c18, transparent);"></div> <div class="absolute inset-x-0 top-0 pointer-events-none" style="height:70px; background: linear-gradient(to bottom, #080c18, transparent);"></div> <div class="absolute inset-x-0 bottom-0 pointer-events-none" style="height:100px; background: linear-gradient(to top, #080c18 30%, transparent 100%);"></div> <div style="position:absolute; bottom:16px; left:16px; right:16px; display:flex; align-items:flex-end; justify-content:space-between;"> <div> <div id="hero-mob-label" style="font-size:13px; font-weight:700; color:#e8650a; margin-bottom:2px;">Per4Mance Diesel Tuning</div> <div id="hero-mob-sub" style="font-size:11px; color:rgba(255,255,255,0.45);">Website — Brisbane</div> </div> <div id="hero-mob-dots" class="flex gap-1.5 items-center"> <button data-mob="0" style="height:6px; width:6px; border-radius:50%; background:white; border:none; cursor:pointer; padding:0; transition:all 0.3s;"></button> <button data-mob="1" style="height:6px; width:6px; border-radius:50%; background:rgba(255,255,255,0.25); border:none; cursor:pointer; padding:0; transition:all 0.3s;"></button> <button data-mob="2" style="height:6px; width:6px; border-radius:50%; background:rgba(255,255,255,0.25); border:none; cursor:pointer; padding:0; transition:all 0.3s;"></button> <button data-mob="3" style="height:6px; width:6px; border-radius:50%; background:rgba(255,255,255,0.25); border:none; cursor:pointer; padding:0; transition:all 0.3s;"></button> </div> </div> </div> </div> <!-- Shared auto-rotate script --> <script>
        (function(){
          var projects = [
            { img: 'https://d2xsxph8kpxj0f.cloudfront.net/310519663036985142/ah7wkAUgNVB2ahQ8cV5Bq4/hero_unleash_desktop_b40c63e4.webp', label: 'Per4Mance Diesel Tuning', sub: 'Website — Brisbane', accent: '#e8650a', pos: 'left top' },
            { img: 'https://d2xsxph8kpxj0f.cloudfront.net/310519663036985142/ah7wkAUgNVB2ahQ8cV5Bq4/06-dramatic-angle-hero-marketing_25b8d93a.webp', label: 'The Hanson Clinic', sub: 'Patient management platform', accent: '#c9a84c', pos: 'center top' },
            { img: 'https://d2xsxph8kpxj0f.cloudfront.net/310519663036985142/ah7wkAUgNVB2ahQ8cV5Bq4/hero_desktop_e7dce8df.webp', label: 'Shopify Feed Processor', sub: 'Automotive e-commerce tool', accent: '#34d399', pos: 'center' },
            { img: 'https://d2xsxph8kpxj0f.cloudfront.net/310519663036985142/ah7wkAUgNVB2ahQ8cV5Bq4/hero_all_dashboards_desktop_5dd43ccd.webp', label: 'WordPresto', sub: 'AI-powered SEO platform', accent: '#c084fc', pos: 'left top' },
          ];
          var cur = 0, INTERVAL = 4500, timer = null;
          // Desktop elements
          var deskImg   = document.getElementById('hero-desk-img');
          var deskLabel = document.getElementById('hero-desk-label');
          var deskSub   = document.getElementById('hero-desk-sub');
          var deskDots  = document.querySelectorAll('#hero-dots-desk [data-dot]');
          // Mobile elements
          var mobImg    = document.getElementById('hero-mob-img');
          var mobLabel  = document.getElementById('hero-mob-label');
          var mobSub    = document.getElementById('hero-mob-sub');
          var mobDots   = document.querySelectorAll('#hero-mob-dots [data-mob]');
          // Preload all images immediately
          projects.forEach(function(p) { var i = new Image(); i.src = p.img; });

          function swap(imgEl, src, pos) {
            if (!imgEl) return;
            imgEl.style.opacity = '0';
            setTimeout(function(){ imgEl.src = src; imgEl.style.objectPosition = pos; imgEl.style.opacity = '1'; }, 380);
          }
          function goTo(i) {
            cur = i; elapsed = 0;
            var p = projects[i];
            swap(deskImg, p.img, p.pos);
            swap(mobImg,  p.img, p.pos);
            if (deskLabel) { deskLabel.textContent = p.label; deskLabel.style.color = p.accent; }
            if (deskSub)   { deskSub.textContent   = p.sub; }
            if (mobLabel)  { mobLabel.textContent  = p.label; mobLabel.style.color = p.accent; }
            if (mobSub)    { mobSub.textContent    = p.sub; }
            deskDots.forEach(function(d, j) {
              d.style.transform = j === i ? 'scale(1.5)' : 'scale(1)';
              d.style.background = j === i ? 'white' : 'rgba(255,255,255,0.22)';
            });
            mobDots.forEach(function(d, j) {
              d.style.transform = j === i ? 'scale(1.5)' : 'scale(1)';
              d.style.background = j === i ? 'white' : 'rgba(255,255,255,0.25)';
            });
          }
          deskDots.forEach(function(d) { d.addEventListener('click', function(){ goTo(parseInt(d.dataset.dot)); }); });
          mobDots.forEach(function(d)  { d.addEventListener('click', function(){ goTo(parseInt(d.dataset.mob)); }); });

          timer = setInterval(function() { goTo((cur + 1) % projects.length); }, INTERVAL);
        })();
      </script> </section> <!-- ============================================================
         2. CREDIBILITY + HEADSHOT
         Immediately after hero — establishes who Patrick is
         and why the visitor should trust him before anything else.
         ============================================================ --> <section class="relative" style="background-color: #060810; padding: clamp(4rem, 10vw, 7rem) 0 4rem;"> <div class="px-4 sm:px-6 lg:px-8"> <div class="max-w-6xl mx-auto"> <!-- Two-column: text left, headshot right --> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-end mb-16"> <!-- Left: headline --> <div> <p class="text-xs font-semibold uppercase tracking-[0.2em] mb-10" style="color: rgba(255,255,255,0.28);">Since 1994</p> <h2 class="font-bold leading-tight" style="font-family: 'Playfair Display', serif; font-size: clamp(2.2rem, 4.5vw, 3.8rem); color: rgba(255,255,255,0.93); line-height: 1.08;">
I have been building the web since before most agencies existed.
<span style="color: rgba(255,255,255,0.32);"> No layers. No outsourcing. No account managers between you and the person doing the work.</span> </h2> </div> <!-- Right: headshot — transparent background, fades at bottom --> <div class="relative flex justify-center lg:justify-end" style="max-height: clamp(280px, 55vw, 520px); overflow: hidden;"> <img src="https://d2xsxph8kpxj0f.cloudfront.net/310519663036985142/ah7wkAUgNVB2ahQ8cV5Bq4/headshot-nobg-900_467266ed.webp" srcset="https://d2xsxph8kpxj0f.cloudfront.net/310519663036985142/ah7wkAUgNVB2ahQ8cV5Bq4/headshot-nobg-600_68e4bb2b.webp 600w, https://d2xsxph8kpxj0f.cloudfront.net/310519663036985142/ah7wkAUgNVB2ahQ8cV5Bq4/headshot-nobg-900_467266ed.webp 900w, https://d2xsxph8kpxj0f.cloudfront.net/310519663036985142/ah7wkAUgNVB2ahQ8cV5Bq4/headshot-nobg-1200_d6def11c.webp 1200w" sizes="(max-width: 1024px) 400px, 520px" alt="Patrick Ryall" width="900" height="900" loading="lazy" decoding="async" style="width: auto; height: 520px; object-fit: contain; object-position: bottom; display: block; mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 60%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 60%, transparent 100%);"> </div> </div> <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-5 mt-10 sm:mt-16"> <div class="relative p-6 sm:p-8 rounded-xl" style="background-color: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.07); border-top: 3px solid #60a5fa;"> <div class="mb-6" style="color: #60a5fa;"><svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6l4 2m6-2a10 10 0 11-20 0 10 10 0 0120 0z"/></svg></div> <div class="text-lg font-bold mb-4" style="font-family: 'Playfair Display', serif; color: rgba(255,255,255,0.93);">Since 1994</div> <p class="text-sm leading-relaxed" style="color: rgba(255,255,255,0.5);">Started building websites before Google existed, before broadband was common. That depth of experience informs every technical and design decision.</p> </div><div class="relative p-6 sm:p-8 rounded-xl" style="background-color: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.07); border-top: 3px solid #34d399;"> <div class="mb-6" style="color: #34d399;"><svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg></div> <div class="text-lg font-bold mb-4" style="font-family: 'Playfair Display', serif; color: rgba(255,255,255,0.93);">No layers</div> <p class="text-sm leading-relaxed" style="color: rgba(255,255,255,0.5);">No account managers. No outsourced developers. No junior staff doing the work. You deal directly with the person who has been doing this for thirty years.</p> </div><div class="relative p-6 sm:p-8 rounded-xl" style="background-color: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.07); border-top: 3px solid #c084fc;"> <div class="mb-6" style="color: #c084fc;"><svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div> <div class="text-lg font-bold mb-4" style="font-family: 'Playfair Display', serif; color: rgba(255,255,255,0.93);">You own it</div> <p class="text-sm leading-relaxed" style="color: rgba(255,255,255,0.5);">Every project is delivered as yours to keep. No vendor lock-in, no recurring platform fees, no dependency on a third-party builder. Your site or application runs on infrastructure you control.</p> </div> </div> <div class="mt-14"> <a href="/about" class="inline-flex items-center gap-2 text-sm font-semibold transition-all hover:gap-3 min-h-[44px]" style="color: rgba(255,255,255,0.55);">
Read the full story
<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="M17 8l4 4m0 0l-4 4m4-4H3"></path> </svg> </a> </div> </div> </div> </section> <!-- ============================================================
         3. SERVICES
         What I do — Own It / Automate It / Build It.
         ============================================================ --> <section class="py-24 px-4 sm:px-6 lg:px-8" style="background-color: #0a0e1a;"> <div class="max-w-6xl mx-auto"> <div class="mb-16"> <p class="text-xs font-semibold uppercase tracking-[0.2em] mb-6" style="color: rgba(255,255,255,0.28);">What I do</p> <h2 class="font-bold" style="font-family: 'Playfair Display', serif; font-size: clamp(2rem, 4vw, 3rem); color: rgba(255,255,255,0.93); max-width: 600px;">
Own It. Automate It. Build It.
</h2> </div> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event("astro:load"));})();;(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script><astro-island uid="ZOFh5A" prefix="r0" component-url="/_astro/ServiceAccordion.2lTeIfJS.js" component-export="default" renderer-url="/_astro/client.BvyMsgXv.js" props="{}" ssr="" client="load" opts="{&quot;name&quot;:&quot;ServiceAccordion&quot;,&quot;value&quot;:true}" await-children=""><div class="space-y-12"><div><div class="flex items-baseline gap-5 mb-4 pb-4" style="border-bottom:1px solid rgba(255,255,255,0.07)"><span class="text-2xl font-bold tracking-tight" style="font-family:&#x27;Playfair Display&#x27;, serif;color:rgba(255,255,255,0.93)">Own It</span><span class="text-sm hidden sm:block" style="color:rgba(255,255,255,0.32)">Your website. Your brand. Built to perform.</span></div><div class="divide-y" style="border-color:rgba(255,255,255,0.06)"><div style="transition:background-color 0.2s ease;background-color:rgba(255,255,255,0.03)"><button class="w-full flex items-center gap-5 px-4 py-5 text-left focus:outline-none" style="cursor:pointer" aria-expanded="true"><span class="flex-shrink-0 text-xs font-mono w-7" style="color:rgba(255,255,255,0.2)">01</span><span class="flex-shrink-0 w-2 h-2 rounded-full" style="background-color:#60a5fa;box-shadow:0 0 10px #60a5fa;transition:box-shadow 0.3s ease"></span><span class="flex-1 font-bold text-lg" style="font-family:&#x27;Playfair Display&#x27;, serif;color:rgba(255,255,255,0.95);transition:color 0.2s ease">Web Design &amp; Development</span><span class="flex-shrink-0 w-7 h-7 rounded-full flex items-center justify-center border" style="border-color:#60a5fa;color:#60a5fa;transition:all 0.25s ease;transform:rotate(45deg)"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M6 1v10M1 6h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg></span></button><div style="display:grid;grid-template-rows:1fr;transition:grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1)"><div style="overflow:hidden"><div class="px-4 pb-8 pt-1" style="padding-left:calc(1rem + 1.75rem + 0.5rem + 0.75rem)"><div class="flex gap-8"><div class="flex-shrink-0 w-px self-stretch" style="background-color:#60a5fa;opacity:0.3"></div><div><p class="text-sm leading-relaxed mb-6" style="color:rgba(255,255,255,0.52);max-width:640px">Websites built to perform in search, load fast, and convert visitors into enquiries. Every project is designed and built from scratch — no templates, no page builders, no shortcuts.</p><div class="flex flex-wrap gap-2"><span class="text-xs px-3 py-1 rounded-full font-medium" style="background-color:#60a5fa12;color:#60a5fa;border:1px solid #60a5fa28">Astro</span><span class="text-xs px-3 py-1 rounded-full font-medium" style="background-color:#60a5fa12;color:#60a5fa;border:1px solid #60a5fa28">React</span><span class="text-xs px-3 py-1 rounded-full font-medium" style="background-color:#60a5fa12;color:#60a5fa;border:1px solid #60a5fa28">WordPress</span><span class="text-xs px-3 py-1 rounded-full font-medium" style="background-color:#60a5fa12;color:#60a5fa;border:1px solid #60a5fa28">Responsive</span></div></div></div></div></div></div></div><div style="transition:background-color 0.2s ease;background-color:transparent"><button class="w-full flex items-center gap-5 px-4 py-5 text-left focus:outline-none" style="cursor:pointer" aria-expanded="false"><span class="flex-shrink-0 text-xs font-mono w-7" style="color:rgba(255,255,255,0.2)">02</span><span class="flex-shrink-0 w-2 h-2 rounded-full" style="background-color:#2dd4bf;box-shadow:none;transition:box-shadow 0.3s ease"></span><span class="flex-1 font-bold text-lg" style="font-family:&#x27;Playfair Display&#x27;, serif;color:rgba(255,255,255,0.72);transition:color 0.2s ease">SEO &amp; Search Architecture</span><span class="flex-shrink-0 w-7 h-7 rounded-full flex items-center justify-center border" style="border-color:rgba(255,255,255,0.12);color:rgba(255,255,255,0.3);transition:all 0.25s ease;transform:rotate(0deg)"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M6 1v10M1 6h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg></span></button><div style="display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1)"><div style="overflow:hidden"><div class="px-4 pb-8 pt-1" style="padding-left:calc(1rem + 1.75rem + 0.5rem + 0.75rem)"><div class="flex gap-8"><div class="flex-shrink-0 w-px self-stretch" style="background-color:#2dd4bf;opacity:0.3"></div><div><p class="text-sm leading-relaxed mb-6" style="color:rgba(255,255,255,0.52);max-width:640px">Technical SEO from the ground up. Structured data, Core Web Vitals, crawlability audits, and content architecture — addressing the root causes that prevent websites from ranking, not surface-level fixes.</p><div class="flex flex-wrap gap-2"><span class="text-xs px-3 py-1 rounded-full font-medium" style="background-color:#2dd4bf12;color:#2dd4bf;border:1px solid #2dd4bf28">Schema.org</span><span class="text-xs px-3 py-1 rounded-full font-medium" style="background-color:#2dd4bf12;color:#2dd4bf;border:1px solid #2dd4bf28">Core Web Vitals</span><span class="text-xs px-3 py-1 rounded-full font-medium" style="background-color:#2dd4bf12;color:#2dd4bf;border:1px solid #2dd4bf28">Structured data</span><span class="text-xs px-3 py-1 rounded-full font-medium" style="background-color:#2dd4bf12;color:#2dd4bf;border:1px solid #2dd4bf28">Content strategy</span></div></div></div></div></div></div></div><div style="transition:background-color 0.2s ease;background-color:transparent"><button class="w-full flex items-center gap-5 px-4 py-5 text-left focus:outline-none" style="cursor:pointer" aria-expanded="false"><span class="flex-shrink-0 text-xs font-mono w-7" style="color:rgba(255,255,255,0.2)">03</span><span class="flex-shrink-0 w-2 h-2 rounded-full" style="background-color:#fb923c;box-shadow:none;transition:box-shadow 0.3s ease"></span><span class="flex-1 font-bold text-lg" style="font-family:&#x27;Playfair Display&#x27;, serif;color:rgba(255,255,255,0.72);transition:color 0.2s ease">IT Consulting &amp; Digital Strategy</span><span class="flex-shrink-0 w-7 h-7 rounded-full flex items-center justify-center border" style="border-color:rgba(255,255,255,0.12);color:rgba(255,255,255,0.3);transition:all 0.25s ease;transform:rotate(0deg)"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M6 1v10M1 6h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg></span></button><div style="display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1)"><div style="overflow:hidden"><div class="px-4 pb-8 pt-1" style="padding-left:calc(1rem + 1.75rem + 0.5rem + 0.75rem)"><div class="flex gap-8"><div class="flex-shrink-0 w-px self-stretch" style="background-color:#fb923c;opacity:0.3"></div><div><p class="text-sm leading-relaxed mb-6" style="color:rgba(255,255,255,0.52);max-width:640px">Thirty years of hands-on experience across web, software, and infrastructure. Technology decisions without the agency overhead — direct advice on what to build, what to fix, and what to leave alone.</p><div class="flex flex-wrap gap-2"><span class="text-xs px-3 py-1 rounded-full font-medium" style="background-color:#fb923c12;color:#fb923c;border:1px solid #fb923c28">Architecture</span><span class="text-xs px-3 py-1 rounded-full font-medium" style="background-color:#fb923c12;color:#fb923c;border:1px solid #fb923c28">Audits</span><span class="text-xs px-3 py-1 rounded-full font-medium" style="background-color:#fb923c12;color:#fb923c;border:1px solid #fb923c28">Roadmaps</span><span class="text-xs px-3 py-1 rounded-full font-medium" style="background-color:#fb923c12;color:#fb923c;border:1px solid #fb923c28">Strategy</span></div></div></div></div></div></div></div></div></div><div><div class="flex items-baseline gap-5 mb-4 pb-4" style="border-bottom:1px solid rgba(255,255,255,0.07)"><span class="text-2xl font-bold tracking-tight" style="font-family:&#x27;Playfair Display&#x27;, serif;color:rgba(255,255,255,0.93)">Automate It</span><span class="text-sm hidden sm:block" style="color:rgba(255,255,255,0.32)">Replace the manual. Eliminate the repetitive.</span></div><div class="divide-y" style="border-color:rgba(255,255,255,0.06)"><div style="transition:background-color 0.2s ease;background-color:transparent"><button class="w-full flex items-center gap-5 px-4 py-5 text-left focus:outline-none" style="cursor:pointer" aria-expanded="false"><span class="flex-shrink-0 text-xs font-mono w-7" style="color:rgba(255,255,255,0.2)">04</span><span class="flex-shrink-0 w-2 h-2 rounded-full" style="background-color:#34d399;box-shadow:none;transition:box-shadow 0.3s ease"></span><span class="flex-1 font-bold text-lg" style="font-family:&#x27;Playfair Display&#x27;, serif;color:rgba(255,255,255,0.72);transition:color 0.2s ease">Automation &amp; Workflow Tools</span><span class="flex-shrink-0 w-7 h-7 rounded-full flex items-center justify-center border" style="border-color:rgba(255,255,255,0.12);color:rgba(255,255,255,0.3);transition:all 0.25s ease;transform:rotate(0deg)"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M6 1v10M1 6h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg></span></button><div style="display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1)"><div style="overflow:hidden"><div class="px-4 pb-8 pt-1" style="padding-left:calc(1rem + 1.75rem + 0.5rem + 0.75rem)"><div class="flex gap-8"><div class="flex-shrink-0 w-px self-stretch" style="background-color:#34d399;opacity:0.3"></div><div><p class="text-sm leading-relaxed mb-6" style="color:rgba(255,255,255,0.52);max-width:640px">Identify the manual, repetitive processes in your operation and replace them with reliable automated systems. Feed processors, data pipelines, scheduled tasks, and integrations between platforms.</p><div class="flex flex-wrap gap-2"><span class="text-xs px-3 py-1 rounded-full font-medium" style="background-color:#34d39912;color:#34d399;border:1px solid #34d39928">Data pipelines</span><span class="text-xs px-3 py-1 rounded-full font-medium" style="background-color:#34d39912;color:#34d399;border:1px solid #34d39928">Shopify</span><span class="text-xs px-3 py-1 rounded-full font-medium" style="background-color:#34d39912;color:#34d399;border:1px solid #34d39928">CSV processing</span><span class="text-xs px-3 py-1 rounded-full font-medium" style="background-color:#34d39912;color:#34d399;border:1px solid #34d39928">Scheduled jobs</span></div></div></div></div></div></div></div><div style="transition:background-color 0.2s ease;background-color:transparent"><button class="w-full flex items-center gap-5 px-4 py-5 text-left focus:outline-none" style="cursor:pointer" aria-expanded="false"><span class="flex-shrink-0 text-xs font-mono w-7" style="color:rgba(255,255,255,0.2)">05</span><span class="flex-shrink-0 w-2 h-2 rounded-full" style="background-color:#c084fc;box-shadow:none;transition:box-shadow 0.3s ease"></span><span class="flex-1 font-bold text-lg" style="font-family:&#x27;Playfair Display&#x27;, serif;color:rgba(255,255,255,0.72);transition:color 0.2s ease">AI Integration</span><span class="flex-shrink-0 w-7 h-7 rounded-full flex items-center justify-center border" style="border-color:rgba(255,255,255,0.12);color:rgba(255,255,255,0.3);transition:all 0.25s ease;transform:rotate(0deg)"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M6 1v10M1 6h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg></span></button><div style="display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1)"><div style="overflow:hidden"><div class="px-4 pb-8 pt-1" style="padding-left:calc(1rem + 1.75rem + 0.5rem + 0.75rem)"><div class="flex gap-8"><div class="flex-shrink-0 w-px self-stretch" style="background-color:#c084fc;opacity:0.3"></div><div><p class="text-sm leading-relaxed mb-6" style="color:rgba(255,255,255,0.52);max-width:640px">Practical AI integration that solves real business problems. Content pipelines, document processing, intelligent search, and custom-trained tooling that delivers measurable output.</p><div class="flex flex-wrap gap-2"><span class="text-xs px-3 py-1 rounded-full font-medium" style="background-color:#c084fc12;color:#c084fc;border:1px solid #c084fc28">OpenAI</span><span class="text-xs px-3 py-1 rounded-full font-medium" style="background-color:#c084fc12;color:#c084fc;border:1px solid #c084fc28">Claude</span><span class="text-xs px-3 py-1 rounded-full font-medium" style="background-color:#c084fc12;color:#c084fc;border:1px solid #c084fc28">Gemini</span><span class="text-xs px-3 py-1 rounded-full font-medium" style="background-color:#c084fc12;color:#c084fc;border:1px solid #c084fc28">LLM pipelines</span></div></div></div></div></div></div></div></div></div><div><div class="flex items-baseline gap-5 mb-4 pb-4" style="border-bottom:1px solid rgba(255,255,255,0.07)"><span class="text-2xl font-bold tracking-tight" style="font-family:&#x27;Playfair Display&#x27;, serif;color:rgba(255,255,255,0.93)">Build It</span><span class="text-sm hidden sm:block" style="color:rgba(255,255,255,0.32)">Custom software that does exactly what you need.</span></div><div class="divide-y" style="border-color:rgba(255,255,255,0.06)"><div style="transition:background-color 0.2s ease;background-color:transparent"><button class="w-full flex items-center gap-5 px-4 py-5 text-left focus:outline-none" style="cursor:pointer" aria-expanded="false"><span class="flex-shrink-0 text-xs font-mono w-7" style="color:rgba(255,255,255,0.2)">06</span><span class="flex-shrink-0 w-2 h-2 rounded-full" style="background-color:#f472b6;box-shadow:none;transition:box-shadow 0.3s ease"></span><span class="flex-1 font-bold text-lg" style="font-family:&#x27;Playfair Display&#x27;, serif;color:rgba(255,255,255,0.72);transition:color 0.2s ease">Web Applications &amp; Platforms</span><span class="flex-shrink-0 w-7 h-7 rounded-full flex items-center justify-center border" style="border-color:rgba(255,255,255,0.12);color:rgba(255,255,255,0.3);transition:all 0.25s ease;transform:rotate(0deg)"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M6 1v10M1 6h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg></span></button><div style="display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1)"><div style="overflow:hidden"><div class="px-4 pb-8 pt-1" style="padding-left:calc(1rem + 1.75rem + 0.5rem + 0.75rem)"><div class="flex gap-8"><div class="flex-shrink-0 w-px self-stretch" style="background-color:#f472b6;opacity:0.3"></div><div><p class="text-sm leading-relaxed mb-6" style="color:rgba(255,255,255,0.52);max-width:640px">Custom web applications built to replace manual processes, spreadsheets, and disconnected tools. From patient management systems to product feed processors — purpose-built software that does exactly what your business needs.</p><div class="flex flex-wrap gap-2"><span class="text-xs px-3 py-1 rounded-full font-medium" style="background-color:#f472b612;color:#f472b6;border:1px solid #f472b628">Full-stack</span><span class="text-xs px-3 py-1 rounded-full font-medium" style="background-color:#f472b612;color:#f472b6;border:1px solid #f472b628">Node.js</span><span class="text-xs px-3 py-1 rounded-full font-medium" style="background-color:#f472b612;color:#f472b6;border:1px solid #f472b628">PostgreSQL</span><span class="text-xs px-3 py-1 rounded-full font-medium" style="background-color:#f472b612;color:#f472b6;border:1px solid #f472b628">APIs</span></div></div></div></div></div></div></div><div style="transition:background-color 0.2s ease;background-color:transparent"><button class="w-full flex items-center gap-5 px-4 py-5 text-left focus:outline-none" style="cursor:pointer" aria-expanded="false"><span class="flex-shrink-0 text-xs font-mono w-7" style="color:rgba(255,255,255,0.2)">07</span><span class="flex-shrink-0 w-2 h-2 rounded-full" style="background-color:#fbbf24;box-shadow:none;transition:box-shadow 0.3s ease"></span><span class="flex-1 font-bold text-lg" style="font-family:&#x27;Playfair Display&#x27;, serif;color:rgba(255,255,255,0.72);transition:color 0.2s ease">Utilities &amp; Micro-Tools</span><span class="flex-shrink-0 w-7 h-7 rounded-full flex items-center justify-center border" style="border-color:rgba(255,255,255,0.12);color:rgba(255,255,255,0.3);transition:all 0.25s ease;transform:rotate(0deg)"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M6 1v10M1 6h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg></span></button><div style="display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1)"><div style="overflow:hidden"><div class="px-4 pb-8 pt-1" style="padding-left:calc(1rem + 1.75rem + 0.5rem + 0.75rem)"><div class="flex gap-8"><div class="flex-shrink-0 w-px self-stretch" style="background-color:#fbbf24;opacity:0.3"></div><div><p class="text-sm leading-relaxed mb-6" style="color:rgba(255,255,255,0.52);max-width:640px">Lightweight, focused tools built for a single job. Quoting systems, calculators, estimators, lead capture tools, and client-facing utilities that solve one specific problem exceptionally well.</p><div class="flex flex-wrap gap-2"><span class="text-xs px-3 py-1 rounded-full font-medium" style="background-color:#fbbf2412;color:#fbbf24;border:1px solid #fbbf2428">SaaS tools</span><span class="text-xs px-3 py-1 rounded-full font-medium" style="background-color:#fbbf2412;color:#fbbf24;border:1px solid #fbbf2428">Lead generation</span><span class="text-xs px-3 py-1 rounded-full font-medium" style="background-color:#fbbf2412;color:#fbbf24;border:1px solid #fbbf2428">Quoting</span><span class="text-xs px-3 py-1 rounded-full font-medium" style="background-color:#fbbf2412;color:#fbbf24;border:1px solid #fbbf2428">Client portals</span></div></div></div></div></div></div></div></div></div></div><!--astro:end--></astro-island> <div class="w-full h-px mt-4" style="background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08) 30%, rgba(255,255,255,0.08) 70%, transparent);"></div> </div> </section> <!-- ============================================================
         4. SELECTED WORK — editorial full-bleed cards
         ============================================================ --> <section class="px-4 sm:px-6 lg:px-8 py-20 sm:py-24" style="background-color: #080c18;"> <div class="max-w-6xl mx-auto"> <div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-10"> <div> <p class="text-xs font-semibold uppercase tracking-[0.22em] mb-4" style="color: rgba(255,255,255,0.28);">Selected work</p> <h2 class="font-bold" style="font-family: 'Playfair Display', serif; font-size: clamp(2rem, 4vw, 3rem); color: rgba(255,255,255,0.93);">Projects built to perform.</h2> </div> <a href="/work" class="text-sm font-semibold transition-all hover:opacity-70 pb-1 flex-shrink-0" style="color: rgba(255,255,255,0.45);">View all work &rarr;</a> </div> <!-- Featured: first project full-width --> <a href="/work/diesel-tuning" class="group relative block rounded-2xl overflow-hidden mb-4" style="background-color: #111111; min-height: 500px;"> <img src="https://d2xsxph8kpxj0f.cloudfront.net/310519663036985142/ah7wkAUgNVB2ahQ8cV5Bq4/hero_unleash_desktop_b40c63e4.webp" alt="Per4Mance Diesel Tuning" class="absolute inset-0 w-full h-full object-cover object-left-top transition-transform duration-700 group-hover:scale-[1.02]" loading="lazy"> <div class="absolute inset-0" style="background: linear-gradient(105deg, rgba(14,11,8,0.9) 0%, rgba(14,11,8,0.65) 40%, rgba(14,11,8,0.1) 70%, transparent 100%);"></div> <div class="absolute inset-0" style="background: linear-gradient(to top, rgba(14,11,8,0.65) 0%, transparent 50%);"></div> <div class="relative z-10 flex flex-col justify-end h-full p-8 sm:p-12 lg:p-14" style="min-height: 500px;"> <div class="flex flex-wrap gap-2 mb-auto pt-1"> <span class="text-xs font-semibold px-3 py-1 rounded-full" style="background-color: rgba(232,101,10,0.15); color: #e8650a; border: 1px solid rgba(232,101,10,0.3);">Website</span> <span class="text-xs px-3 py-1 rounded-full" style="background-color: rgba(255,255,255,0.08); color: rgba(255,255,255,0.55);">Automotive</span><span class="text-xs px-3 py-1 rounded-full" style="background-color: rgba(255,255,255,0.08); color: rgba(255,255,255,0.55);">Brisbane</span> </div> <div class="mt-20 max-w-xl"> <h3 class="font-bold mb-3" style="font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 3.5vw, 2.8rem); color: rgba(255,255,255,0.96);">Per4Mance Diesel Tuning</h3> <p class="text-sm leading-relaxed mb-5" style="color: rgba(255,255,255,0.58); max-width: 480px;">High-impact marketing website for Brisbane&#39;s diesel ECU specialists. Industrial visual design, local SEO architecture, conversion-focused copy.</p> <span class="inline-flex items-center gap-2 text-sm font-semibold transition-all group-hover:gap-3" style="color: #e8650a;">
View case study
<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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg> </span> </div> </div> </a> <!-- 3-column grid for remaining projects --> <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <a href="/work/hanson-clinic" class="group relative block rounded-2xl overflow-hidden" style="background-color: #12100e; min-height: 380px;"> <img src="https://d2xsxph8kpxj0f.cloudfront.net/310519663036985142/ah7wkAUgNVB2ahQ8cV5Bq4/06-dramatic-angle-hero-marketing_25b8d93a.webp" alt="The Hanson Clinic" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-[1.02]" loading="lazy"> <div class="absolute inset-0" style="background: linear-gradient(to top, #12100ef0 0%, #12100e90 40%, #12100e20 70%, transparent 100%);"></div> <div class="relative z-10 flex flex-col justify-end h-full p-6 sm:p-7" style="min-height: 380px;"> <div class="flex flex-wrap gap-1.5 mb-auto pt-1"> <span class="text-xs font-semibold px-2.5 py-1 rounded-full" style="background-color: rgba(201,168,76,0.15); color: #c9a84c; border: 1px solid rgba(201,168,76,0.3);">Web Application</span> </div> <div class="mt-12"> <h3 class="font-bold mb-2" style="font-family: 'Playfair Display', serif; font-size: clamp(1.2rem, 2vw, 1.5rem); color: rgba(255,255,255,0.95);">The Hanson Clinic</h3> <p class="text-xs leading-relaxed mb-4" style="color: rgba(255,255,255,0.5); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">Full-stack patient management platform replacing email inboxes and spreadsheets. Consultation intake, booking, document management, email audit trail.</p> <span class="inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-[0.1em] transition-all group-hover:gap-2.5" style="color: #c9a84c;">
View case study
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg> </span> </div> </div> </a><a href="/work/shopify-feed-processor" class="group relative block rounded-2xl overflow-hidden" style="background-color: #050818; min-height: 380px;"> <img src="https://d2xsxph8kpxj0f.cloudfront.net/310519663036985142/ah7wkAUgNVB2ahQ8cV5Bq4/hero_desktop_e7dce8df.webp" alt="Shopify Feed Processor" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-[1.02]" loading="lazy"> <div class="absolute inset-0" style="background: linear-gradient(to top, #050818f0 0%, #05081890 40%, #05081820 70%, transparent 100%);"></div> <div class="relative z-10 flex flex-col justify-end h-full p-6 sm:p-7" style="min-height: 380px;"> <div class="flex flex-wrap gap-1.5 mb-auto pt-1"> <span class="text-xs font-semibold px-2.5 py-1 rounded-full" style="background-color: rgba(0,200,240,0.1); color: #00c8f0; border: 1px solid rgba(0,200,240,0.25);">Web Application</span> </div> <div class="mt-12"> <h3 class="font-bold mb-2" style="font-family: 'Playfair Display', serif; font-size: clamp(1.2rem, 2vw, 1.5rem); color: rgba(255,255,255,0.95);">Shopify Feed Processor</h3> <p class="text-xs leading-relaxed mb-4" style="color: rgba(255,255,255,0.5); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">Automates the full workflow from raw supplier CSV to live Shopify listings across 35,000+ SKUs. AI-assisted editing, VAT-aware pricing, bulk sync.</p> <span class="inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-[0.1em] transition-all group-hover:gap-2.5" style="color: #00c8f0;">
View case study
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg> </span> </div> </div> </a><a href="/work/wordpresto" class="group relative block rounded-2xl overflow-hidden" style="background-color: #050510; min-height: 380px;"> <img src="https://d2xsxph8kpxj0f.cloudfront.net/310519663036985142/ah7wkAUgNVB2ahQ8cV5Bq4/hero_all_dashboards_desktop_5dd43ccd.webp" alt="WordPresto" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-[1.02]" loading="lazy"> <div class="absolute inset-0" style="background: linear-gradient(to top, #050510f0 0%, #05051090 40%, #05051020 70%, transparent 100%);"></div> <div class="relative z-10 flex flex-col justify-end h-full p-6 sm:p-7" style="min-height: 380px;"> <div class="flex flex-wrap gap-1.5 mb-auto pt-1"> <span class="text-xs font-semibold px-2.5 py-1 rounded-full" style="background-color: rgba(124,58,237,0.15); color: #c084fc; border: 1px solid rgba(124,58,237,0.3);">Web Application</span> </div> <div class="mt-12"> <h3 class="font-bold mb-2" style="font-family: 'Playfair Display', serif; font-size: clamp(1.2rem, 2vw, 1.5rem); color: rgba(255,255,255,0.95);">WordPresto</h3> <p class="text-xs leading-relaxed mb-4" style="color: rgba(255,255,255,0.5); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">Enterprise-grade WordPress SEO platform. 95-point automated auditing, 6 AI models for content enhancement, 10-layer safe edit system.</p> <span class="inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-[0.1em] transition-all group-hover:gap-2.5" style="color: #c084fc;">
View case study
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg> </span> </div> </div> </a> </div> </div> </section> <!-- ============================================================
         5. TESTIMONIALS
         Social proof immediately after credibility claims —
         reinforces the trust section rather than sitting
         disconnected at the bottom.
         ============================================================ --> <section class="py-24 px-4 sm:px-6 lg:px-8" style="background-color: #080c18;"> <div class="max-w-6xl mx-auto"> <div class="mb-16"> <p class="text-xs font-semibold uppercase tracking-[0.2em] mb-6" style="color: rgba(255,255,255,0.28);">What clients say</p> <h2 class="font-bold" style="font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 3.5vw, 2.6rem); color: rgba(255,255,255,0.93); max-width: 520px;">
Results that speak for themselves.
</h2> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="relative p-6 sm:p-8 rounded-xl" style="background-color: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);"> <div class="text-4xl font-serif leading-none mb-6" style="color: #60a5fa; opacity: 0.5;">&ldquo;</div> <p class="text-sm leading-relaxed mb-8" style="color: rgba(255,255,255,0.62); font-style: italic;">Used Managed Spaces for my side business and had an incredible experience working with Patrick who was very patient, attentive and showed great care. The website looks gorgeous and I was surprised how quickly it was up and running. Highly recommended!!!</p> <div class="flex items-center gap-3"> <span class="w-2 h-2 rounded-full flex-shrink-0" style="background-color: #60a5fa;"></span> <div> <div class="text-sm font-semibold" style="color: rgba(255,255,255,0.85);">Ivan Esterajher</div> <div class="text-xs" style="color: #60a5fa;">Google Review</div> </div> </div> </div><div class="relative p-6 sm:p-8 rounded-xl" style="background-color: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);"> <div class="text-4xl font-serif leading-none mb-6" style="color: #c9a84c; opacity: 0.5;">&ldquo;</div> <p class="text-sm leading-relaxed mb-8" style="color: rgba(255,255,255,0.62); font-style: italic;">I am so happy with my new website. It is easy to navigate and exceeded my expectations. The service was very efficient, professional and smooth. I would highly recommend this company to anyone looking for a website.</p> <div class="flex items-center gap-3"> <span class="w-2 h-2 rounded-full flex-shrink-0" style="background-color: #c9a84c;"></span> <div> <div class="text-sm font-semibold" style="color: rgba(255,255,255,0.85);">Lynn Murdock</div> <div class="text-xs" style="color: #c9a84c;">Divinity Aesthetics</div> </div> </div> </div><div class="relative p-6 sm:p-8 rounded-xl" style="background-color: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);"> <div class="text-4xl font-serif leading-none mb-6" style="color: #34d399; opacity: 0.5;">&ldquo;</div> <p class="text-sm leading-relaxed mb-8" style="color: rgba(255,255,255,0.62); font-style: italic;">Managed Spaces built our website, and we could not be happier. Patrick was easy to deal with, even with us located in Australia, the entire process was organised and easy. I highly recommend him, and I will be using his services again.</p> <div class="flex items-center gap-3"> <span class="w-2 h-2 rounded-full flex-shrink-0" style="background-color: #34d399;"></span> <div> <div class="text-sm font-semibold" style="color: rgba(255,255,255,0.85);">Albin Buchner</div> <div class="text-xs" style="color: #34d399;">Intake Cleaning</div> </div> </div> </div><div class="relative p-6 sm:p-8 rounded-xl" style="background-color: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);"> <div class="text-4xl font-serif leading-none mb-6" style="color: #c084fc; opacity: 0.5;">&ldquo;</div> <p class="text-sm leading-relaxed mb-8" style="color: rgba(255,255,255,0.62); font-style: italic;">Had a great experience with Managed Spaces from start to finish. Very easy to deal with, and the website was up and running in no time. It is simple to use, looks great and captures exactly what I wanted! Thank you again</p> <div class="flex items-center gap-3"> <span class="w-2 h-2 rounded-full flex-shrink-0" style="background-color: #c084fc;"></span> <div> <div class="text-sm font-semibold" style="color: rgba(255,255,255,0.85);">Rachael Byrne</div> <div class="text-xs" style="color: #c084fc;">Google Review</div> </div> </div> </div> </div> </div> </section> <!-- ============================================================
         6. CTA
         Final call to action — only exit point to contact.
         ============================================================ --> <section class="relative overflow-hidden" style="background-color: #060810;"> <div class="w-full h-px" style="background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08) 30%, rgba(255,255,255,0.08) 70%, transparent);"></div> <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-0"> <div class="py-14 sm:py-20 lg:py-24 pr-0 lg:pr-20 border-b lg:border-b-0 lg:border-r" style="border-color: rgba(255,255,255,0.07);"> <p class="text-xs font-semibold uppercase tracking-[0.2em] mb-10" style="color: rgba(255,255,255,0.28);">Let's work together</p> <h2 class="font-bold leading-tight mb-0" style="font-family: 'Playfair Display', serif; font-size: clamp(2.2rem, 4.5vw, 3.8rem); color: rgba(255,255,255,0.93); line-height: 1.06;">
Have a project in mind?
<br> <span style="color: rgba(255,255,255,0.3);">Let's talk about it.</span> </h2> </div> <div class="py-14 sm:py-20 lg:py-24 pl-0 lg:pl-20 flex flex-col justify-center"> <p class="text-base leading-relaxed mb-10" style="color: rgba(255,255,255,0.5); max-width: 420px;">
Whether it is a new website, a custom web application, an automation tool, or AI integration — I work directly with you from the first conversation to the final delivery. No layers.
</p> <div class="space-y-4 mb-12"> <div class="flex items-center gap-3"> <span class="w-1 h-1 rounded-full flex-shrink-0" style="background-color: #60a5fa;"></span> <span class="text-sm" style="color: rgba(255,255,255,0.55);">Web design &amp; development</span> </div><div class="flex items-center gap-3"> <span class="w-1 h-1 rounded-full flex-shrink-0" style="background-color: #34d399;"></span> <span class="text-sm" style="color: rgba(255,255,255,0.55);">Custom web applications</span> </div><div class="flex items-center gap-3"> <span class="w-1 h-1 rounded-full flex-shrink-0" style="background-color: #c084fc;"></span> <span class="text-sm" style="color: rgba(255,255,255,0.55);">Automation &amp; AI integration</span> </div><div class="flex items-center gap-3"> <span class="w-1 h-1 rounded-full flex-shrink-0" style="background-color: #fb923c;"></span> <span class="text-sm" style="color: rgba(255,255,255,0.55);">SEO &amp; search architecture</span> </div> </div> <div class="flex flex-col sm:flex-row gap-4"> <a href="/contact" class="inline-flex items-center justify-center px-7 py-3.5 text-sm font-semibold rounded-md transition-all hover:opacity-90 min-h-[44px]" style="background-color: white; color: #060810;">
Start a conversation
<svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path> </svg> </a> <a href="/work" class="inline-flex items-center justify-center px-7 py-3.5 text-sm font-semibold rounded-md transition-all hover:bg-white/10 min-h-[44px]" style="background-color: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: white;">
View all work
</a> </div> </div> </div> </div> <div class="w-full h-px" style="background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08) 30%, rgba(255,255,255,0.08) 70%, transparent);"></div> </section> <footer style="background-color: #0f1f3d;" class="text-white"> <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16"> <!-- 2-col on mobile, 4-col on md+ --> <div class="grid grid-cols-2 md:grid-cols-4 gap-8 sm:gap-10"> <!-- Brand — spans full width on mobile, 2 cols on md+ --> <div class="col-span-2 md:col-span-2"> <div class="flex items-center space-x-3 mb-5"> <div class="w-9 h-9 bg-white rounded-lg flex items-center justify-center text-sm font-bold flex-shrink-0" style="color: #0f1f3d; font-family: Georgia, serif;">PR</div> <span class="font-semibold" style="font-family: Inter, sans-serif;">Patrick Ryall</span> </div> <p class="text-gray-400 text-sm leading-relaxed" style="max-width: 320px;">
Web designer, digital consultant, and software developer based in Ireland. Building websites since 1994.
</p> <div class="mt-5 flex flex-wrap gap-x-5 gap-y-1"> <a href="https://managedspaces.net" target="_blank" rel="noopener noreferrer" class="text-xs text-gray-400 hover:text-white transition-colors inline-flex items-center min-h-[44px]">
managedspaces.net
</a> <a href="https://aestute.com" target="_blank" rel="noopener noreferrer" class="text-xs text-gray-400 hover:text-white transition-colors inline-flex items-center min-h-[44px]">
aestute.com
</a> </div> </div> <!-- Navigation --> <div> <h3 class="text-xs font-semibold uppercase tracking-wider text-gray-400 mb-3">Navigation</h3> <ul class="space-y-0"> <li><a href="/" class="text-sm text-gray-400 hover:text-white transition-colors inline-flex items-center min-h-[44px]">Home</a></li> <li><a href="/about" class="text-sm text-gray-400 hover:text-white transition-colors inline-flex items-center min-h-[44px]">About</a></li> <li><a href="/work" class="text-sm text-gray-400 hover:text-white transition-colors inline-flex items-center min-h-[44px]">Work</a></li> <li><a href="/contact" class="text-sm text-gray-400 hover:text-white transition-colors inline-flex items-center min-h-[44px]">Contact</a></li> <li><a href="/ventures" class="text-sm text-gray-400 hover:text-white transition-colors inline-flex items-center min-h-[44px]">Ventures</a></li> </ul> </div> <!-- Work --> <div> <h3 class="text-xs font-semibold uppercase tracking-wider text-gray-400 mb-3">Work</h3> <ul class="space-y-0"> <li><a href="/work/diesel-tuning" class="text-sm text-gray-400 hover:text-white transition-colors inline-flex items-center min-h-[44px]">Per4Mance Diesel</a></li> <li><a href="/work/divinity-aesthetics" class="text-sm text-gray-400 hover:text-white transition-colors inline-flex items-center min-h-[44px]">Divinity Aesthetics</a></li> <li><a href="/work/intake-cleaning" class="text-sm text-gray-400 hover:text-white transition-colors inline-flex items-center min-h-[44px]">Intake Cleaning</a></li> <li><a href="/work/hanson-clinic" class="text-sm text-gray-400 hover:text-white transition-colors inline-flex items-center min-h-[44px]">The Hanson Clinic</a></li> <li><a href="/work/shopify-feed-processor" class="text-sm text-gray-400 hover:text-white transition-colors inline-flex items-center min-h-[44px]">Shopify Feed</a></li> <li><a href="/work/wordpresto" class="text-sm text-gray-400 hover:text-white transition-colors inline-flex items-center min-h-[44px]">WordPresto</a></li> <li><a href="/work/franklin-motors" class="text-sm text-gray-400 hover:text-white transition-colors inline-flex items-center min-h-[44px]">Franklin Motors</a></li> </ul> </div> </div> <div class="mt-10 pt-8 border-t border-white/10 flex flex-col sm:flex-row items-center justify-between gap-3"> <p class="text-gray-500 text-xs">&copy; 2026 Patrick Ryall. All rights reserved.</p> <p class="text-gray-500 text-xs">Based in Ireland &middot; Working globally since 1994</p> </div> </div> </footer> </div>  <manus-content-root></manus-content-root><script>
			var __manus_space_editor_info = {
			spaceId : 'ah7wkAUgNVB2ahQ8cV5Bq4',
			patchList : [],
			hideBadge : true,
			sessionId : 'H4P6vJIkd7FtXxzlo3bST5',
			isWebDev : true,
			usageStatus : 'UsageStatus_Unknown',
			};
			var __manus__global_env = {
				apiHost: 'https://api.manus.im',
				host: 'https://manus.im',
				amplitudeKey: '46ac3f9abb41dd2d17a5785e052bc6d3',
			};
			</script><script src="https://files.manuscdn.com/manus-space-dispatcher/spaceEditor-DPV-_I11.js" async></script><script
			defer
			data-domain="manus.space"
			src="https://plausible.io/js/script.file-downloads.hash.outbound-links.pageview-props.revenue.tagged-events.js"
		></script>
		<script>
			window.plausible =
				window.plausible ||
				function () {
					(window.plausible.q = window.plausible.q || []).push(arguments);
				};
			plausible('custom-pageview', {
			  props: {
    			domain: window.location.host
  			}
			})
		</script></body></html>