Personal Portfolio with React

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.

Objective

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.

But you don't have any projects

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.

Typical structure

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.

Where do I start?

👩‍🔬 Research

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

❔ Find your template

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:

1. Avoid complicated effects using Javascript like Parallax or animations.
2. 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.
3. Try picking a template that was built using Bootstrap, that will speed up your process a lot.
4. 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.

• https://templated.co/.
• https://rigorousthemes.com.

💡 Note: If you can't find anything you like you can start with any of these great templates:

• Freelancer by Start Bootstrap.
• Agency by Start Bootstrap

Or you can find more StartBootstrap templates here.

📝 Start coding

1. Start by opening your chosen template locally or in gitpod.
2. Remove anything you don't like about it.
3. Visualize how your projects, bio and information will look inside of it, you may have to change some things, that is ok.
4. 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
5. Make sure the CSS stylesheet it's properly connected and working.
6. Make sure to rename all the 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.

Feeling frustrated?

Ask for help! This is your first porfolio and it will not be perfect, but it will push you in the right direction :)