<!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.DvSiQxd4.ico"><style>
  :root {
    /* Typography */
    --aw-font-sans: 'Inter Variable', sans-serif;
    --aw-font-serif: 'Inter Variable', sans-serif;
    --aw-font-heading: 'Inter Variable', sans-serif;

    /* Brand Colors */
    --aw-color-primary: #000000;           /* Black */
    --aw-color-secondary: #1e90ff;         /* Electric Blue */
    --aw-color-accent: #0a58ca;            /* Deep Blue */

    /* Text Colors */
    --aw-color-text-heading: #000000;
    --aw-color-text-default: #2c2c2c;
    --aw-color-text-muted: rgba(44, 44, 44, 0.66);

    /* Background */
    --aw-color-bg-page: #ffffff;

    /* Button Defaults */
    --aw-color-btn-bg: var(--aw-color-primary);
    --aw-color-btn-text: #ffffff;
    --aw-color-btn-hover-bg: var(--aw-color-secondary);
    --aw-color-btn-hover-text: #ffffff;

    /* Icons */
    --aw-color-icon: #000000;

    /* Selection */
    ::selection {
      background-color: #1e90ff;
      color: #ffffff;
    }
  }

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

    /* Brand Colors */
    --aw-color-primary: #1e90ff;           /* Blue now acts as primary in dark */
    --aw-color-secondary: #0a58ca;
    --aw-color-accent: #90caf9;

    /* Text Colors */
    --aw-color-text-heading: #ffffff;
    --aw-color-text-default: #f0f0f0;
    --aw-color-text-muted: rgba(224, 224, 224, 0.66);

    /* Background */
    --aw-color-bg-page: #000000;

    /* Form Inputs */
    --aw-color-input-text: #000000;
    --aw-color-input-bg: #ffffff;

    /* Button Overrides */
    --aw-color-btn-bg: var(--aw-color-secondary);     /* Blue button bg */
    --aw-color-btn-text: #000000;                     /* Black text on blue */
    --aw-color-btn-hover-bg: var(--aw-color-primary); /* Black bg on hover */
    --aw-color-btn-hover-text: #ffffff;               /* White text on hover */

    /* Icons */
    --aw-color-icon: #1e90ff;

    /* Selection */
    ::selection {
      background-color: #1e90ff;
      color: #000000;
    }
  }

  body,
.prose,
.prose p,
.prose li,
.prose ul,
.prose ol {
  color: var(--aw-color-text-default);
}

.dark .prose,
.dark .prose p,
.dark .prose li,
.dark .prose ul,
.dark .prose ol {
  color: var(--aw-color-text-default);
}

</style><script>(function(){const defaultTheme = "dark";

  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>Christoc.com - Software Solutions That Work</title>
<meta name="description" content="Custom software development services tailored to your business needs. Expert solutions in web, mobile, and cloud applications.">
<meta name="robots" content="index,follow">
<link rel="canonical" href="https://www.christoc.com">
<meta property="og:title" content="Christoc.com - Software Solutions That Work">
<meta property="og:description" content="Custom software development services tailored to your business needs. Expert solutions in web, mobile, and cloud applications.">
<meta property="og:url" content="https://www.christoc.com">
<meta property="og:type" content="website">
<meta property="og:image" content="">

<meta property="og:locale" content="en">
<meta property="og:site_name" content="Christoc.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-NLRQP1E54X"></script><script>(function(){const id = "G-NLRQP1E54X";

  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.CrtljG_w.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">NEW</span> <a href="/2025/newsite" class="text-muted hover:underline dark:text-slate-400 font-medium"> New 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"> Christoc.com </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="/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="/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="/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-center5 md:pb-8 max-w-4xl mx-auto">  <h1 class="text-3xl md:text-4xl 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 <span class="text-accent dark:text-white highlight">Christoc.com Software Solutions</span> </h1> <div class="max-w-5xl 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">
Helping businesses grow with custom software, web development, cloud integration and of course artificial intelligence (AI).
</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="/dotnetnuke/consulting">Explore Our Services<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:code">   <symbol id="ai:tabler:code" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 8l-4 4l4 4m10-8l4 4l-4 4M14 4l-4 16"/></symbol><use href="#ai:tabler:code"></use>  </svg></a> </div><div class="flex w-full sm:w-auto"> <a class="btn-secondary w-full sm:mb-0" href="/about">About Us</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-3xl"> <img src="/_astro/christoc_hero.D3w82OmR_yxgm6.webp" srcset="/_astro/christoc_hero.D3w82OmR_11E8Q7.webp 400w, /_astro/christoc_hero.D3w82OmR_1yhEmi.webp 768w, /_astro/christoc_hero.D3w82OmR_yxgm6.webp 1024w, /_astro/christoc_hero.D3w82OmR_ZjLk1E.webp 2000w" sizes="(max-width: 767px) 400px, (max-width: 1023px) 768px, (max-width: 2039px) 1024px, 2040px" loading="eager" alt="Christoc.com 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-4xl 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> Do you know DotNetNuke?
</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-sky-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">From the 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">Insights on development, hosting, security, and building scalable solutions.</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/newsite"> <img src="/_astro/dnn-to-astro.B7RADtR9_ZXTSi.webp" srcset="/_astro/dnn-to-astro.B7RADtR9_ZXTSi.webp 400w, /_astro/dnn-to-astro.B7RADtR9_IvRVb.webp 900w" sizes="(max-width: 900px) 400px, 900px" alt="Welcome to the new Christoc.com" aspectRatio="16:9" loading="lazy" decoding="async" width="400" height="400" 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/newsite"> Welcome to the new Christoc.com </a> </h3> <p class="text-muted dark:text-slate-400 text-lg">Discover why Christoc.com migrated from DotNetNuke to AstroJS for a faster, smoother visitor experience. Learn about the migration process and access all old content seamlessly. Contact us for more details!</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="/tutorials/alltutorials/automated-deployment-using-github-actions-for-your-dnn-extensions"> <img src="/_astro/default-blog.SsrASij7_2hG1BT.webp" srcset="/_astro/default-blog.SsrASij7_2hG1BT.webp 400w, /_astro/default-blog.SsrASij7_1O9qmj.webp 900w" sizes="(max-width: 900px) 400px, 900px" alt="Automated deployment using GitHub actions for your DNN Extensions" aspectRatio="16:9" loading="lazy" decoding="async" width="400" height="267" 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="/tutorials/alltutorials/automated-deployment-using-github-actions-for-your-dnn-extensions"> Automated deployment using GitHub actions for your DNN Extensions </a> </h3> <p class="text-muted dark:text-slate-400 text-lg">Learn how to automate deployment for DNN extensions using GitHub Actions. Setup PolyDeploy, configure GitHub Secrets, and create a workflow file for easy deployment. [Read more here](URL).</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="/tutorials/alltutorials/how-to-upgrade-dotnetnuke-or-dnn-platform"> <img src="/_astro/default-blog.SsrASij7_2hG1BT.webp" srcset="/_astro/default-blog.SsrASij7_2hG1BT.webp 400w, /_astro/default-blog.SsrASij7_1O9qmj.webp 900w" sizes="(max-width: 900px) 400px, 900px" alt="How to upgrade DotNetNuke or DNN Platform" aspectRatio="16:9" loading="lazy" decoding="async" width="400" height="267" 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="/tutorials/alltutorials/how-to-upgrade-dotnetnuke-or-dnn-platform"> How to upgrade DotNetNuke or DNN Platform </a> </h3> <p class="text-muted dark:text-slate-400 text-lg">Learn how to upgrade your DotNetNuke (DNN) instance with these simple steps. If you need assistance, reach out for upgrade services. Stay worry-free during the process!</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="/tutorials/alltutorials/how-to-change-your-desktop-background-in-windows-10"> <img src="/_astro/default-blog.SsrASij7_2hG1BT.webp" srcset="/_astro/default-blog.SsrASij7_2hG1BT.webp 400w, /_astro/default-blog.SsrASij7_1O9qmj.webp 900w" sizes="(max-width: 900px) 400px, 900px" alt="How to change your desktop background in Windows 10" aspectRatio="16:9" loading="lazy" decoding="async" width="400" height="267" 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="/tutorials/alltutorials/how-to-change-your-desktop-background-in-windows-10"> How to change your desktop background in Windows 10 </a> </h3> <p class="text-muted dark:text-slate-400 text-lg">Learn how to change your Windows 10 background easily with these simple steps! Set a specific photo or create a slideshow for a personalized touch.</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-7xl">  <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">What We Do</p><h2 class="font-bold leading-tighter tracking-tighter font-heading text-heading text-3xl md:text-4xl">Our Services</h2><p class="mt-4 text-muted text-xl">Christoc.com delivers results-driven software solutions for small to enterprise clients.</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:terminal-2">   <symbol id="ai:tabler:terminal-2" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m8 9l3 3l-3 3m5 0h3"/><path d="M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></g></symbol><use href="#ai:tabler:terminal-2"></use>  </svg></div><div class="mt-0.5"><h3 class="text-xl font-bold md:text-[1.3rem]"><a>💻 Custom Development</a></h3><p class="mt-3 text-muted">From web apps to internal tools, we build software tailored to your business goals.</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:cloud">   <symbol id="ai:tabler:cloud" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6.657 18C4.085 18 2 15.993 2 13.517s2.085-4.482 4.657-4.482c.393-1.762 1.794-3.2 3.675-3.773c1.88-.572 3.956-.193 5.444 1c1.488 1.19 2.162 3.007 1.77 4.769h.99c1.913 0 3.464 1.56 3.464 3.486s-1.551 3.487-3.465 3.487H6.657"/></symbol><use href="#ai:tabler:cloud"></use>  </svg></div><div class="mt-0.5"><h3 class="text-xl font-bold md:text-[1.3rem]"><a>☁️ Cloud Integration</a></h3><p class="mt-3 text-muted">Optimize your infrastructure with Azure and modern DevOps practices.</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:device-mobile">   <symbol id="ai:tabler:device-mobile" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2zm5-1h2m-1 13v.01"/></symbol><use href="#ai:tabler:device-mobile"></use>  </svg></div><div class="mt-0.5"><h3 class="text-xl font-bold md:text-[1.3rem]"><a>📱 Mobile &amp; Web Apps</a></h3><p class="mt-3 text-muted">Cross-platform apps using React, .NET, and modern frameworks.</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:shield-lock">   <symbol id="ai:tabler:shield-lock" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M12 3a12 12 0 0 0 8.5 3A12 12 0 0 1 12 21A12 12 0 0 1 3.5 6A12 12 0 0 0 12 3"/><path d="M11 11a1 1 0 1 0 2 0a1 1 0 1 0-2 0m1 1v2.5"/></g></symbol><use href="#ai:tabler:shield-lock"></use>  </svg></div><div class="mt-0.5"><h3 class="text-xl font-bold md:text-[1.3rem]"><a>🔐 Security &amp; Performance</a></h3><p class="mt-3 text-muted">We design with security and speed in mind — from SEO to infrastructure hardening.</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: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></div><div class="mt-0.5"><h3 class="text-xl font-bold md:text-[1.3rem]"><a>📊 Consulting &amp; Strategy</a></h3><p class="mt-3 text-muted">Need a technology roadmap? We guide teams and businesses through software decisions.</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:robot">   <symbol id="ai:tabler:robot" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2zm6-4v2m-3 8v9m6-9v9M5 16l4-2m6 0l4 2M9 18h6M10 8v.01M14 8v.01"/></symbol><use href="#ai:tabler:robot"></use>  </svg></div><div class="mt-0.5"><h3 class="text-xl font-bold md:text-[1.3rem]"><a>🧠 Artificial Intelligence</a></h3><p class="mt-3 text-muted">Helping you leverage AI tools like ChatGPT to enhance productivity, innovation and adding intelligence to your applications.</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-4xl">  <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">Have a question about what we do or how we work?</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="/dotnetnuke/consulting">What does Christoc.com specialize in?</a></h3><p class="mt-3 text-muted">We focus on custom web applications, .NET development, Azure cloud solutions, and DevOps consulting.</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 you build a website or web app for my business?</a></h3><p class="mt-3 text-muted">Absolutely! Whether you're launching a startup or modernizing legacy systems, we can help.</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="/dotnetnuke/consulting">Do you work with existing codebases?</a></h3><p class="mt-3 text-muted">Yes — we can take over legacy projects, improve performance, fix bugs, and add features.</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>Where are you located?</a></h3><p class="mt-3 text-muted">We are based in the Midwest USA (Missouri) and work with clients worldwide.</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="/dotnetnuke/consulting">Do you offer hosting or maintenance?</a></h3><p class="mt-3 text-muted">We offer ongoing support, maintenance plans, and cloud infrastructure management.</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 do I get started?</a></h3><p class="mt-3 text-muted">Use the <a href='/contact' class='underline'>contact form</a> to reach out. We’ll schedule a discovery call to understand your needs.</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-4xl 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-3xl xl:text-4xl"> 200+ </div> <div class="text-sm font-medium uppercase tracking-widest text-gray-800 dark:text-slate-400 lg:text-base"> Projects Delivered </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-3xl xl:text-4xl"> 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-3xl xl:text-4xl"> 1M+ </div> <div class="text-sm font-medium uppercase tracking-widest text-gray-800 dark:text-slate-400 lg:text-base"> Lines of Code </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-3xl xl:text-4xl"> 50+ </div> <div class="text-sm font-medium uppercase tracking-widest text-gray-800 dark:text-slate-400 lg:text-base"> Satisfied Clients </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-4xl mx-auto">  <div class="max-w-5xl 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-2xl md:text-2xl font-bold tracking-tighter mb-4 font-heading"> Ready to Build Something Great? </h2><p class="mt-4 text-xl text-muted dark:text-slate-400"> Let's bring your idea to life. </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="/contact">Start Your Project Today<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:rocket">   <symbol id="ai:tabler:rocket" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3-5a9 9 0 0 0 6-8a3 3 0 0 0-3-3a9 9 0 0 0-8 6a6 6 0 0 0-5 3"/><path d="M7 14a6 6 0 0 0-3 6a6 6 0 0 0 6-3m4-8a1 1 0 1 0 2 0a1 1 0 1 0-2 0"/></g></symbol><use href="#ai:tabler:rocket"></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="/">Christoc.com</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>  </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">Solutions</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="/products"> Products </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="/dotnetnuke/consulting"> DotNetNuke Consulting </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="/dotnetnuke/support"> DotNetNuke Support </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="/dotnetnuke/training"> DotNetNuke Training </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="/tutorials"> Tutorials </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="X" href="https://bsky.app/profile/chrishammond.com"> <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/thechristoc"> <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://www.facebook.com/ChristocSoftware"> <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 = "dark";

  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 'twitter':
          href = `https://twitter.com/intent/tweet?url=${url}&text=${text}`;
          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> 
<script async id="netlify-rum-container" src="/.netlify/scripts/rum" data-netlify-rum-site-id="d393ed8c-d678-4235-ae8e-310c24b5cba6" data-netlify-deploy-branch="main" data-netlify-deploy-context="production" data-netlify-cwv-token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzaXRlX2lkIjoiZDM5M2VkOGMtZDY3OC00MjM1LWFlOGUtMzEwYzI0YjVjYmE2IiwiYWNjb3VudF9pZCI6IjY3NGU4ZGYwMGVmNDI2ZGM2ZmYwYzQ2ZSIsImRlcGxveV9pZCI6IjY5ZGQ0NTAzMGMxOWM3MDAwODg5OTU1MyIsImlzc3VlciI6Im5mc2VydmVyIn0.6CInLYRWe5VT7Jnnh3NkFDnrZmvD_zsYp099Pcy9zwI"></script><script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9f6099ef6fd73ca4',t:'MTc3NzgyNTMxMw=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body></html>