When I decided to make my own personal website, I was faced with a lot of questions. Do I make it with something like WordPress or Wix?. Or do I use some fancy JavaScript framework?. Maybe something simple with HTML, CSS, and vanilla JavaScript?. What about design?, do I make it with some fancy and modern design? or do I use some basic *template from the web?. Which color palette do I use? fonts? animations?…*😱
Bottom line? I was overthinking it way too much.
At the end of the day, the way I see it after doing my own research (maybe too much research), the best way of making your portfolio is to create something you like, and something you feel proud of and that identifies your personal brand. So, I started thinking about what I like and what I wanted for my personal website.
After some thinking and a lot of try and error, I decided that I wanted something simple and minimalistic. And more importantly, I wanted to make it myself. So I gave it a try and started with Next.js, and then changed to Gatsby. Now, I’m not going to fall on the debate of which one is best. To me, it all comes down to preferences, but I totally understand why many people may think Next.js is the better framework (at least at the moment).
With everything in mind, let’s see which technologies I chose and why.
Why Next.js?
For me, both frameworks have things I like, and others I don’t. For example, I really like Gatsby’s image component, also their plugin system (although it can be frustrating at times). On the other hand, I really like all the capabilities Next.js gives you out of the box, especially the chance of creating your own API routes inside your project in a very easy and enjoyable way. But, I’m not the biggest fan of Next.js Image component, is not that is bad, is just that I think this is a feature Gatsby implemented better (let’s consider that this is still a fairly new feature, and will improve a lot with time).
In the end, I chose Next.js because I felt it offered me everything I needed for my website (more on that later). I didn’t use simple HTML, CSS & JavaScript mainly because I wanted to practice some more using a framework. And I didn’t use a platform like WordPress because, again, I wanted to create it myself.
Why MDX?
Now, one of the easiest ways of managing the content of a blog is a Headless CMS. And there are many of those out there. So far I’ve used Sanity.io, Contentful, Strapi and some others that I’ve checked just a little. Without thinking too much about my preference I think that Sanity.io would be my first choice for a client project (depending on the requirements of course). Not because is the best, is just that is the one I like the most (again, personal preference).
Before my current site, I had my site built with Gatsby, and the content was managed using Sanity.io. Although I have not complained about my former stack, I wanted to try something different. I have to be honest, I didn’t like Markdown very much (I don’t know why). But still, I decided to give it a try.
MDX vs Simple Markdown
After doing my due research, I understood the advantages of using MDX over simple markdown. For example, the opportunity of writing or embedding JavaScript components inside your .mdx file. Now, currently, I’m not taking full advantage of everything that Markdown offers. But, I plan on using them in the future, so I thought it was best to use them from the start.
Some struggles
Installing and using MDX was not that difficult, however, I did have some trouble adding some syntax highlighting to code blocks inside the .mdx files. At the moment of writing this, I’ve not been able to make it work yet so I decided for the moment to go with Lee’s solution and styled everything using simple CSS. I plan on working on this at a later time, but for the moment, let’s just be happy with the end result…😅
UI Styling - Tailwind CSS
Because I wanted a very minimalistic design, I didn’t want to put too much effort into the styling. Still, if I wanted to make it look somewhat clean, I needed to add some styles. My first choice for this project was to using some CSS in JSX styling (I didn’t want to write too much CSS). There are many options out there, in the end, I wanted to try something different, I ended up liking two libraries: Chakra UI, Theme UI.
However, considering that this was my personal portfolio, I wasn’t sure to commit to a library/framework that I was just starting to use. That’s why I ended up using Tailwind CSS. I have worked a lot with Tailwind CSS and I love it!. The only thing I am not so fond of with tailwind is how “bloated” some JSX components will look if you apply too many utilities. I know, there are ways around this, but considering all the good things Tailwind offers you, I think is worth it.
I plan on giving a real try to both Chakra UI and Theme-UI on future personal projects because I really like them. But, for the moment I’m happy with Tailwind.
Future ideas
Although I like the current state of the website, I have a lot of ideas I plan to implement. Some of those are:
Adding TypeScript
I’m fully aware that this is not necessary, especially for a small project. I just want to do it to the practice of both the language and my coding skills.
Finish the Resource page
This is something I’m currently working on, I’m just taking the time to do something that is good and those of you that are reading this can take advantage of those resources.
Taking Advantage of MDX and Next.js API routes
This includes a lot of ideas from small to intermediate features to improve the UX of the user.
Final Thoughts…
I really think that the most important thing when building your portfolio is to create something that you feel proud of and that helps you improve your skills (especially if you’re a beginner). As always, do something you enjoy and have fun with.