Webkit do Portfólio
Referência do design system — tokens, ícones e componentes usados por shinigamy19.tech
97 ícones · 69 tags de projeto · 5 grupos de habilidades — tudo renderizado a partir de fontes de dados ao vivo, nunca uma lista duplicada.
Tokens de cor
Gradiente da marca
Barra de progresso de scroll e sublinhado do TitleSection — from-blue-500 via-purple-500 to-cyan-400
Roxo do badge de habilidade
Pills de habilidade em Habilidades.astro — #582f82 (mesma cor no claro e no escuro)
Radial do hero (claro)
Fundo da página em Layout.astro, forçado no claro — rgba(120,119,198,0.3) no branco
Painel de exemplo claro
Radial do hero (escuro)
Fundo da página em Layout.astro, forçado no escuro — rgba(70,130,180,0.3) no gray-950
Painel de exemplo escuro
Cores das categorias de experiência
Mapa de tokens copiado de ExperienciaItem.astro categoryColors — claro (forçado) e escuro (forçado) lado a lado
Claro
Escuro
Gradientes de educação
Importado de src/data/education.ts — cada card usa bg-gradient-to-br + a classe de gradiente abaixo
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 Tipografia
Pesos do Roboto usados no site — 400 (corpo), 500 (medium), 700 (bold) — importados via @fontsource/roboto no Layout.astro
h2 — estilo TitleSection · text-3xl font-semibold · peso 500
Exemplo de título de seção
Corpo · peso 400
O texto do corpo usa Roboto 400 no tamanho base com entrelinha relaxada. Este é o estilo de parágrafo padrão nas seções do portfólio — descrições, texto sobre mim e conteúdo de cards.
Medium · peso 500
Peso medium para rótulos de navegação, datas e texto inline enfatizado.
Texto pequeno / de tag · peso 500–700 · text-xs
Ícones
Auto-descobertos com import.meta.glob("../components/icons/*.astro") — 97 componentes, ordenados em ordem alfabética. As notas "iconMap" mostram quais chaves de tech-tag resolvem para o componente em src/data/iconMap.ts.
Ícones de tech-tags
Cada chave de iconMap com seu badge real de projectTags (classe + ícone), o mesmo padrão que Proyectos.astro usa
Fundos e efeitos
Gradiente radial do hero
Reproduzido do Layout.astro — o fundo de página completo atrás de cada seção
Amostra do fundo do site (segue o tema)
Sublinhado do TitleSection
Barra com gradiente da marca sob cada título de seção — anima até 80px ao revelar
Painel com gradiente da seção de habilidades
Painel de conquistas de Habilidades.astro — lavagem roxa/azul no claro, base slate no escuro
Amostra do painel de conquistas
Gradiente cônico do badge
Anel cônico giratório do Badge.astro — #51E4B8 → #21554E → #51E4B8
Estado ativo da aba de categoria
Abas de filtro de projetos de Proyectos.astro — a ativa usa blue-600
Barra de progresso de scroll
Barra superior fixa no Layout.astro — azul → roxo → cyan, 3px de altura
Pill de nav com backdrop-blur
Nav de desktop do Header.astro — white/70 ou gray-900/60 com backdrop-blur-md
Componentes
Imports ao vivo de src/components/ui/ sempre que possível
Badge.astro
Import ao vivo — anel conic-gradient + conteúdo do slot
TitleSection.astro with icon slot
Import ao vivo — envolvido em .revealed para que o sublinhado renderize
Seção de exemplo
Category tab (static copy)
Cópia de markup estática — as abas de Proyectos.astro não têm componente independente; classes inline
Project tag pill
A partir dos dados de projectTags — primeira entrada, mesmo padrão de Proyectos.astro
Next.js