Volt-on-ink system
A high-contrast identity built in Tailwind v4 with shadcn-style primitives — engineered to make a one-person operation read like a brand dealers trust with their orders.
← INDEX/WORK/ALITHEREP
№ 07 — CLIENT PLATFORM REDESIGN
AliTheRep
A one-man sales territory deserves a platform, not a brochure.
THESIS
Why this exists
Ali represents cycling brands — Kali, Mavic, Retrospec, Selle Italia, Northwave and more — to dealers across Texas, Louisiana, and Oklahoma. His old site said “business card.” The job: make it say platform — for the brands he pitches and the dealers he serves.
The redesign treats a solo rep like a serious B2B operation: a volt-on-ink identity, a kinetic-typography hero rendered with Remotion, a brand catalog driven from typed data, and a dealer portal — shipped live on the client’s real domain and iterated against his notes.
THE BUILD
What I engineered
Remotion hero on the web
The kinetic-typography hero is a Remotion composition embedded via @remotion/player — programmatic video as a landing-page element, not an MP4.
Dealer portal
A routed /portal experience for B2B dealers, currently demo-grade, structured for account features as the rep’s book grows.
Asset + deploy automation
Puppeteer + sharp scripts scrape and optimize brand imagery to WebP with generated manifests. Dual deploy targets: GitHub Pages via Actions and HostGator via scripted cPanel push, with a PHP contact endpoint.
Real stakeholder iteration
Logo, palette, portal branding, and contact-form fixes shipped in response to client notes — the unglamorous rhythm of client work, done properly.
SCREENS
In the wild
SIGNALS
7+BRANDS IN THE CATALOG
2DEPLOY TARGETS, ONE COMMAND
STACK
ViteReact 19TypeScriptTailwind v4Remotion / @remotion/playerReact Routerpuppeteer-core · sharpGitHub ActionsPHP · cPanelCloudflare DNS
WHAT IT PROVES
Client delivery end-to-end: design system, motion engineering, data-driven content, deployment automation, and the discipline of shipping against someone else’s feedback on someone else’s domain.