ES

xarop.com

Tot · 2026 · visitar →

Design FrontEnd Portfolio

#a11y #css #design #Git #github-pages #html #javascript #meta #Node.js #xarop #xarop.com

El proyecto

web.xarop.com es un sitio web personal (blog + portafolio + CV) construido desde cero en 2026. Funciona sin base de datos, sin runtime de servidor y sin JavaScript obligatorio en el cliente. La fuente de verdad es Markdown en el repositorio; un script de Node genera HTML estático.

Migración completa del archivo WordPress 2007–2024: unos 90 artículos y 70 proyectos, categorías, etiquetas e imágenes destacadas conservadas.

Características

  • Siete sabores: fresa, arándano, cereza, menta, limón, naranja, regaliz — paletas intercambiables via data-flavor. Cambio instantáneo, solo CSS.
  • Modo oscuro: automático por prefers-color-scheme, con toggle manual persistente en localStorage.
  • Selector de idioma: CA / ES / EN / SV / IT vía Google Translate, con protección de marca y persistencia por URL (?lang=es).
  • Asap auto-alojada: tipografía de títulos sin ninguna llamada externa. Archivos WOFF2 propios, @font-face en tokens.css.
  • Sin JS obligatorio: el sitio web funciona al 100% sin ejecutar JavaScript.
  • Publicación vía Git: escribir es touch post.md && git push.
  • GitHub Pages: hosting gratuito, deploy automático vía GitHub Actions.
  • Accesible: WCAG 2.1 AA, semántica HTML pura, focus rings visibles, prefers-reduced-motion.
  • Categorías y etiquetas: distinción visual (badge vs. texto plano), páginas de índice para cada una con aside navegable.
  • Imágenes: 60+ imágenes migradas desde WordPress, convertidas a WebP auto-alojado. Screenshots automáticos vía Puppeteer para nuevos proyectos.

Stack

Node.js (build) · Markdown · CSS custom properties · Asap (OFL, auto-alojada) · GitHub Pages

Código en GitHub