React JS Personal Portfolio Website | Beginner friendly tutorial

This tutorial is going to teach you how to build and design your own personal portfolio using one of the best JavaScript libraries, React JS.

This tutorial is also beginner friendly so if you have zero ideas about React, at the end of this tutorial, you would be able to build your own portfolio using React JS.

Build your next awesome project:

Copy Code / GitHub Repo with Assets (GREEN BUTTON ➡️ DOWNLOAD AS ZIP )

Deployed Website

Netlify

Chapters
00:00 What we are building / Finished portfolio website
01:23 Installing prerequisites
07:11 Setting up file structure
2:43:09 Deploying on Netlify

Full credit for the Figma design that inspired this Project goes to:

[cheerio]

Best tutorial yet for beginners for me at least Slow & Understandable.

[rohitnittala_]

The tutorial was good, but it would be helpful if you also explained the contact form and where the credentials go and get stored for beginners. But really helpful, thank you so much.

[ashgen]

Thank you,
and if possible can you please show a tutorial for small business using react and tailwind

[milkywaymontage]

Thank you so much for this project this help me alots .Love from Nepal

[miguelpinto]

Can you explain me the logic for the useEffect in the NavBar? 1. Why did you use the useEffect hook twice, couldn't you make a single function to use it once? 2. Also wanted to ask why if the width is <= 500 you added a Event Listener to to Rezise the window but if its <=1200 you close the Menu directly.

[jayshah]

Hi... Can you please help me in these? 1.) how to active Get in touch btn? 2.) When fill the contact form that time where data suppose to be submit and how to send/recieve email ? 3.)How to join github project link in portfolio?

[charlesegbe]

Hello Nice Craft on this one very superb, But Please the checkbox has this weird behaviour of sticky at the top when scroll on on desktop how do i fix that?

[kyureikim]

i have error in Testimonial, you write {Array.from({ length: 5 }, (review, index) => but review and index are never declare, so i have error here

[abhishekraghunath]

Thank you thankyu thankyou so much. You are amazing 🎉 thankyu tons and tons

[RAJ_K_]

Thank you so much for the tutorial. Could you let us know how do you make the "Contact me" form to a functional form from the dummy one?

[dessfse]

@howtobecomeadeveloper thank you. I have been planning to convert the one you did with vanilla JS into React. This is great!

[VishalChandraChapa]

Hi @howtobecomeadeveloper i got struck at 1:52:16 where you have replaced with different p after writing it by myself watching your code. in myPortfolio section the fields like front-end and back-end and all four were not displaying, can you please help me i have been trying from 20days

[jackywan]

I know nothing about React but I do want to learn this skill. Do I need to learn JavaScript before heading to this course?

[bananabaskets]

Unsure if I missed it throughout the tutorial, but how were you able to link the "Contact Me" info to send the message to your email?

[_abdulmahl]

Which link are we using to download the json and the public files?

[farazalam]

im having issue with importing footer to index file. how do i fix it?

[ritikverma]

Nice tutorial but can be much better with explanation of some concepts used in the project.

[richardstevenson]

Please, how do I put my projects website links in the portfolio section ?

[Guesswhoshaillina]

hey, you have used tailwing in your code right?
How do I setup , I coudlnt do it following the tailwind documentation

[aminekebouche]

Hellon nice video but I have a question about the responsive, I did'n find how to style the componentes to the mobile screen ( in which minute please)