Demonstrength

Project Overview

Demonstrength is a powerlifting coaching brand that focuses on sustainable progress, strong habits and a tight‑knit community. The old online presence no longer matched that vision: it didn’t communicate the energy of the team, and updating content was slow and technical.

The goal of this project was to create a site that:

• Communicates the coaching philosophy: long‑term, repeatable progress instead of quick fixes.
• Highlights real athletes and their stories to build trust.
• Feels dynamic and “alive” through motion, while staying performant.
• Gives the team an editor‑friendly CMS so they can publish highlights, reviews and team updates without touching code.

Tech Stack

To hit those goals, I chose a stack that balances performance, maintainability and editorial flexibility:

• SvelteKit for the application framework, routing and server‑side rendering.
• GSAP for precise, timeline‑based animations and scroll‑driven motion.
• Sanity.io as a headless CMS for pages, athlete reviews, highlights and team content.
• Claude Code as an AI coding assistant to speed up boilerplate and refactors.
• Modern CSS with nesting via PostCSS for a scalable, component‑based styling system.

Each piece of the stack plays a specific role: SvelteKit handles fast navigation and data loading, GSAP delivers the “feel” of Demonstrength, Sanity gives the team control, and CSS nesting keeps the codebase clean as the design system grows.

Architecture & Content Model

The content on Demonstrength is built around a small set of flexible types inside Sanity:

• Coaching pages (zoals “Coaching” en “Reviews”) with structured blocks for headings, copy and CTAs.
• Athlete reviews, like those from Justin Lung, Michelle Dijkman, Emre Gunel, Suhana Voskuilen, Vincent Klijn en Jade Cheng.
• Highlights and team sections that show meet recaps, national titles and team photos.

SvelteKit pulls this content at build time and on request, mapping it into page layouts that are easy to extend. Because the content is fully decoupled from the frontend, the Demonstrength team can add new testimonials or highlights without developer involvement.

Interaction & Motion Design

A big part of Demonstrength is the feeling of being part of a driven, supportive team. To translate that into the interface, I used GSAP to create:

• Smooth entrance animations for hero sections and call‑to‑action buttons like “Boek je gratis call”.
• Subtle scroll‑based reveals for reviews and team blocks, so the page feels like it’s unfolding as you read.
• Performance‑conscious timelines that respect user preferences (e.g. reduced motion) and avoid blocking interaction.

The animations are not there just for show—they support the content: emphasizing athletes’ stories, drawing attention to the coaching benefits, and guiding visitors towards next steps like “Neem contact op”.

Styling & Implementation Details

All styling is written in vanilla CSS, enhanced with nesting via PostCSS. This gives the benefits of a modern, scoped syntax without locking into a heavy framework.

Key decisions here:

• Component‑oriented CSS, where each Svelte component owns a clear, nested stylesheet.
• Shared utility classes and design tokens for spacing, typography and color, making it easy to keep pages consistent.
• Careful attention to responsive behavior so the site feels just as strong on mobile as it does on desktop.

This approach makes the codebase easy to understand for other developers, while remaining flexible for future redesigns or feature work.

Using AI to Speed Up Development

Claude Code played a supporting role throughout the build. I used it to:

• Generate and refactor boilerplate SvelteKit routes and layout structures.
• Explore alternative animation patterns before committing to a final GSAP approach.
• Sanity schema scaffolding, which I then refined by hand.

This allowed me to spend more time on the parts that matter most: motion feel, content modeling and high‑quality UI details.

Outcome

The final Demonstrength site better reflects what the brand stands for: sustainable progress, structured coaching and a strong community. Visitors can immediately see:

• Real reviews from athletes who have worked with Tyrese and the team.
• Clear explanations of what’s included in “Online Powerlifting Coaching”.
• A simple path to action through prominent CTAs to book a free 1‑on‑1 call or get in touch.

From a technical standpoint, the site is performant, maintainable and ready to grow—new reviews, highlights and team members can be added in Sanity, while SvelteKit and GSAP handle presentation and motion without compromising speed.

This project showcases how a focused stack—SvelteKit, GSAP, Sanity, modern CSS and AI‑assisted development—can bring a coaching brand’s story to life in a way that feels both polished and personal.