Ridgeline Pro Roofing — High-Performance Editorial Showcase

An editorial brutalist showcase website engineered for a fictional Austin, Texas roofing company. Built with Astro 6, TypeScript, and modern CSS3 for maximum performance, responsiveness, and visual impact.

🌐 Live Demo: roof-site.netlify.app

---

🎥 Visual Preview

Interactive walkthrough demonstrating full-bleed video hero backdrop, frosted navigation, micro-interaction count-ups, and validated inquiry dispatch.

---

🎯 Overview & Motivation

Ridgeline Pro Roofing demonstrates how high-end editorial design principles can transform traditional home-services websites into memorable, performant web applications.

Most commercial roofing sites rely on cookie-cutter templates with generic blue headers and slow client-side JS bundles. This project reimagines the client presentation using an Editorial Brutalist theme:

• Dark/Light Rhythm: Alternating high-contrast sections using an Ink (#080b10), Paper (#f0ece2), and Fire (#d4450c) color palette.
• Zero Runtime Framework Overhead: Built with pure .astro components for instantaneous page loads and 100/100 Lighthouse scores.
• Client Micro-Interactions: Native Vanilla JavaScript for frosted glass scroll blurring, mechanical count-up counters, and interactive form dispatch.

---

✨ Features

• ⚡ Astro 6 Static Engine: Pre-rendered HTML output for optimal SEO and instant load speeds.
• 🎨 Editorial Brutalist Aesthetics: Bold typography, CRT scan lines, diagonal slashes, and sharp structural rules.
• 🌫️ Frosted Glass Navigation: Sticky navbar with scroll-triggered backdrop blur (backdrop-filter: blur(18px)) and responsive mobile menu.
• 🎬 Atmospheric Video Hero: Full-bleed background video (.mp4 / .webm) with poster fallback and text stroke/clip-path headline treatments.
• 🛠️ 6 Specialized Service Cards: Highlighting residential, storm repair, inspection, gutters, commercial flat roofing, and emergency tarping.
• 📊 Interactive Bento Grid & Stats: Real-time counter animation using requestAnimationFrame with exponential easing when scrolled into view.
• 📋 Phase Protocol Timeline: 4-stage workflow with sticky protocol sidebar and expanding reveal borders.
• 💬 Social Proof & Reviews: Verified customer review cards with star ratings and Google Review verification ticker.
• 🗺️ Operational Network Grid: Interactive coverage map showcasing 8 Central Texas service zones.
• 📝 Technical Inquiry Dispatch Form: Client-side validated contact form with seamless submission state transition.

---

🛠 Tech Stack

• Core Framework: Astro 6 (Static SSG Mode)
• Language: TypeScript (Strict Mode) & HTML5
• Styling: Standard CSS3 (Custom Properties, Flexbox, CSS Grid, Clamp Typography, Clip-path, Backdrop Filter)
• Typography Stack:
  • Display: Barlow Condensed (Google Fonts)
  • Monospace Utility: DM Mono (Google Fonts)
  • Numeric Badges: Bebas Neue
  • Body Text: Manrope
• Interactivity: Vanilla JavaScript (Native IntersectionObserver, requestAnimationFrame, window.addEventListener)

---

🏗 Architecture Overview

The site uses a modular component layout where pure .astro components are imported sequentially into index.astro and wrapped in BaseLayout.astro.

src/
├── layouts/
│   └── BaseLayout.astro       # Global HTML shell, font preconnects & metadata
├── pages/
│   └── index.astro            # Main page assembly
├── components/
│   ├── Navbar.astro           # Sticky glassmorphism header & mobile toggle
│   ├── Hero.astro             # Video backdrop, headline treatments & stats
│   ├── Services.astro         # Service cards grid with hover animations
│   ├── WhyChooseUs.astro      # Bento grid & rAF count-up statistics
│   ├── Process.astro          # Protocol timeline & sticky sidebar
│   ├── Testimonials.astro     # Verified client review cards
│   ├── ServiceArea.astro      # 8 Texas operational zones grid
│   ├── CTABanner.astro        # Immediate response action banner
│   ├── Contact.astro          # Validated inquiry form & success toggle
│   └── Footer.astro           # Massive brutalist branding & site links
└── styles/
    ├── global.css             # Design tokens & base elements
    └── animations.css         # Keyframe animations & scroll reveal utilities

📚 Documentation Index

For complete technical documentation, consult the following guides:

• 🏗️ Architecture Documentation — SSG pipeline, zero-JS engine, component hierarchy & Mermaid diagrams.
• ⚙️ Setup & Installation Guide — Node.js prerequisites, environment configuration & local dev setup.
• 🚀 Usage & Deployment Guide — Daily CLI commands, preview builds & static deployment workflows (Vercel, Netlify, GitHub Pages).
• 🛠️ Development & Contribution Guide — Component patterns, styling rules & Conventional Commit standards.
• 🔌 Contact API & Integration Specs — Form validation rules, JSON payload schema & serverless endpoint setup.
• 📋 Architectural Decision Records (ADRs) — Engineering decisions behind Astro SSG and Editorial Brutalist styling.

---

🚀 Quick Start

Prerequisites

• Node.js >=22.12.0
• npm >=10.0.0

Step-by-Step Setup

# 1. Clone the repository
git clone https://github.com/sedmugen/roofers-showcase.git
cd roofers-showcase

# 2. Install dependencies
npm install

# 3. Launch local dev server
npm run dev

Open http://localhost:4321 in your browser.

---

🧞 Usage & CLI Commands

Command	Action
npm run dev	Starts local dev server at http://localhost:4321
npm run build	Bundles static production build to ./dist/
npm run preview	Previews built production site locally
npx astro check	Runs TypeScript type checking across templates

---

🗺 Roadmap

• Initial Astro 6 static build with Editorial Brutalist design system.
• Responsive glassmorphic navigation & mobile menu drawer.
• Client-side count-up stats & scroll reveal animations.
• Multi-column footer & contact form state toggle.
• Integration with serverless API endpoint for live email notifications (see docs/api.md).
• Automated end-to-end testing suite via Playwright.

---

📜 License

This project is open-source and available under the MIT License.

---

Architected and developed by sedmugen.