Webkit del Portafolio
Referencia del design system — tokens, iconos y componentes que usa shinigamy19.tech
97 iconos · 69 etiquetas de proyecto · 5 grupos de habilidades — todo renderizado desde fuentes de datos en vivo, nunca una lista duplicada.
Tokens de color
Gradiente de marca
Barra de progreso de scroll y subrayado de TitleSection — from-blue-500 via-purple-500 to-cyan-400
Morado de badge de habilidad
Pills de habilidad en Habilidades.astro — #582f82 (mismo color en claro y oscuro)
Radial de hero (claro)
Fondo de página en Layout.astro, forzado a claro — rgba(120,119,198,0.3) sobre blanco
Panel de ejemplo claro
Radial de hero (oscuro)
Fondo de página en Layout.astro, forzado a oscuro — rgba(70,130,180,0.3) sobre gray-950
Panel de ejemplo oscuro
Colores de categorías de experiencia
Mapa de tokens copiado de ExperienciaItem.astro categoryColors — claro (forzado) y oscuro (forzado) lado a lado
Claro
Oscuro
Gradientes de educación
Importado de src/data/education.ts — cada tarjeta usa bg-gradient-to-br + la clase de gradiente de abajo
from-purple-600 via-pink-600 to-rose-600 from-blue-500 via-indigo-500 to-violet-500 from-cyan-500 via-blue-600 to-indigo-700 Tipografía
Pesos de Roboto usados en todo el sitio — 400 (cuerpo), 500 (medium), 700 (bold) — importados vía @fontsource/roboto en Layout.astro
h2 — estilo TitleSection · text-3xl font-semibold · peso 500
Ejemplo de encabezado de sección
Cuerpo · peso 400
El texto del cuerpo usa Roboto 400 en el tamaño base con interlineado relajado. Es el estilo de párrafo por defecto en las secciones del portafolio — descripciones, texto de sobre mí y contenido de tarjetas.
Medium · peso 500
Peso medium para etiquetas de navegación, fechas y texto inline enfatizado.
Texto pequeño / de etiqueta · peso 500–700 · text-xs
Iconos
Auto-descubiertos con import.meta.glob("../components/icons/*.astro") — 97 componentes, ordenados alfabéticamente. Las notas "iconMap" muestran qué claves de tech-tag resuelven al componente en src/data/iconMap.ts.
Iconos de tech-tags
Cada clave de iconMap con su badge real de projectTags (clase + icono), el mismo patrón que usa Proyectos.astro
Fondos y efectos
Gradiente radial de hero
Reproducido desde Layout.astro — el fondo de página completo detrás de cada sección
Muestra del fondo del sitio (sigue el tema)
Subrayado de TitleSection
Barra con gradiente de marca bajo cada título de sección — se anima a 80px al revelarse
Panel con gradiente de sección de habilidades
Panel de logros de Habilidades.astro — lavado púrpura/azul en claro, base slate en oscuro
Muestra del panel de logros
Gradiente cónico de badge
Anillo cónico giratorio de Badge.astro — #51E4B8 → #21554E → #51E4B8
Estado activo de pestaña de categoría
Pestañas de filtro de proyectos de Proyectos.astro — el activo usa blue-600
Barra de progreso de scroll
Barra fija superior en Layout.astro — azul → púrpura → cyan, 3px de alto
Pill de nav con backdrop-blur
Nav de escritorio de Header.astro — white/70 o gray-900/60 con backdrop-blur-md
Componentes
Imports en vivo desde src/components/ui/ cuando es posible
Badge.astro
Import en vivo — anillo conic-gradient + contenido del slot
TitleSection.astro with icon slot
Import en vivo — envuelto en .revealed para que el subrayado se renderice
Sección de ejemplo
Category tab (static copy)
Copia de markup estática — las pestañas de Proyectos.astro no tienen componente independiente; clases en línea
Project tag pill
Desde los datos de projectTags — primera entrada, mismo patrón que Proyectos.astro
Next.js