TrainingMarks

After working through the problems, I also made a few decisions about the experience.

The 3D intro won't play on mobile. Instead, mobile visitors go straight to the actual website so they don't have to load the heavier 3D experience.

For desktop, the intro plays first and then transitions into the Training Marks website.

The goal isn't to make the intro the entire website.

It's there to make the first few seconds memorable.

I didn't want the landing page to just talk about fitness.

I wanted it to show the journey:

Try → Fail → Try again → Improve → Get stronger → Transform

And then lead into the actual Training Marks site.

Cheers 🎉🎉🎉🎉

Of course, it didn't look right on the first try.

Some scenes had the character's legs going straight through the chair instead of actually sitting on it.

Some camera angles hid too much of the character.

The particle effects sometimes became so dense that you couldn't even tell what the character was doing.

And at one point, I somehow ended up with:

RAINING MARKS

instead of:

TRAINING MARKS

I also realized I wasn't using the actual Training Marks logo in the scene.

So I went back and fixed the camera positions, cleaned up the particle composition, fixed the scene overlaps, and added the actual logo.

That's probably my favorite part of working on projects like this — seeing something that looked wrong, figuring out why, and making it better.

After figuring out the story, I started building the intro with Three.js.

I wanted it to feel like an actual 3D experience instead of a normal animation.

I worked on:

• 3D particle characters

• 3D gym environment

• Animated barbell

• Overhead press animation

• Multiple camera angles

• Camera movement

• Particle transitions

• Day progression

• Space / Enter interaction

The camera was one of the parts I spent the most time on.

My first version basically had one fixed camera. It worked, but it didn't really feel 3D.

I changed it so each part of the story has its own camera movement.

The camera moves around the character, follows the bar during the press, changes perspective, and eventually pulls back to reveal the whole gym.

That small change made the whole experience feel much more alive.

Still a work in progress, but I'm liking where it's going.

I wanted to build a landing page that wasn't really a landing page.

For the Training Marks website, I didn't want the first thing people to see to be another fitness hero section saying "Transform your body."

I wanted the website to tell a story first.

So I created an interactive intro called "Start Somewhere."

It starts with someone who's unhealthy and unmotivated, sitting alone in a dim room. There's food around him, his phone in his hand, and a gym bag that's been sitting untouched.

Then you press Space.

He gets up.

He tries to lift.

He struggles.

He fails.

Then he tries again.

The user moves through his journey from Day 1 to Day 365, with the character and environment gradually changing along the way.

The story ends with:

You don't need to become someone else.
You just need to start.

Then the actual Training Marks website appears.

Built a website for my gym coach

My coach asked me to build a website for his coaching business, so I decided to give it a shot.

The goal was pretty simple: give his clients a place where they can learn about his programs, see his work, and easily get in touch with him.

I built Training Marks with:

• Training programs

• Client transformations

• Training reels

• A booking/contact form

• Mobile-friendly design

• SEO setup for Google

One thing I really wanted to include was a CMS, so he wouldn't have to rely on me every time he wanted to update the website.

He can now edit the content, update his information, upload photos and videos, and publish changes himself without touching the code.

The main goal was to make the site easy for him to manage after I handed it over.

Built with React, Tailwind CSS, and Netlify.

Still working on improving it, but I'm pretty happy with how it turned out.

mytrainingmarks.site