Bodies By Lawrence
The website for Bodies By Lawrence, an outdoor fitness team in Singapore. I designed it in Figma and built it in Astro, Svelte, and Tailwind, then kept it updated after launch.
- Astro
- Svelte
- Tailwind CSS
- MDX
- Vercel
- Figma
Bodies By Lawrence (BBL) is an outdoor fitness team in Singapore. I designed and built their website, bodiesbylawrence.com (opens in new tab), as freelance work.
- Role
- Design and build
- Timeline
- Aug 2022 design, Aug 2023 launch, updates into 2025
01
From comp to live site
It started as the homepage comp in Figma: a trainer over an oversized headline, a stats card, and one call to action, Book A Free Intro. I designed it in August 2022, and the live site kept that layout.
02
Coaches and programs as content
Every coach and program is a Markdown or MDX file in an Astro content collection with a typed schema. A program’s frontmatter sets its card color, tag, difficulty, and price, and each coach lists the programs they run, which links coach and program pages both ways. Adding a coach or a class means adding a file, not editing components.
An early version pulled content from Directus. In July 2023 I moved it into content collections in the repo.
There’s no booking system to maintain. The booking buttons open WhatsApp with a message to Lawrence already written. On a program, the message names that program.
03
Keeping it current
The site launched on Vercel in August 2023. I kept maintaining it after that: in early 2025 the client sent a round of updates, and I shipped them to production in March, upgrading the site from Astro 2 and Svelte 3 to Astro 5 and Svelte 5 in the same pass.