2026Nuxt.js

Gym Starter

  • Nuxt.js
View live site View on GitHub

About the project

GymStarter is a modern website template for gyms, designed for a young urban audience. The goal was to build something visually strong, dark layout, impactful typography, yellow and red accent palette, while being completely reusable by anyone without touching the source code. All site content, including text, images, colors, contacts, hours, statistics, and team, is configurable via NUXT_PUBLIC_* environment variables. On Vercel, just set the variables in the project panel and the site updates on the next deploy. Colors are injected as CSS custom properties at runtime by a client-side plugin, making the theme dynamic without any rebuild. The project is built on Nuxt 4 with file-based routing, shared layouts, and auto-import. Pages cover Home, About, and Contact. Styling is entirely Vanilla CSS with design tokens, no UI framework: mobile-first and responsive. Icons come from @nuxt/icon with Heroicons and MDI sets. It's designed as a commercial starting point: a client can purchase the template and customize it directly from Vercel, without needing a developer for content updates.

Highlights

  • Multi-page template (Home, About, Contact) with shared Nuxt layout
  • 100% configurable content via NUXT_PUBLIC_* environment variables: no code changes needed
  • Dynamic theming: colors injected at runtime as CSS custom properties via client-side plugin
  • Dark theme design with Impact + Inter typography and customizable accent palette
  • Vanilla CSS with design tokens: zero dependencies on UI frameworks like Tailwind or Bootstrap
  • One-click deploy on Vercel with Nuxt auto-detection
  • Modular and scalable component structure: mobile navbar, footer, reusable hero, base button