Overview
Canadatrado connects food producers with importers, wholesalers, distributors and foodservice operators across global markets. The website has to do the job of a trade desk: explain the categories, show where product moves, prove quality, and make it easy to start a quote.
I built the nine-page front end end to end — home, about, products, services, logistics, quality, suppliers, quote and contact — from the design system and motion language to the product data layer and the interactive globe. The site is roughly 10,000 lines of HTML with no framework or build step.
The challenge
Food trading is abstract online. Buyers care about origin, specification, certification and timing — not marketing copy. The site had to make all four legible without turning into a catalogue of PDFs.
- Global reach is hard to visualise: “45+ countries” means little without a map, a route and a distance.
- Deep product data: nine product families, each with cuts, grades, packaging and origin details.
- Long quote forms: buyers abandon forms that don’t carry the product context with them.
- Premium feel on a static stack: the site needed motion and interactivity without a server or build pipeline.
- Trust at every step: certifications, logistics and supplier criteria had to be as clear as the products.
- Mobile first: a lot of trade traffic arrives on phones, often from messaging apps.
What I built
The result is a fast, fully static platform that feels closer to a product app than a brochure site.
- Nine-page architecture: shared navigation and footer, per-page metadata and a consistent section system.
- Design system: ink, cream, Canada red and gold; Playfair Display, Inter and Space Grotesk; reusable buttons, cards and editorial layouts.
- Product catalogue: nine categories with live text search, category filters, result counts and an empty state.
- Product detail modal: nine data objects with long descriptions, badges, cut options, specifications and a quote CTA — no page reload.
- Product-aware quote flow: the modal passes the product ID through the URL, and the quote page pre-selects the category and product field.
- Supplier onboarding: a nine-point supplier criteria section and a structured application form.
- Trade content: a scroll-driven process timeline, logistics manifest, quality and certification pages, and a services grid.
- Motion layer: GSAP ScrollTrigger reveals, a rotating hero verb, marquee strip, animated timeline progress and counters.
“The globe isn’t decoration — it turns ‘we ship worldwide’ into a route you can drag, select and measure.”
— Build note, CanadatradoThe trade globe
The centrepiece is a draggable trade globe built with D3’s orthographic projection and TopoJSON world geometry. It gives the company’s reach a physical shape.
- 29 destinations: every target market in the selector, from the US and Europe to the Gulf, Africa, Asia and Oceania.
- Drag to rotate: pointer and touch dragging, with auto-rotation that stops on interaction.
- Animated routes: a great-circle arc and moving dot from the Toronto HQ to the selected destination.
- Live distance: a haversine calculation updates the kilometre readout for every route.
- Responsive SVG: a fixed viewBox keeps the globe sharp and usable from mobile to desktop.
It is the one element visitors remember — and it does real explanatory work rather than just animating for effect.
Scope & impact
The site ships as static files, so it deploys anywhere and has no server runtime to maintain. Every interaction — filters, modal, quote prefill and globe — runs in the browser.