How to make a web developer portfolio in 2022
Mar 1, 2022 • 5 min read
A portfolio website is a way to market your skills as a developer. It's like a resume, but 10x better. This article talks about what content should be included in your portfolio. This is the most important part.
Creating an entire website from scratch vs a resume in a PDF is a lot more effort though, so why do it?
The job market is competitive.
I've applied for hundreds of jobs. I've gone through multi-step application processes, spending hours and hours on technical exams only to get to the last step and get rejected. You can be a good fit and still not get the job, because this isn't just about how skilled you are as a developer, but also about how you're able to make companies believe that.
If you want a remote job, it gets even harder. According to this article by the founder of remoteok.io (one of the most popular job boards for remote jobs), the average remote job gets 34% more applicants than a regular job. The odds of getting a remote job are less than 1%. Out of hundreds of applicants, how can you stand out and be the one who gets the job?
This is not to discourage you. You can play the numbers game and apply for a lot of jobs, then increase your chances by improving your skills and marketing yourself well through your portfolio website. It's certainly possible. Or you can also build an online presence and grow your network, so that companies reach out to you rather than the other way around. Either way, it's crucial to have a website - one place where clients can learn about your experience, and why they should choose you over everyone else.
You can do this.
Creating your own website is a lot of work. I encourage you to make the simplest version of your site first - like an MVP, and you can iterate and add more content over time. One page is better than nothing.
Let's go over the different sections that your website MUST have, and some sections that are also great to have.
Don't be afraid to take inspiration from other web developer portfolios.
Full stack web developer portfolio examples
Frontend web developer portfolio examples
What to include in a portfolio website as a web developer
1. Hero Section
This is the first thing the reader sees on your website - kind of like a header. If they only had 1 minute to decide if they should keep reading or close the tab, what do you have to say?
The goal is to tell them that you are good at what you do, and you have the right experience that makes you a good fit for the job. For me, these are some points that are important to mention:
- I'm an experienced frontend engineer.
- I use React, Next.js and TypeScript.
- I've done great work with a lot of companies.
- I've worked remotely for years.
So if they are looking for a React developer for their remote team, it's possible that I am a great addition, and they keep scrolling to find out more.
2. List of Projects
They want someone to work on their project. If you've been successful doing something similar in the past, you might be be able to replicate that success for them. This is your proof of work.
- So what have you worked on? Make a list of everything. Remember that big project where you added a few features and fixed some bugs, with 20 other people on the team? Yeah, write that down too.
- Which one of these are you most proud of? Put that on top of the list.
- Which ones did you enjoy working on the most? Put these on top as well, so that you are more likely to land on similar gigs.
3. Details for each project
What's the project? What was your contribution? What tech did you use? Add some links to see the demo and a Github repository (if public). Add some screenshots to make them curious. See this and this example.
4. Call to Action
The reader is interested in working with you. What should they do next? Email you, fill out a form, DM on twitter, etc. Make this stand out using a big button.
Some more (optional) things you can add that will help a lot...
These are great-to-haves. You don't have to add these, but if you do, it makes a big difference.
5. Experience/CV/ Resume
This is a timeline of your work experience throughout the years. Try to make this exactly the same as your LinkedIn profile's work experience section.
- A list of your work history
- For each role, what were you responsible for? What did you contribute? Any particular achievement there that stands out and maybe worth noting? Exaggerate a bit, especially if you're a minority. We tend to minimize our achievements, but now's the time to do the opposite.
- Dates
6. Blog Posts
I was once told that I didn't have "proof" that I knew React. I had some projects using React, but none of them were open source, so I had no code to show them. I could have spent a week building a side project, but I was short on time. Instead, I spent a day writing an article about React Context.
Blogging is a great way to showcase your knowledge without building out an entire project. If you teach about a topic and do it well, your readers will think that you are an expert on said topic. If you're not an expert, that's totally okay. You just need to know a bit more than the person reading it.
7. Projects page grouped by skill
If a potential client is looking for someone experienced in, let's say, Ruby on Rails, then it would be great to have a page solely decided to "Ruby on Rails Projects". You already put in content for all your projects. Grouping them by tech/skill provides an easy way to find your relevant experience.
8. Services Offered
This is more applicable to freelancers who know what they want to work on. I have an interest in creating content-managed sites, so I explicitly offer this service.
9. Social Links
If you have a social media presence, add links here. Make sure there's not any red flags on there that will turn potential clients away.
Your own portfolio website is also a part of your portfolio.
Make sure your website is well-made, as this reflects on you. I once landed a freelance gig partly because the client loved my website! If you're not a designer, going for a clean and minimal design is the safer option. And be conscious about your Lighthouse score.
Web Developer Portfolio Template
I worked on my website for weeks, and I'm really proud of how it turned out! I decided to share it with you. If you don't wanna spend hours on end designing and coding, just use my template.
Do you already have a portfolio website? If so, share in the comments below! 🤩
