ONYX: landing template for service centers

A scroll-driven one-page landing template for iPhone stores and repair shops. The demo shows a fictional chain in five cities in Kazakhstan. All business data (brand, addresses, phones, prices, reviews) is invented, and the page says so.

Owners of small repair shops and retail chains that have no website, and a base I can rebrand for a real client.

Small businesses need a site that sells and is quick to launch. Stores, prices and photos live in JSON, a rebrand checklist is in the README, and one city picker rewrites every contact link on the page (WhatsApp, call, Instagram, Telegram, route). On mobile a bottom bar keeps WhatsApp and call within reach.

Solo project: design and development.

It shows that I can build a motion-heavy frontend that still degrades safely, and it is a template I can reuse for clients.

• HTML
• CSS
• JavaScript
• GSAP
• Lenis

HTML, CSS and vanilla JavaScript (ES modules), GSAP with ScrollTrigger and SplitText, Lenis smooth scrolling, Node test runner, deployed on Vercel. No framework and no build step.

• Three modes: full motion, a static page (reduced motion, no GSAP, or an error during setup), and a readable page without JavaScript.
• Data-driven: stores, prices and photos come from JSON, and HTML builders escape every data value.
• Performance: Lenis loads only for mouse and trackpad users; the hero zoom is capped after measuring GPU cost; photos are WebP with srcset and lazy loading.
• Accessibility: aria labels on split headings, live region on the store card, and a test that checks the color tokens against WCAG contrast.
• Demo mode: clicks on contact links show a toast explaining what would happen instead of leaving the page.
• 166 unit tests.

onyx-landing-pi.vercel.app