Bruno Simon — Portfolio (case study)

After too many years, I’ve finally decided to update my portfolio.

🔗 https://bruno-simon.com

To be fully honest, I never thought people would like it this much and I still cannot figure out why, but I’m really glad and grateful for all the feedback and kind words that I’ve received.

Some developers asked me to explain how I built it, and it’s just a bunch of simple techniques that I’ll try to explain here.

This article should be readable by any of you who has a digital background, as I tried to make it understandable as much as possible, even if you’re not a developer.

I hope you’ll enjoy this little “behind the scene” of my portfolio!

CONCEPT

At first, I wanted to make something original, entertaining, playable and understandable.

As I’ve been using WebGL a lot last years and as a huge gamer, going for a game concept was an obvious choice. Since I was a kid, I’ve always liked playing with remote controlled cars and I’ve spent lots of time playing Micro Machine on Playstation. So as a result, I decided to build a universe where you could drive around with a remote car.

I’ve always found that physics wasn’t used enough in the web, that’s why I wanted the elements composing my universe to be “bump-able”.

Everything had to be part of the 3D world, but I also had to find ways to guide the user. Also, I chose to have no interface so that the experience could be as immersive as possible.

And for the inspiration, as a fan of Gustavo Henrique, I’ve decided to try this tiny and colorful architectures with a lot of flatness but slightly rounded edges style.

I’ve always wanted my portfolio to be really personal, so I decided to produce it entirely alone.

Since I knew that this project was going to take time, I also made sure that I could have fun myself (and believe me, I’ve lost too many time doing tricks with the car…).

What I really believe, is:

the best game you can build, is the one you spend too much time playing on.

GAMEPLAY

The experience starts with the universe popping up from the ground, and the car falling down from above with a little bounce, so that the user notices the physics.

The only thing written are the instructions, directly on the ground, inviting the user to use his arrow keys to move (it’s not indicated anywhere, but you can actually use WQSD or ZQSD (french keyboard) controls for players used to play PC games 😉).

Placement of the car wasn’t a random choice: I really wanted to ensure that by bumping the title “BRUNO SIMON” at the beginning of the experience, it would maximise understandability of elements being moveable.

In order to help and guide the user to the right directions, I used some simple tricks such as:

The tiles which work like a path, to help user understand easily that there is more to see in that direction.