I turned my personal site into a skate park

When I was a kid, I watched a Nickelodeon show called Rocket Power, and immediately I thought "wow this looks really cool". Then when I got my first skateboard, I realized I couldn't just fly into the air and do any trick at will, and got really pissed off. Every year since then, I've slowly learned how to suck less at it and I consider it a core part of who I am. When I die I want them to hoist my dead body into a pool to drop in and just splat right on the ground. That's my last request.

To me, skating is like a combination of a workout, creative outlet, and meditation, which is probably why I never got bored of it. It satisfies my need to obsess over dialing in details and keeps me in a flow state. I grew up playing THPS and Skate, which were definitely an inspiration for me here. I wanted to see if I could translate some of that joy in the browser and build something fun.

Starting with art direction

I wanted to make this visually simple - clean voxel style art on a clean white portfolio. So I started by drafting my character and the skateboard with as little detail as possible. The mechanics and feel would be the part that carried all the detail. I found it fun to tune just a few pixels to look like crooked, feeble, 5-0 grinds, etc. The constraint made it more fun for me.

Building the first mechanic

The first thing I got working was the jump and grind mechanic. I didn't have a clear set of features in mind - I started here and then just followed my ideas. I'd build something, play with it until I found a constraint I didn't like, and iterate. Working with Claude gave me rapid feedback and made it fun to tinker.

Making the page content skateable

I was really intentional about was making the actual page content feel like part of the experience instead of just slapping a game on top of it. So now anything on the page that reads as a visible object (a card, a photo, a quote, even a heading) turns its edges into a rail. You can now scroll or skate through my portfolio. I'm really excited about the click-clack noise running over text makes.

Sound design

Speaking of sounds, a big part of skating is the tactility and sensation of it, so I spent time giving the digital version a bit of that feel. There's a lot more I'd continue tuning here, but some cool details are the subtle double clack when landing to replicate both sets of wheels landing - another is the different material sounds when grinding (pool coping vs rails, text, etc).

Making the pool feel right was the hardest part

Since this experience is a flat 2D page pretending to be a pool with depth, getting that to look goodwas challenging. The hardest part was that all the interactions and mechanics needed to make the pool skating feel realistic enough to be satisfying, but simple enough to play casually. Dropping in, stalling on the lip, popping out, popping into a grind, simulating flow momentum - lots of edge cases.

It felt like carving a block of marble. Rough out the big shape, then keep chipping at the details. I stopped when it felt right.

Getting obsessed with detail

The rails wear down and get grimy the more you skate them. I think it's so cool how you look at an old building, or a tool, or a skate obstacle and see how it's been worn over time. The weathering alludes to the story behind it, and I enjoy how that reminder of humanity is recorded on the things we use.

Speaking of humanity, I also noticed when I first built this that it felt a little devoid of life. So, I got the idea to add a bench and some other skaters to hang out with you while you're skating. They'll cheer you on, get up and skate, and even provide occasional commentary.

No scores, just a playground

I intentionally didn't build was a score, combos, and more complicated controls. I wanted this to feel real enough to enjoy if you skate, and casual enough to fidget around with for anyone.

How I built it

All iterated in the browser, with Claude. I had the vision, dictated it, and worked with Claude to build it. I'd describe a mechanic, think it through with Claude, and then build it. Sometimes I'd screenshot the page, draw all over it, and send it back. Then I'd skate it, say what felt off, and go again.

Hope you enjoy it.