Sistema de diseño
Catálogo consultable de los tokens y componentes de presentación reutilizables del portfolio.
Los controles mostrados son demostraciones aisladas: no envían datos ni ejecutan operaciones administrativas.
Tokens de color
Pilas tipográficas
Pilas utilizadas realmente por el sitio y los documentos generados. Las fuentes de PDF y correo no se cargan como fuentes web.
Sans-serif del sistema
Texto principal de la interfaz sin descargas obligatorias.
Aa — Portfolio accesible 0123456789
Monoespaciada del sistema
Código, comandos y valores técnicos.
Aa — Portfolio accesible 0123456789
Font Awesome
Fuente reservada exclusivamente para los pictogramas de la interfaz.
Aa — Portfolio accesible 0123456789
Correo electrónico
Alternativa compatible con clientes de correo.
Aa — Portfolio accesible 0123456789
Fuente incrustable utilizada por Dompdf para el currículum.
Aa — Portfolio accesible 0123456789
Tipografía
Heading 1
Heading 2
Heading 3
El texto principal mantiene una jerarquía legible sobre superficies oscuras.
El texto secundario reduce el énfasis sin comprometer el contraste.
Acciones y estados
Solo texto
Texto e icono
Solo icono
Contratos de renderizado
Enlace de navegación
<x-molecules.method-action method="DELETE" ...>
Acción HTTP con CSRF
Variantes en estado hover
Estados del control
Recorrido con teclado
Los botones ya muestran el foco de teclado; usa Tab y Mayús+Tab para probar también el recorrido real.
Campos del formulario
Pasa el cursor o usa Tab para comparar los estados sin cambios de diseño.
Comprueba el valor introducido.
Estados de la selección
Los estados no válido y deshabilitado tienen prioridad sobre hover y foco.
Comprueba el valor introducido.
Tarjetas e insignias
Tarjeta estándar
Contenido informativo estático, sin destino ni acción asociada.
- Tarjeta estándar
- No recibe el foco, no reacciona al cursor y no promete ninguna acción.
- Tarjeta interactiva
- Expone semántica de enlace, indicador direccional, hover, foco visible y respuesta sonora.
Estados de la casilla
El hover y el foco refuerzan el control sin ocultar la selección, los errores ni el estado deshabilitado.
Píldoras y controles compactos
composer test
Enlace de contacto del pie: prueba el hover y el foco con teclado
Navegación
Tab entra en el grupo; Flecha izquierda/derecha, Inicio y Fin mueven el foco; Intro o Espacio activan.
Las pestañas comparten selección, foco visible y respuesta sonora.
Las pestañas comparten selección, foco visible y respuesta sonora.
Las pestañas comparten selección, foco visible y respuesta sonora.
Migas de pan
Una jerarquía compacta con enlaces interactivos y una página actual no accionable.
Paginación
El paginador compartido que utilizan realmente los listados muestra el recuento, la página actual y los controles anterior y siguiente.
Usa Tab para llegar a los enlaces; el estado actual y los controles no disponibles quedan fuera del recorrido del foco.
Tablas adaptables
Las listas se convierten en tarjetas etiquetadas; las matrices conservan filas y columnas dentro de una región de desplazamiento local.
Lista de tarjetas
Por debajo de 768 px cada valor conserva su etiqueta y el contenido largo se ajusta.
| Elemento | Estado | Valor |
|---|---|---|
| Elemento de demostración con nombre largo | Activo | 24,50 € |
Matriz desplazable
Desplázate horizontalmente para ver todas las columnas.
La región tiene nombre, es accesible con teclado y contiene el desplazamiento horizontal.
| Métrica | Actual | Anterior | Límite |
|---|---|---|---|
| Bundle CSS | 84 KB | 88 KB | 100 KB |
Páginas de detalle compartidas
Variantes reales de la plantilla utilizada por proyectos, aficiones y competencias.
Variante con imagen
Variante con icono y nivel
Competencia
Competencia de demostración
80%La variante sin imagen utiliza un signo gráfico manteniendo la misma plantilla.
Relaciones
Proyecto asociado
Trayectoria cronológica
Caso de uso documentado
Abrir Trayectoria
Anatomía, estados adaptables y restricciones de rendimiento de la línea temporal que conecta Proyectos y Competencias cronológicamente.
Anatomía Atomic Design
Estados y adaptación
- Escritorio: una serpentina adaptable de dos a cuatro Proyectos por fila, con giros continuos y ramas por encima o debajo del tronco.
- Móvil y contenido denso: un eje vertical, frutos a la derecha y sin desbordamiento horizontal; un interruptor opcional abre la serpentina girada 90 grados con un Proyecto por fila.
- Sin JavaScript o con movimiento, transparencia o colores forzados, todo el contenido sigue siendo legible y navegable.
Contrato de rendimiento
- Sass y JavaScript son entrypoints exclusivos de la página Trayectoria y no sobrecargan el bundle global.
- Las mediciones SVG se reutilizan entre capas equivalentes y se recalculan solo cuando cambia el layout.
- Un único reloj gestiona revelado e impulsos; los dispositivos pequeños o táctiles usan impulsos cada dos segundos y pintura cercana a 30 fps, pausándose fuera del viewport.
Mensajes
Operación completada
El estado positivo sigue visible sin audio.
Información
Un detalle útil que no interrumpe el flujo.
Atención
La acción requiere revisión antes de continuar.
Error
El problema se comunica mediante texto y color.
Respuesta compacta
Reduce la densidad visual sin ocultar información.
- Primer detalle contextual.
- Segundo detalle contextual.
Respuesta descartable
El espacio de cierre aparece solo junto con su control.
Prioridad y anuncios accesibles
- Contenido estático
- Sin región activa: el lector de pantalla lo encuentra en el orden normal de la página.
- Actualización no urgente
- announce usa status y aria-live polite para comunicar un cambio sin interrumpir.
- Error urgente
- La variante danger anunciada usa alert y aria-live assertive. Los errores de campo permanecen asociados a su control.
Inventario de iconos
178 pares familia–icono detectados estáticamente en el código.
Abrir la galería de iconos
Ningún icono coincide con el filtro.
58 referencias dinámicas por revisar
Inventario de componentes
29 componentes Blade registrados. Las demostraciones anteriores muestran las primitivas visuales; el inventario también incluye composiciones contextuales y plantillas.
Átomos
14-
<x-atoms.brand-logo>1 -
<x-atoms.button>143 -
<x-atoms.copy-button>3 -
<x-atoms.icon-text>2 -
<x-atoms.inputs.checkbox-input>4 -
<x-atoms.inputs.email-input>1 -
<x-atoms.inputs.file-input>3 -
<x-atoms.inputs.number-input>1 -
<x-atoms.inputs.select>4 -
<x-atoms.inputs.text-input>4 -
<x-atoms.inputs.textarea>3 -
<x-atoms.password-visibility-toggle>10 -
<x-atoms.pill>3 -
<x-atoms.responsive-image>3
Moléculas
10-
<x-molecules.audio-controls>2 -
<x-molecules.breadcrumb>3 -
<x-molecules.dropdown>2 -
<x-molecules.feedback-alert>18 -
<x-molecules.footer-socials>1 -
<x-molecules.inputs.password-control>2 -
<x-molecules.pill-item>1 -
<x-molecules.relation-badge>5 -
<x-molecules.tab-item>1 -
<x-molecules.tabs-navigation>3
Organismos
4-
<x-organisms.content-card>3 -
<x-organisms.hero-character>3 -
<x-organisms.pill-list>3 -
<x-organisms.skill-credential-card>2
Plantillas
1-
<x-templates.show-page>5