Walsh Butler Ltd
A modern, high-performance rebuild for Walsh Butler Ltd using Astro and React, designed to reflect their professionalism, technical capability, and industry credibility.
Visit Live Project
Project Overview
Walsh Butler Ltd needed a website that properly reflected the scale and professionalism of their work.
For a company operating across commercial, domestic, and industrial sectors, the website had to:
- Communicate credibility instantly
- Clearly structure services
- Highlight Health & Safety compliance
- Showcase past projects professionally
- Load fast and work perfectly on mobile
The goal wasn’t just to “have a website” — it needed to feel established, reliable, and technically solid.
The Solution
I built the site from the ground up using a modern static-first architecture powered by Astro and React.
The focus was on:
- Performance
- Clean structure
- Subtle, premium animations
- Clear service categorisation
- Strong visual hierarchy
- Local SEO optimisation
Everything was designed to feel intentional — smooth, fast, and professional.
Web Design
The design approach was clean, structured, and confident.
Key design decisions:
- Strong hero section with immediate clarity
- Clear breakdown of Commercial, Domestic, and Industrial services
- Structured services grid with staggered presentation
- Professional typography and spacing
- Scroll-triggered entrance animations for subtle polish
- Dedicated Health & Safety visibility
- Clear, accessible contact structure
The navigation adapts on scroll — starting transparent and transitioning to a clean, white background with shadow. This adds a premium feel without being distracting.
The overall aesthetic is modern but restrained — appropriate for an established contractor brand.
Web Development
The technical foundation was built for speed and long-term maintainability.
Tech Stack:
- Astro 5 (static-first architecture)
- React 19 for interactive components
- Tailwind CSS 4 for scalable styling
- Framer Motion for scroll-triggered animations
- React Leaflet for interactive mapping
- Lucide React for consistent iconography
The architecture is modular and component-based:
- Reusable UI components
- Animation wrappers (
FadeIn,StaggerContainer,StaggerItem) - Structured layouts
- Clear page separation
The gallery includes a masonry layout with a custom lightbox, keyboard navigation, and smooth transitions — allowing high-resolution project imagery to feel premium.
The contact flow includes:
- Structured enquiry section
- Interactive map highlighting their location
- Clear contact details and business hours
- Optimised layout for mobile users
Performance & SEO
Just like the other projects, performance and SEO were foundational — not an afterthought.
- Static site generation for extremely fast load times
- Optimised images
- Proper semantic HTML
- Structured sitemap
- SEO-friendly metadata
- Clean URL structure
The site is lightweight, scalable, and ready for future expansion.
The Result
The final website:
- Feels established and professional
- Loads extremely fast
- Clearly communicates services
- Highlights compliance and credibility
- Showcases past work properly
- Works flawlessly across devices
It positions Walsh Butler Ltd as a serious, reliable contractor with a digital presence that matches the quality of their real-world work.
This project allowed me to combine modern static architecture (Astro) with interactive React components to deliver a fast, premium, future-proof website built for performance and long-term growth.