Inicio /

Portfolio Web

Esta web cumple dos funciones a la vez: es mi portfolio público y mi biblioteca personal de código. La parte pública muestra proyectos, casos de éxito y artículos técnicos. La parte privada — la biblioteca — es un repositorio vivo de snippets, estructuras y patrones reutilizables al que solo tengo acceso yo.

Todo el sitio es HTML, CSS y JavaScript vanilla, sin frameworks ni generadores estáticos. Está desplegado en Cloudflare Pages con autenticación a nivel de edge para las rutas privadas.

El objetivo del diseño era que la web reflejase dos partes de mí al mismo tiempo: la parte técnica y la parte creativa. Un programador que también diseña. Esa dualidad es lo que quería que se leyese antes de leer una sola línea de contenido.

Investigué cómo estaban construidos los portfolios que más me gustaban, qué información priorizaban y qué sensación transmitían. De ahí salieron las decisiones de tipografía, paleta y estructura de componentes — todo con una intención detrás, nada por defecto.

Identidad visual Técnico y creativo a la vez

La estética oscura refleja el entorno natural del programador — terminales, editores — pero el cuidado tipográfico y la composición muestran que hay una sensibilidad de diseño detrás. No es un template.

Tipografía Tres typefaces, tres roles

Fraunces (serif) para títulos con peso visual, IBM Plex Sans para cuerpo de texto, IBM Plex Mono para código, labels y elementos técnicos. Cada uno tiene un rol que no se solapa.

Arquitectura CSS Sistema de componentes

Variables globales, reset, y componentes separados por función — tarjetas de proyecto, layouts de entrada, elementos de la biblioteca. Añadir una página nueva no requiere escribir CSS desde cero.

Estructura Investigación de referentes

Antes de diseñar, analicé cómo los mejores portfolios técnicos priorizan la información — qué aparece primero, cómo se presenta el trabajo sin ruido visual innecesario.

¿Por qué? La biblioteca detrás de autenticación
La biblioteca no es un blog público — es una herramienta personal. Guarda snippets, estructuras y patrones que uso habitualmente, organizados para que pueda encontrarlos cuando los necesito. No tiene sentido exponer ese contenido públicamente, y protegerlo con un backend propio añadiría complejidad innecesaria a un sitio estático.
¿Por qué? Cloudflare Access en lugar de backend
Al ser una web estática, crear un backend solo para gestionar autenticación suponía coste de VPS, mantenimiento de servidor y complejidad que no aportaba nada al proyecto. Cloudflare Access resuelve la autenticación a nivel de edge — antes de que el contenido se sirva — sin ningún servidor propio. El resultado es el mismo aislamiento con cero infraestructura que mantener.
¿Por qué? Sin framework ni generador estático
Un portfolio personal no necesita la complejidad de React, Next.js o un SSG. HTML, CSS y JavaScript vanilla dan control total sobre el output, sin capas de abstracción que gestionar ni dependencias que actualizar. El coste de mantenimiento a largo plazo es prácticamente cero.
Edge Cloudflare Pages Hosting y CDN. Deploy automático desde repositorio.
Auth Cloudflare Access Protege las rutas privadas antes de servir el contenido. Sin backend.
Público Portfolio Proyectos, casos de éxito y artículos técnicos. Acceso libre.
Privado Biblioteca Biblioteca personal de código — snippets, patrones y estructuras reutilizables.