How This Site Was Built

This site isn't just a portfolio — it's a living demonstration. Every technical decision was deliberate, and I'm sharing all of them.

Framework: Astro

This site is built with Astro — a framework that ships zero JavaScript by default. Every page is pre-rendered to static HTML at build time. Interactive components (the chat widget, server dashboard, contact form) use Astro's "islands architecture" — they hydrate independently, only when needed.

The result: pages load in under 2 seconds, the Lighthouse score is 95+, and the total JS payload for most pages is under 30KB gzipped.

Styling: Tailwind CSS v4

Tailwind v4 with custom CSS variables for the brand palette. No component library — every element is hand-crafted with utility classes and custom CSS components for reusable patterns like .card, .badge, and .btn-primary.

Interactive Islands: Preact

Instead of shipping React's 40KB runtime, interactive components use Preact — same API, 3KB. Islands hydrate with different strategies: client:load for above-the-fold (hero animation), client:visible for below-the-fold (dashboard, chat), and client:idle for non-critical features (terminal mode).

AI Chat Demo

The chat widget in the corner connects to a real AI backend — the same Quartalis backend that powers my personal AI assistant. It hits a sandboxed endpoint that only discusses professional work, with no access to personal data. Rate limited to 10 messages per IP per hour.

Live Server Dashboard

The infrastructure section on the homepage polls a real API endpoint every 30 seconds, showing live metrics from the HP DL380 Gen9 server that hosts this very site. Uptime, memory chunks, active AI providers — all real data.

Hosting: Self-Hosted on Bare Metal

The site is served by an nginx:alpine Docker container on my HP DL380 Gen9 server, behind a Cloudflare Tunnel. No AWS, no Vercel, no Netlify. The entire stack — from the server hardware to the Docker container to the CDN layer — is under my control.

Performance Budget

The total JS budget for interactive islands:

Hero animation: ~25KB
Typewriter effect: ~2KB
Stats counter: ~3KB
Chat widget: ~8KB
Server dashboard: ~5KB
Contact form: ~6KB
Total worst case: ~83KB (~28KB gzipped)

Most pages load under 30KB JS because client:visible and client:idle defer loading until needed.

Content

All content is written in Markdown and managed via Astro Content Collections with Zod schema validation. Blog posts and case studies are version-controlled alongside the code — no CMS, no database, no admin panel.

Analytics

Self-hosted Umami analytics — lightweight, cookie-free, GDPR-compliant by design. No Google Analytics, no third-party tracking scripts.