Build and Deploy Responsive React portfolio website | Framer Motion | Tailwind CSS

In this video, we will look at how to build a react portfolio site for software developers using tailwind CSS and framer motion library.

🔗 Links:

The website begins with a responsive navigation bar that is fixed at the top.
On smaller screens we'll have a mobile menu that toggles to display or hide the menu.
When clicked on the links you experience a smooth scrolling.
Next is the hero section that has a full screen background image and you also see name and description text overlayed on the image. FOr animation we will be using framer motion.
After this we have about section which will provide some information about the developer in large text followed by a paragraph.
Then we have the Projects section that showcases all the projects of the full stack developer, complete with image cards, project titles, and brief descriptions.
This is followed by the Skills section, which highlights the developer's expertise with icons, names, and years of experience for each skill.
Next is the achievement section that showcase a significant achievement of the developer. This section includes a video and a description of the award received.
After this we have testimonials section, which display positive feedbacks the developer as received. Each review contains a quote, the person's name, and their role.
Followed by contact section which uses emailjs to send emails.
Once you fill the form and click on send, it provides a notification that is implemented using react hot toast package. Plus, it will also send an email to the owner.
last is the footer section that contains the logo and social media links.
In the end we will also deploy the code using the vercel platform.

00:00:00 Introduction
00:02:06 Installation
00:04:57 Navbar
00:17:48 Hero
00:22:09 About
00:24:57 Projects
00:30:56 Skills
00:36:18 Award
00:42:33 Testimonials
00:48:49 Contact
01:10:13 Footer
01:15:21 Framer Motion
01:38:33 Deploy

#reactjs #reactjsproject #reactjstutorial #framermotion #tailwindcss #tailwind

[naylord]

Thank you very much for sharing!
This is extremely helpful

[viniciusm.m.]

Wow.
Abraço do Brasil!
God bless you!

[unknow]

@5:20 explain overflow-x-hidden and why have to use.

[ypgsfoo]

my navbar is not showing on the screen

[lastspoil]

What are the prerequisites for this tutorial? Basic React?

[aarinsheik]

18:34, remove 'relative' class and u can thank me later.

[rushikesh_x]

Hey where can i connect with you i'm getting some errors while deployment on vercel please can yoy help me out

[nadeemshariff]

I'm Not able to get the preview of navbar and have rendering error in constants index file where Fa icons are giving error