Alnajim
Alnajim is a bilingual landing page for Abdulrahman Alnajim, a Saudi filmmaker who shoots, edits and colour-grades. It turns his published films into enquiries: a visitor picks one of four services and sends a request that already says what they want. Arabic is the default; both languages are real prerendered pages.
- Next.js
- React
- TypeScript
- Tailwind CSS
- Canvas
- RTL
- SEO
- Cloudflare
- My part
- Everything but the identity
- When
- 2026
- Films
- 16 published
- Status
- Live
Overview
Abdulrahman Alnajim is a Saudi filmmaker who covers the whole chain himself: he shoots, edits and colour-grades. His work lived on YouTube and Instagram as bare links, with no titles, dates or clients attached. I built him a single bilingual landing page whose job is to turn that published work into enquiries: a visitor sees the films, picks one of his four services, and sends a request that already says what they want. Arabic is the original and the default; English is the alternate, and both are real prerendered pages.
My role
I built all of it: the content recovery, the design system, the hero animation, the gallery, the request flow, the bilingual build and the deployment. The identity is the client’s own: the palette, the calligraphic lockup, the badge and the ornamental border all come from his brand guideline, extracted as true vector rather than redrawn.
LimitThe palette, lockup, badge and ornamental border come from his brand guideline, extracted as true vector rather than redrawn.
What shipped
- A Next.js 16 and React 19 site exported to flat files: no server at runtime, no route handlers and no image optimisation service, so it deploys to Cloudflare as plain static assets.
- A hero canvas that cycles the identity through its written forms: particles sampled from the client’s own logo PDF by a build script move between the circular badge, the calligraphic wordmark and a clapperboard that claps shut before it dissolves.
- The four services as a filter, not a section: picking one narrows the works sheet, prints that service’s own description, and pre-fills the same choice on the request form.
- A second dimension for editing only, split into stories and event coverage, which travels into the email subject and the WhatsApp message so the request arrives already sorted.
- A gallery that handles YouTube and Instagram Reels without looking like it handles two things: Reels posters are committed locally because their signed URLs expire, and those cards link out instead of embedding.
- A request form on Web3Forms, with WhatsApp and a direct call as first-class alternatives, because in this market enquiries arrive by WhatsApp far more often than by form.
- Canonical and hreflang tags, a generated sitemap and robots file, and Person, professional-service and video structured data, with an offer catalogue of the four services, all produced by the same build.
- A post-build step that writes the root language gate and the caching and security headers, so the root works on any static host and still lands visitors on the Arabic page.
DecisionThe four services work as a filter, and the choice carries into the request form.
UX decisions
- Right-to-left is the primary layout, not a localisation pass: every directional rule uses logical properties, so the English edition mirrors correctly by construction.
- On a phone the order changes rather than the content: headline, then the animated mark, then the lede and the actions, so the signature element sits inside the first screen.
- The calligraphic border from the brand guideline runs down the edge as a reading gauge that inks in as you scroll, cut on its exact repeat so it tiles with no seam.
- The canvas loop stops when the tab is hidden, when it scrolls out of view, or when the visitor asks for reduced motion.
- Nothing is invented: no testimonials, client counts or prices, and every work title and date was recovered from the platform it was published on.
Worth a closer look
The part I am proudest of is the hero. Instead of placing the logo as an image, a script reads the client’s own logo file, samples it into point clouds, and marks every Arabic dot and diacritic so it can be printed in the accent red while the strokes stay in ink. The particles then move between the badge and the wordmark with a seeded random generator, so every load draws exactly the same thing. It makes the brand feel alive without adding a single element that is not already in the brand.
DecisionA seeded random generator, so every load draws exactly the same thing.
Screens
