De Svelte a Nuxt: Reconstruyendo mi portfolio en 2025
Estamos en 2025 y acabo de publicar una versión completamente nueva de mi web personal. He migrado de un stack basado en Svelte y Sapper a Nuxt, Tailwind CSS y un monorepo con Turborepo. No ha sido un cambio estético, sino una reescritura completa, fruto de cinco años de evolución en el frontend y de las ganas de usar en casa las mismas herramientas que en el trabajo.
La decisión de 2020: ¿Por qué Svelte?
En 2020, cuando construí la primera versión de esta web, el ecosistema de Vue estaba en plena transición. Vue 3 estaba en pruebas, y se lanzó justo cuando yo ya había acabado mi página web. Los primeros dos años de Vue 3 fueron un dolor y Nuxt 3 no fue estable hasta noviembre de 2022. El camino de migración desde Vue 2 era incierto y, francamente, el futuro parecía algo inestable.
En aquel momento, Svelte y Sapper, su framework de aplicaciones, eran una alternativa muy atractiva: rápida, sencilla y estable. Fue la decisión acertada para su momento.
El punto de inflexión: Ecosistema vs. DIY
Cinco años después, la situación ha cambiado. Svelte sigue siendo un gran framework, pero el ecosistema de Nuxt ha crecido hasta cubrir casi todo lo que necesita una web como esta.
Con mi antigua web en Sapper, tuve que construir desde cero muchas funcionalidades: metaetiquetas para SEO, gestión de contenido para el blog y optimización de imágenes. Aprendí mucho, pero mantener ese código a medida se convirtió en un engorro. Además, migrar de Sapper a SvelteKit era un proyecto grande para el que, simplemente, no tenía tiempo.
Nuxt, en cambio, tiene módulos que resuelven todo eso sin configuración:
- @nuxt/content para gestionar el contenido desde archivos.
- @nuxtjs/seo para el SEO y los metadatos, con valores por defecto que sirven sin tocar nada.
- @nuxt/image para optimizar las imágenes.
- @nuxt/icon para usar cualquier colección de iconos sin cargarla entera.
Con eso resuelto, puedo centrarme en escribir.
Alineación con mi flujo de trabajo diario
En el frontend de mi trabajo usamos Vue 3 con la Composition API, TypeScript y Tailwind. Tiene sentido que mi web personal use las mismas tecnologías que uso a diario. Trabajar con Nuxt me resulta natural y sencillo, una vez entiendes su filosofía.
El nuevo stack de un vistazo
Nuxt es el núcleo de la aplicación. Tailwind CSS se encarga de los estilos y daisyUI añade los componentes y los temas claro y oscuro. Turborepo gestiona el monorepo, que reúne la app principal, las configuraciones compartidas y las herramientas internas en un único lugar.
De Bulma a Tailwind CSS & daisyUI
En la versión anterior de mi web usaba Bulma, que es una librería CSS estupenda. Sin embargo, mi día a día gira en torno a Tailwind CSS, y pasar del template a un fichero CSS aparte me parece el doble de trabajo, porque rara vez reutilizas las clases entre componentes .vue o .svelte.
Como uso Tailwind todos los días, he empezado a "pensar" en Tailwind a la hora de maquetar. El live reload de Vite y el enfoque utility-first son parte de mi forma de trabajar y, una vez que piensas así, es muy difícil volver atrás. Para esta versión lo he combinado con daisyUI. Me permite usar componentes ya listos cuando no me quiero complicar, y prescindir de ellos para crear algo totalmente a medida sin perder ninguna de las ventajas de Tailwind. Además, trae un sistema de temas pensado para Tailwind con el que puedes tener tantos temas como quieras.
El papel de la IA en el desarrollo
Esta reconstrucción también ha sido una oportunidad para probar la última generación de asistentes de código con IA. He probado (demasiadas) herramientas, como Gemini CLI, Aider y GitHub Copilot. Algunos días me he sentido con superpoderes y otros, como si tuviera la gripe. Si cumplo mi objetivo de escribir más, pronto te contaré más sobre cada una.
¿Y ahora qué?
Quiero escribir más, compartir algunas ideas que llevo mucho tiempo pensando y quizás empezar a contribuir en algún proyecto open source.
Gracias por leer. Nos vemos.