- Популярные видео
- Авто
- Видео-блоги
- ДТП, аварии
- Для маленьких
- Еда, напитки
- Животные
- Закон и право
- Знаменитости
- Игры
- Искусство
- Комедии
- Красота, мода
- Кулинария, рецепты
- Люди
- Мото
- Музыка
- Мультфильмы
- Наука, технологии
- Новости
- Образование
- Политика
- Праздники
- Приколы
- Природа
- Происшествия
- Путешествия
- Развлечения
- Ржач
- Семья
- Сериалы
- Спорт
- Стиль жизни
- ТВ передачи
- Танцы
- Технологии
- Товары
- Ужасы
- Фильмы
- Шоу-бизнес
- Юмор
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
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
javascript learn reactjs react tutorial reactjs reactjs beginner reactjs tutorial typescript react js crash course react js node js express js pedrotech traversy media traversymedia freecodecamp deved pedro tech javascript mastery javascriptmastery react portfolio react personal portfolio react framer motion framer motion tutorial react framer motion tutorial reactjs portfolio tutorial personal developer portfolio
Комментарии отсутствуют
Информация о видео
8 июля 2025 г. 18:00:42
02:16:24
Другие видео канала







![🚀 CryptoCurrency Web App [Part 2] - React JS Tutorial (Beginners) | Tutorial #17](https://i.ytimg.com/vi/gBF_7nCrWuQ/default.jpg)




![🚀 CryptoCurrency Web App [Part 1] - ReactJS Beginner Course | Tutorial #16](https://i.ytimg.com/vi/ZWyCflBbznY/default.jpg)



![Full Stack Web Development Course [7] | ReactJS, NodeJS, MySQL - Comment Section in React](https://i.ytimg.com/vi/2Xr-WddT3Lo/default.jpg)
![Full Stack Web Development Course [10] | ReactJS, NodeJS, MySQL - Auth in the Frontend](https://i.ytimg.com/vi/RnALCXo6U-k/default.jpg)
![ReactJS Course [13] - Typescript | React Type Safety](https://i.ytimg.com/vi/DhmPNpWPNSg/default.jpg)
![Full Stack Web Development Course [12] | ReactJS, NodeJS, MySQL - Liking System](https://i.ytimg.com/vi/gX3swJ1RHrs/default.jpg)
![ReactJS Course [9] - UseContext Hook | State Management](https://i.ytimg.com/vi/FzBGqvxdxv0/default.jpg)
![Form Validation - Full Stack Web Development Course [4] | ReactJS, NodeJS, MySQL](https://i.ytimg.com/vi/lxroBmTiOhI/default.jpg)