"Turning walls into stories." > A high-performance, visually immersive digital portfolio for Mammoth Murals, Birmingham’s premier agency for hand-painted signs and large-scale murals.
View the Site: mammothmurals-agency.netlify.app
This project is a masterclass in modern frontend architecture. It bridges the gap between physical craftsmanship and digital precision, using React and Tailwind CSS to create a boutique agency feel.
- ⚡ High-Performance Transitions: Seamless navigation via React Router optimized for zero-latency feel.
- 🖼️ Curated Portfolio: Dynamic galleries categorized by Murals, Signs, and Ghost Signs.
- 🏗️ Component-Driven Architecture: Built with Atomic Design principles for maximum reusability.
- ✨ Immersive UI: Bold, oversized typography and high-definition media integration.
- ⭐ Social Proof Engine: Custom-built Google Review components with Lucide-icon star ratings.
- 🎨 Artisan Design System: A custom palette featuring "Vintage Cream" and "Deep Charcoal" to mirror physical paint textures.
| Layer | Technology | Purpose |
|---|---|---|
| Frontend | React.js | Component-based UI logic. |
| Styling | Tailwind CSS | Utility-first, responsive design system. |
| Icons | Lucide React | Lightweight, accessible vector iconography. |
| Scrolling | Locomotive Scroll | Implementation of luxury, smooth-scroll physics. |
| Routing | React Router | Client-side page handling and deep-linking. |
🎨 Design Tokens The site uses a custom configuration to match the Mammoth Murals brand:
Background: #FFF6E5 (Vintage Cream)
Typography: #120011 (Ink Black)
Action: High-contrast CTAs for discovery calls.
🏆 Credits & Recognition Agency: Mammoth Murals
Design Inspiration: Award-winning boutique agency layouts.
mammoth-murals/
├─ src/
│ ├─ components/
│ │ ├─ Navbar.jsx # Sticky glassmorphism navigation
│ │ ├─ Herosection.jsx # High-impact typography & video hero
│ │ ├─ CraftedSection.jsx # Grid-based project showcases
│ │ ├─ ProcessSection.jsx # Step-by-step agency workflow
│ │ ├─ GoogleReview.jsx # Dynamic review & rating component
│ │ └─ Services.jsx # Service categorization logic
│ ├─ App.jsx # Routing and Locomotive Scroll init
│ ├─ index.jsx # App entry point
│ └─ styles/
│ └─ tailwind.css # Global styles & custom layer directives
└─ package.json # Dependencies & scripts
encies & scripts