lerko/portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

fix(content): consolidate homelab spacing, dynamic service count in hero

Browse Source 
Collapse homelab into single Widget to match Projects/Journey spacing.
Hero service count now reads from services data instead of hardcoded 30+.
This commit is contained in:
Tyler Koenig
2026-05-27 17:33:16 -04:00
parent 4a2ea3c32d
commit 9037461d27
2 changed files with 10 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Hero.astro
+5 -1
View File
@@ -1,3 +1,7 @@
---
import { services } from "@/data/services";
---
<section class="mb-3lh"> <section class="mb-3lh">
<h1 class="text-xl font-bold mb-half-lh">Tyler Koenig</h1> <h1 class="text-xl font-bold mb-half-lh">Tyler Koenig</h1>
<p class="text-[var(--color-text-label)] mb-1lh"> <p class="text-[var(--color-text-label)] mb-1lh">
@@ -5,7 +9,7 @@
</p> </p>
<p class="text-[var(--color-text-label)] leading-relaxed mb-1lh"> <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 full observability stack. Write software too: mobile apps, Go backends, open
protocols. Daily drivers, all of it. protocols. Daily drivers, all of it.
</p> </p>
src/pages/index.astro
+5 -12
View File
@@ -37,18 +37,15 @@ const glanceStats = [
</section> </section>
<section id="homelab"> <section id="homelab">
<div class="mb-4lh"> <Widget title="Homelab" as="div">
<h2 class="text-xl font-bold mb-half-lh">Homelab</h2> <p class="text-[var(--color-text-label)] leading-relaxed max-w-2xl mb-2lh">
<p class="text-[var(--color-text-label)] leading-relaxed max-w-2xl">
Personal infrastructure environment for learning, self-hosting, and Personal infrastructure environment for learning, self-hosting, and
operational practice. Running 24/7 on production-grade hardware with operational practice. Running 24/7 on production-grade hardware with
real network segmentation, SSO, monitoring, and IaC-style real network segmentation, SSO, monitoring, and IaC-style
documentation. documentation.
</p> </p>
</div>
<Widget title="At a Glance" as="div"> <dl class="flex flex-col mb-2lh">
<dl class="flex flex-col">
{glanceStats.map(({ label, value }) => ( {glanceStats.map(({ label, value }) => (
<div class="flex gap-2ch py-qtr-lh"> <div class="flex gap-2ch py-qtr-lh">
<dt class="text-[var(--color-text-dim)] w-[16ch] shrink-0">{label}</dt> <dt class="text-[var(--color-text-dim)] w-[16ch] shrink-0">{label}</dt>
@@ -56,10 +53,8 @@ const glanceStats = [
</div> </div>
))} ))}
</dl> </dl>
</Widget>
<Widget title="Services" as="div"> <div class="flex flex-wrap gap-x-[3ch] gap-y-qtr-lh mb-2lh">
<div class="flex flex-wrap gap-x-[3ch] gap-y-qtr-lh">
{categoryOrder.map((cat) => { {categoryOrder.map((cat) => {
const count = services.filter((s) => s.category === cat).length; const count = services.filter((s) => s.category === cat).length;
return ( return (
@@ -70,9 +65,7 @@ const glanceStats = [
); );
})} })}
</div> </div>
</Widget>
<div class="mb-4lh">
<p class="text-[var(--color-text-label)] mb-half-lh"> <p class="text-[var(--color-text-label)] mb-half-lh">
Full documentation — network maps, ADRs, runbooks, and service configs. Full documentation — network maps, ADRs, runbooks, and service configs.
</p> </p>
@@ -84,7 +77,7 @@ const glanceStats = [
> >
gitea.lerkolabs.com/lerko/homelab → gitea.lerkolabs.com/lerko/homelab →
</a> </a>
</div> </Widget>
</section> </section>
<Footer slot="footer" /> <Footer slot="footer" />