<!DOCTYPE html><html lang="en" dir="ltr" class="2xl:text-[20px]"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="sitemap" href="/sitemap-index.xml"><link rel="shortcut icon" href="/_astro/favicon.CZylFSO5.ico"><style>
  :root {
    /* Fonts */
    --aw-font-sans: 'Inter Variable', sans-serif;
    --aw-font-serif: 'Inter Variable', sans-serif;
    --aw-font-heading: 'Inter Variable', sans-serif;

    /* Colors (Light Mode) */
    --aw-color-primary: #4A90E2; /* Cool Blue */
    --aw-color-secondary: #70B7F0; /* Light Sky Blue */
    --aw-color-accent: #2D5F98; /* Deep Blue */

    --aw-color-text-heading: #0D1B2A; /* Dark Navy */
    --aw-color-text-default: #334E68; /* Soft Navy */
    --aw-color-text-muted: #708090; /* Slate Gray */
    --aw-color-bg-page: #F7FAFC; /* Light Cool Gray */
    --aw-color-bg-card: #FFFFFF; /* True White */

    ::selection {
      background-color: #70B7F0; /* Light Sky Blue */
      color: #0D1B2A; /* Dark Navy */
    }
  }

  .dark {
    /* Fonts */
    --aw-font-sans: 'Inter Variable', sans-serif;
    --aw-font-serif: 'Inter Variable', sans-serif;
    --aw-font-heading: 'Inter Variable', sans-serif;

    /* Colors (Dark Mode) */
    --aw-color-primary: #2D5F98; /* Deep Blue */
    --aw-color-secondary: #4A90E2; /* Cool Blue */
    --aw-color-accent: #70B7F0; /* Light Sky Blue */

    --aw-color-text-heading: #E0E6ED; /* Light Gray-Blue */
    --aw-color-text-default: #B8C5D3; /* Medium Gray-Blue */
    --aw-color-text-muted: #A0AEC0; /* Muted Gray-Blue */
    --aw-color-bg-page: #070f20; /* Rich Navy */
    --aw-color-bg-card: #2D3748; /* Deep Gray-Blue */

    /* Input Field Styling */
    --aw-color-input-text: #FFFFFF; /* White */
    --aw-color-input-bg: #4A5568;  /* Charcoal Gray */

    ::selection {
      background-color: #4A90E2; /* Cool Blue */
      color: #F7FAFC; /* Light Cool Gray */
    }
  }
</style><script>(function(){const defaultTheme = "light";

  function applyTheme(theme) {
    if (theme === 'dark') {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
    const matches = document.querySelectorAll('[data-aw-toggle-color-scheme] > input');

    if (matches && matches.length) {
      matches.forEach((elem) => {
        elem.checked = theme !== 'dark';
      });
    }
  }

  if ((defaultTheme && defaultTheme.endsWith(':only')) || (!localStorage.theme && defaultTheme !== 'system')) {
    applyTheme(defaultTheme.replace(':only', ''));
  } else if (
    localStorage.theme === 'dark' ||
    (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
  ) {
    applyTheme('dark');
  } else {
    applyTheme('light');
  }
})();</script><title>Chris Hammond - Innovator, Creator, and Technologist | Christopher Hammond</title>
<meta name="description" content="Chris Hammond&#39;s home on the web, information about and from Chris out of St. Louis Missouri, a technoogist, software developer, community advocate and more.">
<meta name="robots" content="index,follow">
<link rel="canonical" href="https://www.chrishammond.com">
<meta property="og:title" content="Chris Hammond - Innovator, Creator, and Technologist | Christopher Hammond">
<meta property="og:description" content="Chris Hammond&#39;s home on the web, information about and from Chris out of St. Louis Missouri, a technoogist, software developer, community advocate and more.">
<meta property="og:url" content="https://www.chrishammond.com">
<meta property="og:type" content="website">
<meta property="og:image" content="">

<meta property="og:locale" content="en">
<meta property="og:site_name" content="ChrisHammond.com">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@christoc">
<meta name="twitter:creator" content="@Christoc"><script async src="https://www.googletagmanager.com/gtag/js?id=G-TJHNR8YCR0"></script><script>(function(){const id = "G-TJHNR8YCR0";

  window.dataLayer = window.dataLayer || [];
  function gtag() {
    window.dataLayer.push(arguments);
  }
  gtag("js", new Date());
  gtag("config", id);
})();</script><!-- Comment the line below to disable View Transitions --><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="swap"><script type="module" src="/_astro/ClientRouter.astro_astro_type_script_index_0_lang.j56hQv-j.js"></script><link rel="stylesheet" href="/_astro/Layout.DgFmOMaJ.css"></head> <body class="antialiased text-default bg-page tracking-tight">   <div class="dark text-muted text-sm bg-black dark:bg-transparent dark:border-b dark:border-slate-800 dark:text-slate-400 hidden md:flex gap-1 overflow-hidden px-3 py-2 relative text-ellipsis whitespace-nowrap"> <span class="dark:bg-slate-700 bg-white/40 dark:text-slate-300 font-semibold px-1 py-0.5 text-xs mr-0.5 rtl:mr-0 rtl:ml-0.5 inline-block">Welcome to my new </span> <a href="/2025/new-chris-hammond-com" class="text-muted hover:underline dark:text-slate-400 font-medium"> website!</a> </div>   <header class="sticky top-0 z-40 flex-none mx-auto w-full border-b border-gray-50/0 transition-[opacity] ease-in-out" data-aw-sticky-header="true" id="header"> <div class="absolute inset-0"></div> <div class="relative text-default py-3 px-3 md:px-6 mx-auto w-full md:grid md:grid-cols-3 md:items-center max-w-7xl"> <div class="flex justify-between"> <a class="flex items-center" href="/"> <span class="self-center ml-2 rtl:ml-0 rtl:mr-2 text-2xl md:text-xl font-bold text-gray-900 whitespace-nowrap dark:text-white"> <img src="/assets/images/smallhead.png" width="35px" height="50px" alt="Chris Hammond's Head" style="float:left; height:50px;">Chris Hammond </span> </a> <div class="flex items-center md:hidden"> <button type="button" class="flex flex-col h-12 w-12 rounded justify-center items-center cursor-pointer group" aria-label="Toggle Menu" data-aw-toggle-menu> <span class="sr-only">Toggle Menu</span>  <span aria-hidden="true" class="h-0.5 w-6 my-1 rounded-full bg-black dark:bg-white transition ease transform duration-200 opacity-80 group-[.expanded]:rotate-45 group-[.expanded]:translate-y-2.5"></span> <span aria-hidden="true" class="h-0.5 w-6 my-1 rounded-full bg-black dark:bg-white transition ease transform duration-200 opacity-80 group-[.expanded]:opacity-0"></span> <span aria-hidden="true" class="h-0.5 w-6 my-1 rounded-full bg-black dark:bg-white transition ease transform duration-200 opacity-80 group-[.expanded]:-rotate-45 group-[.expanded]:-translate-y-2.5"></span>  </button> </div> </div> <nav class="items-center w-full md:w-auto hidden md:flex md:mx-5 text-default overflow-y-auto overflow-x-hidden md:overflow-y-visible md:overflow-x-auto md:justify-self-center" aria-label="Main navigation"> <ul class="flex flex-col md:flex-row md:self-center w-full md:w-auto text-xl md:text-[0.9375rem] tracking-[0.01rem] font-medium md:justify-center"> <li class> <a class="hover:text-link dark:hover:text-white px-4 py-3 flex items-center whitespace-nowrap" href="/blog"> Blog </a> </li><li class> <a class="hover:text-link dark:hover:text-white px-4 py-3 flex items-center whitespace-nowrap" href="/about"> About </a> </li><li class> <a class="hover:text-link dark:hover:text-white px-4 py-3 flex items-center whitespace-nowrap" href="/contact"> Contact </a> </li><li class> <a class="hover:text-link dark:hover:text-white px-4 py-3 flex items-center whitespace-nowrap" href="https://rainbowmarks.com/"> Photography </a> </li><li class> <a class="hover:text-link dark:hover:text-white px-4 py-3 flex items-center whitespace-nowrap" href="/search"> Search </a> </li> </ul> </nav> <div class="hidden md:self-center md:flex items-center md:mb-0 fixed w-full md:w-auto md:static justify-end left-0 rtl:left-auto rtl:right-0 bottom-0 p-3 md:p-0 md:justify-self-end"> <div class="items-center flex justify-between w-full md:w-auto"> <div class="flex"> <button type="button" class="text-muted dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center" aria-label="Toggle between Dark and Light mode" data-aw-toggle-color-scheme><svg width="1em" height="1em" class="w-6 h-6 md:w-5 md:h-5 md:inline-block" data-icon="tabler:sun">   <symbol id="ai:tabler:sun" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12a4 4 0 1 0 8 0a4 4 0 1 0-8 0m-5 0h1m8-9v1m8 8h1m-9 8v1M5.6 5.6l.7.7m12.1-.7l-.7.7m0 11.4l.7.7m-12.1-.7l-.7.7"/></symbol><use href="#ai:tabler:sun"></use>  </svg></button> <a class="text-muted dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center" aria-label="RSS Feed" href="/rss.xml"> <svg width="1em" height="1em" class="w-5 h-5" data-icon="tabler:rss">   <symbol id="ai:tabler:rss" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 19a1 1 0 1 0 2 0a1 1 0 1 0-2 0M4 4a16 16 0 0 1 16 16M4 11a9 9 0 0 1 9 9"/></symbol><use href="#ai:tabler:rss"></use>  </svg> </a> </div>  </div> </div> </div> </header>  <main>   <section class="relative md:-mt-[76px] not-prose"> <div class="absolute inset-0 pointer-events-none" aria-hidden="true">    </div> <div class="relative max-w-7xl mx-auto px-4 sm:px-6"> <div class="pt-0 md:pt-[76px] pointer-events-none"></div> <div class="py-12 md:py-20"> <div class="text-center pb-10 md:pb-16 max-w-5xl mx-auto">  <h1 class="text-5xl md:text-6xl font-bold leading-tighter tracking-tighter mb-4 font-heading dark:text-gray-200 intersect-once intersect-quarter motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade">
Welcome to Chris Hammond's home on the web, a
<span class="text-accent dark:text-white highlight">passionate technologist, creator, and innovator!</span> </h1> <div class="max-w-3xl mx-auto"> <p class="text-xl text-muted mb-6 dark:text-slate-300 intersect-once intersect-quarter motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade"> <span class="hidden sm:inline">
Explore projects, insights, and updates from Christopher Hammond, covering tech, photography, racing, and more.
</span> </p> <div class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4 intersect-once intersect-quarter motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade"> <div class="flex w-full sm:w-auto"> <a class="btn-primary w-full sm:mb-0" target="_self" rel="noopener noreferrer" href="/blog">Read more of my posts!<svg width="1em" height="1em" class="w-5 h-5 ml-1 -mr-1.5 rtl:mr-1 rtl:-ml-1.5 inline-block" data-icon="tabler:glass">   <symbol id="ai:tabler:glass" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M8 21h8m-4-5v5m5-16l1 6c0 3.012-2.686 5-6 5s-6-1.988-6-5l1-6"/><path d="M7 5a5 2 0 1 0 10 0A5 2 0 1 0 7 5"/></g></symbol><use href="#ai:tabler:glass"></use>  </svg></a> </div><div class="flex w-full sm:w-auto"> <a class="btn-secondary w-full sm:mb-0" href="/about">About me</a> </div> </div> </div>  </div> <div class="intersect-once intercept-no-queue intersect-quarter motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade"> <div class="relative m-auto max-w-5xl"> <img src="/_astro/hero-image.CcYkqeZn_Z1FeTiF.webp" srcset="/_astro/hero-image.CcYkqeZn_2e1zW.webp 400w, /_astro/hero-image.CcYkqeZn_Z13z0k8.webp 768w, /_astro/hero-image.CcYkqeZn_ZVAlRD.webp 862w" sizes="(max-width: 767px) 400px, (max-width: 1023px) 768px, (max-width: 2039px) 1024px, 2040px" loading="eager" alt="Chris Hammond Hero Image" aspectRatio="2:1.999" decoding="async" width="1024" height="576" class="mx-auto rounded-md w-full"> </div> </div> </div> </div> </section>  <section class="bg-blue-50 dark:bg-slate-800 not-prose"> <div class="max-w-6xl mx-auto px-4 sm:px-6 py-4 text-md text-center font-medium"> <span class="font-bold"> <svg width="1em" height="1em" class="w-5 h-5 inline-block align-text-bottom" data-icon="tabler:info-square">   <symbol id="ai:tabler:info-square" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M12 9h.01M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M11 12h1v4h1"/></g></symbol><use href="#ai:tabler:info-square"></use>  </svg> Welcome!</span> Thanks for visiting my site!
</div> </section>   <section class="relative not-prose scroll-mt-[72px]" id="blog"> <div class="absolute inset-0 pointer-events-none -z-[1]" aria-hidden="true">   <div class="absolute inset-0 bg-yellow-50 dark:bg-transparent"></div>   </div> <div class="relative mx-auto max-w-7xl px-4 md:px-6 py-12 md:py-16 lg:py-20 text-default intersect-once intersect-quarter intercept-no-queue motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade"> <div class="flex flex-col lg:justify-between lg:flex-row mb-8"><div class="md:max-w-sm"><h2 class="text-3xl font-bold tracking-tight sm:text-4xl sm:leading-none group font-heading mb-2">Check Out My Blog</h2><a class="cursor-pointer hover:text-primary" href="/blog"> View all posts »
</a></div><p class="text-muted dark:text-slate-400 lg:text-sm lg:max-w-md">Stay updated with life news, reviews, and technology deep dives from me!</p></div><div class="grid gap-6 row-gap-5 md:grid-cols-2 lg:grid-cols-4 -mb-6"> <article class="mb-6 transition intersect-once intersect-quarter motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade"> <div class="relative md:h-64 bg-gray-400 dark:bg-slate-700 rounded shadow-lg mb-6"> <a href="/2025/youth-hockey-scouting-pages"> <img src="/_astro/teamgame2-1.CxQg3Pkd_ZbL8km.webp" srcset="/_astro/teamgame2-1.CxQg3Pkd_ZbL8km.webp 400w, /_astro/teamgame2-1.CxQg3Pkd_uROQE.webp 900w" sizes="(max-width: 900px) 400px, 900px" alt="How to create a scouting portal for your youth hockey team" aspectRatio="16:9" loading="lazy" decoding="async" width="400" height="376" class="w-full md:h-full rounded shadow-lg bg-gray-400 dark:bg-slate-700 layout-cover"> </a> </div> <h3 class="text-xl sm:text-2xl font-bold leading-tight mb-2 font-heading dark:text-slate-300"> <a class="inline-block hover:text-primary dark:hover:text-blue-700 transition ease-in duration-200" href="/2025/youth-hockey-scouting-pages"> How to create a scouting portal for your youth hockey team </a> </h3> <p class="text-muted dark:text-slate-400 text-lg">Introducing the Scouting Portal repository — a project designed to organize, track, and share youth hockey scouting information in a structured, reusable way.</p> </article><article class="mb-6 transition intersect-once intersect-quarter motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade"> <div class="relative md:h-64 bg-gray-400 dark:bg-slate-700 rounded shadow-lg mb-6"> <a href="/2025/adobe-indigo-iphone-17-promax"> <img src="/_astro/indigo.Bym4i1Fm_1Ebxpy.webp" srcset="/_astro/indigo.Bym4i1Fm_1Ebxpy.webp 400w, /_astro/indigo.Bym4i1Fm_Z1CGECt.webp 900w" sizes="(max-width: 900px) 400px, 900px" alt="Adobe Indigo not working on iPhone 17 Pro Max" aspectRatio="16:9" loading="lazy" decoding="async" width="400" height="600" class="w-full md:h-full rounded shadow-lg bg-gray-400 dark:bg-slate-700 layout-cover"> </a> </div> <h3 class="text-xl sm:text-2xl font-bold leading-tight mb-2 font-heading dark:text-slate-300"> <a class="inline-block hover:text-primary dark:hover:text-blue-700 transition ease-in duration-200" href="/2025/adobe-indigo-iphone-17-promax"> Adobe Indigo not working on iPhone 17 Pro Max </a> </h3> <p class="text-muted dark:text-slate-400 text-lg">Adobe Indigo, the camera app, is currently not functioning on Apple’s newly released iPhone 17 lineup.</p> </article><article class="mb-6 transition intersect-once intersect-quarter motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade"> <div class="relative md:h-64 bg-gray-400 dark:bg-slate-700 rounded shadow-lg mb-6"> <a href="/2025/pihole-v6-dietpi"> <img src="/_astro/pihole-webserver-error.DNvm9UA-_3D5Sg.webp" srcset="/_astro/pihole-webserver-error.DNvm9UA-_3D5Sg.webp 400w, /_astro/pihole-webserver-error.DNvm9UA-_1EMMbw.webp 649w" sizes="(max-width: 900px) 400px, 900px" alt="PiHole V6 problems on DietPi" aspectRatio="16:9" loading="lazy" decoding="async" width="400" height="205" class="w-full md:h-full rounded shadow-lg bg-gray-400 dark:bg-slate-700 layout-cover"> </a> </div> <h3 class="text-xl sm:text-2xl font-bold leading-tight mb-2 font-heading dark:text-slate-300"> <a class="inline-block hover:text-primary dark:hover:text-blue-700 transition ease-in duration-200" href="/2025/pihole-v6-dietpi"> PiHole V6 problems on DietPi </a> </h3> <p class="text-muted dark:text-slate-400 text-lg">Error accessing the PiHole web interface after upgrading to PiHole Version 6</p> </article><article class="mb-6 transition intersect-once intersect-quarter motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade"> <div class="relative md:h-64 bg-gray-400 dark:bg-slate-700 rounded shadow-lg mb-6"> <a href="/2025/handling-redirects-in-astro"> <img src="/_astro/redirects.Buhee5oJ_Z2jBYry.webp" srcset="/_astro/redirects.Buhee5oJ_Z2jBYry.webp 400w, /_astro/redirects.Buhee5oJ_1wSF0C.webp 900w" sizes="(max-width: 900px) 400px, 900px" alt="Using Netlify and Astro to handle 20+ years of blog urls" aspectRatio="16:9" loading="lazy" decoding="async" width="400" height="92" class="w-full md:h-full rounded shadow-lg bg-gray-400 dark:bg-slate-700 layout-cover"> </a> </div> <h3 class="text-xl sm:text-2xl font-bold leading-tight mb-2 font-heading dark:text-slate-300"> <a class="inline-block hover:text-primary dark:hover:text-blue-700 transition ease-in duration-200" href="/2025/handling-redirects-in-astro"> Using Netlify and Astro to handle 20+ years of blog urls </a> </h3> <p class="text-muted dark:text-slate-400 text-lg">How I handled URLs after migrating to Astro</p> </article> </div> </div> </section> <section class="relative not-prose scroll-mt-[72px]" id="features"> <div class="absolute inset-0 pointer-events-none -z-[1]" aria-hidden="true">  <div class="absolute inset-0">  </div>  </div> <div class="relative mx-auto px-4 md:px-6 py-12 md:py-16 lg:py-20 text-default intersect-once intersect-quarter intercept-no-queue motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade max-w-5xl">  <div class="mb-8 md:mx-auto md:mb-12 text-center max-w-3xl"><p class="text-base text-secondary dark:text-blue-200 font-bold tracking-wide uppercase">Explore</p><h2 class="font-bold leading-tighter tracking-tighter font-heading text-heading text-3xl md:text-4xl">What You'll Find Here</h2><p class="mt-4 text-muted text-xl">ChrisHammond.com is a hub for creativity, technology, and personal insights, showcasing projects, hobbies, and expertise.</p></div> <div class="grid mx-auto gap-8 md:gap-y-12 sm:grid-cols-2"><div class="intersect-once motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade"><div class="flex flex-row max-w-md"><div class="flex justify-center"><svg width="1em" height="1em" class="text-white bg-primary rounded-full w-10 h-10 p-2 md:w-12 md:h-12 md:p-3 mr-4 rtl:ml-4 rtl:mr-0" data-icon="tabler:device-laptop">   <symbol id="ai:tabler:device-laptop" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 19h18M5 7a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1z"/></symbol><use href="#ai:tabler:device-laptop"></use>  </svg></div><div class="mt-0.5"><h3 class="text-xl font-bold md:text-[1.3rem]"><a href="/tag/technology">💻 Tech Insights</a></h3><p class="mt-3 text-muted">Discover articles, tutorials, and updates on the latest tech trends and personal projects.</p></div></div></div><div class="intersect-once motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade"><div class="flex flex-row max-w-md"><div class="flex justify-center"><svg width="1em" height="1em" class="text-white bg-primary rounded-full w-10 h-10 p-2 md:w-12 md:h-12 md:p-3 mr-4 rtl:ml-4 rtl:mr-0" data-icon="tabler:camera">   <symbol id="ai:tabler:camera" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M5 7h1a2 2 0 0 0 2-2a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2"/><path d="M9 13a3 3 0 1 0 6 0a3 3 0 0 0-6 0"/></g></symbol><use href="#ai:tabler:camera"></use>  </svg></div><div class="mt-0.5"><h3 class="text-xl font-bold md:text-[1.3rem]"><a href="/tag/photography">📷 Photography Adventures</a></h3><p class="mt-3 text-muted">Explore my passion for photography, featuring galleries, tips, and behind-the-scenes stories.</p></div></div></div><div class="intersect-once motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade"><div class="flex flex-row max-w-md"><div class="flex justify-center"><svg width="1em" height="1em" class="text-white bg-primary rounded-full w-10 h-10 p-2 md:w-12 md:h-12 md:p-3 mr-4 rtl:ml-4 rtl:mr-0" data-icon="tabler:car">   <symbol id="ai:tabler:car" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M5 17a2 2 0 1 0 4 0a2 2 0 1 0-4 0m10 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0"/><path d="M5 17H3v-6l2-5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0H9m-6-6h15m-6 0V6"/></g></symbol><use href="#ai:tabler:car"></use>  </svg></div><div class="mt-0.5"><h3 class="text-xl font-bold md:text-[1.3rem]"><a href="/tag/cars">🚗 Racing &amp; Cars</a></h3><p class="mt-3 text-muted">Dive into my love for racing and cars, including personal experiences and automotive projects.</p></div></div></div><div class="intersect-once motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade"><div class="flex flex-row max-w-md"><div class="flex justify-center"><svg width="1em" height="1em" class="text-white bg-primary rounded-full w-10 h-10 p-2 md:w-12 md:h-12 md:p-3 mr-4 rtl:ml-4 rtl:mr-0" data-icon="tabler:writing">   <symbol id="ai:tabler:writing" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 17V5c0-1.121-.879-2-2-2s-2 .879-2 2v12l2 2zM16 7h4m-2 12H5a2 2 0 1 1 0-4h4a2 2 0 1 0 0-4H6"/></symbol><use href="#ai:tabler:writing"></use>  </svg></div><div class="mt-0.5"><h3 class="text-xl font-bold md:text-[1.3rem]"><a href="/blog">📝 Personal Blog</a></h3><p class="mt-3 text-muted">Read personal stories, insights, and musings on a variety of topics, from everyday life to creative pursuits.</p></div></div></div><div class="intersect-once motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade"><div class="flex flex-row max-w-md"><div class="flex justify-center"><svg width="1em" height="1em" class="text-white bg-primary rounded-full w-10 h-10 p-2 md:w-12 md:h-12 md:p-3 mr-4 rtl:ml-4 rtl:mr-0" data-icon="tabler:users">   <symbol id="ai:tabler:users" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 7a4 4 0 1 0 8 0a4 4 0 1 0-8 0M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2m1-17.87a4 4 0 0 1 0 7.75M21 21v-2a4 4 0 0 0-3-3.85"/></symbol><use href="#ai:tabler:users"></use>  </svg></div><div class="mt-0.5"><h3 class="text-xl font-bold md:text-[1.3rem]"><a href="/tag/community">🌐 Community Connections</a></h3><p class="mt-3 text-muted">Connect with a network of like-minded individuals and explore collaborative opportunities.</p></div></div></div></div>  </div> </section>  <section class="relative not-prose scroll-mt-[72px]"> <div class="absolute inset-0 pointer-events-none -z-[1]" aria-hidden="true">  <div class="absolute inset-0">  </div>  </div> <div class="relative px-4 md:px-6 py-12 md:py-16 lg:py-20 text-default intersect-once intersect-quarter intercept-no-queue motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade mx-auto max-w-6xl">  <div class="mb-8 md:mx-auto md:mb-12 text-center max-w-3xl"><p class="text-base text-secondary dark:text-blue-200 font-bold tracking-wide uppercase">FAQs</p><h2 class="font-bold leading-tighter tracking-tighter font-heading text-heading text-3xl md:text-4xl">Frequently Asked Questions</h2><p class="mt-4 text-muted text-xl">Common questions about ChrisHammond.com and its content.</p></div> <div class="grid mx-auto gap-8 sm:grid-cols-2 gap-y-8 md:gap-y-12"><div class="intersect-once motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade"><div class="flex flex-row max-w-none"><div class="flex justify-center"><svg width="1em" height="1em" class="mr-2 rtl:mr-0 rtl:ml-2 flex-shrink-0 mt-1 w-6 h-6 text-primary" data-icon="tabler:chevron-right">   <symbol id="ai:tabler:chevron-right" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 6l6 6l-6 6"/></symbol><use href="#ai:tabler:chevron-right"></use>  </svg></div><div class="mt-0.5"><h3 class="text-xl font-bold"><a href="/about">What is ChrisHammond.com?</a></h3><p class="mt-3 text-muted">ChrisHammond.com is the personal website of Chris Hammond, showcasing his passions for technology, photography, racing, and more.</p></div></div></div><div class="intersect-once motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade"><div class="flex flex-row max-w-none"><div class="flex justify-center"><svg width="1em" height="1em" viewBox="0 0 24 24" class="mr-2 rtl:mr-0 rtl:ml-2 flex-shrink-0 mt-1 w-6 h-6 text-primary" data-icon="tabler:chevron-right">   <use href="#ai:tabler:chevron-right"></use>  </svg></div><div class="mt-0.5"><h3 class="text-xl font-bold"><a href="/tag/technology">What kind of content can I find here?</a></h3><p class="mt-3 text-muted">You'll find a mix of tech tutorials, photography galleries, racing projects, personal blog posts, and community connections.</p></div></div></div><div class="intersect-once motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade"><div class="flex flex-row max-w-none"><div class="flex justify-center"><svg width="1em" height="1em" viewBox="0 0 24 24" class="mr-2 rtl:mr-0 rtl:ml-2 flex-shrink-0 mt-1 w-6 h-6 text-primary" data-icon="tabler:chevron-right">   <use href="#ai:tabler:chevron-right"></use>  </svg></div><div class="mt-0.5"><h3 class="text-xl font-bold"><a href="/contact">How can I get in touch with Chris Hammond?</a></h3><p class="mt-3 text-muted">Feel free to reach out through the <a href='/contact' class='underline'>contact page</a>. I'd love to hear from you!</p></div></div></div><div class="intersect-once motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade"><div class="flex flex-row max-w-none"><div class="flex justify-center"><svg width="1em" height="1em" viewBox="0 0 24 24" class="mr-2 rtl:mr-0 rtl:ml-2 flex-shrink-0 mt-1 w-6 h-6 text-primary" data-icon="tabler:chevron-right">   <use href="#ai:tabler:chevron-right"></use>  </svg></div><div class="mt-0.5"><h3 class="text-xl font-bold"><a href="/contact">Can I collaborate with Chris Hammond?</a></h3><p class="mt-3 text-muted">Absolutely! Whether you're interested in technology, photography, or other shared interests, visit the <a href='/contact' class='underline'>contact page</a> to get started.</p></div></div></div><div class="intersect-once motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade"><div class="flex flex-row max-w-none"><div class="flex justify-center"><svg width="1em" height="1em" viewBox="0 0 24 24" class="mr-2 rtl:mr-0 rtl:ml-2 flex-shrink-0 mt-1 w-6 h-6 text-primary" data-icon="tabler:chevron-right">   <use href="#ai:tabler:chevron-right"></use>  </svg></div><div class="mt-0.5"><h3 class="text-xl font-bold"><a href="/tag/technology">What tools and technologies do you use?</a></h3><p class="mt-3 text-muted">I work with a range of tools and technologies, including C#, React, Azure, and modern photography equipment. Check the blog for detailed insights!</p></div></div></div><div class="intersect-once motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade"><div class="flex flex-row max-w-none"><div class="flex justify-center"><svg width="1em" height="1em" viewBox="0 0 24 24" class="mr-2 rtl:mr-0 rtl:ml-2 flex-shrink-0 mt-1 w-6 h-6 text-primary" data-icon="tabler:chevron-right">   <use href="#ai:tabler:chevron-right"></use>  </svg></div><div class="mt-0.5"><h3 class="text-xl font-bold"><a href="/tag/racing">What’s your experience in racing?</a></h3><p class="mt-3 text-muted">I've been involved in various racing projects and enjoy working on cars. Explore the site for stories, builds, and more!</p></div></div></div><div class="intersect-once motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade"><div class="flex flex-row max-w-none"><div class="flex justify-center"><svg width="1em" height="1em" viewBox="0 0 24 24" class="mr-2 rtl:mr-0 rtl:ml-2 flex-shrink-0 mt-1 w-6 h-6 text-primary" data-icon="tabler:chevron-right">   <use href="#ai:tabler:chevron-right"></use>  </svg></div><div class="mt-0.5"><h3 class="text-xl font-bold"><a href="/about">How can I support ChrisHammond.com?</a></h3><p class="mt-3 text-muted">Sharing the site, engaging with the content, and providing feedback are great ways to support. Thank you for your interest!</p></div></div></div></div>  </div> </section>  <section class="relative not-prose scroll-mt-[72px]"> <div class="absolute inset-0 pointer-events-none -z-[1]" aria-hidden="true">  <div class="absolute inset-0">  </div>  </div> <div class="relative px-4 md:px-6 py-12 md:py-16 lg:py-20 text-default intersect-once intersect-quarter intercept-no-queue motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade max-w-6xl mx-auto">   <div class="flex flex-wrap justify-center -m-4 text-center"> <div class="p-4 md:w-1/4 sm:w-1/2 w-full min-w-[220px] text-center md:border-r md:last:border-none dark:md:border-slate-500 intersect-once motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade intersect-quarter">  <div class="font-heading text-primary text-[2.6rem] font-bold dark:text-white lg:text-5xl xl:text-6xl"> 25+ </div> <div class="text-sm font-medium uppercase tracking-widest text-gray-800 dark:text-slate-400 lg:text-base"> Years of Experience </div> </div><div class="p-4 md:w-1/4 sm:w-1/2 w-full min-w-[220px] text-center md:border-r md:last:border-none dark:md:border-slate-500 intersect-once motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade intersect-quarter">  <div class="font-heading text-primary text-[2.6rem] font-bold dark:text-white lg:text-5xl xl:text-6xl"> 100+ </div> <div class="text-sm font-medium uppercase tracking-widest text-gray-800 dark:text-slate-400 lg:text-base"> Projects Completed </div> </div><div class="p-4 md:w-1/4 sm:w-1/2 w-full min-w-[220px] text-center md:border-r md:last:border-none dark:md:border-slate-500 intersect-once motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade intersect-quarter">  <div class="font-heading text-primary text-[2.6rem] font-bold dark:text-white lg:text-5xl xl:text-6xl"> 1million+ </div> <div class="text-sm font-medium uppercase tracking-widest text-gray-800 dark:text-slate-400 lg:text-base"> photos </div> </div><div class="p-4 md:w-1/4 sm:w-1/2 w-full min-w-[220px] text-center md:border-r md:last:border-none dark:md:border-slate-500 intersect-once motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade intersect-quarter">  <div class="font-heading text-primary text-[2.6rem] font-bold dark:text-white lg:text-5xl xl:text-6xl"> 50+ </div> <div class="text-sm font-medium uppercase tracking-widest text-gray-800 dark:text-slate-400 lg:text-base"> Racing Events </div> </div> </div>  </div> </section>  <section class="relative not-prose scroll-mt-[72px]"> <div class="absolute inset-0 pointer-events-none -z-[1]" aria-hidden="true">  <div class="absolute inset-0">  </div>  </div> <div class="relative px-4 md:px-6 py-12 md:py-16 lg:py-20 text-default intersect-once intersect-quarter intercept-no-queue motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade max-w-6xl mx-auto">  <div class="max-w-3xl mx-auto text-center p-6 rounded-md shadow-xl dark:shadow-none dark:border dark:border-slate-600"> <div class="md:mx-auto text-center mb-0 md:mb-0"><h2 class="leading-tighter text-heading text-4xl md:text-4xl font-bold tracking-tighter mb-4 font-heading"> ChrisHammond.com </h2><p class="mt-4 text-xl text-muted dark:text-slate-400"> Your hub for tech, photography, racing, and more! </p></div> <div class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4 mt-6"> <div class="flex w-full sm:w-auto"> <a class="btn-primary w-full sm:mb-0" target="_self" rel="noopener noreferrer" href="/about">Discover More!<svg width="1em" height="1em" class="w-5 h-5 ml-1 -mr-1.5 rtl:mr-1 rtl:-ml-1.5 inline-block" data-icon="tabler:compass">   <symbol id="ai:tabler:compass" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m8 16l2-6l6-2l-2 6z"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m9-9v2m0 14v2m-9-9h2m14 0h2"/></g></symbol><use href="#ai:tabler:compass"></use>  </svg></a> </div> </div> </div>  </div> </section>  </main>  <footer class="relative border-t border-gray-200 dark:border-slate-800 not-prose"> <div class="dark:bg-dark absolute inset-0 pointer-events-none" aria-hidden="true"></div> <div class="relative max-w-7xl mx-auto px-4 sm:px-6 dark:text-slate-300 intersect-once intersect-quarter intercept-no-queue motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade"> <div class="grid grid-cols-12 gap-4 gap-y-8 sm:gap-8 py-8 md:py-12"> <div class="col-span-12 lg:col-span-4"> <div class="mb-2"> <a class="inline-block font-bold text-xl" href="/">Chris Hammond</a> </div> <div class="text-sm text-muted flex gap-1"> <a class="text-muted hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out" href="/about">About</a>  · <a class="text-muted hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out" href="/contact">Contact</a>  · <a class="text-muted hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out" href="/terms">Terms</a>  · <a class="text-muted hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out" href="/privacy">Privacy Policy</a>  · <a class="text-muted hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out" href="/photocopyright">Photography Copyright</a>  </div> </div> <div class="col-span-6 md:col-span-3 lg:col-span-2"> <div class="dark:text-gray-300 font-medium mb-2">Some of my projects</div> <ul class="text-sm"> <li class="mb-2"> <a class="text-muted hover:text-gray-700 hover:underline dark:text-gray-400 transition duration-150 ease-in-out" href="https://www.autocrossblog.com"> AutocrossBlog.com </a> </li><li class="mb-2"> <a class="text-muted hover:text-gray-700 hover:underline dark:text-gray-400 transition duration-150 ease-in-out" href="https://www.autocrossblog.com/handbook"> Autocross Handbook </a> </li><li class="mb-2"> <a class="text-muted hover:text-gray-700 hover:underline dark:text-gray-400 transition duration-150 ease-in-out" href="https://www.collectorofjack.com"> CollectorOfJack.com </a> </li><li class="mb-2"> <a class="text-muted hover:text-gray-700 hover:underline dark:text-gray-400 transition duration-150 ease-in-out" href="https://rainbowmarks.com"> RainbowMarks Photography </a> </li><li class="mb-2"> <a class="text-muted hover:text-gray-700 hover:underline dark:text-gray-400 transition duration-150 ease-in-out" href="https://www.projectvw.com"> ProjectVW.com </a> </li> </ul> </div> </div> <div class="md:flex md:items-center md:justify-between py-6 md:py-8"> <ul class="flex mb-4 md:order-1 -ml-2 md:ml-4 md:mb-0 rtl:ml-0 rtl:-mr-2 rtl:md:ml-0 rtl:md:mr-4"> <li> <a class="text-muted dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center" aria-label="BlueSky" href="https://christoc.bsky.social/"> <svg width="1em" height="1em" class="w-5 h-5" data-icon="tabler:brand-bluesky">   <symbol id="ai:tabler:brand-bluesky" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6.335 5.144C4.681 3.945 2 3.017 2 5.97c0 .59.35 4.953.556 5.661C3.269 14.094 5.686 14.381 8 14c-4.045.665-4.889 3.208-2.667 5.41C6.363 20.428 7.246 21 8 21c2 0 3.134-2.769 3.5-3.5q.5-1 .5-1.5q0 .5.5 1.5c.366.731 1.5 3.5 3.5 3.5c.754 0 1.637-.571 2.667-1.59C20.889 17.207 20.045 14.664 16 14c2.314.38 4.73.094 5.444-2.369c.206-.708.556-5.072.556-5.661c0-2.953-2.68-2.025-4.335-.826C15.372 6.806 12.905 10.192 12 12c-.905-1.808-3.372-5.194-5.665-6.856"/></symbol><use href="#ai:tabler:brand-bluesky"></use>  </svg>  </a> </li><li> <a class="text-muted dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center" aria-label="Instagram" href="https://instagram.com/christoc"> <svg width="1em" height="1em" class="w-5 h-5" data-icon="tabler:brand-instagram">   <symbol id="ai:tabler:brand-instagram" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M4 8a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4z"/><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0-6 0m7.5-4.5v.01"/></g></symbol><use href="#ai:tabler:brand-instagram"></use>  </svg>  </a> </li><li> <a class="text-muted dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center" aria-label="Facebook" href="https://facebook.com/christopherhammond"> <svg width="1em" height="1em" class="w-5 h-5" data-icon="tabler:brand-facebook">   <symbol id="ai:tabler:brand-facebook" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 10v4h3v7h4v-7h3l1-4h-4V8a1 1 0 0 1 1-1h3V3h-3a5 5 0 0 0-5 5v2z"/></symbol><use href="#ai:tabler:brand-facebook"></use>  </svg>  </a> </li><li> <a class="text-muted dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center" aria-label="RSS" href="/rss.xml"> <svg width="1em" height="1em" viewBox="0 0 24 24" class="w-5 h-5" data-icon="tabler:rss">   <use href="#ai:tabler:rss"></use>  </svg>  </a> </li> </ul> <div class="text-sm mr-4 dark:text-muted"> 
    Made by <a class="text-blue-600 underline dark:text-muted" href="https://www.chrishammond.com/">Chris Hammond</a> · All rights reserved.
   </div> </div> </div> </footer>   <script>(function(){const defaultTheme = "light";

  if (window.basic_script) {
    return;
  }

  window.basic_script = true;

  function applyTheme(theme) {
    if (theme === 'dark') {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  }

  const initTheme = function () {
    if ((defaultTheme && defaultTheme.endsWith(':only')) || (!localStorage.theme && defaultTheme !== 'system')) {
      applyTheme(defaultTheme.replace(':only', ''));
    } else if (
      localStorage.theme === 'dark' ||
      (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
    ) {
      applyTheme('dark');
    } else {
      applyTheme('light');
    }
  };
  initTheme();

  function attachEvent(selector, event, fn) {
    const matches = typeof selector === 'string' ? document.querySelectorAll(selector) : selector;
    if (matches && matches.length) {
      matches.forEach((elem) => {
        elem.addEventListener(event, (e) => fn(e, elem), false);
      });
    }
  }

  const onLoad = function () {
    let lastKnownScrollPosition = window.scrollY;
    let ticking = true;

    attachEvent('#header nav', 'click', function () {
      document.querySelector('[data-aw-toggle-menu]')?.classList.remove('expanded');
      document.body.classList.remove('overflow-hidden');
      document.getElementById('header')?.classList.remove('h-screen');
      document.getElementById('header')?.classList.remove('expanded');
      document.getElementById('header')?.classList.remove('bg-page');
      document.querySelector('#header nav')?.classList.add('hidden');
      document.querySelector('#header > div > div:last-child')?.classList.add('hidden');
    });

    attachEvent('[data-aw-toggle-menu]', 'click', function (_, elem) {
      elem.classList.toggle('expanded');
      document.body.classList.toggle('overflow-hidden');
      document.getElementById('header')?.classList.toggle('h-screen');
      document.getElementById('header')?.classList.toggle('expanded');
      document.getElementById('header')?.classList.toggle('bg-page');
      document.querySelector('#header nav')?.classList.toggle('hidden');
      document.querySelector('#header > div > div:last-child')?.classList.toggle('hidden');
    });

    attachEvent('[data-aw-toggle-color-scheme]', 'click', function () {
      if (defaultTheme.endsWith(':only')) {
        return;
      }
      document.documentElement.classList.toggle('dark');
      localStorage.theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
    });

    attachEvent('[data-aw-social-share]', 'click', function (_, elem) {
      const network = elem.getAttribute('data-aw-social-share');
      const url = encodeURIComponent(elem.getAttribute('data-aw-url'));
      const text = encodeURIComponent(elem.getAttribute('data-aw-text'));

      let href;
      switch (network) {
        case 'facebook':
          href = `https://www.facebook.com/sharer.php?u=${url}`;
          break;
        case 'bluesky':
          href = `https://bsky.app/intent/compose?text=${text}` + ` ` + `${url}`;
          break;
        case 'linkedin':
          href = `https://www.linkedin.com/shareArticle?mini=true&url=${url}&title=${text}`;
          break;
        case 'whatsapp':
          href = `https://wa.me/?text=${text}%20${url}`;
          break;
        case 'mail':
          href = `mailto:?subject=%22${text}%22&body=${text}%20${url}`;
          break;

        default:
          return;
      }

      const newlink = document.createElement('a');
      newlink.target = '_blank';
      newlink.href = href;
      newlink.click();
    });

    const screenSize = window.matchMedia('(max-width: 767px)');
    screenSize.addEventListener('change', function () {
      document.querySelector('[data-aw-toggle-menu]')?.classList.remove('expanded');
      document.body.classList.remove('overflow-hidden');
      document.getElementById('header')?.classList.remove('h-screen');
      document.getElementById('header')?.classList.remove('expanded');
      document.getElementById('header')?.classList.remove('bg-page');
      document.querySelector('#header nav')?.classList.add('hidden');
      document.querySelector('#header > div > div:last-child')?.classList.add('hidden');
    });

    function applyHeaderStylesOnScroll() {
      const header = document.querySelector('#header[data-aw-sticky-header]');
      if (!header) return;
      if (lastKnownScrollPosition > 60 && !header.classList.contains('scroll')) {
        header.classList.add('scroll');
      } else if (lastKnownScrollPosition <= 60 && header.classList.contains('scroll')) {
        header.classList.remove('scroll');
      }
      ticking = false;
    }
    applyHeaderStylesOnScroll();

    attachEvent([document], 'scroll', function () {
      lastKnownScrollPosition = window.scrollY;

      if (!ticking) {
        window.requestAnimationFrame(() => {
          applyHeaderStylesOnScroll();
        });
        ticking = true;
      }
    });
  };
  const onPageShow = function () {
    document.documentElement.classList.add('motion-safe:scroll-smooth');
    const elem = document.querySelector('[data-aw-toggle-menu]');
    if (elem) {
      elem.classList.remove('expanded');
    }
    document.body.classList.remove('overflow-hidden');
    document.getElementById('header')?.classList.remove('h-screen');
    document.getElementById('header')?.classList.remove('expanded');
    document.querySelector('#header nav')?.classList.add('hidden');
  };

  window.onload = onLoad;
  window.onpageshow = onPageShow;

  document.addEventListener('astro:after-swap', () => {
    initTheme();
    onLoad();
    onPageShow();
  });
})();</script> <script>
  /* Inspired by: https://github.com/heidkaemper/tailwindcss-intersect */
  const Observer = {
    observer: null,
    delayBetweenAnimations: 100,
    animationCounter: 0,

    start() {
      const selectors = [
        '[class*=" intersect:"]',
        '[class*=":intersect:"]',
        '[class^="intersect:"]',
        '[class="intersect"]',
        '[class*=" intersect "]',
        '[class^="intersect "]',
        '[class$=" intersect"]',
      ];

      const elements = Array.from(document.querySelectorAll(selectors.join(',')));

      const getThreshold = (element) => {
        if (element.classList.contains('intersect-full')) return 0.99;
        if (element.classList.contains('intersect-half')) return 0.5;
        if (element.classList.contains('intersect-quarter')) return 0.25;
        return 0;
      };

      elements.forEach((el) => {
        el.setAttribute('no-intersect', '');
        el._intersectionThreshold = getThreshold(el);
      });

      const callback = (entries) => {
        entries.forEach((entry) => {
          requestAnimationFrame(() => {
            const target = entry.target;
            const intersectionRatio = entry.intersectionRatio;
            const threshold = target._intersectionThreshold;

            if (target.classList.contains('intersect-no-queue')) {
              if (entry.isIntersecting) {
                target.removeAttribute('no-intersect');
                if (target.classList.contains('intersect-once')) {
                  this.observer.unobserve(target);
                }
              } else {
                target.setAttribute('no-intersect', '');
              }
              return;
            }

            if (intersectionRatio >= threshold) {
              if (!target.hasAttribute('data-animated')) {
                target.removeAttribute('no-intersect');
                target.setAttribute('data-animated', 'true');

                const delay = this.animationCounter * this.delayBetweenAnimations;
                this.animationCounter++;

                target.style.transitionDelay = `${delay}ms`;
                target.style.animationDelay = `${delay}ms`;

                if (target.classList.contains('intersect-once')) {
                  this.observer.unobserve(target);
                }
              }
            } else {
              target.setAttribute('no-intersect', '');
              target.removeAttribute('data-animated');
              target.style.transitionDelay = '';
              target.style.animationDelay = '';

              this.animationCounter = 0;
            }
          });
        });
      };

      this.observer = new IntersectionObserver(callback.bind(this), { threshold: [0, 0.25, 0.5, 0.99] });

      elements.forEach((el) => {
        this.observer.observe(el);
      });
    },
  };

  Observer.start();

  document.addEventListener('astro:after-swap', () => {
    Observer.start();
  });
</script> </body></html>