Detrás de Zuzki Dev: Cómo construí mi portfolio con Angular 21, NestJS y flujos automatizados en N8N
Cuando un desarrollador decide crear su portfolio, se enfrenta a un dilema: ¿hacer algo rápido con una plantilla o construir una pieza de ingeniería que refleje su forma de trabajar? Yo elegí lo segundo.
Mi portfolio no es solo una tarjeta de presentación; es un ecosistema completo donde Angular, NestJS y N8N colaboran para que yo pueda centrarme en lo que de verdad importa: crear contenido y código.
El Frontend: Reactividad con Angular 21 y el poder del SSR
Para el cliente, he apostado por Angular 21, manteniéndome en la última frontera del framework. Aquí, la gran estrella es el uso de Signals para una reactividad ultra eficiente, pero hay un héroe silencioso: el SSR (Server-Side Rendering).
- ¿Por qué SSR? En un portfolio, el SEO es vital. Sin SSR, los buscadores ven una página en blanco mientras el JavaScript carga. Con SSR, mi servidor entrega el contenido ya renderizado.
- Métricas de impacto: Esto no solo ayuda a que Google me encuentre más rápido, sino que mejora drásticamente las métricas de rendimiento (LCP y FCP), logrando que la web se sienta instantánea desde el primer clic.
- Arquitectura Core-Centric: He organizado el código de forma que las funcionalidades (como el blog o mis proyectos) sean módulos independientes, facilitando el mantenimiento a largo plazo.
El Backend: Un motor sólido con Vertical Slicing
En el lado del servidor, NestJS es el capitán. Para evitar el desorden, implementé Vertical Slicing.
A diferencia de la arquitectura tradicional por capas, donde los archivos están dispersos por todo el proyecto, aquí cada funcionalidad vive en su propia "rebanada". Si necesito ajustar algo en el contacto, todo lo que necesito está en una misma carpeta. Es orden, velocidad y escalabilidad pura.
La magia de la automatización: N8N al rescate
Aquí es donde el proyecto se pone interesante. En lugar de sobrecargar el backend con lógica pesada de terceros, decidí delegar las tareas repetitivas a N8N.
Mi backend actúa como un orquestador que lanza señales vía Webhooks a flujos de trabajo inteligentes:
- Formulario de contacto: Cuando me escribes, NestJS avisa a N8N. Automáticamente, el flujo me envía una notificación para que no se me escape nada y, a la vez, te envía a ti un correo de confirmación.
- Difusión en redes: Al publicar una nueva entrada en este blog, N8N se encarga de darle vida en redes sociales (empezando por Twitter/X). Así, el contenido fluye solo mientras yo sigo programando.
Infraestructura: Rendimiento en la nube
Para que todo funcione como un reloj, utilizó la infraestructura de Cloudflare:
- Cloudflare Pages para el despliegue del frontend con soporte nativo para SSR.
- R2 Storage para gestionar las imágenes y archivos de forma eficiente y económica.
Construir este sitio ha sido un ejercicio de arquitectura y productividad. He logrado una plataforma que no sólo muestra mi trabajo, sino que "trabaja por mí" gracias a las automatizaciones.
Si eres dev, te invito a revisar el código en mi GitHub para ver cómo implementé el N8NService. Y si estás aquí buscando un perfil técnico para tu próximo proyecto, ¡ya sabes que me encanta la eficiencia!
¿Tienes alguna duda sobre mi stack o quieres charlar sobre una posible colaboración? ¡Pásate por mi sección de contacto y pon a prueba mis flujos de N8N!