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