Building Your JavaScript Portfolio - 17 Best Practices
Loading...
Loading...
Congratulations for completing this resource! Mark it as completed to track your progress.
So, you’ve learned how to code! 🔥
Maybe you’ve just completed a bootcamp or maybe you’re self-taught.
But one thing’s for sure, you’re ready to put your all into landing that developer role that you’ve worked so hard for!
Now, there are a few things that you’re going to need before you get started.
Namely, your and your
In this article, we’re going to focus on the second one - how you can build a stand-out JavaScript portfolio to show off all of your projects and everything you’re about!
Let’s get started.
Clarify how you’d like to represent yourself as a developer - are you or
Choose a title that best represents you and the role you’d like to be hired for.
In addition, think about what makes you stand out and highlight those skills in your JavaScript portfolio.
Are you a Frontend Developer who also has design skills?
Are you a Full-Stack Developer that specialises in API development?
Perhaps you’re a JavaScript Developer that has a flair for animations?
Highlighting what you’re good at or where you have specific skills can help you stand out to the right employer.
Decide who you are creating your JavaScript portfolio for.
Are you looking to showcase your skills to potential employers - or are you wanting to attract clients for freelance work?
Tailoring your portfolio to meet the needs and expectations of your target audience will help you to create it in a way that is engaging and impactful.
Your portfolio should give a brief but impactful overview of what you’re about.
It shouldn’t be too long or too short. You want to try and hit that ‘sweet spot’ where you give just enough information to pique the interest of the reader.
It is a good idea to include the following sections:
Your hero section is the first thing that employers will see when landing on your portfolio.
Why is this relevant? Well, it means that this section in particular has to have that ‘WOW’ factor.
It has been said that a recruiter may only spend around 5 to 10 seconds on each portfolio, so making sure that your hero section grabs attention is extremely important.
You also might want to add a little about yourself here - what time zone you might be available for work if you are looking for remote work and a short summary about you and what you offer.
In this section, you’ll also want to give your reader quick access to your resume.
Include a button for them to download your resume and another one where they can copy your email address to their clipboard to get in touch with you quickly and easily.
How can you make your projects stand out from others?
✅ First of all, it is a good idea to make a case-study page for each project.
On this page, you can include information such as:
You can also include screenshots and perhaps even a screenshot of your Asana board!
Including an Asana board can show employers that you understand your capabilities - that you are aware of how long it takes you to complete a particular task and that you are capable of working to deadlines.
✅ Consider adding Sentry to each project
Sentry can help you to make sure that your project is online and working correctly while you go about your job search.
The last thing you need is for the job of your dreams to come along, but you have several buttons that aren’t even working on your best project. Or perhaps the LIVE URL is broken altogether!
Try to pay attention to detail. Put yourself in the shoes of the employer. You only have a short time to make an impression!
Sentry can help with this.
✅ Make sure that the projects that you are adding are relevant.
Front-End Developer Portfolio: Showcase visually appealing and attractive web pages that demonstrate your ability to create functional and aesthetically pleasing designs.
✅ Make sure that you can explain your code!
If you have used tutorials to create your projects, try to rather create them on your own from scratch before adding them to your JavaScript portfolio.
You don’t want to be in an interview and not be able to explain the details of this magical project that’s in your portfolio!
✅ Try to get some users for your project or show some stats
Showcasing a project on your portfolio where you can show some stats like “This app has 45 users so far and the feedback has been positive.”, will help you to stand out!
Showing employers that the code that you wrote is actually being used can give you a huge advantage over other applicants.
Adding measurable outcomes - such as a surge in website traffic, enhanced user engagement metrics, notable cost reductions for clients and any other tangible achievements will demonstrate the effectiveness of your work.
✅ Don’t add too many projects.
Prioritize showcasing a few high-quality projects over a large number of mediocre ones.
✅ Every project should be mobile-responsive
This is extremely important. Test your projects on different devices. Don’t skip this!
✅ Include a README.md file
Every project should have a great README.md file explaining all about your project - what tech you’ve used, what features it has, some screenshots, etc.
✅ Accessibility matters!
Showing an employer that you’ve paid attention to detail by making sure that your projects are accessible to all users - according to web accessibility standards and guidelines - can give you an advantage over other applicants.
Add this to the main page, or add it to your navigation menu.
You might be wondering why this is needed?
Well, being able to communicate your thoughts when developing software is extremely important.
Writing some blog articles can help to show that you not only know how to code, but that you understand what you are coding - and that you can explain your thoughts to the team where needed.
Being a software developer isn’t only about coding - communication skills are just as important!
During your development studies, it is a good idea to be learning in public.
I cannot count how many people I know who have gotten great developer jobs just through sharing their daily progress of whatever they’re building on social media.
Another bonus is that often people will comment on what you’re doing.
You can screenshot these comments and add them to your JavaScript portfolio to help you to stand out.
You’ll want to include the fastest way for someone to get in touch with you.
Don’t just write your email address. This means that the employer has to copy it, open up their email, etc.
Rather include a contact form where they can message you directly.
You can use a library such as email.js for this - but whatever you use, make sure that it’s working!
As mentioned above, it’s also a good idea to include a button to copy your email address in your hero section.
Yes, animations are great for ‘wowing’ a potential employer. But only if they are flawless.
You don’t want an animation that causes the page to take too long to load, or that ends up blocking a section that it shouldn’t!
Page load speed is extremely important - use websites such as gtmetrix.com to test your page load speed.
Trust me, a recruiter isn’t going to hang around to wait for your page to load when he or she has 100 other applicants to get through!
Strive for clean and professional designs that highlight your work rather than overwhelming visitors.
As with your projects, your JavaScript portfolio should be mobile-responsive and follow accessibility standards and guidelines.
There is a high chance that a recruiter or employer is reviewing your portfolio on their mobile phone.
Avoid including links to personal social media accounts with inappropriate or irrelevant content. It’s often good to do a social media audit of yourself as well.
Type your name into Google and see what comes up.
Remove any material that might hamper an employer’s impression of you.
Especially if English is your second-language, it’s a good idea to run your portfolio through an app like Grammarly to double-check your grammar and spelling.
Having a number of grammatical or spelling errors might mean that your application gets overlooked by a busy recruiter.
It’s perfectly acceptable to grab a design from somewhere else and just code it yourself. Or just keep things very simple.
It’s better to have a portfolio that has a great user experience to show off who you are, than one where a recruiter clicks away immediately.
This is a step that many miss! Once you have completed your portfolio, don’t forget to drive traffic to it.
Optimize it for SEO, include it in your blog posts, share it often on social media, etc.
Things change pretty quickly in tech. review your portfolio every now and again to make sure that your projects are still relevant and that you’ve included your latest skills/achievements.
This important so you can gauge how your portfolio is being received by others.
Begin by sharing your projects with friends, mentors, or other developers in online communities.
Not all feedback you receive will be positive, but it is crucial to take it in stride and use it as an opportunity to improve. Constructive criticism can help you identify areas for growth.
When asking for feedback, make sure to ask specific questions to guide the conversation and focus on areas where you feel less confident.
Keep in mind, the goal is progress, not perfection.
This may seem like an unnecessary step, but your portfolio will come across as much more professional if you aren't using a random Vercel domain - such as 5finjess.vercel.com 😉
And there you have it, some tips to help you to create your stand-out JavaScript portfolio! 🎉
By implementing these strategies, you will have a much better chance of standing out in a competitive market and attract potential employers or clients!
Wishing you all the best in your job search!
PS If you're looking to code a professional portfolio site from scratch, click here and here!
PPS Get hired! Join the Dev Career Accelerator 🔥
Back-End Developer Portfolio: Highlight the logic behind your creations and provide explanations that are understandable to a non-technical audience. Annotate your code to help others understand how everything works.
Full-Stack Developer Portfolio: Incorporate elements from both front-end and back-end portfolios, showcasing a combination of attractive designs and logical implementations.