NIM to JM (Still under construction)

XX/XX/20XX

Motivation

Getting on this project was my motivation to get back into creating personal projects in the 3 year hiatus I had from college. As with anyone in OPs I’m pretty sure anyone will know about the exact hours we’ll have to pull sometimes to get something working. Learned a lot more about the actual box running the magic code but also felt my skills atrophying in writing said code so before the decline was permanent I set out on revamping my personal portfolio as motivation to stick it full of projects. This meant learning something. My front-end skills are what we call lacking so this time instead of hand-crafting mediocrity I decided to try and use something that was a little more up to snuff with modern internet standards. After looking around with others I came across this template [NIM] which was made by Julien Thibeaut. With that being said I got to cracking with making a page for me.

Building out the page

What my last website taught me was how to stitch together the html,css,and js in a way that resembles a website but lacks all functionality and responsiveness of the modern age. Coming across this template was a godsend as they provided something very easy to work with along with being very adaptable in the future if I wanted to make modifications. As we traveled through the github issues of 1 → 2 → 7 → 9 → 11 → 12 I was able to see how next.js works.

Making it react

The first 3 issues were me working around the project and getting my feet wet again and actually learning to react this time. I think one of the main things this project taught me was what exactly I was missing from the last project which was modularity. I’ve archived the old project here to give me a good goal post of where I started. It was simple enough figuring out where the html ended and the js began but I feel like without that beginner website I had a feeling this would’ve been a lot harder to do. So as I snipped this and added that I had a newfound appreciation on how clean the internet can be at times as I was able to map out the data and easily manipulate it on the page. Honestly, I found this template very easy to work with along with having a very intuitive project structure which is something I want to make in the future for my other projects.

Making it Prod

Now with most of the assets created for the new Projects and Blog Page I was ready to start adding the key assets on the but now the question plagued me how am I gonna procure the assets? All I had were the scraps and videos from my old website and the other question was on where I was going to keep the images. That’s when I decided to switch off the media being hosted in the repo itself and have it uploaded as an r2 object on cloud flare and used that instead. The finishing touches were just signing up for a vercel account.

Further reading

Obviously I can take this project further with seeing the dependencies that next.js is using along with what other classes exist with tailwind other than “text-zinc-600 dark:text-zinc-400”. With that being said, glad with what I got done in a week.