Ironforge

About This Template

Ironforge is a dark industrial template for construction firms, civil engineers, and infrastructure contractors. Six pages cover the homepage, a project catalog, individual project case studies with client/location/year/value spec panels, services, an about page with the team, and a structured project-inquiry form. The centerpiece is a pinned horizontal showcase: the page locks and six project panels travel sideways while an SVG blueprint wire draws itself across the track via strokeDashoffset over a dashed guide line, a live 01/06 counter ticks in the corner, and each panel's copy and image animate independently through ScrollTrigger containerAnimation. The hero stacks IRONFORGE vertically letter by letter on a staggered rise, next to a crane photo that unveils with a clip-path wipe while the image counter-scales. Ships with three color skins, animated stat counters, a velocity-reactive client marquee, and 25 photographs.

Signature

The featured-projects section pins the viewport and sends six full-screen panels travelling sideways. Underneath them an SVG blueprint wire draws itself across the entire track over a dashed guide line — strokeDashoffset is mapped directly to scroll progress — while a 01/06 counter updates in the corner and a pulsing node dot rides each panel. Every panel's copy and image animate on their own ScrollTrigger using containerAnimation, so the reel reads like a site walkthrough rather than a carousel.

Features

• 6 pages — Home, Projects, Project detail, Services, About, Contact
• Pinned horizontal showcase — 6 project panels travel sideways with anticipatePin and invalidateOnRefresh
• Self-drawing SVG blueprint wire — strokeDashoffset traces the full track over a dashed guide line that glows when the reel completes
• Live 01/06 panel counter plus per-panel copy reveal and image parallax via ScrollTrigger containerAnimation
• Vertical letter-stack hero — IRONFORGE rises letter by letter on a 0.08s stagger beside a crane photo unveiled by a clip-path inset wipe with counter-scale
• Face-off hero exit — the photo clips to inset(40%) and dissolves on a scrub 1.5 timeline as you scroll away
• Animated stat counters — 47 years, 312 projects, 18 countries, $14.2B, with a reduced-motion static fallback
• 3 color skins via data-skin — Steel Night (default), Blueprint navy, Concrete Day light
• Velocity-reactive client marquee — 12 contractor names, timeScale accelerates up to 4x with scroll speed
• 4 content collections — 6 Markdown projects plus services, team and testimonials as typed JSON loaders
• Project detail pages with a 70vh cover, an overlapping spec card (client, location, year, value) and Markdown body
• Bento services grid with blur-to-sharp staggered reveals, plus 6 testimonials in masonry CSS columns that stagger in on scroll
• Auto-hiding nav — slides away on scroll down, returns on scroll up, glass blur past 50px
• Industrial atmosphere layer — SVG fractalNoise grain, blueprint grid, edge fades and outlined oversized type
• 25 photographs included — projects, services, team portraits and concrete/steel textures — plus @astrojs/sitemap, Open Graph, Twitter cards and canonical URLs
• Lenis smooth scroll + Astro View Transitions with full ScrollTrigger teardown on navigation

Deployment