Build Responsive React Portfolio

Introduction

In this tutorial we will build a responsive Portfolio Project in React from scratch. This tutorial will teach you how you can develop your own modern 2023 ready personal portfolio website using reactjs, html & css.
The development process is simple and we won't do any API calls. Content/Text for this website will be hardcoded in your components.

Skills Graph

Personal Portfolio

To get started, open the editor. You can see the following files from your editor.

├── public
├── src
│   ├── components
│   ├── App.css
│   ├── App.js
│   ├── index.css
│   └── index.js
├── package-lock.json
└── package.json

Requirements

• To install the project dependencies, use the following command:

  npm i

• Please complete this challenge in the src/App.js file.

• The toggleVisible function is defined to check the scroll position and update the showBackToTopBtn state accordingly.

• The useEffect hook is used to add an event listener to the window's scroll event, which triggers the toggleVisible function.

• The scrollToTop function is defined to scroll the window to the top when the back-to-top button is clicked.

Example

Once you have completed the code, run it with the following command:

npm start

The finished result is as follows:

Summary

Congratulations! You have completed the Personal Portfolio. You can practice more challenge in LabEx to improve your skills.