Having a portfolio or personal website is an excellent tool for personal branding and your professional career. Still, it has a special meaning for software developers because it allows us to share your most valuable work in an organized matter.
A personal portfolio is like a resume (CV) on steroids; you can make it as interactive/cool/beautiful as you want, but don't loose focus on the main objective: Showcasing yourself, your professional accomplishments, and most important projects.
Quality is more important than quantity, especially since you are starting a new career and you don't have many projects to showcase.
A portfolio is a live website; you can change it any time, you have to plan for the future.
Don't worry about not having projects; you can start with one, and you'll grow from there. Everyone started from scratch! In a matter of months, you will have a couple of projects.
The following is the typical structure for a portfolio, but of course you can add other sections that you like:
Small bio about yourself: Find a short -not boring- way to talk about yourself: What makes you "you"? Any hobbies or passions? Try not to write more than 250 characters here.
Skills: Software development is a technical skillset; you need to specify your specialty areas like React, Javascript, HTML/CSS, Bootstrap, Python, Flask, Databases, etc. It's a good idea to specify your level of expertise on each of them (like a progress bar or a number from one to ten).
Projects: Each project must have a picture, a small description, a link to the live working website, and a link to the GitHub profile.
Contact section: You social media, email, and you can also include a small form using a service like Netlify, Foxyform, etc.
Let's start by doing some research; what portfolio do you like the most? Here are a few examples:
Link | Developer | Why we like it |
---|---|---|
https://www.fernandofunez.com/ | Fernando Funez | Very simple and straighforward approach, it shows personality and its easy to browse. |
https://www.my-resume.dev/ | Roman Khalnepesov | Makes a great first impression without having complicated effects |
https://mattfarley.ca/ | Matt Farley | Organized and clean, recruiters will love it |
You can look on the internet for free HTML/CSS templates, and you can adapt them to react very easy as long as they don't contain the following:
Here you have some websites with free templates to download, but nothing is better than a great google search about it.
π‘ Note: If you can't find anything you like you can start with any of these great templates:
Or you can find more StartBootstrap templates here.
class=
properties to className=
, self close all the <img />
tags and replace also the other HTML attributes that react doesn't like like hmltFor
or any other that you see on the inspector console as an error, you need a lot of patience for this, but it is possible if you do it little by little.Ask for help! This is your first porfolio and it will not be perfect, but it will push you in the right direction :)
In order to prepare better for completing this exercises, we suggest the following materials