Hello Fellow Codenewbies 👋,
What is a portfolio?
Do we need to have a portfolio as a developer?
We don't have to have a portfolio. But having a portfolio can make us stand out from those who don't have one.
What is a portfolio?
One definition of portfolio:
: a selection of a student's work (such as papers and tests) compiled over a period of time and used for assessing performance or progress
Merriam-Webster
A developer portfolio is a place to show projects, and to introduce ourselves.
Why do developers want to have a portfolio?
Get a job
We need to understand that portfolios are not resumes. They are a supplement to resumes. We use portfolios for recruiters to take a look at our projects.Build personal branding/online presence
A portfolio can show who we really are and what we care about. And by doing that, we are building our own personal brand.Fun!
We use our creativity and try out things to build a portfolio. What would be more fun than building something that lets us be who we are and in the end, we can present it to the world and say, "I built this, and this is me!"
What to include in the developer portfolio?
We need to bear in mind that non-technical people such as recruiters and hiring managers will also see our portfolio. Thus, first impressions count.
1. About
It is the most important section, but sometimes we don't take it seriously. About section is not the same as our bio.
The things to include here:
- WHO are we? WHAT matters to us? WHAT do we do? HOW do we do it?
- Our picture (or avatar) for people to recognize us.
I haven't done my portfolio. So this would be my homework 😅
But let me share here the rough draft of what I would do in this section.
2. Projects/Work
Be selective of which project(s) that we want to include here and think about quality over quantity. Don't forget to revisit and clean up our old projects to achieve good quality.
We'll want to show a range of skills, technologies, and variety. For example a CRUD app, or a Javascript game. Then link the live preview and the codebase.
Another homework for me to revisit my old projects and clean the code! 😆
Two projects that I've built with vanilla Javascript that I am proud of are:
Guess The Number
It is a game where users should guess a mystery number between 1 - 30 with some hints. This project is heavy with DOM manipulation.
Click here for the live preview and here for the code.Form With Animated SVG
When users click on an input field, it would trigger and animate the SVG. In this project, I played around with DOM Manipulation and animated CSS.
Click here for the live preview and here for the code.
3. Contact
The contact section could make it easier for people to contact us. We can add our social media links here as well.
4. Additional
We can include our skills and tools that we use, also if we have any:
- Blog and technical writing
- Talks and/or awards
- Clients testimonials
We would also want to showcase our other projects by linking our GitHub and/or Codepen.
So now we know what we need to create an effective portfolio, we can start to build one.
How to start building the portfolio?
Build it with whatever tech works for us.
We can use WordPress, or static sites such as Gatsby, Jekyll, or Eleventy. Or we can even build it with only HTML and CSS because, why not? 😄Don't be afraid to use templates.
Backend developers usually don't work with UI. Or, as a frontend developer, maybe designing is not our strength. In that case, don't spend so much time thinking about how to design the portfolio. Use a template and tweak it to make it our own.
Final Words
After knowing what it takes to create an efficient portfolio for developers, let's build it!
Thank you for reading!
Last but not least, you can find me on Twitter. Let's connect! 😊
Note:
This post is written based on Annie 🦄⚡'s talk, Building an effective developer portfolio.
Top comments (8)
I'm a back-end developer and trying my best to become a full-stack one. Currently learning CSS animation to improve my site: harshrathod.dev. I also have a blog: blog.harshrathod.dev. Please consider signing up for my newsletter if you liked my posts. The first ReactJS project I made while learning ReactJS: sortify.harshrathod.dev.
I wish you a nice journey towards full-stack developer, Harsh! 😃
I recently started working on mine :)
Nice! :)
Which tech do you use?
I am using ViteJS with VueJS for CSS it's TailwindCSS and GSAP for Animations.
Nice! I recently tried out ViteJS with React template and I love it! I'm still learning React, so I don't really need the complex bundles that come with CRA. The time difference between Vite & CRA for installation is very huge!
Would love to see your portfolio 😄
... Let’s build it and share it on Dev.to
That's a spirit! 😃