site/index.html

@@ -1487,6 +1487,35 @@
         })();
       </script>
 
+      <script>
+        // Fetch professional stats from data API
+        (async function() {
+          const updateStat = (id, value) => {
+            const element = document.getElementById(id);
+            if (element) {
+              element.textContent = value;
+            }
+          };
+
+          try {
+            const [testimonialsResponse, resumeResponse] = await Promise.all([
+              fetch('https://data.nhcarrigan.com/testimonials.json'),
+              fetch('https://data.nhcarrigan.com/resume.json')
+            ]);
+
+            const testimonials = await testimonialsResponse.json();
+            const resume = await resumeResponse.json();
+
+            updateStat('stat-testimonials', testimonials.length);
+            updateStat('stat-certifications', resume.certifications?.length || 0);
+            updateStat('stat-projects', resume.projects?.length || 0);
+            updateStat('stat-publications', resume.publications?.length || 0);
+          } catch (error) {
+            console.error('Failed to fetch professional stats:', error);
+          }
+        })();
+      </script>
+
       <!--
           MARK: Availability Banner
       -->
@@ -1968,6 +1997,39 @@
         </p>
       </section>
 
+      <!--
+          MARK: Professional Stats
+      -->
+      <section class="card fade-in" role="region" aria-labelledby="professional-stats">
+        <h2 id="professional-stats" style="margin-top: 0; text-align: center;">Professional Achievements</h2>
+        <p style="text-align: center; margin-bottom: 2rem;">
+          A snapshot of our experience and credentials:
+        </p>
+        <img class="hero-image" src="https://cdn.nhcarrigan.com/hero/achievements.png" alt="Naomi Carrigan, founder of NHCarrigan" />
+
+        <div class="stats-grid">
+          <div class="stat-card">
+            <div class="stat-number" id="stat-testimonials">--</div>
+            <div class="stat-label">Satisfied Clients</div>
+          </div>
+
+          <div class="stat-card">
+            <div class="stat-number" id="stat-certifications">--</div>
+            <div class="stat-label">Certifications</div>
+          </div>
+
+          <div class="stat-card">
+            <div class="stat-number" id="stat-projects">--</div>
+            <div class="stat-label">Featured Projects</div>
+          </div>
+
+          <div class="stat-card">
+            <div class="stat-number" id="stat-publications">--</div>
+            <div class="stat-label">Published Articles</div>
+          </div>
+        </div>
+      </section>
+
       <!--
           MARK: Testimonials
       -->