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.
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
Two languages and two text directions without duplicated pages.
One route tree; every visible string is an {en, ar} pair rendered through a t() helper, with direction-aware layout.
Rich illustration and motion without hurting speed or accessibility.
Characters are inline SVG with named parts animated after hydration; prefers-reduced-motion switches motion off.
One 1-vCPU server hosts several services.
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