Full-time role · 2025 — 2026

INNOBilingual Company Website for a Saudi Web Agency

Bilingual RTL-first site for a Riyadh web agency, rebuilt from 11 runtime dependencies down to 4.

Client
INNO
Year
2025 — 2026
Role
Frontend Developer
Services
Frontend, Design system, Motion
Stack
Next.js · React · TypeScript · Tailwind CSS · CSS / SVG Animation · Lenis · RTL / i18n · Design System · Vercel

The challenge

The agency's own site carried eleven runtime dependencies and about 47MB of 3D assets, and its scroll performance problems had survived earlier fixes.

The idea

Rebuild it from scratch, Arabic-first: hand-written CSS and SVG animation instead of Three.js, GSAP and Framer Motion, a full design system, and a WhatsApp funnel that pre-fills the chosen plan.

Read the full build notes

The company website for INNO, a web development agency in Riyadh, built in a full-time frontend role. Bilingual Arabic and English and RTL-first — Arabic is the real layout rather than a mirrored English one — with a full brand design system, seven hand-coded animated SVG scenes, and a WhatsApp lead funnel that prefills the selected plan and its price so a visitor lands in the chat with the context already filled in.

I rebuilt the site from scratch and cut runtime dependencies from eleven to four, replacing Three.js, GSAP and Framer Motion with hand-written CSS and SVG animation. That removed roughly 47MB of 3D assets and fixed the scroll performance problems that earlier mitigations had not solved.

The Arabic work goes past a direction flip: CSS logical properties throughout, bidirectional text isolation, tabular numerals, direction-aware icons and locale-appropriate digit systems. The design system lives in Tailwind v4 — brand tokens, a typographic scale and 22 hand-written animations, every one of them honouring prefers-reduced-motion. Content is a typed bilingual architecture driven by useSyncExternalStore, so the server and client render deterministically and a language change syncs across tabs. Scroll parallax runs off a single listener on one requestAnimationFrame loop, image assets came down from 190KB to about 2KB, and contrast meets WCAG AA throughout.

INNO

Key screens

In motion

On the phone

INNO — On the phone 1
INNO — On the phone 2
INNO — On the phone 3

Results

  • Runtime dependencies cut from 11 to 4
  • About 47MB of 3D assets removed
  • Image assets down from 190KB to about 2KB
  • WCAG AA contrast across the site
Start a project