How Not to Create Your Portfolio as A Developer

Why I Did It Anyway, and Why You Shouldn’t

Many developers have some sort of website. I always had one too. It’s a space on the web where you get to describe yourself. Unlike with Twitter profiles, you get to set the frame and present a neutral picture of yourself.

It’s important to me that people who are googling my name quickly know who I am and what I’m working on. They also shouldn’t have to rely on search to find all my social profiles.

That’s why my previous website looked like that:

I really liked it. It did all the things I wanted it to do. But we both know that it’s not a portfolio. That’s okay. Personal websites don’t have to be portfolios, but I still wanted one. I wanted it for the same reason most other people create one: For finding a job (Yes, you can hire me).

What was wrong with my previous site?

I did mention my most important work, but what was lacking most was a bit more context about them. People should be able to get a feel of what I’ve been working on without spending hours on inspecting my work.

The next version should achieve all of the above, plus mention a few more projects and tell the reader a little more about them. In other words, I needed a projects page, and individual project pages.

The tech part

Since the previous version was already built with Gatsby — yes, I did load React for a couple of paragraphs of text — it was straight forward adding some pages. That’s what static site generators are made for.

Filling the projects pages was actually quite a lot of work, but besides that, my portfolio was pretty much finished. But I wouldn’t write this post if it had been. As far as my tips for creating a portfolio go, this is where you should stop. You have 80% of whatever your dream-portfolio might look like, and you can spend your time on things that actually matter, like applying for jobs.

But I had this stupid idea that my portfolio should in at least some way be a little special.

This is what I ended up with:

Besides from changing the introduction to another one I don’t like, I only added a link to my projects.

What cost me all my energy was this:

The projects page

The main idea

You can get from the homepage to a project without re-rendering the full page. When you open a project, the card scales up and shows all its content. When you close the card, or just keep scrolling, you’re back to the projects page. I guess I stole that idea from https://techcrunch.com/.

So what was the pain that made it not worth it?

• Animations
• Scrolling
• Animations

I haven’t even finished all edge scenarios regarding the animations. Also, managing where the page should scroll to when changing route, or when closing a card was a real challenge.

And eventually, it didn’t look good on mobile devices, so I had to code a “normal” version too, which would just have normal route transitions.

I spent more than 90% of my time with this site on making it just a little more fun. That didn’t align with my goals, and I’m not particularly sure why I still built it then.

Just build a simple website

As a frontend developer, your website shouldn’t be ugly, but you don’t have to showcase what you’re capable of with your website itself. You don’t have to reinvent the way websites are built. Stick with what has proven itself hundreds of times, and you’ll save a lot of time with minimal risk.

Why didn’t I follow this advice?

I guess the fact that you get to play a little is why it’s fun to build a personal website. You want it to be something that’s fun to browse. Something that reflects your personality a little. I also enjoy taking some risk.

Oh, and if you’re hiring, don’t forget to take a look at my portfolio 😉.