Most software engineers need an online portfolio to establish credibility.
Instead of just telling interviewers about your technical skillsets and expertise, a portfolio allows you to show them.
Creating a portfolio site can seem daunting and time consuming.
How do I display back-end development projects?
Should I use a template or design my own site?
What content should go into my portfolio?
To get some answers, we spoke with Ali Spittel. Ali is a long time software engineer, instructor, and developer advocate. Ali learned how much a programmer’s portfolio mattered when she overhauled her own technical portfolio. The site experienced a huge uptick in views, and doors opened for new professional opportunities.
Read on to hear some practical tips about making an effective portfolio site.
The conversation below has been edited for length and content.
Table of Contents
1. The Value of a Technical Portfolio
Your technical portfolio is the one site that links to everything about your professional experience and background.
I like to think of it as the central hub for everything, kind of like a wheel. Your portfolio is the center. Everything else is a spoke that reaches out from there.
You can customize it however you want, expressing your personality and unique background. On a social media site, they control how that platform displays the information. On your portfolio, you have total control.
Searching for a new Job? Send us your resume.
2. Three Easy Steps to Get Started
Getting started on this process can sometimes be daunting. Here are my recommendations to kick off the process.
- Define your goal.
I would start by establishing your goal. Define what you’re trying to accomplish with your portfolio.
Whether it’s finding your first job or getting speaking engagements at conferences, you need to establish your reason for doing it. This will enable you to tailor the information on your portfolio to that purpose.
- Choose your content.
Once you’ve defined your portfolio’s goal, you have two options:
- Start with the content, such as writing your bio and then choosing the projects you want to feature
- Start with the design of the portfolio.
I’d recommend starting with the content first so you can later design the portfolio to feature that content.
Think about the things that would be important to feature in order to get to your goal.
For example, if you’re trying to get a job, your portfolio could include your LinkedIn, previous jobs, personal projects that you’ve worked on, and your educational background.
If you’re looking to become a speaker or educator, maybe it’s your bio, a description of what establishes you as an expert on certain topics, previous speaking engagements, or your podcast interviews.
I personally like to do a bio that links to other professional sites such as DEV, GitHub, Twitter, and LinkedIn. The bio can feature whatever you want to focus on, like work experience, personal background, blogs, and speaking engagements.
Then, you can pull in a few key projects. Focus on the ones that you really want to feature. Most people who view your portfolio won’t have time to look at twenty different projects. Make sure they can see the best ones up front.
- Create your design.
The next part is making your portfolio look the way you want. I would use a tool like Sketch or Adobe XD to mock something up. Check out other people’s sites to get inspiration. You can also look at Dribbble to see what’s going on there.
From a technical perspective, I would start with HTML and CSS, maybe some JavaScript if you need some interactivity. But I think this also depends on what your career path is and what type of job you’re looking for. For those with a design background, it will likely be more creative and interactive.
Generally speaking, keep it simple. I would say that a really bulky framework is probably overkill for a portfolio, unless you want your portfolio to be an example of your skills. In that case, your portfolio becomes a project in and of itself. You show your expertise for the language or framework by writing the code for your portfolio with that language.
For hosting, you can choose from free options such as Netlify and Github Pages. Those sites offer a URL, so viewers can visit your webpage.
3. How to Personalize Your Portfolio
It’s important to remember that you can tailor your portfolio to showcase your specific skills, experiences, and backgrounds.
If you’re looking for a frontend developer position, I’d recommend writing the code yourself.
If your specialty is backend development, database work, or writing scripts for computers, then HTML and CSS may not be your forte.
In that case, using an online template would be a great way to go instead of writing it from zero yourself. GitHub or Bootstrap have great example portfolios and templates. Even website builders like Squarespace or Webflow are good options, so you don’t have to write the code yourself.
4. Why GitHub is Your Friend
For those who don’t yet have a technical portfolio, I’d recommend maximizing GitHub to display your skills and projects.
There’s a lot you can do to customize your GitHub profile. To start, you can:
- Add a professional bio and contact information.
- Pin the repositories that you want people to look at when viewing your profile.
- Link between your LinkedIn and GitHub to maximize the two profiles. You can also use this opportunity to make sure your LinkedIn profile stands out as a software engineer.
5. How Backend Developers Can Make it Visual
Backend developers may find it more difficult to visually display their work.
If your code isn’t deployed or easy to click on, you can write a description of the project. You could even write an entire blog post on it. Explain why you built it, why you’re passionate about it, and what the challenges were. That way, the readers can get a representation of the project and its technical requirements. Plus, a written description shows you’re a great communicator.
Project descriptions will be more appealing to readers if you find a way to make them visual. You can include the icons of the different programming languages used to make code more visually appealing to non-technical readers.
On my own portfolio, I normally have a link to the deployed project, a link to the GitHub repo, and a link to the blog post describing the project.
