Typography
Space Grotesk
Inter mantiene la lectura profesional en párrafos, etiquetas y UI.
Paso 1 · FoundationCartoon por fuera.
Cartoon por fuera.
Sólido por dentro.
La base mobile-first para un portfolio que une Web, WordPress, Ecommerce y Full Stack sin perder identidad.
Astro + TypeScript · cero JavaScript en cliente por ahora
01 / Tokens
Una regla clara para cada decisión
Monocromo como base, lima solo para guiar la atención. El gesto cartoon vive en bordes, sombras y pequeños movimientos físicos.
Black
#111111Ink
#1A1A1AGray 900
#333333Gray 700
#5A5A5AGray 300
#D7D7D7Gray 100
#F3F3F3White
#FFFFFFAcid lime
#C8FF00Physical depth
Hard shadow
Sin blur. El volumen viene de bloques sólidos.
02 / Components
Pocas piezas. Mucha consistencia.
Los componentes base ya comparten tamaños táctiles, foco visible, tipografía y movimiento. Todavía no hay React: Astro alcanza para esta capa.
Buttons
Skill badges
AstroTypeScriptWordPressNode.js
Card behavior
Project title
Hover sutil, borde protagonista y sombra que cambia al acento. Memorable sin parecer infantil.
View case study ↗03 / Principles
70% profesional. 30% cartoon.
El mascot comunica, los badges clasifican y las sombras muestran interacción. Ningún gesto visual existe solo para decorar.
01Bold
Jerarquías tipográficas claras.
02Technical
Arquitectura simple y tipada.
03Human
Una identidad reconocible.