Helder Cervantes 2023 - Site refresh

[heldercervantes]

So I've just updated my personal website after some 7 or 8 years. It's a small one pager, but with some quirks that I hope you'll enjoy.

Have a look: https://heldercervantes.com/

First, the approach was to somehow reinterpret my CV into a web experience. My last CV, along with my Supertiny agency's website share this space exploration / alien contact theme, so the idea here was to incorporate a journey through space as the user scrolls through the website. In the end you'll find a mini-game, where you can attempt to reach the far depths of space and discover what's out there.

Most content is static, but I'm using PW to manage the logos you'll fly by at some point and the projects, the game's highscores and SEO.

I intend to improve it a bit in time. Sound is probably the next thing I'll add, and I have some ideas to make the game more interesting.

Fun fact: Setting up PW for this one took about 2h.

[ryan]

Wow, that's amazing, how did you make it? 

[flydev]

I really like it! I wanted to take a similar approach in terms of atmosphere. The shaders look great, good job 👏 

[heldercervantes]

On 6/9/2023 at 7:58 PM, ryan said:

Wow, that's amazing, how did you make it? 

Hey Ryan!

This is basically a full-viewport Threejs scene on a fixed element behind the content. Planets have a static position, and the probe just moves along the Z axis with the camera attached to it. As the user scrolls, the scrollTop is translated to a Z position for the probe. I had to add a little compensation for the window size so that the probe's position matches the content the user is seeing as is intended. There's also an intersectionObserver detecting each slide coming into view, and depending on what's visible the camera changes position to look left or right.

The flying logos are relatively simple. From PW I just generate a JSON with the list from an images field. The script that generates the scene loops through that array, adds planes and textures for each one. X and Y positions just cycle through an array with presets, and Z is incremented with a set distance between them.

Content itself is basic Tailwind stuff. Although I have some custom made scripts handling entrance animations, like the typing effect on the dotted text.

The game is the result of a conversation with ChatGTP. I had the basic idea of making the user spin the cursor around a dot, mimicking the probe's orbit around Earth, but took the opportunity to challenge the AI. It actually gave me a pretty decent script right off the bat that served as a proof of concept. Then I discussed how to make it challenging and it gave me a few ideas. I iterated over them, and eventually came to the solution of adding movement speed to a variable multiplied by the number of consecutive unbroken turns. Had to refactor the whole thing to make it work properly, but ChatGTP was pretty darn useful in the process.

[ryan]

@heldercervantes Great description. This is amazing to me coming from traditional HTML/CSS/JS, to see something like this, and read how it was built. I wasn't familiar with the threejs library before, this looks really interesting. The planets are 3D objects? How did you make those, or where did they come from? It all looks very realistic, it really is something special. Very cool how ChatGPT helped out with the game part too. 🙂 Thanks. 

[Mont]

It looks great on mobile too.  Very elegant.

[heldercervantes]

1 hour ago, ryan said:

@heldercervantes Great description. This is amazing to me coming from traditional HTML/CSS/JS, to see something like this, and read how it was built. I wasn't familiar with the threejs library before, this looks really interesting. The planets are 3D objects? How did you make those, or where did they come from? It all looks very realistic, it really is something special. Very cool how ChatGPT helped out with the game part too. 🙂 Thanks. 

Planets are sphere primitives with an image texture applied. The Voyager is a GTLF model from NASA (threejs has importers for that). There's a background that's basically a cube with inward facing images and the Saturn rings is just a plane with a PNG texture.

You can also see some specs coming towards the camera that's a particle system. Basically 2000 randomly placed vertices that move and get reset once they're past the camera.

It's a ton of fun to work with this stuff.