A portfolio isn’t optional.
A portfolio is necessary.
Many hiring managers won’t even consider an applicant who has no software engineer portfolio. Why? The applicant is making a baseless claim. By applying for a job with no qualifying proof that the applicant can carry out the position’s responsibilities, the applicant is essentially saying, “Yeah, I can do this! But I’m not going to prove it. You’ll just have to take my word for it.” That won’t work.
This guide discusses what a developer portfolio portfolio is, what to include, examples of projects, answers to commonly asked questions, and portfolios to take inspiration from.
What is a developer portfolio?
A developer portfolio is a collection of work that showcases your talent. It’s a reflection of who you are as a professional in the moment it’s created. Living and breathing, it grows as you do.
While applying and interviewing for a job are important, a portfolio gives an employer a chance to see your potential in action. Like a picture is worth a thousand words, a portfolio is worth a thousand job offers…if done right.
To state the obvious, a developer portfolio needs to contain projects that you’ve recently worked on to show your professional technical ability. That’s not all, though.
A portfolio should also show who you are. It’s a chance to put your personality on display and tell employers about yourself in a creative way.
When hiring a software engineer, employers aren’t only looking to understand your technical skills and experience. They’re looking to understand you and if you’ll be a good fit for their current team.
What goes in a portfolio?
As mentioned above, a web developer portfolio shows off your work and yourself. It’s proof that you’re capable, competent, and qualified for a job.
For a software engineer portfolio to be effective, it needs to include the right content. Don’t waste time over-complicating a portfolio by including unnecessary bells and whistles. Instead, focus on including polished projects that clearly demonstrate your programming skills. Below are the pieces that make up successful portfolios.
About Me Page
All web developer portfolios need to include a section or dedicated portfolio page. This doesn’t need to be wholly focused on you as a developer. This is an opportunity to show companies what your interests are outside of work, too.
Don’t forget to include a Contact section. It’s completely possible to be contacted by a hiring manager who came across your portfolio even if you haven’t formally applied for the position. Consider linking to your Github, LinkedIn, and Twitter, too.
Below are two great web developer portfolio examples of About Me pages, plus an example of a straightforward Contact section.
Pro Tip: For front-end developers, there's an opportunity here for you to showcase your skills by making your own portfolio and resume interactive. Consider what sort of slick UX you can come up with to allow users to quickly filter and navigate your skills and relevant work history.
Resume
Next up is the Resume section. Experienced web developers won’t be the only people reviewing your portfolio. Non-technical HR professionals will be vetting candidates, too. They’ll be looking for terms that match the job description’s responsibilities, so make sure it’s obvious that your skills match the listing.
An easy way to display this is by including your resume, or at the very least, an easily navigated list of technical skills and strengths. This doesn’t need to include every topic you’ve ever learned. It can be a focused list of skills that truthfully reflects your software engineering ability and speaks to the job expectations of the position you're pursuing.
Zonayed Ahmed’s portfolio links out to a PDF version of his resume, and while Iuri de Paula's does too, he also lists out his skills in the About section.
Pro Tip: Putting too many technologies on your resume might actually hurt you. Hiring managers who see someone with too many technologies will begin to wonder how diluted your skillset is. If you have worked with a lot of technologies in the past, focus on the ones you wish to work with and know the best, and consider leaving out the others. If you really want to list everything, then maybe try separating them into "Primary" and "Secondary" technologies that you are skilled in, so that hiring managers have a clear indication of what your top software engineer skills are.
Projects
Projects are the lifeblood of web developer portfolios. When deciding which projects should go in your portfolio, include work that you’re proud of and work that exhibits your prowess as a software engineer. These can be solo passion projects that show off independent work, or group projects that tell employers you work well on a team.
Remember to get creative when building your projects. Well done, creative projects make for a memorable software engineer portfolio. Even better, consider building something that you’re passionate about or that solves a problem for you or your community.
Need help deciding on which projects make up a great developer portfolio? Here’s a list of ideas to get you started.
Site Clone
A common project found in programmer portfolios are cloned sites. Cloning sites is a way to show that you’re proficient in HTML and CSS. If you choose to clone a popular site, add your own twist and improve on it by fixing a functionality or design flaw.
Be sure you’re able to explain in words your mindset around cloning the site, how you approached creating the clone, and any intentional changes you made. Employers are looking for a web developer that can both build sound products and communicate ideas. For example, check out this video on how to best go about cloning websites from CodeAcademy:
Incorporate Public APIs
Incorporate public APIs into your portfolio project to bootstrap your site together. Public APIs are incredibly useful for portfolio projects because public APIs allow you to integrate other programs’ data to your app or website, resulting in a fully functional project.
This is a great way to create real world projects with real world data instead of stagnant landing pages. For a collective list of public APIs, check out this repo. If you need help integrating your public API, check out this video from iEatWebsites!
CRUD
Creating a CRUD (Create, Read, Update, Delete) app for your portfolio shows you understand the essentials of app development. CRUD features are extremely common with e-commerce sites and dashboards – you don’t need to worry about building an entire e-commerce site, a basic to-do app or planner can achieve what you need. Proof that you understand how to manipulate data structures is the goal. Here’s a tutorial for a simple CRUD app to get you started.
Web Scraper
Web scraper projects automate collecting information from third-party websites. Web scraping shows skill in HTML, CSS, and python, and can be used for things like consumer research, SEO research, and competitor analysis. This list from Scraping Robot has great ideas for your next portfolio project.
Build a Portfolio Site
If you created the site you’re using to host your portfolio, you can include this as a project, too. Walk the reader through the process of how you built and designed your software engineer portfolio website, and underscore what you learned during this process. If you’ve made updates to your site over time, consider noting the changes you made as your skills developed.
With each project in your portfolio, it’s important to include a descriptor of what the project is. Bonus points if you also detail what you learned from the project. Providing a descriptor shows that you can communicate what your project’s purpose is and what it accomplishes – communication skills that employers love to see.
Portfolio FAQs
What if I don’t know how to design a site?
That’s okay! You don’t have to be a designer to create a beautiful software engineer portfolio. The most important thing about a portfolio is that it looks polished, not over-designed.
There are existing tools that can take your portfolio from plain to pretty in no time. Don’t shy away from using template sites for your portfolio. Using a template is a quick and easy way to set up an organized portfolio without the stress of building it from scratch.
If you plan on building a site with React JS to host your portfolio, look into styled components. They’re great tools to create an engaging site, especially for a web developer who isn't design-forward.
Pro Tip: If you aren't a front end developer, you can consider using CMS tools such as Wordpress or Webflow to build your portfolio. There are plenty of templates to choose from and no need to code your own site.
What If I don’t have professional experience?
An obstacle at the beginning of all career paths (and for those switching industries) is a lack of actual software development job experience.
You don’t need formal job experience to put together an effective programmer portfolio. You can absolutely include projects you’ve worked on during your education or personal projects you’ve completed in your free time. This counts as experience! If you’re applying for a junior dev position, employers expect to see projects from college, bootcamps, or personal pursuits.
Where should I host my portfolio?
Not sure where to host your online portfolio? There are plenty of options, both free and paid out there. CodeAcademy put together a list to help you narrow down your options.
Frontend Application Hosting
Backend Application Hosting
Can I just link to my Github?
Yes, you can direct hiring managers to your Github in place of a software developer portfolio, but only offering a Github link may hurt your chances of standing out to employers.
Whether you choose to use your Github as a portfolio or link to your Github from a portfolio, make sure that (1) your repositories are organized and readable and (2) your profile is memorable. Additionally, create clear and descriptive README files to give context to projects your sharing. Like stated above, this will help employers better understand your project and show you know how to communicate a projects’ purpose and goals.
This article by Astrodevil is a great example of ways you can make your Github profile standout. Check out the images below for inspiration!
Header & About Section
Graphs
Stats Cards
Icons & Badges
Codewars Badges
Codewars provides a real time updated badge image that can be embedded anywhere you want - including your Github profile or personal portfolio. Check out the "View Badges" button on your Codewars profile page.
Conclusion
Creating a developer portfolio is the best way to set yourself apart from other job candidates. A software engineer portfolio shows tangible proof that your hard work results in job-worthy projects. Without one, employers won’t be able to see your qualifications upfront – meaning you may get overlooked during the application process. When putting together your own web developer portfolio, remember to be authentic, show off your work, and put your best foot forward.
.png)
