How to Make An Awesome Portfolio Website with React in 2021?

The prerequisites for following this article is:

• React Fundamentals
• Firebase Basics
• Hooks In React
• Node Installed

To follow along, make sure you have already run the command npx create-react-app.

Now, the first step to get started is thinking what our design will look like. See the image below for reference of what our website will look like.

rivaanranawat.netlify.app

So, remove the existing code from App.js and App.css file and delete unnecessary files provided by React.

Copy the complete CSS of the whole site from below:

Create a folder in src named components. Add the following files to it with functional component setup:

• About.js
• Banner.js
• Blog.js
• Contact.js
• Home.js
• Nav.js
• Projects.js
• Skills.js

Continuing forward, we need to add Routing to our site. To Add Routes,

install react-router-dom using the command npm install react-router.

In App.js file, add the following code and make sure to import the components correctly:

<Router>        
<Switch>          
<Route exact path="/" component={Home} />          
<Route path="/projects" component={Projects} />          
<Route path="/skills" component={Skills} />          
<Route path="/about" component={About} />          
<Route path="/contact" component={Contact} />
<Route path="/blog" component={Blog} />        
</Switch>      
</Router>

What the above code snippet does is linking the components to the specified path meaning when you enter localhost:3000/projects, you should see a complete white screen.

Let us configure firebase now. Go to Firebase Console and click Add Project. Name the project with whatever name you like and press Continue.

Click on the web icon on the dashboard and name it whatever you want and click Register App. Next, copy the code snippet, firebase provides and create a folder in src named configs and then create a file named firebase.js and paste the code inside of it. Run the command npm install firebase and make sure to add these two lines on top of the file:

import firebase from "firebase/app";
import "firebase/firestore";

At the end of the file, add:

export const db = firebase.firestore();
export default firebase;

We will use the Cloud Firestore Database to store all of our data so that we can change the text presented on Website anytime. Click on Firestore and then agree to the rules and start in Test Mode. After that, go on to the rules and change the rules to allow read, write;

Fill the database with necessary info about yourself similar to manner of code we will follow ahead or for reference, check the image below.

Now, lets get onto the Home.js component which basically decides all the components that should be seen when we are on home page. So, we will use the following code to perform the task:

We are using the useState and useEffect Hooks here. To get all the text from the database of various pages here before the website builds, we are using the useEffect hook(Note: we have used [] as callback function as we only want to render it once i.e. before website builds). useState is used to set the names of the data we are getting.

Let’s go the Nav.js file and add the code below:

Here, we have added and linked the components with the Navbar list item so that we can scroll smoothly to the component linked to it when we click on it.

Let’s dive into Banner.js file:

Banner File acts as the main component of the home page and displays our name and the secondary text. It also adds nice icons we get from FaIcons which you must install as well from CMD / Terminal. We see animations because of classname and the css added in app.css.

We have completed the home page! Next part is to go to the About Page.

We again use the useEffect hook and repeat the same process done earlier in the Home.js file because if we enter the path of the file without entering the url, we will get an error as we have never got the data from the home screen as we never called the home screen. Example, if I directly call localhost:3000/about instead of calling localhost:3000 even once, We Will get the error of calling on undefined. Make sure to install React Reveal via CMD/Terminal as well!

PS: I have got the data from Database according to collections I have made. You can do the same or completely ignore Firebase if you want no backend.

Here, we are done with About.js file as well. Lets go to Skills.js Page!

We do the similar thing for this page as well! I don’t think there’s any need of explanation here.

Let’s get on to Projects.js file:

For Projects as well, I have stored the data in database. You can feel free to add Projects using GitHub API. I will highly recommend that. You can use axios to fetch the data and display it according to your preference. By default, you’l be shown 30 projects on 1 page. You can change that.

Lastly, we create Contact.js file:

Here, we are basically creating Contact Form and whatever data we receive is sent to Firestore Collection messages. We get an alert message depending upon the status. You can beautify even further by adding Modal Sheets or making it look more beautiful!

PS: I have stored data in Firebase as I have connected it to my App which can control text on site anytime anywhere. Definitely, this site can have more code improvements and more features to add, make sure to send a PR if you want to improve it!

GitHub: https://github.com/rivaanranawat/portfolio-website

Instagram: https://instagram.com/optimalcoding

So here, you have it, an awesome portfolio Website made with React. Thanks for scrolling through and reading this! Hope you found it helpful. Cheers!