Featured · Brand platformGLER: 61gler.com
As founding engineer for GLER, The Sixty One's premium power-track brand, I built 61gler.com: a video-led React + Vite site in English and Russian. Six series pages run on one template, 180+ images and 30 videos come from Bunny CDN, and the Shop button hands buyers to PowerTrack Online, the India store I launched, with WhatsApp and the catalogue as the other exits.
- 2languages, with /ru routes
- 6series pages on one shared template
- 481translated strings per language
- 180+images served from Bunny CDN
01 · The brief
A luxury product that sells on film, in two languages
GLER PowerTrack is The Sixty One's premium power-track line. A conductive track sits on or in a wall, counter or desk, and adaptors plug in anywhere along it. The range has six signature series (Matisse, Raffaello, Linear, Artist, Gallery and Museum) plus five more product lines, aimed at luxury homes, commercial interiors and the architects who specify them.
I'm the founding engineer for GLER and its sister brands SAGA and Eubiq, and 61gler.com is GLER's front door. The brief was harder than a brochure site:
- The product sells on film. Its appeal is the one-touch adaptor and how the track looks installed, so the site leads with video and photography: more than 180 images and 30 videos.
- Eleven product lines, one voice. Six series needed full story pages and five lines needed spec tables, and none of them could drift apart.
- Two languages, everywhere. Every string, route and navigation label had to exist in English and Russian.
- No cart. Orders happen on PowerTrack Online, so the site had to hand buyers off cleanly instead of rebuilding a store.
- Role
- Founding engineer
- Company
- The Sixty One (61 FZCO), Dubai
- Timeline
- 2026 — Present (current build live by April 2026)
- Team
- Developed by me (on-site credit); product, film and photography by GLER
- Stack
- React 18 · Vite · i18next · CSS Modules
- Platform
- Vercel · Bunny CDN
- Scope
- 10 routes · EN/RU · media delivery · hand-offs
A rail that doubles as the catalogue
The layout is an app shell, not one long page. A slim left rail holds Home and the EN/RU switch, and the centre column scrolls the content. A persistent right rail lists every series as a card, with an icon, the name and a one-line pitch, above About, Contact and the Shop, WhatsApp and The Sixty One buttons.
Wherever a visitor is, the whole range is one click away, and the card for the current series stays highlighted. On a phone the rail collapses into a floating menu button that opens the same list as a full-height drawer.
At 390 px: the hero film, the campaign grid and a spec card, then the menu button opens the series drawer
Six series, one template
Matisse, Raffaello, Linear, Artist, Gallery and Museum each get a full page, and all six are thin page components built from the same section components and one stylesheet. A page opens on its hero film and a "Series I–VI" intro with a giant vertical wordmark. Then come a tabbed "Watch" player, safety and design feature cards, a product showcase, finishes, installation photography, technical specifications and a shop call to action.
The brand supplies the story and the media, and the template decides how they're told. That's what keeps six product stories consistent across two languages.
A product-line explorer with real specs
The other five lines (Tiziano, Turner, Iglo, Neo and Venus) don't need full pages, but buyers do compare them. The "Power, Perfected" section on the home page puts them in tabs. Each tab pairs a short description and a spec table (length, installation, power, voltage and current) with its own image grid, so a buyer can compare lines without leaving the page.
02 · Localisation
English and Russian, end to end
English/Russian goes through every layer. All copy lives in JSON across six i18next namespaces (common, home, products, about, contact and not-found), with 481 strings per language. Every page also has a /ru route. The switch in the left rail rewrites the whole interface, including the rail and the hero headline, without restarting the hero film.
Translations load over i18next's HTTP backend, one language and one namespace at a time, so they never sit inside the JavaScript bundle.
03 · Under the hood
A static React app that keeps media and copy out of the bundle
- React 18 and Vite, static on Vercel. There's no cart, login or CMS, so a client-rendered app on a static build fits. Vercel serves a 3.3 KB HTML shell with hashed assets, HTTPS with HSTS, and a redirect from the bare domain to www.
- Ten lazy routes. React Router loads home, the six series, About, Contact and 404 as separate
React.lazychunks with route-scoped CSS Modules, so the home page doesn't ship six series pages. The six series pages are 3.5–7 KB each because they compose shared section components and one series stylesheet. - Media on a CDN, loaded on demand. The 180+ images and 30 videos come from a Bunny CDN pull zone with a 30-day cache. Grid images mount only as they near the viewport (IntersectionObserver, 100 px margin), decode asynchronously, fade in over a placeholder and open in a lightbox.
- No state library. React Context with
useReducerhandles navigation state and the first-visit welcome bar. - Structured data. The About page injects Organization and FAQPage JSON-LD.
