My First Personal Website

Overview

My portfolio/personal website would be the third website I'm making. I've always been fascinated by the idea that you can have your own website. It's like your house on the internet. However, I've always kept on pushing it back and slacking off, mostly due to overthinking the whole process. But with the right tools under my belt, I've finally made it happen.

I've always preferred customization and maximum freedom, even at the cost of more hard work. Additionally, I am on a mission to learn web development from scratch, opting for the more challenging path rather than relying heavily on libraries. That's why I decided against using popular frameworks such as Astro and chose to make my portfolio/personal website using Next.js and Tailwind CSS.

I have chosen Next.js because of my familiarity with the React library and because the service provides static site generation, which is perfect for a portfolio/personal website. But one thing I can't stress enough: Tailwind CSS is GREAT. It has increased my productivity by miles. No tool I have ever used during my programming experience has ever given me this big of a boost in productivity.

Though I'm still learning the framework, I have so far loved working with Next.js. Their documentation is really straightforward and easily digestible. My interaction with their deployment tool has been so streamlined and developer-friendly. Additionally, Next.js offers features like server-side rendering and API routes, which provide flexibility and efficiency in building dynamic web applications.

New concepts

getStaticProps

getStaticProps is a function that is exported from a page component file that fetches data needed to build a page, it is especially useful for querying dynamic information that is external to the page but can be used at build time.

the data returned by this function is serialized and passed to the page component as props

getStaticPaths

getStaticPaths is a function used to specify dynamic routes and paths for pre rendering during build time, inside of it is returned, an object containing each path along with its data, allowing NextJS to pre-render all the paths during the build process