React Portfolio Website Tutorial From Scratch - Build & Deploy React JS Portfolio Website
In this practical React JS project tutorial, I will teach you, step-by-step, how to create and deploy a fully responsive personal portfolio website from scratch! By the end of this video, you 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!
No prior React knowledge is required for this tutorial, as I will be explaining every step along the way.
Now Let's Build The Best React Personal Portfolio Website On YouTube!
Build your next awesome project:
https://www.tubebuddy.com/quicknav/la...
GitHub Repo: https://github.com/Ade-mir/react-port...
Deployed Website: https://react-ai-portfolio.netlify.app/
GitHub: https://github.com/
GitHub Desktop: https://desktop.github.com/
VSCode: https://code.visualstudio.com/
Node.js: https://nodejs.org/en
React: https://react.dev/
Canva: https://www.canva.com/
Lexica: https://lexica.art/
Chapters
0:00:00 - Finished Portfolio | Tools we will use
0:01:07 - Setting up our project | Installing extensions, React & NPM packages
0:09:52 - Tour of the React Project Structure
0:18:40 - Cleaning out the files
0:21:00 - Creating the navigation menu | Nav.js
0:47:52 - Creating the | App.js
0: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
