The workshop, not the showroom.

Development & architecture

• 01 Static-first: Astro pre-renders 60+ pages with no client framework, so the site ships as flat HTML and hydrates only the motion layer.
• 02 Single source of truth: a flat TypeScript content model auto-wires the work stream, case-study pages, sitemap and counts from one file.
• 03 Build-time extraction: each case study pulls its standfirst, summary and outline out of static brand-brief HTML at build time.
• 04 Motion engine: GSAP and ScrollTrigger over Lenis smooth scroll, an interactive world-map footprint, scroll-scrubbed steppers and a custom cursor, all gated behind prefers-reduced-motion.
• 05 Theme and SEO: OKLCH design tokens with a no-flash day/night toggle, hand-built sitemap and robots, and full Open Graph and Twitter cards.

Development & architecture

• 01 Single-domain, division-routed: a masterbrand front door opens into six division areas (Analytics, Creatives, Commerce, Technology, Engineering, Sentinel), each carrying its own accent and emblem.
• 02 Endorsed brand system: one identity scales across the divisions without fragmenting the brand or the codebase.
• 03 Expandable division cards reveal each practice’s framework, services and typical outputs through accordion detail.
• 04 An interactive Zenith& Auditor is the primary call to action, a tool rather than a contact form.
• 05 Technical art direction: a wireframe-globe hero, scramble text and a geometric grotesque on a dark UI.

Development & architecture

• 01 Matrix content model: eleven chronological eras crossed with eight thematic lenses, so every entry is indexed against both a period and a theme.
• 02 Two ways in: descend the timeline era by era, or pull a single lens across the whole record and watch one thread run from prehistory to now.
• 03 Composable entries: because each item sits at an era-by-lens intersection, one entry surfaces on many paths without duplication.
• 04 Cinematic, editorial UI: dusk imagery, a high-contrast serif and the interlocking H monogram set the tone over the data.
• 05 Curation-first: fewer entries, deliberately chosen and framed as lessons rather than encyclopedia stubs.

Development & architecture

• 01 One masterbrand, three divisions: Transport, Convention, and Events & Caterers each get their own space under a single Swagat identity and the “promise of welcome” line.
• 02 Static-first Astro build, the same engine as this portfolio, pre-rendered and fast, with Tailwind tokens carrying the brand.
• 03 Narrative-led structure: a founding story from 1984, core values, and a Dispatches journal sit alongside the service pages rather than behind them.
• 04 Conversion built in: a catering menu, contact details, and a WhatsApp chat widget for direct enquiries.

Development & architecture

• 01 Platform, not practice: five engineering disciplines, from structural and post-tensioning to modular PPVC, precast detailing and architectural design, framed under one manufacturing logic and a unified BIM workflow.
• 02 A technology incubator section fronts the proprietary work: a robotic modular factory, a 3D concrete printer, and autonomous marine vehicles.
• 03 Decision tools built in: interactive ROI and carbon-savings calculators that weigh offsite manufacturing against traditional construction.
• 04 Hand-built static site: modular vanilla JS (core, components, a projects data file) with cache-busted assets, on Tailwind and Vercel.

Development & architecture

• 01 Service-led structure: telecom network optimisation, IT and software builds, and in-house shipped products each get their own space, organised for the three markets it serves (Riyadh, Dubai, Hyderabad).
• 02 Proof through portfolio: named operator work (STC, Etisalat, VIVA) and shipped education and logistics platforms carry the credibility instead of claims.
• 03 Positioned on outcomes: the copy leads with what the work does for operations, not the technology stack behind it.
• 04 Next.js and React on Tailwind, statically served on Vercel.

Development & architecture

• 01 Product-first architecture: the proprietary coatings (Metacoat, FOILMET, ZONEMET) each get a technical space, cross-organised by application and capability.
• 02 Built for specifiers: barrier performance, material down-gauging and recycle-ready mono-material PE lead, with ISCC PLUS sustainability woven through rather than bolted on.
• 03 Authority beyond the datasheet: a news feed and a technical papers section give the manufacturer an editorial voice.
• 04 Next.js and React on Tailwind, statically served on Vercel.

Development & architecture

• 01 Endorsed brand system: a masterbrand plus eight division identities (construction materials, food and beverage, fit-out and interior, holiday homes, technology, multimedia, transport and logistics, and a fashion house), each with its own logo under one standard.
• 02 Grouped by function: the divisions gathered into families (built environment, supply and movement, living and hospitality, enterprise and enablement) so the breadth reads as coherent rather than scattered.
• 03 A restrained monochrome system carries the trust positioning, built on three principles: rigour, care, foresight.
• 04 Next.js and React on Tailwind, live on its own custom domain.

Development & architecture

• 01 Catalogue by house: over 200 designs across fourteen labels (Charizma, Qalamkar, Zellbury and more), each collection kept under its own house rather than flattened into one grid.
• 02 Browse by fabric: lawn, chiffon, khaddar and embroidered lines, so shoppers navigate the way the market actually thinks.
• 03 An “In Focus” edit surfaces standout collections above the full index of thumbnail galleries.
• 04 Static-first Astro build, the same engine as this portfolio, on Tailwind: image-heavy but fast.

Development & architecture

• 01 Panel-off ground: the surface is the near-black of a display before power, so content emits rather than simply appears, and the homepage headline boots up as a dot matrix.
• 02 Identity made structural: the three logo colours are treated as the red, green and blue subpixels that form a pixel, so every LED motif renders in RGB columns, and the print Pantones were re-tuned into emitting values legible on a dark ground.
• 03 Market-first navigation: the primary axis is the situation a buyer arrives with, from DOOH and stadiums to media façades and transportation, with products, projects and proof hanging off it.
• 04 Content-collection seam: every specification, project and post lives in a typed collection behind one accessor, so no component hardcodes a spec and the whole site can be repointed at a CMS without touching a component.
• 05 Invent nothing: no unsourced specification, certification or client name ships, and anything unverified becomes a logged placeholder rather than a plausible guess.
• 06 Instruments over claims: a media-façade visualiser with transparency and pixel-pitch sliders, a viewing-distance calculator and a dual-path quote configurator let a specifier test the argument.