A Software Engineer’s Guide to Building a Technical Portfolio

Whether you’re new to tech or a seasoned developer, these technical portfolio tips will help you stand out. 

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. It brings questions like:

  • 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 software engineer and instructor at General Assembly’s Software Engineering Immersive.

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.

 

In your opinion, what is the value of a developer’s technical portfolio?

It’s 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.

 

For programmers creating a technical portfolio for the first time, how would you recommend they kick off the process?

  1. 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.

  1. 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.

  1. 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.

 

How can a technical portfolio be tailored to showcase a software engineer’s particular 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.

 

For those who don’t yet have a technical portfolio, how can GitHub be maximized to display their 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.

 

For backend developers, what are some ideas for visually displaying 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. Check out the projects featured on hatchpad to see how they use programming language icons 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.

 

 

For more advice from Ali Spittel and developers like her, don’t forget to subscribe to the hatchpad, or check out Ali’s other posts, such as her advice on salary negotiation for women in tech, or her thoughts on T-shaped skillsets.

INTERVIEWER: LAUREN ALEXANDER

Get insights when you need them

An original look at DC's high-growth startups, tech jobs, tech events, and more. Straight to your inbox.

Subscribe

* indicates required