Case 003 · Cyber security · 2024

NormCyber

The agency had the Figma done and no dev bench. I was the bench.

RoleSole developer, white-label
DesignThing or Two (Figma)
StackWordPress, GSAP, ScrollTrigger
Year2024, live and maintained
Sep 2024launched on schedule
3 buildsfor the agency in six weeks
100%custom theme, webpack-compiled
0page builders

01 / THE BRIEF

Finished designs, a hard deadline, and nowhere to stage.

Thing or Two, a Milton Keynes marketing agency, had a cyber security client, a finished Figma file and nobody to build it. One email later I was their white-label developer.

The constraint that shaped everything: the client's own hosting, no staging environment, FTP the only way in. So I built the whole site in my own staging and shipped it over, section by section. The design was the agency's. Making it real, and making it move, was mine.

The normcyber.com homepage
02 / THE BUILD

A block system with choreography.

A fully custom theme, compiled with webpack. Every section is a block with a job: fifty-fifty splits, card rails, notice banners, super-heroes for the inner pages, each carrying its own colour token. The agency's team composes pages from them to this day.

The motion is GSAP and ScrollTrigger, hand-tuned: content blocks pin to the viewport and stack over each other like a deck of cards, stat counters climb from zero as they enter, and the whole system deliberately steps aside on mobile, where it would just get in the way.

One detail I'm fond of: the cyber-emergency template swaps the brand blue for coral across the entire page with one script. The agency wanted a different mood for one page. It cost one file.

How the real site scrolls: each block pins, the next stacks over it. On the shipped page this slot is a screen capture of the live site (the actual GSAP). This recreation runs on CSS alone, because iamrahat.uk ships no animation libraries.
block: super-hero · token nc-blueCyber resilience that keeps your business in business.pinned by ScrollTrigger, pin: true
block: grid-large-cards · token nc-greySecure. Detect. Respond. Govern.Swiper card rail, per-instance nav
block: fiftyfifty · token nc-inkAnd on mobile? The stack politely steps aside.matchMedia: effect disabled below 768px
Live demo: the stat counters, exactly as they behave on the real build.
0%of UK leaders overestimate their security posture
0builds delivered in six weeks
0script to re-theme an entire template
03 / THE AFTERMATH

Launched on schedule. Then two more.

NormCyber went live in September 2024, on time. The client got monthly maintenance rounds with written reports. The agency got two more builds inside the same six weeks: ALMIS International and Nasstar.

And when the engagement wrapped, the handover was clean enough for their team to run the sites without me. That's not a loose end. That's the job.

The normcyber.com cyber emergency page, desktop and mobile
WORDPRESSCUSTOM THEMEWEBPACKSCSSGSAP 3SCROLLTRIGGERSWIPERHUBSPOT FORMS0 PAGE BUILDERS

Got a build that needs doing properly?