Self-paced

Explore our extensive collection of courses designed to help you master various subjects and skills. Whether you're a beginner or an advanced learner, there's something here for everyone.

Bootcamp

Learn live

Join us for our free workshops, webinars, and other events to learn more about our programs and get started on your journey to becoming a developer.

Upcoming live events

Learning library

For all the self-taught geeks out there, here is our content library with most of the learning materials we have produced throughout the years.

It makes sense to start learning by reading and watching videos about fundamentals and how things work.

Search from all Lessons


LoginGet Started

Register to 4Geeks

← Back to Projects

Personal Portfolio with React

Difficulty

  • easy

Average duration

10 hrs

Technologies

Difficulty

  • easy

Average duration

10 hrs

Technologies

Personal Porfolio Roman

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.

Fernando Funez Personal Portfolio

Where do I start?

πŸ‘©β€πŸ”¬ Research

Let's start by doing some research; what portfolio do you like the most? Here are a few examples:

LinkDeveloperWhy we like it
https://www.fernandofunez.com/Fernando FunezVery simple and straighforward approach, it shows personality and its easy to browse.
https://www.my-resume.dev/Roman KhalnepesovMakes a great first impression without having complicated effects
https://mattfarley.ca/Matt FarleyOrganized 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.

πŸ’‘ 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 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 :)

Signup and get access to similar projects

We will use it to give you access to your account.
Already have an account? Login here.

By signing up, you agree to the Terms and conditions and Privacy policy.

Difficulty

  • easy

Average duration

10 hrs

Technologies

Difficulty

  • easy

Average duration

10 hrs

Technologies

Difficulty

  • easy

Average duration

10 hrs

Technologies

Difficulty

  • easy

Average duration

10 hrs

Technologies

Signup and get access to similar projects

We will use it to give you access to your account.
Already have an account? Login here.

By signing up, you agree to the Terms and conditions and Privacy policy.

Difficulty

  • easy

Average duration

10 hrs

Technologies

Difficulty

  • easy

Average duration

10 hrs

Technologies

Supplementary Material

In order to prepare better for completing this exercises, we suggest the following materials

Lesson

Creating React Components - Learn what is and how to create a react component

Lesson

Learn React Here : React Js Tutorial

Exercise

Learn React.js Tutorial and Interactive Exercises