El problema
Cada portfolio que construía empezaba desde cero. Sin sistema, sin consistencia, sin documentación. Los cambios de color o tipografía se convertían en una cadena interminable de buscar y reemplazar.
La solución
Un sistema de diseño propio que documenta cada decisión visual del portfolio: paleta de colores, tipografía, espaciado, componentes reutilizables y sus variantes.
Proceso
- Auditoría visual — Revisé referentes de portfolios minimalistas japoneses y europeos para definir la dirección estética
- Design tokens — Definí la escala de colores, tipografía (Geist + JetBrains Mono) y espaciado como variables CSS
- Componentes — Construí cada componente directamente en código, usando Astro y Tailwind CSS v4
- Documentación — Cada decisión tiene un porqué documentado
Decisiones clave
- Minimalismo japonés (空白): Mucho espacio negativo, pocos elementos, tipografía limpia
- Verde esmeralda como acento único: Un solo color de acento para máximo impacto con mínimo ruido
- Mono para headings: JetBrains Mono en los titulares refuerza el perfil técnico sin perder elegancia
- UPPERCASE con tracking: Los titulares en mayúsculas con espaciado generan presencia editorial
Stack
- Diseño: Pencil.dev, Figma
- Desarrollo: Astro 5, Tailwind CSS v4, TypeScript
- IA: Claude Code para prototipado rápido
Resultado
Un portfolio coherente y mantenible donde cualquier cambio de estilo se propaga automáticamente. El meta-proyecto que demuestra que practico lo que predico.