Rewriting my website in Next + Sanity

So ... I've rewritten this entire website.

This wasn't always the intention, but in order to talk about how we got here we have to go back a couple of months in time; back to when I finished my second year at U of T and realized I had ahead of me 4 months of break.

I quickly realized that this break was the perfect opportunity for me to step up my web dev game and learn new Javascript libraries and frameworks. At that point, I've been wanting to learn React for a while, so I decided to take the plunge and pick it up. With React, my plan was to make a portfolio website to showcase my skills and experiences.

So off to work I went. I looked up a lot of documentation and videos online and started building a portfolio website. I learned libraries like React, SASS, Framer Motion, React Router, and much more. For reference, I was primarily following this YouTube Tutorial.

While I'm at it, I'll give some comments about the tutorial I was following. It was a good tutorial for learning how to build a portfolio with react, but it didn't do a very good job explaining certain concepts. The tutorial had a lot of libraries imported, which seems to overcomplicate the code. I feel like since this is supposed to be a beginner friendly tutorial, they probably should've left a lot of that stuff out. Also, the tutorial gave a lot of background images and predefined styles. This could be good if you want your website to look exactly like theirs, but it really limits the creativity, something I thought was kind of an integral part of a portfolio website design.

Anyways, I was following this tutorial, but I decided to do all the styling myself. It very quickly became clear to me that the hardest part of making a web portfolio is designing it. The code itself isn't all that complicated as all I have to do is display my skills and experiences. I also quickly realized that designing a website is not an easy task. I went into multiple rabbit holes from choosing different CSS libraries to utilizing color palettes. Ultimately, however, I was unsatisfied with my attempts.

One thing I did find potentially game-changing from all this effort was Sanity. Sanity is a headless CMS, which basically kind of means that it gives you a cloud backend database to update the content on your website. The advantages of using a headless CMS is that if I want to add or edit something to the website, I don't have to touch the code at all and can just do so on the cloud. This sort of means I only have to worry about styling the website. Obviously, I'm kind of simplifying things here, but that seems like a game changer for websites with constantly updating content!

For example, if I'm building a blog website without Sanity, every single time I want to go and add or edit a blog, I would have to go into the source code and change the source code. Furthermore, if I want any images on the blog, I would have to add every single image into the source code and properly link them. With Sanity, I could just link my blog page to the Sanity API to display the content, and add new blogs through Sanity without having to touch the code at all. Again, simplifying things here quite a bit but I think you get the idea.

I then realized that I wanted to use Sanity on my personal project. This, however, would potentially mean rewriting my entire website, which I'm not actively opposed to as my old website could use a bit of an upgrade. With the portfolio project going nowhere, I decided to try this out.

I found several tutorials online on how to write a blog website using Next JS + Sanity CMS. There's one that is published by Sanity and one very useful and direct YouTube tutorial. These two tutorials was basically all I needed to figure how to go about rewriting my website.

Now that I've somewhat completed rewriting my website, you might ask was it worth doing. I must admit, I might've gone a bit overboard with myself here. My website is a pretty simple website, one that does not really need dynamically rendered content or anything like that. In a way, it is intended to be simple so that I can frequently add stuff to it whenever I feel like it. However, I will also say that the code is a lot cleaner after the rewrite. Next JS sort of imposes a structure to my code which makes it pretty easy to navigate, and Sanity makes it easy for me to update content on the website. I also implemented Tailwind CSS into the rewritten website, which makes styling a lot easier. My take on Tailwind is that you should really define some base styles in your CSS file before going in to styling every individual thing using Tailwind. There's a nice middle ground between doing everything in Tailwind and doing everything in plain CSS.

Now a bit of advice for anyone who might want to write a personal website: don't do what I did. I know I just said that it's kind of nice, but I do think that it's a bit much. Use this Next JS blog website template. You don't have to make your site a blog site but this template gives you pretty much everything you might possibly want and is already a bit styled so that you don't have to go through the hassle of figuring out how to make your card layout look good. In fact, this might very well be what I do if I decide to go back and try to make that stupid portfolio website that I never seemed to figure out.

Overall, this has been quite the journey. I've learned a lot of things. I've learned what is considered good practice and lot of what is considered bad practice. But now I know what not to do and I've grown another step in my web deving skills. I still suck at designing but that's for future me to fix with a future project.