Builderization — Studio Website & Lead Platform

My software studio's bilingual website: an illustrated design system, a lead pipeline and push-to-deploy on a VPS I run.

Role
Founder · design & engineering
Timeline
2026 – Present
Client
Builderization
Type
Product
Category
Web Applications

OverviewWhat this project is

Builderization is my software studio. The site sells custom websites, apps, business systems, design work and small fixes to businesses, agencies (white-label) and companies, and turns visitors into WhatsApp conversations or project briefs.

ContextThe problem

The site had to speak to three audiences in two languages and look nothing like a template, while staying fast and cheap to run on a small server that also hosts other services.

ContributionMy role & responsibilities

Everything: positioning, copy direction, the design system and illustrations, front end, lead API, infrastructure and deployment.

ScopeKey features

  • Service pages with a multi-select project-brief form that pre-selects the service
  • WhatsApp-first contact channels in the header, footer, pages and a floating button
  • "Ray Kira" flat illustration system: colour bands, hard offset shadows, 23 SVG characters
  • Motion layer (GSAP + ScrollTrigger) driven by data attributes, off for reduced motion
  • Work showcase, agency and enterprise pages, blog and legal pages
  • Client demo apps (e.g. a kiosk prize wheel) built and shipped by the same pipeline, including an Android APK built in CI

SystemArchitecture

Browser → nginx (TLS) on an Ubuntu VPS
  ├─ builderization-web.service — TanStack Start SSR (Node)
  ├─ site-api.service — lead API
  └─ static demo apps
git push main → GitLab CI build → rsync → systemctl restart

EngineeringChallenges & solutions

Challenge

Two languages and two text directions without duplicated pages.

Solution

One route tree; every visible string is an {en, ar} pair rendered through a t() helper, with direction-aware layout.

Challenge

Rich illustration and motion without hurting speed or accessibility.

Solution

Characters are inline SVG with named parts animated after hydration; prefers-reduced-motion switches motion off.

Challenge

One 1-vCPU server hosts several services.

Solution

Each service is its own systemd unit behind nginx; CI deploys with rsync so a release never touches the others.

StackTech stack

Technology

  • TypeScript
  • React 19
  • TanStack Start
  • Tailwind CSS 4
  • GSAP
  • Radix UI
  • Zod
  • Node.js
  • nginx
  • GitLab CI

Tags

  • bilingual
  • RTL
  • design system
  • SSR
  • DevOps

Interested in working together?

Get in touch