EAMCO Website

1. What is it?

EAMCO's corporate website — the public brand and marketing site for Eastern Asphalt and Mixed Concrete Company, Bahrain's construction firm operating since 1976. It's a multi-page site that presents the company's three core divisions (Asphalt, Readymix, Precast) alongside its supporting divisions, a filterable gallery of key projects (Al Fateh Highway, Bahrain Financial Harbour, Mina Salman Interchange, and others), leadership and team profiles, separate CEO and Chairman messages, a media center with news, careers, and contact. It's bilingual (English/Arabic), opens with an animated preloader, runs a rotating cinematic hero, and carries the corporate blue identity consistently across every section.

2. How I built it

Built on Next.js with a component-driven architecture, leaning on server rendering to get the SEO right — full OpenGraph and Twitter card metadata, canonical URLs, and clean structured meta so the divisions, projects, and news pages all index properly. The page is assembled from reusable section components: the hero carousel, the division cards, the project filter (Asphalt / Readymix / Precast / All), the client and testimonial strips, and news cards backed by dynamic routes for individual divisions and articles. The About page is tab-driven through query params (overview, team, CEO, chairman) rather than separate pages. WebM video backgrounds drive the hero and section banners, and the whole thing is responsive down to mobile with the standard PWA-style touches — installable web-app meta, theme color, telephone format handling.

3. The challenges

The hard part was the content, and the video backgrounds most of all. The real difficulty was sourcing footage that actually looks like EAMCO's own work — asphalt paving, concrete pours, precast yards — instead of generic stock that would undercut the credibility of a 50-year-old contractor, while keeping each clip small enough to autoplay without destroying load time. Construction footage is the worst case for compression: dark, dusty, high-motion scenes band and artifact badly, so every WebM was a balancing act between file size and not looking degraded. On top of that came the usual mobile autoplay constraints (muted + playsinline, with sensible fallbacks), and the broader content problem of getting consistent, usable, high-quality copy and imagery across every division and project — which, for a working construction company, is rarely sitting ready in a folder.