Search for a command to run...
Based on the talk, "Building an effective developer portfolio", by Annie for Bootcamp Hashnode III
Ayu is a tech blogger, open source contributor & maintainer, and tech community enthusiast based in the Netherlands. She loves photography and iced coffee!
Great post Ayu Adiati those are some great tips. I am definitely planning on implementing animated SVG's into my next portfolio website.
Thank you, Andrew Baisden! Looking forward to your animated SVG! 😃
Thanks for writing a review of the talk in your own words, Ayu Adiati. It is very informative and interesting to read.
Hi friends 👋, I've been writing tech blog posts for a few years now. If you don't know me yet, English is my second language. My mother tongue is Indonesian, and I'm also surrounded by Dutch every da
I frequently receive messages from enthusiastic contributors who have completed 2 or 3 high-quality pull requests (PRs) in just 1 month. They’re proactive, their work is top-tier, and they’ve handled
A few months ago, I shared a story about building an automated open source portfolio using just my smartphone and an AI assistant while on vacation. My main goal was to stop the "spreadsheet struggle"
Recently, I read Bekah Hawrot Weigel’s blog post, "When 'Local' Went Global: The Pandemic Era of International Communities." As someone active in many online communities, I found it a bit sad, but I agree with her points and think they apply to open ...
Hacktoberfest is almost over. How has your contribution journey been so far? Are you confident about contributing to open source projects, or are you still struggling to find your way? If you're new to open source and still feel overwhelmed, that's c...
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.
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.
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!"
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.
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:
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.
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.
The contact section could make it easier for people to contact us. We can add our social media links here as well.
We can include our skills and tools that we use, also if we have any:
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.
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.
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.
