This site, from the inside
A personal blog that is also a lab. Here I document the technical decisions behind it and why.
Timeline
// project phases
- Jan 2024
Greenfield
Astro 4, Tailwind with custom tokens, Vitest set up before the first page was written. Solid technical foundation from day one.
- 2024
Foundations
Dark mode, self-hosted fonts, Astro 5, navigation system, and early style and content iterations.
- Mar 2026
Blog and CV
ATS-friendly bilingual CV with auto-generated PDF via Playwright. Blog with ES/EN i18n, mirrored routes, and translated slugs.
- Apr 2026
Ecosystem
Public katas, talks, technical articles, and a full WCAG 2.1 AA accessibility audit. The blog becomes a complete portfolio.
- Apr 2026
Production-ready with AI
Full GDPR, GA4 with Consent Mode v2, OG images, 97/100 on PageSpeed. All shipped in three weeks through professional, intensive AI use.
Decisions
// what and why
-
Astro SSG with selective islands
Static rendering by default; React only in the islands where interactivity earns it. Less client JavaScript, better performance.
-
i18n without an extra framework
Mirrored es/en routes and custom utilities. Slugs are translated where it helps local SEO (privacy, legal notice); blog routes share a slug.
-
Structural SEO
Canonical and hreflang in every page head, bilingual sitemap submitted to GSC. Localized slugs to rank for Spanish-language terms without losing the link between versions.
-
Keystatic as CMS
Visual editor on top of GitHub-as-DB. Every entry is a commit, every draft a branch Vercel ignores.
-
Consent Mode v2 and a self-built banner
No third-party CMP. GA4 starts with analytics_storage denied; it only activates if the visitor accepts.
-
Testing pyramid
Three layers: unit tests with Vitest (pure logic), integration tests on the build output (routes, hreflang, OGs, PDFs), and E2E with Playwright (consent, i18n, dark mode). The approach comes from Strict mocks vs fakes .
-
CI automation
Upstash keep-alive, weekly kata-link check, OG images, CV PDF, and all three test layers on every PR. Vercel previews as an editorial flow — Vercel preview deployments .
-
Accessibility as a discipline
Twelve numbered commits (step 1, step 2…) walking through WCAG 2.1 AA: skip link, focus management after transitions, aria on nav and contact form, prefers-reduced-motion respected, fully keyboard-operable 404 page. Not bolted on at the end — shipped as part of the work.
Stack
// what it is built with
Frontend
- Astro SSG + islands
- TypeScript static typing
- Tailwind CSS design tokens
- React interactive islands
Content
- Keystatic git-based CMS
- Satori OG images
- Playwright CV PDF
- 1993
Infra
- Vercel hosting + previews
- Upstash Redis
- Resend contact form
- GitHub Actions CI/CD
Testing
- Vitest unit + integration
- Playwright E2E
Numbers
// snapshot as of April 2026
Technical audit
// PageSpeed Insights · April 2026
-
Performance
-
Accessibility
-
Best Practices
-
SEO
Measured with PageSpeed Insights on aitorevi.dev
The code is open
If you made it this far, maybe you want to read a post or reach out.