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 lose 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 at any time, and 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: Your 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 it's 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:
- Avoid complicated effects using Javascript like Parallax or animations.
- Make sure they use little or no Javascript; the javascript part will be a lot harder to migrate to React; you can include animations later using React.js animation libraries like React Spring or Framer Motion later.
- Try picking a template that was built using Bootstrap, which will speed up your process a lot.
- One page scrollers are always a great idea to start.
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.
- Start by opening your chosen template locally or in gitpod.
- Remove anything you don't like about it.
- Visualize how your projects, bio, and information will look inside of it, you may have to change some things, but that is ok.
- Create a new empty React.js project and start migrating little by little, start by connecting the stylesheet and then grab each HTML Piece one by one: 4.1 The navbar 4.2 The footer 4.3 Jumbotron
- Make sure the CSS stylesheet it's properly connected and working.
- Make sure to rename all the
class=properties toclassName=, self close all the<img />tags and replace also the other HTML attributes that react doesn't like likehmltForor 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 portfolio and it will not be perfect, but it will push you in the right direction :)