Battle Motors Web Platform
Everything I sell in one URL. UI/UX, a modern React front-end, motion graphics, and the MySQL behind truck inventory and dealers, built with agentic AI.
A legacy heavy-industry brand competing in vocational refuse and infrastructure needed a web presence that could match its hardware ambitions. The prior site couldn't carry live inventory, didn't speak to dealers, and looked nothing like the engineering behind the trucks.
The work had to do three jobs at once: sell trucks to buyers, support dealers managing their own stock, and prove to anyone who looked under the hood that the company builds modern software. All while I served as CDO, owning the brand narrative and the build, front-end and the truck-inventory data, at the same time.
Pick a current, honest stack
React 19 + TypeScript + Tailwind 4 + React Router 7 + TanStack Query + React Leaflet, written this year, current versions, no legacy debt. The point isn't novelty; it's that a buyer who inspects the site sees production-grade modern engineering, not a template.
Motion as a system across 23 pages
Framer Motion is in use on 15 of the 23 pages, truck card reveals, build-flow transitions, scroll choreography. This is real motion design governed across a large surface, not an effect dropped on the home page.
Own the full motion-graphics pipeline
Five hero videos (hero_01–hero_05) encoded in both .mp4 and .webm with poster JPGs, from 60MB raw source clips (building exterior, drone over production, welding, console, truck), driven by an encode_hero_videos.sh script. The encoding strategy is part of the deliverable, not an afterthought.
Build the inventory backend
Truck inventory and dealer stock run on a MySQL database I built and host, served as JSON to the React front-end through TanStack Query. Inventory is live, not hand-updated. I built and maintain it with agentic AI, and it's verifiable at the URL.
Truck inventory and dealer stock live in a MySQL database, served as JSON to the React app. Built and maintained with agentic AI.
The React app reads it through JSON endpoints: trucks, truck-specs, dealers, inventory, news, newsletter, contact, and search. On top of that I built the SEO infrastructure: JSON-LD Organization schema, OpenGraph and Twitter cards, sitemap.xml, llms.txt for AI discovery, geo metadata, and canonical alternates.
| Table | Holds | Feeds |
|---|---|---|
| ice_trucks | Truck models & configurations | Inventory grid, Truck Detail |
| dealer_stock | Per-dealer available units | Dealer Locator, stock counts |
| truck_spec | Spec sheets per model | Truck Detail, comparisons |
Hero video pipeline
Five cinematic clips encoded for the web in two formats with posters, swapped by context across the site. The drone-over-production and welding clips anchor the brand in real manufacturing, motion graphics doing brand work, not garnish.
Truck card interactions
The inventory and category grids use Framer Motion for staggered card reveals and hover states, so browsing a dense catalog feels responsive and deliberate rather than like a spreadsheet.
Buyer-facing site
23 pages: Home, Build Truck, Truck Inventory, Truck Category, Truck Detail, Dealer Locator, Quote Request, plus News, History, Technology, Services, Financing, First Responders, Safety, Careers, Parts, and more.
Build Truck flow
A guided configuration experience backed by the truck and spec data in my MySQL, the bridge between marketing browse and a real quote request.
Inventory & dealer data
Truck inventory and dealer stock live in a MySQL database I built and host, served to the front-end as live JSON and kept current through admin tooling.
The Battle Motors mark
As CDO I directed the creation of the Battle Motors logo. An external agency developed the axe mark, originally slanted, and delivered it as flat vector files. I had them pull it symmetrical, so the mark spins clean in motion graphics, and I did the chrome treatment myself in Cinema 4D. I also dropped Motors from the wordmark. The brand runs as just BATTLE now, and the mark anchors every sub-brand, from Battle Electric to Battle Capital.
— Brand
Framed as modernizing a heavy-industry brand for the web: a legacy manufacturer's static presence became a live, MySQL-backed platform.
Static, manually-updated listings
Live MySQL inventory I built, no hand-updates
Static, templated pages
Motion-driven React across 23 pages
Generic stock imagery
Cinematic hero pipeline from real production footage
A single URL that demonstrates UI/UX, modern React, motion graphics, and a MySQL backend I built, verifiable in 30 seconds at battlemotors.com.
Front-end pages
Pages with Framer Motion
Core MySQL tables, built + hosted
Encoded hero video clips
Designer owning it front to back
To verify it live, battlemotors.com
Original wireframes and end-to-end UI/UX in Figma, front-end implementation, motion-language design, the hero video encoding pipeline, and the MySQL behind truck inventory and dealers, built with agentic AI, while owning the brand narrative as CDO, directing the creation of the BATTLE logo, and building its chrome treatment in Cinema 4D.
2027 Raider ICE Data Book
Want something like this?
Start a conversation→