Video-led hero
A full-bleed film opens the site and sets the tone before a single line of copy.
← All work
(Case study) — 01 / 10
Azersilah
A defence-technology brand brought to the web — a full front-end build of the marketing site, from an immersive video-led hero to product catalogues and detailed product pages.
(Scope)
Services
What I did
- Built the marketing site front-end from the design files
- Turned a technical product range into reusable catalogue and detail components
- Video hero, scroll motion and media loading tuned for mobile
- Cross-browser and cross-device QA before launch
01Problem
Azersilah needed a marketing site that signalled engineering credibility and scale, while presenting a broad, technical product range — small arms, unmanned systems, protection and sighting systems — in a way that stays clear and fast across every device.
02Solution
I built the front-end as a fast, responsive marketing site: an immersive video-led hero, structured product catalogues with category filtering, and detailed product pages with key-parameter tables.
Layouts are fluid from desktop to mobile, with consistent typography, restrained motion, and a defence-grade visual language that keeps dense information readable.
03Challenge
Presenting a dense, technical catalogue so it stays scannable and performant — without losing the premium, editorial feel of the brand.
Keeping the experience smooth across breakpoints while handling rich media: a video hero, large product imagery, and detail pages with long parameter tables.
(Key features)
Filtered catalogue
Small arms, unmanned systems, protection and optics — grouped and filterable by category.
Product pages
Each product gets imagery, a short story and a key-parameter table that stays readable on a phone.
Multilingual
Language-aware routes so every page exists in each language without duplicated templates.
(Full pages) — scroll to read them
(Mobile) — layouts on small screens
(Stack) — and why
- React
Catalogue cards, filters and parameter tables are the same components on every page.
- Vite
Fast local builds and small, split production bundles.
- SCSS
Tokens for type, colour and spacing; one set of breakpoints for the whole site.
(Summary)
Azersilah’s site pairs a bold editorial brand with a practical, front-end–driven product experience — built to scale across the company’s expanding catalogue and growing global audience.
