My personal CV website

My personal CV and the website that is currently being viewed. It has been built with the goal of showing off my development skills in a practical and accessible manner.

Why a website?

A CV is a living document, meaning that it's never really finished. It is constantly evolving as one goes through life and gains experience. For this reason, I needed to have a CV that could be updated quickly and easily. The answer? Have my CV be a website. This provides me with several benefits:

• The CV can easily be updated as I create new projects and improve my skills
• It is publically accessible on the web for anyone to view
• It provides a practical way for me to show off my web development skills
• I'm not limited to just static text, but I can add some interaction as well
• I can easily link to my highlighted projects and explain my process, like I'm doing now

The Tech Stack

Now that I knew I wanted it to be a website, I had to choose a tech stack to work with. For this, I have chosen the following technologies:

• MDX, to have the "database" directly in version control, and be able to use components
• NextJS, for automatic hot reloading
• TailwindCSS, for quick styling of components without having to switch to different files
• Vitest, to unit test the code

MDX

MDX is at the core of the website. I knew I wanted to use Markdown to store my content. This allows me to keep all my content in version control. No need for any involved backups of the data or maintenance of a database. Of course, this is not a viable method for many websites with content editors, but for my purposes it's perfect. When I want to change anything, I don't have to login to a CMS. I can just open a file and start editing.

NextJS

Now that I knew I wanted Markdown, I had to choose a tech stack that accomodates it. At first, I was considering using Hugo since it's an incredibly fast static site generator. It's also quite easy to add live reloading to it, which really helps me preview the content I write as I write it. I could even add inline HTML templates, using shortcodes. The other option was to use MDX. Its biggest draw for me was that it supports full JSX components. This is really similar to shortcodes in Hugo, but in my opinion, it's just a little bit nicer to use. Since MDX uses JSX components by default, I wanted a JSX-based framework with good MDX integration out of the box. NextJS looked like it had the most mature MDX support at the time. I'm also quite fond of server components, since it reduces the final JavaScript bundle size of any loaded page.

TailwindCSS

Finally, there's TailwindCSS for the styling. There's differing opinions on it out there, but I really like it. Its main appeal for me is that I never have to switch files when styling a component. It's also a great way to keep the final CSS size relatively small, since only the used HTML classes will get included in the stylesheet.

Vitest

To ensure that my logic and components work correctly, I use Vitest to unit test them. For logic such as the middleware, this is really helpful when I want to change anything. Of course, the logic in this file is nothing complicated. But it does save me from having to manually test all of the logic and code paths after I make a change, and ensures that I don't miss anything during testing.