Your technical portfolio is a key element in your search for a job as an engineer or developer. It’s an opportunity to showcase your skills through the projects you’ve worked on and shows prospective employers just what you’re capable of.
Whether you’re looking for a job in front-end or back-end development, or creating a full-stack developer technical portfolio, your portfolio should illustrate your interests and best abilities. It should be easy to read and navigate, and provide access to your launched projects. It should also allow a viewer to get familiar with your background and experience, including your tech stack.
In this article, we’ll dive into the essential ingredients for a good developer’s technical portfolio, including whether to use a template or build your portfolio from scratch, what to include in your bio, what types of projects to include, and more.
Building your portfolio website
Template vs. from scratch: How to decide
If you have the time, consider building your portfolio from scratch. Not only will this give you some real-world practice, but it'll also help you show off your technical skills. Watch the video below for a step-by-step breakdown of how to build a technical portfolio with HTML and CSS.
Or you could choose to go with a template. HTML5 UP and Template.net are great sites to obtain portfolio templates. You can download the code and edit or refactor it to suit you, your identity, and achievements. Note that if you are using one of these templates, you may have to give credit to the site and the creator in the footer of the portfolio.
The difference between template sites like HTML5 UP, versus other sites for pre-made portfolios, is that it is code based and not a drag and drop platform. You still have to use and edit code, which as a developer, is a good thing. Never use a drag and drop site for a technical portfolio, it is counterproductive and could hamper your chance of success.
Your domain name
Once you have polished the portfolio for how you’d like it to look for future employers, find and purchase a domain name. Your domain name should be the name you use on your resume, followed by a .dev, .me, or .com extension.
Some important links to include in your portfolio are appropriate social media accounts, such as LinkedIn and Twitter. Twitter has a large developer community so it is a great platform to build a network and stay up to date with industry happenings. It should be used as a tool for positive growth, so post mindfully and intentionally — your future employer is watching.
Other links include your github, which should display the projects you are proud of, and your resume. You can link a PDF version of it in your portfolio. Finally, a link to your email for a recruiter or hiring manager to contact you.
Navigating your portfolio
Include a sticky navigation bar on your site where a viewer can easily navigate to your “About,” “Projects,” “Other Contributions,” and “Contact” sections. A sticky navbar sticks to the top of the page across all links, no matter how far you scroll down the page.
Your bio: What to include
Your short biography should be in the “About” section of the portfolio. It should illustrate your past, present, and future aspirations. Tell a story about how you got into tech, what you are working on now, and what roles you are trying to land, in a positive light. Write about your current tech stack, and what technologies you are learning.
Projects: What to showcase
There several projects you want to showcase in your portfolio, including open source, individual, group, clone, and vertical.
There is a wealth of open source contributing opportunities you can find online. You can contribute to anything from Firefox to npm, or join a hackathon to pick a lesser known project of your choosing.
Whether you are into gaming or climate tech, your individual project can be something that illustrates your personality or interests.
If you were fortunate enough to have worked in a cross-functional team with a successfully launched project, this project needs to be in your portfolio. Developing is very much a group effort, and employers are going to want to see that you have experience working on a project with different developers. If there was a stakeholder or client for this project, even better.
If you have a particular company in mind you would love to work for, clone their site! This is a super impressive way to get the hiring manager’s attention.
There are many vertices in software engineering, from testing to accessibility. If there is something that interests you, or that you excel at, build a project out of this skill. Verticals are also a good pairing to general software engineering roles for startups where employees need to wear multiple hats.
Below the link to your launched project, there should be a description explaining what the project is about. This can be two to three bullet points. The tech stack used on the project should be the first, followed by the product description. What problem does the product solve or what does this project do? You should also name two features you solely contributed to the project. Focus on “I” statements rather than “we.” The company isn’t looking to hire the team, they are looking to hire you. There should also be a github repo link to all the projects in your portfolio.
You can find other ideas on specific language projects on the Career Karma site for:
There are many other contributions you can share that will make you stand out. Technical writing is a highly in-demand skill, and you can show off your technical writing skills in other places other than in the Readmes or API docs. Medium and Dev.to are great places to contribute what you’ve learned or what you’d like to teach.
Other things to include in the “Other Contributions” section of your programming portfolio are package creations you may have created or video tutorials you may have done.
If you're just getting started on your journey to becoming a web developer, Codecademy's Career Paths can help get you there. Career Paths include a variety of Portfolio Projects that you can build and use in your job search. Find out more and start your journey here.