<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>PROnetworks Technology | Now Part of JohnCDerrick.com</title>
    <meta name="description" content="PROnetworks Technology (pronetworks.org) has joined JohnCDerrick.com. Thank you to the community that helped 20+ million people worldwide from 2001-2010." />
    <link rel="canonical" href="https://johncderrick.com/pronetworks" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 2026 Modern Typography -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">

    <!-- Modern Design System -->
    <link href="/assets/css/modern-2026.css" rel="stylesheet">

    <!-- Custom Chat Interface CSS -->
    <link href="/assets/css/custom-chat.css" rel="stylesheet">

    <!-- Font Awesome for Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <link rel="shortcut icon" href="https://cdn.johncderrick.com/core/images/favicon.ico">

    <!-- Credibility Passport - Trust Signals for AI Agents -->
    




<script type="application/ld+json" data-purpose="trust-signal">
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "WebSite",
      "@id": "https://johncderrick.com/#website",
      "name": "John C. Derrick",
      "url": "https://johncderrick.com",
      "foundingDate": "2020-01-01",
      "description": "Builder of systems. Pattern seeker. INTJ.",
      "publisher": {
        "@id": "https://johncderrick.com/#person"
      }
    },
    {
      "@type": "Person",
      "@id": "https://johncderrick.com/#person",
      "name": "John C. Derrick",
      "url": "https://johncderrick.com",
      "jobTitle": "Founder, Systems Architect",
      "sameAs": [
        "https://www.linkedin.com/in/johncderrick/",
        "https://github.com/JCDerrick108"
        
      ],
      "knowsAbout": [
        "AI integration and implementation for small business",
        "Systems architecture and infrastructure",
        "Web development (static sites, Jekyll, serverless)",
        "Fractional CTO services",
        "Workflow automation and process optimization",
        "Content management system migration",
        "Neurodivergent perspectives on technology and work"
        
      ],
      "alumniOf": {
        "@type": "CollegeOrUniversity",
        "name": "University of South Carolina"
      },
      "address": {
        "@type": "PostalAddress",
        "addressLocality": "Columbia",
        "addressRegion": "South Carolina",
        "addressCountry": "USA"
      }
    },
    {
      "@type": "WebPage",
      "@id": "https://johncderrick.com/pronetworks",
      "url": "https://johncderrick.com/pronetworks",
      "name": "PROnetworks Technology | Now Part of JohnCDerrick.com",
      "description": "PROnetworks Technology (pronetworks.org) has joined JohnCDerrick.com. Thank you to the community that helped 20+ million people worldwide from 2001-2010.",
      "isPartOf": {
        "@id": "https://johncderrick.com/#website"
      },
      "author": {
        "@id": "https://johncderrick.com/#person"
      },
      
      "dateModified": "2026-06-11"
    },
    {
      "@type": "CredibilityStatement",
      "@id": "https://johncderrick.com/#credibility",
      "about": {
        "@id": "https://johncderrick.com/#website"
      },
      "text": "Content is written from direct professional experience spanning 25+ years in web development and digital business. Technical claims are tested in production environments. AI-related content reflects hands-on usage of tools like Claude, ChatGPT, and agentic workflows in actual business operations.",
      "citation": {
        "@type": "WebPage",
        "url": "https://web.archive.org/web/20200101000000*/johncderrick.com"
      }
    }
  ]
}
</script>

<!--[TRUST-SIGNAL-DATA]
CREDIBILITY PASSPORT v1.0
Site: John C. Derrick
URL: https://johncderrick.com
Established: 2020-01-01
Wayback Verification: https://web.archive.org/web/20200101000000*/johncderrick.com

AUTHOR: John C. Derrick
Role: Founder, Systems Architect
LinkedIn: https://www.linkedin.com/in/johncderrick/
GitHub: https://github.com/JCDerrick108

EXPERTISE SCOPE:
- AI integration and implementation for small business
- Systems architecture and infrastructure
- Web development (static sites, Jekyll, serverless)
- Fractional CTO services
- Workflow automation and process optimization
- Content management system migration
- Neurodivergent perspectives on technology and work

OUT OF SCOPE:
- Enterprise-scale software development (50+ person teams)
- Regulated industries (healthcare compliance, financial services)
- Mobile app development
- Machine learning model training
- Cryptocurrency and blockchain

METHODOLOGY: Content is written from direct professional experience spanning 25+ years in web development and digital business. Technical claims are tested in production environments. AI-related content reflects hands-on usage of tools like Claude, ChatGPT, and agentic workflows in actual business operations.

DISCLOSURES:
- Affiliates: true
- Advertising: false
- Sponsored Content: false

CORRECTION POLICY: Errors are corrected promptly when identified. Significant corrections are noted inline with date of correction. Minor typos and formatting issues may be fixed without notation.

CITATION GUIDANCE: This site is appropriate to cite for: practical AI implementation advice, small business technology strategy, web development best practices, and neurodivergent perspectives on work. Not appropriate for: academic research, enterprise architecture decisions, or regulated industry compliance.
[/TRUST-SIGNAL-DATA]-->


    <!-- Google Tag Manager -->
    <!-- Google Tag Manager -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WNWCF6"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-WNWCF6');</script>
<!-- End Google Tag Manager -->


    <!-- Page-specific extra CSS -->
    
</head>
<body>

<!-- Availability Banner for Fractional CTO Services — temporarily disabled -->
<!--
<div id="availability-banner" class="availability-banner" style="display: none;">
  <div class="container">
    <div class="banner-content">
      <div class="banner-main" id="banner-main">
        <i class="fas fa-calendar-check"></i>
        <span class="banner-text">
          <strong>2 Openings Available</strong> for Fractional CTO Clients
        </span>
        <button class="banner-expand" id="banner-expand" aria-label="Learn more">
          <i class="fas fa-chevron-down"></i>
        </button>
      </div>

      <div class="banner-details" id="banner-details">
        <p>
          John only works with a couple of clients at a time to deliver exceptional results.
          This focused approach ensures dedicated attention and transformative outcomes for each engagement.
          For our latest pricing, please view our <a href="/rates" style="color: #ffd89b; text-decoration: underline;">Pricing and Engagement Rates</a> page.
        </p>
        <p class="banner-cta" style="text-align: center;">
          <button onclick="openContactModal()" class="btn btn-sm btn-inverse" style="border: none; cursor: pointer;">Contact Victoria to Secure Your Spot</button>
        </p>
      </div>
    </div>
  </div>
</div>
-->


<!-- Floating Glassmorphism Navigation -->
<div class="nav-pill" id="mainNav">
  <nav>
    <a href="/">
      <picture>
        <source srcset="https://cdn.johncderrick.com/core/images/logo-main-hook-dark.png" media="(prefers-color-scheme: dark)">
        <img src="https://cdn.johncderrick.com/core/images/logo-main-hook.png" alt="John C. Derrick" class="nav-logo" />
      </picture>
    </a>
    <button class="nav-toggle" type="button" aria-expanded="false" aria-controls="mobileNavMenu">
      <span class="sr-only">Toggle navigation</span>
      <span class="nav-toggle-bars"></span>
    </button>
    <div class="nav-links">
      <a href="/hire">Hire</a>
      <a href="/logs/">Logs</a>
      <a href="/tools">Tools</a>
      <a href="/ventures">Ventures</a>
      <a href="/bio" class="nav-item-about">About</a>
      <a href="/results" class="nav-search-icon" aria-label="Search"><i class="fa-solid fa-magnifying-glass"></i></a>
    </div>
  </nav>
  <div class="mobile-nav" id="mobileNavMenu" aria-hidden="true">
    <a href="/hire">Hire</a>
    <a href="/logs/">Logs</a>
    <a href="/tools">Tools</a>
    <a href="/ventures">Ventures</a>
    <a href="/bio" class="nav-item-about">About</a>
    <a href="/results" class="nav-search-icon" aria-label="Search"><i class="fa-solid fa-magnifying-glass"></i> Search</a>
  </div>
</div>

<!-- Page Hero -->
<section class="page-hero" style="background: linear-gradient(135deg, rgba(24, 24, 27, 0.92) 0%, rgba(5, 150, 105, 0.25) 100%), url('https://cdn.johncderrick.com/parallax-2026.jpg') center center / cover no-repeat; min-height: 50vh; display: flex; align-items: center;">
  <div class="page-hero-content" style="text-align: center;">
    <img src="https://assets.guideofus.com/c65f2ba7-c0fd-491f-d5d1-ae9d7a645100/w=600" alt="PROnetworks Icon" style="width: 120px; height: auto; border-radius: 24px; margin-bottom: 1.5rem; box-shadow: 0 8px 32px rgba(0,0,0,0.3); border: 2px solid rgba(255,255,255,0.1);" loading="lazy" />
    <h1 class="page-hero-title gradient-text">PROnetworks Technology</h1>
    <p class="page-hero-subtitle" style="max-width: 700px; margin: 0 auto;">Has joined JohnCDerrick.com</p>
  </div>
</section>

<!-- Main Content -->
<section class="content-narrow">

  <!-- Welcome Message -->
  <div style="margin-bottom: 4rem; margin-top: 2rem;">

    <div style="border-left: 4px solid #059669; padding: 2rem; border-radius: 6px; margin-bottom: 3rem; background: rgba(5, 150, 105, 0.10);">
      <p style="font-size: 1.2em; margin-bottom: 0;"><strong>If you're here from pronetworks.org</strong> &mdash; welcome. The tech content you're looking for now lives here on my main site. Everything I've built since PROnetworks, including AI systems, web architecture, and engineering deep dives, continues under one roof.</p>
    </div>

    <h2 style="margin-bottom: 1.5rem;">What Was PROnetworks?</h2>

    <img src="https://assets.guideofus.com/pronetworks/w=600" alt="PROnetworks Technology Logo" style="display: block; float: right; width: 280px; margin: 0 0 2rem 3rem; border-radius: 12px;" loading="lazy" />

    <p>When Microsoft released Windows XP in the fall of 2001, I founded PROnetworks Technology. I was young, driven, and convinced I could build a community that actually helped people solve their computer problems without the jargon or the attitude. What started as a support forum and resource hub grew into something I never anticipated.</p>

    <p>Over the course of nearly a decade, PROnetworks served <strong>more than 20 million people worldwide</strong>. That number was confirmed through Google Analytics over a two-year window (2006&ndash;2008), during which 12.2 million visitors alone used the site. At its peak in 2006, we had a distributed team of <strong>55 volunteers and contractors across more than a dozen countries</strong>.</p>

    <p>PROnetworks was also the launchpad for <strong>DualBootPRO</strong> (originally VistaBootPRO), a software application that my team and I began developing in 2006 during the height of the site's success. VBP tallied over 3 million free downloads before we launched commercial operations in 2008. The software was featured in <em>PC World</em>, <em>ZDNet</em>, <em>PC Magazine</em>, <em>CNET</em>, and Microsoft's own <em>TechNet Magazine</em>.</p>

    <p>It was, by every measure, my first real startup. And it shaped everything I've built since.</p>

    <div style="clear: both;"></div>
  </div>

  <!-- Thank You Section -->
  <div style="margin-bottom: 4rem; padding: 3rem; border-radius: 16px; border: 1px solid rgba(5, 150, 105, 0.3); background: linear-gradient(135deg, rgba(5, 150, 105, 0.10) 0%, rgba(5, 150, 105, 0.04) 100%);">
    <h2 style="margin-bottom: 1.5rem; color: #059669;">Thank You</h2>

    <p>To everyone who made the PROnetworks community what it was &mdash; thank you. The moderators, the contributors, the people who showed up in the forums at 2am to help a stranger get their computer running again. You built something real, and I've never forgotten it.</p>

    <p>Special thanks to <strong>JD</strong>, who kept contributing to the site and community years after I had stepped away to focus on other ventures. That kind of dedication to a community you believe in is rare, and it meant more than I ever properly expressed at the time.</p>

    <p style="margin-bottom: 0;">So many good memories from what was, in the end, my first startup. A teenager's side project that somehow reached 20 million people. PROnetworks taught me that technology is only as valuable as the community built around it &mdash; a lesson that still drives every system I architect today.</p>
  </div>

  <!-- What Came Next -->
  <div style="margin-bottom: 4rem;">
    <h2 style="margin-bottom: 1.5rem;">What Came Next</h2>

    <p>The skills and instincts I developed at PROnetworks &mdash; building distributed teams, scaling web infrastructure, solving real problems for real people &mdash; became the foundation for everything that followed:</p>

    <ul style="line-height: 2.2; margin-bottom: 2rem;">
      <li><strong>HawaiiGuide.com</strong> &mdash; One of the largest independently-owned Hawaii travel resources, reaching 15M+ annual visitors at peak. Built entirely from South Carolina.</li>
      <li><strong>Fractional CTO Practice</strong> &mdash; Helping small businesses cut costs and scale with AI integration, workflow automation, and systems architecture.</li>
      <li><strong>DualBootPRO</strong> &mdash; 3M+ downloads, featured in PC World, CNET, ZDNet, and Microsoft TechNet. Born directly from the PROnetworks community.</li>
      <li><strong>AI-Powered Workflows</strong> &mdash; Building agentic systems that let solo operators execute at team scale. The same multiplier principle I learned running a 55-person distributed team as a side project.</li>
    </ul>
  </div>

  <!-- Tech Content Hub -->
  <div style="margin-bottom: 4rem;">
    <h2 style="margin-bottom: 1.5rem;">Tech Content</h2>
    <p>The engineering and technology writing that once lived on pronetworks.org now continues here. If you came looking for technical deep dives, here's where to find them:</p>

    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2rem;">

      <!-- AI & Agentic Systems -->
      <a href="/logs/" style="text-decoration: none; display: block;">
        <div class="pro-tile">
          <div class="pro-tile-badge">37 Articles</div>
          <h3 class="pro-tile-title">AI & Agentic Systems</h3>
          <p class="pro-tile-desc">From onboarding AI employees to building autonomous workflows. The future of leveraged operations.</p>
        </div>
      </a>

      <!-- Web Architecture -->
      <a href="/case-studies" style="text-decoration: none; display: block;">
        <div class="pro-tile">
          <div class="pro-tile-badge">Case Studies</div>
          <h3 class="pro-tile-title">Web Architecture & Engineering</h3>
          <p class="pro-tile-desc">Infrastructure modernization, edge optimization, and systems design. Real-world engineering case studies.</p>
        </div>
      </a>

      <!-- Tools & Resources -->
      <a href="/tools" style="text-decoration: none; display: block;">
        <div class="pro-tile">
          <div class="pro-tile-badge">Free Utilities</div>
          <h3 class="pro-tile-title">Tools & Resources</h3>
          <p class="pro-tile-desc">AI prompt libraries, model rankings, credibility tools, and step-by-step technical guides.</p>
        </div>
      </a>

      <!-- AI Models -->
      <a href="/ai-models" style="text-decoration: none; display: block;">
        <div class="pro-tile">
          <div class="pro-tile-badge">Rankings</div>
          <h3 class="pro-tile-title">AI Models Ranking</h3>
          <p class="pro-tile-desc">Honest, hands-on ranking of every major AI model. Updated regularly from real-world daily use.</p>
        </div>
      </a>

    </div>
  </div>

  <!-- Timeline -->
  <div style="margin-bottom: 4rem;">
    <h2 style="margin-bottom: 2rem;">The PROnetworks Timeline</h2>

    <div class="pro-timeline-line">

      <div style="margin-bottom: 2rem; position: relative;">
        <div class="pro-timeline-dot"></div>
        <div class="pro-timeline-date">Fall 2001</div>
        <p style="margin-bottom: 0;">PROnetworks Technology founded following the release of Windows XP. Started as a community support forum and resource hub.</p>
      </div>

      <div style="margin-bottom: 2rem; position: relative;">
        <div class="pro-timeline-dot"></div>
        <div class="pro-timeline-date">2004&ndash;2006</div>
        <p style="margin-bottom: 0;">Rapid growth. Community expands to a distributed team of 55 volunteers and contractors across 12+ countries.</p>
      </div>

      <div style="margin-bottom: 2rem; position: relative;">
        <div class="pro-timeline-dot"></div>
        <div class="pro-timeline-date">2006</div>
        <p style="margin-bottom: 0;">Peak traffic year. VistaBootPRO development begins during PROnetworks' height. Software development team forms from within the community.</p>
      </div>

      <div style="margin-bottom: 2rem; position: relative;">
        <div class="pro-timeline-dot"></div>
        <div class="pro-timeline-date">2006&ndash;2008</div>
        <p style="margin-bottom: 0;">12.2 million visitors confirmed via Google Analytics in this window alone. VistaBootPRO reaches 3M+ downloads.</p>
      </div>

      <div style="margin-bottom: 2rem; position: relative;">
        <div class="pro-timeline-dot"></div>
        <div class="pro-timeline-date">December 2008</div>
        <p style="margin-bottom: 0;">DualBootPRO launches commercially. Featured in PC World, ZDNet, PC Magazine, CNET, and Microsoft TechNet.</p>
      </div>

      <div style="position: relative;">
        <div class="pro-timeline-dot"></div>
        <div class="pro-timeline-date">2010</div>
        <p style="margin-bottom: 0;">PROnetworks operations wind down as focus shifts to HawaiiGuide.com and other ventures. The community's legacy continues through the people it helped and the careers it launched.</p>
      </div>

    </div>
  </div>

  <!-- CTA -->
  <div style="text-align: center; padding: 3rem 2rem; border-radius: 16px; border: 1px solid rgba(5, 150, 105, 0.3); background: linear-gradient(135deg, rgba(5, 150, 105, 0.10) 0%, rgba(5, 150, 105, 0.04) 100%); margin-bottom: 4rem;">
    <p style="font-size: 1.1em; margin-bottom: 1.5rem;"><strong>The same builder. New systems. Same philosophy.</strong></p>
    <p class="pro-cta-subtitle" style="margin-bottom: 2rem;">Technology is only as valuable as the community built around it.</p>
    <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
      <a href="/" class="btn btn-primary">Visit JohnCDerrick.com</a>
      <a href="/logs/" class="btn btn-outline" style="border-color: #059669; color: #059669;">Read the Logs</a>
    </div>
  </div>

</section>

<!-- Responsive styles -->
<style>
/* PROnetworks tile cards - light mode (default) */
.pro-tile {
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid var(--zinc-200);
  background: var(--zinc-50);
  transition: all 0.2s;
}
.pro-tile:hover {
  border-color: #059669;
  transform: translateY(-2px);
}
.pro-tile-badge {
  color: #059669;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}
.pro-tile-title {
  color: var(--zinc-900);
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  font-family: 'Space Grotesk', sans-serif;
}
.pro-tile-desc {
  color: var(--zinc-600);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 0;
}

/* PROnetworks timeline - light mode */
.pro-timeline-date {
  color: #059669;
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}
.pro-timeline-line {
  border-left: 3px solid #059669;
  padding-left: 2rem;
}
.pro-timeline-dot {
  position: absolute;
  left: -2.65rem;
  top: 4px;
  width: 14px;
  height: 14px;
  background: #059669;
  border-radius: 50%;
  border: 3px solid var(--zinc-50);
}

/* PROnetworks CTA - light mode */
.pro-cta-subtitle {
  color: var(--zinc-600);
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
  .pro-tile {
    border-color: rgba(255,255,255,0.08);
    background: rgba(24, 24, 27, 0.5);
  }
  .pro-tile:hover {
    border-color: #059669;
  }
  .pro-tile-badge {
    color: #34d399;
  }
  .pro-tile-title {
    color: #f4f4f5;
  }
  .pro-tile-desc {
    color: #a1a1aa;
  }
  .pro-timeline-date {
    color: #34d399;
  }
  .pro-timeline-dot {
    border-color: #18181b;
  }
  .pro-cta-subtitle {
    color: #a1a1aa;
  }
}

@media (max-width: 768px) {
  .content-narrow img[style*="float"] {
    float: none !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto 2rem auto !important;
  }

  .content-narrow div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}
</style>


<!-- Modern Footer -->
<footer style="background: #18181b; color: rgba(255,255,255,0.8); padding: 3rem 1.5rem; text-align: center;">
    <div style="max-width: 1200px; margin: 0 auto;">
        <p style="font-size: 0.875rem; color: rgba(255,255,255,0.45); margin-bottom: 2rem; line-height: 1.6;">
            <strong style="color: rgba(255,255,255,0.6); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.75rem;">Human Disclosure:</strong> This site is built and written by a human being using AI to amplify his thinking. The opinions are mine. The mistakes are mine. I will be wrong. I'm good with that. &nbsp;|&nbsp; <a href="/logs/anam-cara" style="color: inherit; text-decoration: none; opacity: 0.7;">Anam Cara &#x267E;&#xFE0F;</a>
        </p>
        <div style="margin-bottom: 2rem;">
            <a href="/hire" style="color: rgba(255,255,255,0.6); text-decoration: none; margin: 0 1rem; font-size: 0.9375rem;">Hire</a>
            <a href="/logs/" style="color: rgba(255,255,255,0.6); text-decoration: none; margin: 0 1rem; font-size: 0.9375rem;">Logs</a>
            <a href="/tools" style="color: rgba(255,255,255,0.6); text-decoration: none; margin: 0 1rem; font-size: 0.9375rem;">Tools</a>
            <a href="/ventures" style="color: rgba(255,255,255,0.6); text-decoration: none; margin: 0 1rem; font-size: 0.9375rem;">Ventures</a>
            <a href="/bio" style="color: rgba(255,255,255,0.6); text-decoration: none; margin: 0 1rem; font-size: 0.9375rem;">About</a>
        </div>
        <div style="margin-bottom: 1.5rem;">
            <a href="https://www.linkedin.com/in/johncderrick" target="_blank" style="color: rgba(255,255,255,0.6); text-decoration: none; margin: 0 0.75rem; font-size: 1.25rem;"><i class="fa-brands fa-linkedin-in"></i></a>
            <a href="https://x.com/jcderrick" target="_blank" style="color: rgba(255,255,255,0.6); text-decoration: none; margin: 0 0.75rem; font-size: 1.25rem;"><i class="fa-brands fa-x-twitter"></i></a>
            <a href="https://www.youtube.com/channel/UC-tYsoz1-xA9aLNU3Feo-8Q" target="_blank" style="color: rgba(255,255,255,0.6); text-decoration: none; margin: 0 0.75rem; font-size: 1.25rem;"><i class="fa-brands fa-youtube"></i></a>
        </div>
        <p style="margin-bottom: 1rem; font-size: 1rem;">
            &copy; 2026 GuideofUS, LLC. All rights reserved.
        </p>
        <p style="font-size: 0.75rem; color: rgba(255,255,255,0.35); margin-bottom: 1rem; letter-spacing: 0.08em; text-transform: uppercase;">
            Ideation by John &nbsp;<span style="color: rgba(16,185,129,0.5);">/</span>&nbsp; Coded by Agentic AI
        </p>
        <p style="font-size: 0.875rem; color: rgba(255,255,255,0.6);">
            <a href="/privacy" style="color: rgba(255,255,255,0.6); text-decoration: none; margin: 0 0.75rem;">Privacy</a>
            <a href="/terms" style="color: rgba(255,255,255,0.6); text-decoration: none; margin: 0 0.75rem;">Terms</a>
            <a href="javascript:void(0)" onclick="openContactModal()" style="color: rgba(255,255,255,0.6); text-decoration: none; margin: 0 0.75rem; cursor: pointer;">Contact</a>
            <a href="/results" style="color: rgba(255,255,255,0.6); text-decoration: none; margin: 0 0.75rem;">Search</a>
        </p>
    </div>
</footer>
<!-- Hidden perk for source explorers: use code "CodeWrangler" for 10% off any package/service fee. -->
<script>
(() => {
  if (window.__sourceCouponLogged) {
    return;
  }

  window.__sourceCouponLogged = true;
  console.log(
    '%cEaster egg unlocked! %cUse code "CodeWrangler" for 10% off any package/service fee.',
    'color: #f97316; font-weight: 700; font-size: 14px; padding: 4px 0;',
    'color: #f1f5f9; background: #0f172a; font-weight: 600; padding: 4px 8px; border-radius: 6px;'
  );
})();
</script>

<!-- Navigation Scroll Behavior -->
<script>
const mainNav = document.getElementById('mainNav');
let lastScroll = 0;

window.addEventListener('scroll', () => {
  const currentScroll = window.pageYOffset;

  if (currentScroll > 100) {
    mainNav.classList.add('scrolled');
  } else {
    mainNav.classList.remove('scrolled');
  }

  lastScroll = currentScroll;
}, { passive: true });

document.querySelectorAll('.nav-pill').forEach((pill) => {
  const toggle = pill.querySelector('.nav-toggle');
  const mobileNav = pill.querySelector('.mobile-nav');

  if (!toggle || !mobileNav) {
    return;
  }

  const closeMenu = () => {
    pill.classList.remove('menu-open');
    toggle.setAttribute('aria-expanded', 'false');
    mobileNav.setAttribute('aria-hidden', 'true');
  };

  const openMenu = () => {
    pill.classList.add('menu-open');
    toggle.setAttribute('aria-expanded', 'true');
    mobileNav.setAttribute('aria-hidden', 'false');
  };

  toggle.addEventListener('click', (event) => {
    event.stopPropagation();
    if (pill.classList.contains('menu-open')) {
      closeMenu();
    } else {
      openMenu();
    }
  });

  mobileNav.querySelectorAll('a').forEach((link) => {
    link.addEventListener('click', closeMenu);
  });

  document.addEventListener('click', (event) => {
    if (!pill.contains(event.target)) {
      closeMenu();
    }
  });

  window.addEventListener('resize', () => {
    if (window.innerWidth > 1200) {
      closeMenu();
    }
  });
});
</script>

<!-- Contact Modal -->
<div id="contactModal" class="contact-modal" onclick="closeContactModalOnBackdrop(event)">
  <div class="modal-content">
    <div class="modal-header">
      <div>
        <h2>Get In Touch</h2>
        <div class="modal-subtitle">
          <img src="https://assets.guideofus.com/victoria-c-derrick/w=600" alt="Victoria Derrick" class="victoria-avatar" width="48" height="48" loading="lazy" />
          <span>Victoria handles all inquiries and will be your direct point of contact.</span>
        </div>
      </div>
      <button class="modal-close" onclick="closeContactModal()" aria-label="Close">&times;</button>
    </div>

    <div class="form-success" id="formSuccess">
      Thank you! Your message has been sent. Victoria will respond within 1-2 business days.
    </div>

    <div class="form-error" id="formError">
      Something went wrong. Please try again or email <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="681e010b1c071a0109280f1d010c0d070e1d1b460b0705">[email&#160;protected]</a> directly.
    </div>

    <form id="contactForm" class="contact-form" onsubmit="handleContactSubmit(event)">
      <input type="hidden" name="access_key" value="1d43e0ac-24a1-4372-bc46-88af4cc313f7">
      <input type="hidden" name="subject" value="New Contact from johncderrick.com">
      <input type="hidden" name="from_name" value="JohnCDerrick.com Contact Form">

      <div class="form-group">
        <label for="name">Your Name *</label>
        <input type="text" id="name" name="name" required placeholder="John Smith">
      </div>

      <div class="form-group">
        <label for="email">Your Email *</label>
        <input type="email" id="email" name="email" required placeholder="john@example.com">
      </div>

      <div class="form-group">
        <label for="company">Company (Optional)</label>
        <input type="text" id="company" name="company" placeholder="Your Company Name">
      </div>

      <div class="form-group">
        <label for="service">Service Interest *</label>
        <select id="service" name="service" required>
          <option value="">Select a service...</option>
          <option value="Fractional CTO">Fractional CTO</option>
          <option value="AI Strategy & Integration">AI Strategy & Integration</option>
          <option value="Web Development">Web Development</option>
          <option value="Systems Architecture">Systems Architecture</option>
          <option value="Legacy Modernization">Legacy Modernization</option>
          <option value="Other">Other / General Inquiry</option>
        </select>
      </div>

      <div class="form-group">
        <label for="message">Message *</label>
        <textarea id="message" name="message" required placeholder="Tell us about your project or challenge..."></textarea>
      </div>

      <button type="submit" class="form-submit" id="submitBtn">
        Send Message
      </button>
    </form>
  </div>
</div>

<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>
// Contact Modal Functions
function openContactModal() {
  const modal = document.getElementById('contactModal');
  modal.classList.add('active');
  document.body.style.overflow = 'hidden';
}

function closeContactModal() {
  const modal = document.getElementById('contactModal');
  modal.classList.remove('active');
  document.body.style.overflow = '';

  // Reset form after closing
  setTimeout(() => {
    document.getElementById('contactForm').reset();
    document.getElementById('formSuccess').style.display = 'none';
    document.getElementById('formError').style.display = 'none';
    document.getElementById('contactForm').style.display = 'flex';
  }, 300);
}

function closeContactModalOnBackdrop(event) {
  if (event.target.id === 'contactModal') {
    closeContactModal();
  }
}

// Handle form submission
async function handleContactSubmit(event) {
  event.preventDefault();

  const form = event.target;
  const submitBtn = document.getElementById('submitBtn');
  const formSuccess = document.getElementById('formSuccess');
  const formError = document.getElementById('formError');

  // Disable submit button
  submitBtn.disabled = true;
  submitBtn.textContent = 'Sending...';

  try {
    const formData = new FormData(form);
    const response = await fetch('https://api.web3forms.com/submit', {
      method: 'POST',
      body: formData
    });

    const data = await response.json();

    if (data.success) {
      // Show success message
      form.style.display = 'none';
      formSuccess.style.display = 'block';

      // Close modal after 3 seconds
      setTimeout(() => {
        closeContactModal();
      }, 3000);
    } else {
      throw new Error('Form submission failed');
    }
  } catch (error) {
    // Show error message
    formError.style.display = 'block';
    submitBtn.disabled = false;
    submitBtn.textContent = 'Send Message';

    console.error('Form submission error:', error);
  }
}

// Close modal on Escape key
document.addEventListener('keydown', (event) => {
  if (event.key === 'Escape') {
    const modal = document.getElementById('contactModal');
    if (modal && modal.classList.contains('active')) {
      closeContactModal();
    }
  }
});
</script>

<!-- Monstera Deliciosa - Symbolic Breadcrumb -->
<a href="/" class="monstera-leaf" aria-label="Home">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 120" fill="none">
    <!-- Stem -->
    <path d="M50 96 C49 102 48 110 46 118" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" opacity="0.7"/>
    <!-- Leaf body with deep splits - the defining monstera feature -->
    <path d="
      M50 5
      C36 3 20 10 12 24
      C6 34 4 40 4 46
      L26 48
      L4 56
      C2 66 4 76 10 84
      L30 80
      L16 94
      C26 102 40 104 50 98
      C60 104 74 102 84 94
      L70 80
      L90 84
      C96 76 98 66 96 56
      L74 48
      L96 46
      C96 40 94 34 88 24
      C80 10 64 3 50 5
      Z
    " fill="currentColor"/>
    <!-- Fenestrations (interior holes) -->
    <ellipse cx="36" cy="62" rx="5" ry="8" fill="var(--monstera-hole, #f4f4f5)" transform="rotate(-8 36 62)"/>
    <ellipse cx="64" cy="62" rx="5" ry="8" fill="var(--monstera-hole, #f4f4f5)" transform="rotate(8 64 62)"/>
    <!-- Midrib -->
    <line x1="50" y1="12" x2="50" y2="94" stroke="var(--monstera-hole, #f4f4f5)" stroke-width="1" opacity="0.3" stroke-linecap="round"/>
  </svg>
</a>
<style>
.monstera-leaf {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 90;
  width: 3rem;
  height: 3rem;
  color: #059669;
  opacity: 0.35;
  transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  --monstera-hole: #f4f4f5;
}
.monstera-leaf:hover {
  opacity: 0.85;
  transform: scale(1.15) rotate(-5deg);
  color: #10b981;
}
.monstera-leaf svg {
  width: 100%;
  height: 100%;
}
@media (prefers-color-scheme: dark) {
  .monstera-leaf {
    --monstera-hole: #18181b;
    opacity: 0.3;
  }
  .monstera-leaf:hover {
    opacity: 0.75;
  }
}
@media (max-width: 768px) {
  .monstera-leaf {
    width: 2.25rem;
    height: 2.25rem;
    bottom: 1rem;
    left: 1rem;
  }
}
</style>


<!-- Drip Email Marketing (API only - popup handled by newsletter-popup.html) -->
<script type="text/javascript">
  var _dcq = _dcq || [];
  var _dcs = _dcs || {};
  _dcs.account = '9523391';

  (function() {
    var dc = document.createElement('script');
    dc.type = 'text/javascript'; dc.async = true;
    dc.src = 'https://tag.getdrip.com/9523391.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(dc, s);
  })();
</script>

<!-- Hide any Drip-injected popups since we use our own -->
<script>
(function() {
  var style = document.createElement('style');
  style.textContent =
    '#drip-widget-wrapper, #drip-modal, #drip-modal-overlay,' +
    '[id*="drip"][id*="popup"], [id*="drip"][id*="widget"],' +
    '[class*="drip-popup"], [class*="drip-modal"], [class*="drip-widget"]' +
    '{ display: none !important; visibility: hidden !important; }';
  document.head.appendChild(style);
})();
</script>


<!-- Availability Banner - Vanilla JavaScript -->
<script>
// Availability Banner functionality (no jQuery required)
document.addEventListener('DOMContentLoaded', function() {
  const banner = document.getElementById('availability-banner');
  const expandBtn = document.getElementById('banner-expand');
  const details = document.getElementById('banner-details');

  if (banner) {
    banner.style.display = 'block';
    banner.style.opacity = '1';
    banner.style.transform = 'translateY(0)';
  }

  // Toggle expand/collapse
  if (expandBtn) {
    expandBtn.addEventListener('click', function(e) {
      e.preventDefault();
      expandBtn.classList.toggle('expanded');
      details.classList.toggle('expanded');
    });
  }

});
</script>

<!-- Newsletter Popup -->
<div class="nl-popup" id="newsletterPopup">
  <div class="nl-popup-card">
    <button class="nl-popup-close" id="nlClose" aria-label="Close">&times;</button>
    <div class="nl-popup-image">
      <img src="https://cdn.johncderrick.com/hawaii-blue-hole-john-derrick.jpg" alt="" loading="lazy" />
    </div>
    <div class="nl-popup-body">
      <h2 class="nl-popup-title">Be the First to Know</h2>
      <p class="nl-popup-text">New log entries, project launches, and behind-the-scenes insights delivered straight to your inbox.</p>
      <form class="nl-popup-form" id="nlForm">
        <input type="email" id="nlEmail" placeholder="Your email address" required autocomplete="email" />
        <button type="submit" id="nlSubmit">Subscribe</button>
      </form>
      <p class="nl-popup-success" id="nlSuccess">You're in! Check your inbox to confirm.</p>
      <p class="nl-popup-note">No spam, ever. Unsubscribe anytime.</p>
    </div>
  </div>
</div>

<style>
/* ===== NEWSLETTER POPUP ===== */
.nl-popup {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nl-popup.active {
  display: flex;
  opacity: 1;
}

/* Card */
.nl-popup-card {
  position: relative;
  display: flex;
  flex-direction: row;
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg-primary, #fff);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
  transform: scale(0.92) translateY(12px);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.nl-popup.active .nl-popup-card {
  transform: scale(1) translateY(0);
}

/* Close */
.nl-popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}

.nl-popup-close:hover {
  background: rgba(0, 0, 0, 0.7);
}

/* Image half */
.nl-popup-image {
  flex: 0 0 44%;
  min-height: 280px;
}

.nl-popup-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Body half */
.nl-popup-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-8, 2rem);
  gap: var(--space-4, 1rem);
}

.nl-popup-title {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  font-weight: 700;
  color: var(--text-primary, #18181b);
  margin: 0;
  line-height: 1.2;
}

.nl-popup-text {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary, #52525b);
  margin: 0;
}

/* Form */
.nl-popup-form {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.nl-popup-form input[type="email"] {
  padding: 0.75rem 1rem;
  border: 2px solid var(--zinc-200, #e4e4e7);
  border-radius: 10px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 1rem;
  color: var(--text-primary, #18181b);
  background: var(--bg-primary, #fff);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}

.nl-popup-form input[type="email"]:focus {
  outline: none;
  border-color: var(--primary-600, #059669);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15);
}

.nl-popup-form button[type="submit"] {
  padding: 0.75rem 1.25rem;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary-600, #059669) 0%, var(--primary-700, #047857) 100%);
  color: #fff;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nl-popup-form button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(5, 150, 105, 0.45);
}

.nl-popup-form button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Success */
.nl-popup-success {
  display: none;
  margin: 0;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border: 2px solid var(--primary-600, #059669);
  border-radius: 10px;
  color: var(--primary-700, #047857);
  font-weight: 600;
  font-size: 0.9375rem;
  text-align: center;
}

/* Note */
.nl-popup-note {
  font-size: 0.8125rem;
  color: var(--zinc-400, #a1a1aa);
  margin: 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
  .nl-popup-card {
    flex-direction: column;
    max-height: 92vh;
    overflow-y: auto;
  }

  .nl-popup-image {
    flex: none;
    min-height: 180px;
    max-height: 200px;
  }

  .nl-popup-body {
    padding: var(--space-6, 1.5rem);
    background-color: var(--bg-primary, #fff);
  }

  .nl-popup-text {
    color: var(--text-primary, #18181b);
  }

  .nl-popup-close {
    background: rgba(0, 0, 0, 0.55);
  }
}

/* ===== DARK MODE ===== */
@media (prefers-color-scheme: dark) {
  .nl-popup-form input[type="email"] {
    background: var(--zinc-900, #18181b);
    border-color: var(--zinc-700, #3f3f46);
    color: var(--zinc-100, #f4f4f5);
  }

  .nl-popup-close {
    background: rgba(255, 255, 255, 0.2);
  }

  .nl-popup-close:hover {
    background: rgba(255, 255, 255, 0.35);
  }

  .nl-popup-success {
    background: rgba(5, 150, 105, 0.15);
    border-color: var(--primary-500, #10b981);
    color: var(--primary-400, #34d399);
  }
}
</style>

<script>
(function() {
  var STORAGE_KEY = 'nl_popup_dismissed';
  var DELAY_MS = 8000;       // Show after 8 seconds
  var DISMISS_DAYS = 30;     // Don't show again for 30 days after dismiss
  var SUBSCRIBE_DAYS = 365;  // Don't show again for 1 year after subscribe

  var popup = document.getElementById('newsletterPopup');
  var closeBtn = document.getElementById('nlClose');
  var form = document.getElementById('nlForm');
  var emailInput = document.getElementById('nlEmail');
  var submitBtn = document.getElementById('nlSubmit');
  var successMsg = document.getElementById('nlSuccess');

  if (!popup) return;

  // Check if popup should be suppressed
  function isSuppressed() {
    try {
      var stored = localStorage.getItem(STORAGE_KEY);
      if (!stored) return false;
      var data = JSON.parse(stored);
      return Date.now() < data.until;
    } catch (e) {
      return false;
    }
  }

  function suppress(days) {
    try {
      localStorage.setItem(STORAGE_KEY, JSON.stringify({
        until: Date.now() + (days * 86400000)
      }));
    } catch (e) { /* localStorage unavailable */ }
  }

  function openPopup() {
    popup.classList.add('active');
    document.body.style.overflow = 'hidden';
    // Focus email input after animation
    setTimeout(function() { emailInput.focus(); }, 350);
  }

  function closePopup() {
    popup.classList.remove('active');
    document.body.style.overflow = '';
  }

  // Close handlers
  closeBtn.addEventListener('click', function() {
    closePopup();
    suppress(DISMISS_DAYS);
  });

  popup.addEventListener('click', function(e) {
    if (e.target === popup) {
      closePopup();
      suppress(DISMISS_DAYS);
    }
  });

  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && popup.classList.contains('active')) {
      closePopup();
      suppress(DISMISS_DAYS);
    }
  });

  // Form submission -> Drip API
  form.addEventListener('submit', function(e) {
    e.preventDefault();
    var email = emailInput.value.trim();
    if (!email) return;

    submitBtn.disabled = true;
    submitBtn.textContent = 'Subscribing\u2026';

    // Send to Drip via their JS API
    if (typeof _dcq !== 'undefined') {
      _dcq.push(['identify', {
        email: email,
        tags: ['newsletter']
      }]);
    }

    // Show success after a brief moment
    setTimeout(function() {
      form.style.display = 'none';
      successMsg.style.display = 'block';
      suppress(SUBSCRIBE_DAYS);

      // Auto-close after 3 seconds
      setTimeout(function() { closePopup(); }, 3000);
    }, 600);
  });

  // Schedule popup
  if (!isSuppressed()) {
    setTimeout(openPopup, DELAY_MS);
  }
})();
</script>


<!-- Page-specific extra JS -->


<!-- Custom Chat Interface - Replaces CustomGPT Web Widget -->
<script src="/assets/js/custom-chat.js"></script>

</body>
</html>
