danielponcelas.com

Web personal de Daniel Poncelas Vargas. Una sola página, en inglés (por defecto) y español, estática y sin JavaScript de framework.

El trabajo de esta web es aportar prueba: el CV afirma cosas que nadie puede verificar (dos repos privados y un TFM sin publicar), así que cada bloque enlaza a algo que se puede abrir y cada cifra lleva la fecha en la que se midió.

Arrancar

npm install
npm run dev        # http://localhost:4321
npm run build      # deja el sitio en dist/
npm run preview    # sirve dist/

Node 20 o superior. Solo hay una dependencia de producción: astro.

Stack y por qué

Decisión	Motivo
Astro 7, salida estática	Manda HTML. No hay hidratación ni bundle de framework: el sitio entero son 939 bytes de JS en línea
CSS propio con tokens, sin Tailwind	Es un diseño a medida. Utilidades genéricas lo habrían empujado hacia el aspecto de plantilla
Fuentes autoalojadas en public/fonts	Solo el subconjunto latin y solo los pesos usados: 128 KB en total, con preload y font-display: swap. Los paquetes @fontsource están en devDependencies solo como origen de esos .woff2
Figuras del TFM en SVG	Convertidas desde los PDF originales, nítidas a cualquier tamaño y unos 25 KB con gzip
CSS en línea en el HTML	Una sola página: incrustarlo elimina la petición que bloquea el render

Primera pintura: unos 120 KB (HTML + las tres fuentes precargadas + la figura del hero).

Estructura

src/
  data/
    shared.js     datos que no cambian con el idioma (persona, enlaces, cifras, rampa de color)
    en.js         todo el texto en inglés
    es.js         todo el texto en español
  components/
    Page.astro    la página entera, en los dos idiomas
    Ramp.astro    la tira de color, Figure, Project, StatGrid, SectionHead, Status
  layouts/
    Base.astro    head, cabecera, pie, hreflang, JSON-LD, script de reveal
  pages/
    index.astro   inglés  (/)
    es/index.astro español (/es/)
    404.astro
    og.astro      plantilla de la imagen para redes, ver más abajo
  styles/global.css  tokens de color, tipografía y motion

Para cambiar cualquier texto o cifra se toca src/data/, nunca los componentes.

Sistema de diseño

• Paleta: sacada del mapa de calor de tasa de éxito del ataque del propio TFM (colormap RdPu de matplotlib), de rosa pálido a berenjena. La tira de nueve colores que aparece bajo el nombre y en el bloque de contacto es esa misma rampa.
• Tipografía: Source Serif 4 para el nombre y la prosa, IBM Plex Sans Condensed para etiquetas y navegación, IBM Plex Mono para cifras y metadatos.
• Modo oscuro automático según la preferencia del sistema. Las figuras conservan su lámina blanca en los dos modos, como en un paper impreso.
• Motion: una secuencia de entrada en el hero y un reveal al hacer scroll. Todo respeta prefers-reduced-motion.

Reglas de contenido

Vienen de ../CONTEXT.md y no se saltan:

1. Ninguna cifra inventada ni redondeada. Salen de la sección 3 de CONTEXT.md.
2. Cada bloque de cifras lleva su fecha de medición. Es lo que hace que la página no afirme estar al día cuando no lo esté.
3. ETH Zúrich se describe como lo que fue: una semana, admisión con CV y carta, fine tuning de modelos Llama. Nada más.
4. El registro es "diseño y opero", nunca "escribí a mano cada componente".
5. Sin rayas largas en la prosa. Los rangos de fechas usan flecha.

Antes de publicar

Este repositorio es público. El checklist de lo que queda pendiente vive en CONTEXT.md, sección 6, fuera del repositorio, porque son notas internas y no tienen por qué leerlas terceros.

Lo que sí conviene saber aquí: todo el contenido se edita en src/data/, y cada bloque de cifras lleva su fecha de medición. Si una cifra cambia, se cambia ahí y se actualiza también su fecha. Nunca en los componentes.

Regenerar la imagen de redes sociales

src/pages/og.astro es la plantilla de la tarjeta de Open Graph. Se renderiza con el navegador para que use las mismas fuentes que el sitio:

npm run build
npx astro preview &
google-chrome --headless=new --window-size=1200,630 \
  --blink-settings=preferredColorScheme=1 --virtual-time-budget=5000 \
  --screenshot=public/og.png http://127.0.0.1:4321/og/
npm run build

La ruta /og/ va con noindex y no está enlazada desde ningún sitio.

Desplegar

Es HTML estático: sirve dist/ desde donde quieras. Cloudflare Pages, Netlify o Vercel funcionan sin configuración (comando npm run build, directorio dist). Conviene servir .woff2, .svg y .webp con cache larga e inmutable.

No hay analítica, ni cookies, ni peticiones a terceros. Si algún día se quiere medir algo, PostHog ya se usa en GenTotalAI y encajaría aquí sin romper esa promesa, pero entonces habría que quitar la frase del pie.