INTRODUCTION
Hello! First of all, I want to introduce myself with a quick introduction. I'm Flo, a french developer who wants to become a freelance dev react & digital nomad. You can follow my journey on Twitter. Actually, I am doing the #100DaysOfCode Challenge. This is my first article, I hope u will appreciate it.
WHY?
Always start with a why. it’s an important thing for a junior developer to create a portfolio. Like a store that presents its products in its window, the developer will highlight its skills, its projects, and what it can bring to its future team.
YOUR SKILLS
Before starting coding our portfolio, we will start by listing our skills. All skills, whether you are confident or only used once, should be added to this list. This will allow us to orient our portfolio according to your competencies. Rank your skills based on your confidence.
Here is mine :
React, Javascript, HTML, CSS, Firebase, NextJS, NodeJS, Gatsby, Wordpress
LIST ALL OF YOUR PROJECTS
Now that you know where you are the most confident, you can start to list all projects you made with. Do not worry, if you have no projects to add to your portfolio yet. I will give you, at the end of this article, some projects that you can code and add to your portfolio.
Upload all your project on your github and make a readme for each project with a picture and a quick description of it.
TIPS: You should not add a project like TodoList in your portfolio or a project that you made from a tutorial except if you added your own features on it.
START CODING
Now that we have our most confident skills & projects, we can start building our portfolio. You can choose the language that you want. A language that you know or learn a new framework like NextJS or Gatsby if you are a react developer.
As a developer, we can struggle at design. Keep it simple. We don’t need a fancy design. In the beginning, your website only needs to work without bug, be fast and responsive. You can find inspiration on Dribbble
Here is an example of the different sections that you can add :
- A hero page with a title that presents you and your activity with a navigation bar and a call to action to your contact form.
Call to action is important. As said before, our portfolio is our showcase and the goal is that people contact us, so it is important to have call to action at strategic places on our site
The About section, present yourself. Who you are, what you doing, your singularity. You can write a few lines about your vision of being a developer.
The Experiences section, as junior developers, we may don’t have any experiences yet. In this case, don't use this section and start to work harder on your personals projects to grow your portfolio. Add this section only if you have interesting experiences to show.
The Skills section, use the paper that we made before and list all of them in this section.
TIPS: it’s very important and it’s a common error. PLEASE DO NOT USE PROGRESS BAR. They don’t show our real skills and mean nothing.
- The Works section, take all your projects that we put on Github previously. Build a simple layout, a description, a picture, and links to your projects.
TIPS: Put your project online, you can use Netifly ou Heroku as a free platform. Don't show a project with a bug
- The Contact section, probably the most important section. The one that will allow us to contact you. Make sure everything works perfectly, it will be a shame that after all his efforts, an email from a recruiter gets lost in the wild.
DEPLOY YOUR WEBSITE
Start by buying a domain. it’s a good investment. It's not very expensive and it will represent your website.
There is a platform that affords you a free plan to upload your project, like Netlify or Heroku, I recommend using one of them.
Here is, you finished your first portfolio. You may not be entirely satisfied with the result. You'll probably laugh about it in a few years when your career and skills will have evolved. Finish it and put it online. I can assure you that you won't regret it, whether you followed this tutorial or not. Keep working hard on your projects and your dreams and the rest will follow!
PROJECTS YOU CAN BUILD
Create a landing page, responsive and optimized SEO
Clone a website (Instagram, Netflix, or whatever website you like)
Code a website using a store (Redux), a shopping website for example
The funniest and the best way is to build your own side project