DEV Community

loading...
Cover image for React Portfolio Project

React Portfolio Project

Shaif Arfan
Web Dev | Content Creator
・2 min read

alt text

Watch On YouTube: Watch Now

Source Code: Github

Live Preview: Open Link

Coded by - shaif Arfan | web cifar


Project Details

A portfolio for a web designer. We used React js to make this portfolio. A clean design with full responsiveness. You will find this portfolio very professional. Also, we added smooth scroll in the portfolio which will make the scroll experience really elegant.

This is a beginner-friendly react js project. There will be a full free step-by-step tutorial on YouTube. This project is made for education purposes by the Team web cifar. We are going to learn so many things through this project especially how to work with React Js. React Js is one of the hottest techs for web dev. Through this project, we will have a good understanding of react js. Besides React js we are going to use many other techs. Also, there will be a full project tutorial playlist on YouTube so that you can get the step-by-step guide to make this portfolio.

Project Requirement

  1. HTML, CSS
  2. JavaScript
  3. React Basic (optional)

What we are going to Use/learn

  • React
  • React Hooks
  • Styled Components
  • Swiper js
  • React Transition Group
  • Smooth Scrollbar
  • React Icons
  • React Router Dom
  • More...

Starter Files

For the starter files, we created a branch in this repository named starter_files. You need to change the branch in the top corner of the repo then you will get the starter files and now you can clone the repo or download it.

Getting Started

The recommended way to get started with the project is Follow the YouTube tutorial. You will find all the step-by-step guides for free. Or you Can start the project on your own by following the guide below.

After getting the starter files, you need to go the file directory and run

npm install
Enter fullscreen mode Exit fullscreen mode

and after that start the live server.

npm start
Enter fullscreen mode Exit fullscreen mode

If you like the tutorial, please share this with others.

Discussion (5)

Collapse
przemek profile image
Przemyslaw Michalak

Hey. I've seen the playlist on YouTube with all videos you recorded to show how to create this portfolio. It is 12 videos with 30-60 minutes time. What do you think about small collaboration, and show to people how they can make the same portfolio in less than 60 minutes altogether? All in one video. All using HTML, CSS and plain JavaScript. As a result we get website scoring over 90% in lighthouse.

Collapse
shaifarfan08 profile image
Shaif Arfan Author

yes! why not. Let's do it.

Collapse
kr4idle profile image
Pete Steven • Edited

To speed up the process you can try Desech Studio to visually edit the html/css and then you can integrate with react. For more details check the github repo for the react plugin

Collapse
guscarpim profile image
Gustavo Scarpim

Very nice!

Collapse
veerreshr profile image
veerreshr

That's pretty nice website. But I'm facing a lot of stuttering while scrolling , fixing this will make this website even smoother.