Build & Deploy React JS Portfolio Website

In this practical React JS project tutorial, we will learn step-by-step, how to create and deploy a fully responsive personal portfolio website from scratch!

By the end of this video, we will know how to create a React App from scratch, how to use Lexica.art to create amazing AI-generated art assets and Avatar from a reference picture, how to use react useState hooks, how to make a dynamic background, how to build modern website designs with CSS3, how to use ClassNames to create dynamic class names, and how to create a secure fully functional Direct form submission using EmailJS), and more!

0:00 Finished Portfolio | Tools we will use

1:07 Setting up our project | Installing extensions, React & NPM packages

9:52 Tour of the React Project Structure

18:40 Cleaning out the files

21:00 Creating the navigation menu | Nav.js

47:52 Creating the | App.js

53:08 Styling the navigation | nav.css

1:15:28 Creating the background video | Background.js

1:20:00 Styling the background | background.css

1:26:51 Creating the player stats | PlayerStats.js

1:32:00 Styling the player stats | playerStats.css

1:39:00 Creating the avatar | Avatar.js

1:51:00 Styling the avatar | avatar.css

1:59:38 Setting up our About data | subheadingsData.js

2:06:00 Creating our About page menu | AboutMenuItem.js

2:09:14 Creating our About page submenu | AboutSubheadings.js

2:13:23 Creating our About page | AboutMenu.js

2:31:05 Styling our About page | aboutMenu.css

2:50:49 Creating our Skills page | SkillsMenu.js

3:11:39 Styling our Skills menu | skillsMenu.css

3:26:29 Creating our Skills page data | projectsData.js

3:32:30 Creating our portfolio Projects page | ProjectsMenu.js

3:45:19 Styling our Projects page | projectsMenu.css

3:57:58 Creating our Contact form page | ContactMenu.js

4:29:24 Styling ourCcontact page | contact.css

4:40:58 Setting up our backend form service | EmailJS

4:42:42 Environmental variables | env.local file

4:47:39 Rendering an AI (Artificial Image) of ourselves using Lexica & Canva | Avatar.png

4:52:47 Creating a production build & Deploying our website using Netlify