Making your own website has never been easier.

I mean, you could make your own website on Wix or WordPress, those have built-in drag and drop tools to really let you design your website the way you would like it to be. And don't get me started telling you that "that is not the 'programmer' way" of doing one's website. I myself think that at the end of the day, people are only concerned with the end result. The effort is just a wow factor at the end of it.

So, what did I do? Did I use Wix or any similar web creation tools to build my own portfolio website? No! I like to get my hands dirty playing with web technologies and I think making a website from scratch motivates me better because of the control I can do with it. However, it didn't really push me enough before to motivate me to do one myself. Not until it became a requirement in our college that really pushed to do it. So yep, let's create our very own portfolio website.

Creating the website

Web Stack

Let's get started with the development. What do we have?

I have experience in React and NodeJS in web development. Actually, I only have these two technologies yet for web development. I tried Flask and JQuery before but didn't really stick not as much as these two. So we'll use that. And guess what, these two bad boys had an offspring, and its name is NextJS.

NextJS is a NodeJS server with built-in React SSR capability. It can create static HTML pages from scratch while you write everything in react components. It is a dream come true for people who fell in love with react but want their website to be SEO friendly (cause react is a SPA website, it is not well optimized for search engine scrappings).

Since our website will also contain blogs and other fun projects, it would be nice if we could have a Content Management System like Wordpress. And yep, NextJS doesn't have this out of the box. But behold, we have something to use for this. We can use Contentful to manage our blogs and images and NextJS will just fetch them using REST API to lay them out on our page.

Finally, to add some wham to our website, I added animation transitions on the pages by using framer-motion. Now my website looks like a SPA website with transition but actually each have their own page for Search Engines to search.

And yep, the rest was pure effort and sweat. But I like how the website turned out.