You can check github to see the full source code of this website. But here is a quick explanation of how things were done. As stated before, my portfolio was inspired by Project Hail Mary, a book by Andy Weir, writer of The Martian. After reading the book, I made the decision of making a space themed portfolio.
For this project, I used these technologies:
There are other dependencies used on the project like "react-intersection-observer" and "react-icons", if you wanna know all of them, check the source code.
Next.js was used because I prefer it over plain React, but the project does not need it at all and it's not even taking advantage of its capabilities. Why TAILWIND? It makes the development process faster for me and that's the main reason. Three.js was used to render the stars geometries in the background and the little astronaut that can be seen at the beggining. I was planning on using more 3D objects on the scene but i really want devices without a GPU to be able to expirience the website. I plan on making other 3D experiences more GPU intensive, more visually stunning, but i wanted this portfolio to be accessible. That's why it lacks 3D objects. That's why the astronaut is low-poly.
Framer motion was used to make the DOM elements animate. The library react-intersection-observer was used to intercept when an object came into view, so i could use framer motion to animate it.
