src/components/Hero.astro

@@ -1,3 +1,7 @@
+---
+import { services } from "@/data/services";
+---
+
 <section class="mb-3lh">
   <h1 class="text-xl font-bold mb-half-lh">Tyler Koenig</h1>
   <p class="text-[var(--color-text-label)] mb-1lh">
@@ -5,7 +9,7 @@
   </p>
 
   <p class="text-[var(--color-text-label)] leading-relaxed mb-1lh">
-    Homelab runs 30+ services across segmented VLANs — pfSense, Authentik SSO,
+    Homelab runs {services.length} services across segmented VLANs — pfSense, Authentik SSO,
     full observability stack. Write software too: mobile apps, Go backends, open
     protocols. Daily drivers, all of it.
   </p>

src/pages/index.astro

@@ -37,18 +37,15 @@ const glanceStats = [
   </section>
 
   <section id="homelab">
-    <div class="mb-4lh">
-      <h2 class="text-xl font-bold mb-half-lh">Homelab</h2>
-      <p class="text-[var(--color-text-label)] leading-relaxed max-w-2xl">
+    <Widget title="Homelab" as="div">
+      <p class="text-[var(--color-text-label)] leading-relaxed max-w-2xl mb-2lh">
         Personal infrastructure environment for learning, self-hosting, and
         operational practice. Running 24/7 on production-grade hardware with
         real network segmentation, SSO, monitoring, and IaC-style
         documentation.
       </p>
-    </div>
 
-    <Widget title="At a Glance"  as="div">
-      <dl class="flex flex-col">
+      <dl class="flex flex-col mb-2lh">
         {glanceStats.map(({ label, value }) => (
           <div class="flex gap-2ch py-qtr-lh">
             <dt class="text-[var(--color-text-dim)] w-[16ch] shrink-0">{label}</dt>
@@ -56,10 +53,8 @@ const glanceStats = [
           </div>
         ))}
       </dl>
-    </Widget>
 
-    <Widget title="Services"  as="div">
-      <div class="flex flex-wrap gap-x-[3ch] gap-y-qtr-lh">
+      <div class="flex flex-wrap gap-x-[3ch] gap-y-qtr-lh mb-2lh">
         {categoryOrder.map((cat) => {
           const count = services.filter((s) => s.category === cat).length;
           return (
@@ -70,9 +65,7 @@ const glanceStats = [
           );
         })}
       </div>
-    </Widget>
 
-    <div class="mb-4lh">
       <p class="text-[var(--color-text-label)] mb-half-lh">
         Full documentation — network maps, ADRs, runbooks, and service configs.
       </p>
@@ -84,7 +77,7 @@ const glanceStats = [
       >
         gitea.lerkolabs.com/lerko/homelab →
       </a>
-    </div>
+    </Widget>
   </section>
 
   <Footer slot="footer" />