Project Diary


Project Diary
Tags: Javascript NextJS ThreeJS ReactJS Tailwind Blender

Description

This website is where I log all interesting and noteworthy projects that I have worked on for future reference as well as to showcase them.


Background

Prior to this project, I had ReactJS and expressJS experience from my internship with Singapore Polytechnic as a full stack developer creating IoT dashboards. I wanted this project to be deployable and fast which is where the popular NextJS came to my mind. I heard NextJS in passing during my internship but I did not have time to learn it. After my internship, I did some research on NextJs and I was impressed by its versatility and refinement that I wanted to learn and implement NextJS on at least 1 project.


Ideation

The first step that I took to create this website is to first think about how I want the website to look like. I wanted to have a bongo cat theme for this project with some animation. With this vague criteria I had in my head, I went to look for inspiration. I came accross Takuya Matsuyama website as well as his tutorial on how he built his website. I really liked his design of his website so this website is heavily inspired by his website.


NextJS

Since I did not have any experience with NextJS, I went to look for a tutorial on it. After a quick search, I landed on Codevolution tutorial playlist. This tutorial was so in depth I was surprised it was not a paid tutorial. After a week of following this tutorial, it was time to move on to the next step.


ThreeJS

The next step of the process was to learn how to add in 3d characters and animation into a NextJS website. Takuya Matsuyama tutorial was a little hard for me to follow as he was using vim so I used another tutorial instead. DesignCode has a wonderful tutorial where he easily explains the basics of how to use threeJS, React Three Fiber and React Three Drei. After a few hours of playing around and learning how to add in 3d characters and models, I started looking for a bongo cat model that I like.


Blender

The next step that I took to create this website is to first create a character that I like and implement it to this project. At first I wanted to just import someone elses bongo cat design but I was not happy with those that are free online. So, I took things in my own hand and started learning and creating the character myself. Oh boy I was not ready for how hard Blender is. Nevertheless, I continued learning and creating the character. Due to time constraint, I did not try to add in animation to the character.


Combine!

Finally, the last step is to combine all of them into a NextJS webapp and deploy it to vercel.


github repository

Contact me at timo9132@gmail.com