The Concept
A while back I created a fake drinks can using Blender and ported it into a React project using React Three Fiber. I knew that I wanted to utilize these technologies for my portfolio build, as I strongly believe that 3D elements are going to become a big part of the web in the future. After playing around with some ideas, I decided it would be fun to create a line of fake products that would have some light development themed jokes.
Building the models
I began to think of some ideas for things that I could model, as well as prompting ChatGPT for some ideas that went along with the theme I had in mind. I didn’t want to spend too much time modelling in Blender. I wanted to get the build done as soon as I could, so I went with simple models. The drinks can (that I’d already made), a cereal box, a spray can, and a book. I won’t go into detail about how I made these, but if you are interested in some simple Blender tutorials let me know in the comments.
I knew the main impact of the 3D elements was going to be in the textures, so this is where I spent the most time. I created these using Adobe Photoshop. I had a lot of fun coming up with the jokes, and making the book and the bug spray can look distressed.
After getting the models ready, I exported them as .gltf files ready for importing into React.
Bringing it all together
I created a React/TypeScript project using Vite and started to work on the basic structure. Rather than using routing (something which broke on my previous portfolio) I decided to use Context to simply render a different component based on which item in the nav you clicked.
After setting up the navigation, I started to import the 3D models. For a tutorial on how to do this check out this article. I didn’t really have a design in mind at the start, but allowed myself to shape the pages as they came together.
Aside from getting the positioning and scale of the 3D models to look good, other notable component I created was the slider on the portfolio page. I wanted to make it so that adding new projects in future was not going to be a huge job. So I made a JSON file with a list of projects, which was then mapped into the slider component and the values were plugged into a card component. This means that I just have to add the project details to the JSON file and import the image to the Portfolio component and I will be able to add new projects easily.
For the form I used EmailJS. It’s probably not ideal for big projects for my purposes it suited just fine.
Once everything was working, I deployed the site using Netlify.
What’s next?
There are some things that I still need to smooth out. I would like to add something to handle the loading. Currently there is some delay between the component loading and the 3D object being rendered, so I want to look into having them pre-load and just have a brief loading screen when the site is first loaded.
I also need to add some kind of notification system so the user has some feedback when the form is submitted. I will probably make something that utilizes Context so that I am able to reuse it should I need notifications for anything else besides the form submit in future.
My portfolio is live at laurens-southgate.dev and you can take a look at the GitHub repo here