Build And Deploy a Modern Personal Portfolio with ReactJS and Animations | ReactJS Tutorial

To try everything Brilliant has to offer—free—for a full 30 days, visit https://brilliant.org/PedroTech/ . You’ll also get 20% off an annual premium subscription.

Build the most beautiful personal portfolio you have ever seen with cool animations using ReactJS and Framer Motion.

⭐️ Check out My ReactJS Course: https://www.webdevultra.com/react

📖 Video Resources:
Code Repo: https://www.webdevultra.com/video-info/KSQOPRea-P4

💻 Check out my Blog: https://www.pedrotech.co
🐤 Follow me on Twitter: (https://twitter.com/pedrotech_)
📸 Follow me on Instagram: (https://www.instagram.com/pedro.fmachado_/)
🧳 Follow me on Linkedin: (https://www.linkedin.com/company/pedrotech)
👨‍💻 GitHub: https://github.com/machadop1407

📋 Business Email: pedro@pedrotech.co

Timestamps:
00:00 - Intro & What We’ll Build
00:38 - Brilliant Sponsorship Message
01:52 - Vite Project Setup (create-vite, install, run dev)
03:27 - Cleaning Boilerplate & Creating Component Structure
07:01 - Global CSS & Theme Variables
12:04 - Animated Navbar with Framer Motion
31:49 - Hero Section: Layout & Entrance Animation
40:49 - Hero Badge & Glitch Title Effect
45:26 - Call-to-Action Buttons
47:14 - Social Links (GitHub, LinkedIn, X)
55:12 - Embedding a Syntax-Highlighted Code Block
57:05 - Floating Card Animation
59:54 - Mobile-Responsive Tweaks for Hero Section
1:14:03 - Projects Section Grid Layout
1:18:20 - Adding & Populating Project Cards
1:25:40 - Hover & Glass Effects on Project Cards
1:36:04 - Building the Contact Section UI
1:42:45 - Styling the Form & Inputs
1:47:01 - Adding Glassy Hover Effects to the Submit Button
1:50:47 - Configuring EmailJS & Environment Variables
1:57:10 - Handling Input Change and Form Submission Logic
2:03:22 - Success / Error Messages & Testing
2:09:38 - Animated Footer Setup
2:13:02 - Deploying to Vercel

Видео Build And Deploy a Modern Personal Portfolio with ReactJS and Animations | ReactJS Tutorial канала PedroTech