Salta al contingut
← Tornar al blog
2 min ca

Blue Team Hub: per què vaig treure el vidre esmerilat de la meva pròpia eina

Set eines de SOC gratuïtes i del costat del client, més vigilància en viu del catàleg KEV integrada a la portada. I la raó per la qual vaig redissenyar el lloc en blanc i negre.

  • blue-team
  • soc
  • herramientas
  • astro
  • github-actions
  • cisa-kev
Blue Team Hub: per què vaig treure el vidre esmerilat de la meva pròpia eina

Blue Team Hub és un portal estàtic amb set utilitats que faig servir jo mateix en el dia a dia: desarmador d'IOC, analitzador de capçaleres de correu (SPF/DKIM/DMARC i línia de temps de salts), generador de regles YARA amb linter en temps real, playbooks interactius de resposta a incidents amb consultes SIEM generades al moment, descodificador de payloads (Base64/URL/Hex i desofuscació de PowerShell), un hub d'OSINT, i vigilància del catàleg CISA KEV. Tot corre al navegador: res del que enganxis a cap eina surt de la teva màquina.

KEV Watch ja no viu darrere d'un enllaç

La vigilància de CISA KEV la genera kev-digest, un projecte a part que comprova el catàleg cada tres hores. Al principi KEV Watch era una pàgina d'eina més, amb el seu propi enllaç al menú. La vaig moure a la mateixa portada, com una secció en línia amb la mateixa tipografia i retícula que la resta: no tenia sentit que l'única eina amb dades que canvien soles fos un clic més lluny que les altres.

El redisseny que no esperava fer

El lloc va néixer amb una estètica glassmorphism de vidre esmerilat, gradients i desenfocaments, molt en la línia del que qualsevol generador d'UI produeix per defecte ara mateix. Funcionava, però no deia res específic sobre el que és l'eina. Vaig provar dues direccions abans de quedar-me amb la definitiva: una consola tipus terminal amb tipografia monoespaiada fins i tot als titulars, i una edició tipus informe editorial amb serif i tinta càlida. Les vaig descartar totes dues: la primera se sentia a clixé de hacker, la segona pesava més del compte per a una cosa que s'utilitza de pressa.

El que va quedar és minimalisme gairebé suís: blanc, negre, retícula estricta, i un únic vermell reservat sense excepció per al que és urgent: un CVE crític, una entrada marcada com a ransomware. Res d'ombres, res de desenfocaments. La idea central, que només vaig acabar de confirmar després d'auditar el SEO i el posicionament en IA del meu propi portfolio, és que el pes decoratiu no és gratis: costa renderitzar, i comunica «SaaS de consum polit» en lloc d'«eina construïda per algú que la fa servir de debò». Per a una caixa d'eines de SOC, la precisió tipogràfica ven més credibilitat que el vidre.

Com es desplega

Cada push a la branca principal compila amb Astro i publica a GitHub Pages via Actions, sense intervenció manual. El mateix pipeline etiqueta versions i empaqueta el necessari per desplegar. És exactament el tipus d'automatització que aplico també a altres projectes: si un pas es repeteix, no hauria de dependre que me'n recordi de fer-lo.