ID: 37 // Web // Desarrollo

METEGRITY

ASTROCSSJAVASCRIPTSVGSSGINDUSTRIAL

MI ROL

Frontend DevAstro SSGSVG Animation

IMPACTO

1,350+ Instalaciones

$1T+ Activos gestionados

0 JS En páginas estáticas

MISIÓN

Metegrity es el sitio web corporativo de un líder global en software de gestión de integridad de activos industriales, con presencia en más de 1,350 instalaciones en cinco continentes y activos gestionados que superan el billón de dólares. La plataforma protege plantas industriales en los sectores químico, petroquímico, oil & gas, generación energética y papel. El frontend se construyó con Astro v6 como framework SSG, CSS3 vanilla con variables nativas y layouts Grid/Flexbox, JavaScript puro para interacciones con IntersectionObserver, y animaciones SVG avanzadas con keyframes CSS para diagramas y visualizaciones industriales. La arquitectura evita deliberadamente Tailwind CSS y frameworks de componentes como React o Vue, priorizando rendimiento máximo y control total del código.

CATEGORÍA

Desarrollo — Web

FUENTE github ↗

DIAGNÓSTICO

SOLUCIÓN

Metegrity se construyó con Astro v6 para generar HTML estático con cero JavaScript del lado del cliente en las páginas informativas. Los estilos se implementaron en CSS3 nativo usando variables centralizadas en global.css, con layouts construidos exclusivamente con Grid y Flexbox. Las interacciones de scroll se manejan con IntersectionObserver en JavaScript vanilla, mientras que los diagramas industriales se animan mediante secuencias de keyframes CSS aplicadas a elementos SVG. La arquitectura de páginas cubre productos, servicios, industrias, insights (blogs, ebooks, casos de éxito), secciones legales y un flujo de reserva de demos. Cada componente Astro utiliza estilos scoped que conviven con las variables globales, garantizando consistencia visual sin conflictos de especificidad.

PROCESO DE TRABAJO

01 · PLANNING