Building Your Portfolio
Your portfolio is a chance to show the world concrete examples of your work. What have you built? What are your creative superpowers?
An impressive portfolio provides hard evidence for the points in your resume, and can serve as a jumping off point for conversations in interviews.
A great portfolio requires that you've built interesting projects, and clear and well-designed presentation.
Portfolio Examples
Check out these examples of portfolio sites for a sense of what a great portfolio site can look like:
As you look, take note of what elements you'd like to incorporate into your own portfolio. Add your notes to the padlet below.
- https://lolaodelola.dev/
- https://afolabibakare.netlify.app/
- https://ezekielekunola.com/
- https://olaolu.dev/
- https://www.sarasoueidan.com/
- https://slim.computer/
- https://www.swyx.io/
- https://safiyaunoble.com/bio-cv/
- https://jacky.wtf/about
- https://www.tatianamac.com/about
- http://deniseyu.io/
For more, see this collection of developer portfolio sites.
Elements of an Effective Portfolio
Portfolio Checklist
On any portfolio, there are some features that need to be there:
✅ Your Name
✅ About you: A brief description of who you are and your photo
✅ Projects, with names, links, and descriptions. On many sites, these are shown as a grid of hoverable cards
✅ Links to social, LinkedIn, GitHub, blog, or anything else you want people to see
✅ How to get in touch
You should confirm that there are no errors:
- Check that your links work
- Check your spelling
- Check that the formatting and presentation look the way you intend
How to Build Your Portfolio
There are several options for building a portfolio. You should start by writing a Github Readme, then if you have time, add a personal site, potentially using a portfolio template or portfolio tool.
Github Readme
Github lets you create a Readme page for your profile, which serves as a mini-portfolio built into Github.
You can create a personal portfolio very quickly by writing a markdown file. It has the benefit of creating a landing page for your GitHub profile, which you can keep even if you end up building a separate personal site.
Github Readme Examples
See these examples of Github Readme portfolios:
- https://github.com/PluckyPrecious
- https://github.com/lauragift21
- https://github.com/lizheming
- https://github.com/mmphego
- https://github.com/stephenajulu
- https://github.com/Nanra
- https://github.com/garimasingh128
Here's a resource with more creative examples of Github profile Readmes.
Follow this tutorial on How to create a Github profile Readme or watch this alternative tutorial on Youtube
Personal Website
Once have completed your Github profile Readme, you can consider making a personal website.
Refer back to the web development fundamentals course for tips on how to design with HTML and CSS, and for how to purchase and configure a domain.
Content
A personal website should have all the content you included on your GitHub Readme: About you, links to projects, and links to social.
Some personal sites also host blogs, which can be great -- if you have content already. If you don't have a developer blog, you are encouraged to start one, but don't include the section on your portfolio site if you don't have any content yet!
Some personal sites also have interactive elements or more designs. You are welcome to add more to your site once you have the basics in place.
Design
Portfolio sites are often minimalist and beautiful. They don't need to have a lot of functionality.
Simple designs are often quite effective! You don't need lots of fancy JavaScript.
You might review the Web Foundations lessons on Web Design or look back at the PMD lesson on UI Design Basics for more on how to think about your design choices.
Domain
As you probably noticed, most of the personal sites used a custom domain! You can follow the content on Publishing to learn more about purchasing and deploying to a domain.
As a default, you can publish using Github pages, which comes with a free domain associated with your Github handle. (If you aren't happy about your Github username, you can change it in the settings panel).
Tip: Timebox
It's easy to spend tons of time on your portfolio! But you only have so many hours. One effective technique for managing time on projects like this is to timebox your work on your portfolio. Set a fixed amount of time to spend on your portfolio, and only spend that time!
It may help to list the most important things you need to do before you publish and share your portfolio, then get those things done (instead of sinking time into nice-to-have but ultimately unnecessary features).