Files

T

Build and Deploy / deploy (push) Successful in 1m42s

Details

feat(site): migrate from Next.js to Astro

Replace Next.js 16 + React 19 with Astro 5. Same visual design,
same deploy pipeline, zero client-side framework.

- All components rewritten as .astro files
- Dark mode via inline scripts (no React context)
- Timeline animation via IntersectionObserver script
- Nav active state computed at build time
- Self-hosted Source Code Pro woff2 fonts
- Drop Font Awesome (icons were never loaded)
- Drop unused headshot PNG (1MB, unreferenced)
- Fix pfSense hardware refs (Netgate 1100, not N100)
- Output: 212KB static HTML vs 2.6MB before
- JS shipped: ~700 bytes inline vs ~130KB React runtime

2026-05-18 20:07:24 -04:00

1.7 KiB

Raw Permalink Blame History

Tyler Koenig portfolio

Personal portfolio site. Live at lerkolabs.com — self-hosted.

Source: gitea.lerkolabs.com/lerko/portfolio

Stack: Astro 5 · TypeScript · Tailwind v4

Branches

dev — source code; pushing here updates lerkolabs.com
master — reserved for future GitHub mirror; don't touch manually

Commands

npm run dev      # dev server at localhost:4321
npm run build    # static export into out/
npm run preview  # preview production build

Deploy

git checkout dev && git merge <branch> && git push gitea dev

Push to dev triggers Gitea Actions (.gitea/workflows/deploy.yml):

Builds the static site (npm run build)
rsyncs out/ to the portfolio LXC
Rebuilds and restarts the Docker container serving lerkolabs.com

Project layout

src/
  layouts/
    Base.astro            # root layout, fonts, theme script, nav/footer
  pages/
    index.astro           # home: hero, timeline
    projects.astro        # featured + archive projects
    homelab.astro         # VLANs, services, ADRs
    archive.astro         # redirect to /projects/
  components/             # Nav, Footer, Hero, Timeline, Widget, ProjectCard, Skills
  data/
    projects.ts           # all projects, featured + archive split
    services.ts           # homelab services with categories
    timeline.ts           # career/project timeline
  styles/
    globals.css           # full design system (Tailwind v4 CSS-first, all tokens here)
public/
  fonts/                  # self-hosted Source Code Pro woff2

Tailwind v4 is CSS-first — no tailwind.config.ts. All custom tokens live in globals.css under @theme {}.