Having a personal website can be a great way to showcase your portfolio, write a blog or just make your CV more interesting and stand out among the crowd.

If you're reading this post, you probably already have your personal website, or are thinking about building it. In any case, I want to share with you 7 things I wish someone had told me when I first started building my personal website.

📈 Add analytics

Setting up an analytics tool (like Google Analytics) will allow you to track your website's performance and understand how visitors interact with it.

Although this doesn't seem like a very interesting thing for the case of a personal website, there's a couple of great features that can help you gain very helpful insights.

For example, you can set custom events to track important actions on your site (e.g. every time your CV gets downloaded).
Another cool feature I like is the session source. Whenever you apply to a position and send your website to a company, you can append a query param ?utm_source=<COMPANY_NAME> to know if and when they opened it 🕵️‍♂️.

🔍 Don't forget SEO

Whenever I get a candidate to interview, I google their names to learn more about them. This is the case for many, if not most recruiters out there, so you want to plan on being googled.

This doesn't mean you need to spend countless hours trying comply with every single SEO rule and best practice, but it is important to be SEO friendly so your website appears when googling your name.

Here's a few small but important things you can do:

• Pre-render pages at build time (SSG) or request time (SSR). Depending on your prefered language, there are many great frameworks you can use like Next.js, Nuxt.js, Gatsby, Jekyll, and many more
• Make sure you are delivering a good user experience by measuring your Core Web Vitals
• Make sure your styles are responsive and mobile friendly
• Add alt tags to your images
• Run a Lighthouse SEO report to get improvement recommendations

📖 Open source your code

Making you code public can be a great way to show your coding skills. Since you probably won't be building impressive features that you can show off in your personal website, what you can do is present good quality code.

Here's a few simple tools and principles you can use:

• Use a linter (e.g. ESLint)
• Use a code formatter (e.g. Prettier)
• DRY (Don't Repeat Yourself)
• Favor readability (choose descriptive and unambiguous names for variables and functions)
• Keep configurable data at high levels

Making your code available as open source also incentivizes collaboration and transparency, which can be useful for other developers.

It goes without saying that if you're not going to worry about how your code looks, making it public can be counterproductive.

🗣 Ask for feedback

Out of all the points I presented in this post, I think asking for feedback has the highest ROI of them all (i.e. It's super easy to do and its benefits can be huge).

Asking your friends and colleagues for feedback can provide extremely valuable insight and give you an understanding of how your site is perceived by other people than yourself. When you do, try to do it with people with different professional backgrounds (engineering, design, UX).

There’s a lot to be gained from getting other people's feedback and absolutely nothing to lose. All you have to do is ask!

In the mood to give me feedback? Check out www.mariosaul.com and let me know what you think in the comments 🙂

🏗 Don't re-invent the wheel

The first mistake I made when started building my personal website, was not doing proper research on the available tools and resources. Instead, I found myself wasting valuable time building stuff that was already built.

Here's a good example of me trying to build a simple 8-bit retro CSS component vs. using a library built for that exact purpose (NES.css)

It not only took one minute to add to my project, but also looks much better than building it myself with my not-so-great CSS skills.

👨‍🎨 Get creative

One of the main reasons to have a personal website is to get away from the plain old PDF file and show yourself in a more fun and interactive way. There's no point in just copy/pasting your CV into a website if it's not going to be any different than the CV itself.

The goal should be to present yourself in a different and exciting way. If possible, try to find something that you love or something that represents you in some unique way, and style your site around it.

If you struggle finding inspiration, you can check out other people's personal websites (there are hundreds of amazing ones you can find online) for getting ideas.

🙇‍♂️ Learn and have fun

If you're an experienced web developer, it might be challenging to find a new skill to learn from such small and simple project. So what you could do is pick a different technology than the one you're used to, e.g. if you're experienced in AngularJS, you can build your site using Svelte (or whatever JS framework the cool kids are using by the time you're reading this).

And last but not least, have fun building it! No matter how big or small, simple or complicated your website will be, you're gonna spend hours working on it. So if you don't find it fun or exciting in any way, you'll most likely end up dropping it unfinished and move on to your next side project.

So there it is, my 7 tips to build an exceptional personal website. Thanks for reading and I hope this post was useful to you.