ID: 37 // Web // Development

METEGRITY

ASTROCSSJAVASCRIPTSVGSSGINDUSTRIAL

MY ROLE

Frontend DevAstro SSGSVG Animation

IMPACT

1,350+ Facilities

$1T+ Managed assets

0 JS On static pages

MISSION

Metegrity is the corporate website of a global leader in industrial asset integrity management software, with a presence in over 1,350 facilities across five continents and managed assets exceeding one trillion dollars. The platform protects industrial plants in the chemical, petrochemical, oil & gas, power generation, and pulp & paper sectors. The frontend was built with Astro v6 as the SSG framework, vanilla CSS3 with native variables and Grid/Flexbox layouts, pure JavaScript for IntersectionObserver-driven interactions, and advanced SVG animations with CSS keyframes for industrial diagrams and visualizations. The architecture deliberately avoids Tailwind CSS and component frameworks like React or Vue, prioritizing maximum performance and total code control.

CATEGORY

Development — Web

SOURCE github ↗

DIAGNOSIS

SOLUTION

Metegrity was built with Astro v6 to generate static HTML with zero client-side JavaScript on informational pages. Styles were implemented in native CSS3 using centralized variables in global.css, with layouts built exclusively with Grid and Flexbox. Scroll interactions are handled with IntersectionObserver in vanilla JavaScript, while industrial diagrams are animated through CSS keyframe sequences applied to SVG elements. The page architecture covers products, services, industries, insights (blogs, ebooks, case studies), legal sections, and a demo booking flow. Each Astro component uses scoped styles that coexist with global variables, ensuring visual consistency without specificity conflicts.

WORKFLOW

01 · PLANNING