Portfolio personal de Alejandro de la Fuente — Technical Leader Specialist · Agentic AI.
Versión 2: migración del stack React 19 + Vite a Astro 5 + Svelte 5 sobre el sistema de diseño @codigosinsiesta/theme. Tras cutover (Fase 5), reemplaza la versión React desplegada en tellmealex.dev. Hasta entonces vive en v2.tellmealex.dev.
| Capa | Tecnología | Versión |
|---|---|---|
| Framework | Astro | 5.x |
| Islas | Svelte | 5.x (runes) |
| Estilos | Tailwind CSS | 3.x (preset csi-* del theme) |
| Diseño | @codigosinsiesta/theme |
git URL (v0.9.0+) |
| Contenido | Astro Content Collections | Zod schemas |
| Tests | Vitest + Playwright | (pendiente — Fase 4) |
| Hosting | Dokploy | (pendiente — TODO infra) |
src/
├── content/
│ ├── config.ts · Schemas Zod (profile, projects, skills, experience)
│ ├── profile/ · Singleton — bio del autor
│ ├── projects/ · Markdown por proyecto
│ ├── skills/ · JSON por categoría
│ └── experience/ · Markdown por rol profesional
├── layouts/
│ └── BaseLayout.astro · HTML doc + estructura PageShell (skip link, header, main, footer)
├── pages/
│ └── index.astro · One-page bento (Hero, About, Skills, Projects, Contact)
└── styles/
└── global.css · Import del theme + Tailwind layers
public/
└── icons/ · github.svg, linkedin.svg, envelope.svg (consumidos por SiteFooter)
astro.config.mjs · Integraciones Svelte + Tailwind
tailwind.config.mjs · Aplica preset `@codigosinsiesta/theme/tailwind.preset.js`
pnpm install # Instala dependencias (incluye el theme via git URL)
pnpm dev # Servidor de desarrollo en :4321
pnpm build # Build estático a dist/
pnpm preview # Sirve el build para verificar
pnpm check # Astro type checkVer Portfolio-Identidad-CodigoSinSiesta (nota privada en el vault del autor) para el plan completo. Resumen:
- Fase 0 ✅ — Higiene previa: merge de PR #109 en
portfolio(React) + apertura del milestone v0.8.0 en el theme. - Fase 1 ✅ — Backlog del theme: composables v0.8.0 + site shell + bento v0.9.0 publicados.
- Fase 2 🟢 — Skeleton del portfolio (este commit inicial).
- Fase 3 ⚪ — Migración feature a feature: footer/contact, about, AI leadership, header (isla), hero (typing), stats (counter), skills (bars), experience (timeline), projects (filtros).
- Fase 4 ⚪ — Pulido + a11y + perf: Lighthouse, axe-core, Vitest + Playwright.
- Fase 5 ⚪ — Cutover: swap DNS de
tellmealex.dev(React → Astro), archivar el repo viejo.
- Dokploy: crear app paralela apuntando a
portfolio-v2:mainen subdominiov2.tellmealex.dev. La versión React sigue sirviendotellmealex.devhasta el cutover. - Configurar webhook GitHub → Dokploy para deploy automático en push a
main. - Verificar headers de seguridad (CSP, HSTS) en la app Dokploy.
El contenido textual está en src/content/ como placeholders. La copy real se irá rellenando feature a feature en Fase 3, copiando de la versión React (github.com/TellMeAlex/portfolio).
MIT — Alejandro de la Fuente.