Build And Deploy a Personal Portfolio with ReactJS and TailwindCSS | React Beginner Tutorial

Welcome to the ultimate ReactJS and TailwindCSS beginner portfolio tutorial. We will build a stunning portfolio that you can showcase all your projects. At the end, we will deploy this project so that your employers can see it live!

Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

🌟 Gear / Hardware I Use and Recommend 🌟
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Timestamp:
00:00 Project setup with Vite and dependencies
13:00 Creating animated loading screen
25:00 Building responsive navigation bar
43:00 Implementing home section with introduction
52:00 Developing about section with skills display
01:08:00 Creating projects showcase section
01:18:00 Building contact form component
01:35:00 Integrating EmailJS functionality
01:43:00 Setting up environment variables
01:45:00 Deploying to GitHub Pages

#reactjs #tailwindcss

[chetansahu]

This guy is a drug. I stumbled upon his video searching for nextjs content and found a goldmine. His explanation is too good. and explored other courses too. This guy is a gem to many people like me. Thanks buddy. Subscribed already.

[AZV-rn]

came here to setup tailwind with react and stayed bc of how good a teacher you are

[hassaanghauri]

I hope this message finds you well. I was going through your portfolio website and wanted to share a small observation regarding the contact section. It seems there might be a minor error in the class attribute value. Currently, it's set as:

px-4 w-150

To ensure everything displays correctly across all device sizes, you might want to update it to:

px-4 w-full md:w-150

This change should enhance the responsiveness of your website. I hope this feedback is helpful. Thank you for your fantastic content and all the hard work you put into it!

[cwbins]

Nice tutorial man, your channel is really a goldmine for react stuff! Simple, straightforward and direct teaching.

[kareem]

this is great tutorial! I made one change, which was just a personal preference. For the education and work component, I used the react vertical timeline component to separate that information from the about component. Other than, thank you for the work you put into this and teach this rookie how to build his first portfolio from scratch.

[nazgul]

Very impressive, I really enjoyed it (as usual lol)

I just finished making my portfolio, but I think I'll take a couple of interesting components into my project <3

[SDeneth]

You making every things easy to understand. Im from your full stack web dev course... so thaks a lot
You are a great teacher

[Raza-xrcv]

Thank you for the tutorial. It was really amazing. I learn both react as well as tailwindcss in a very easy way. I didn't get bored throughout the session.
I have a request for you, could you please make a video on responsiveness using tailwindcss in a react+vite project?

[bluehat-xvss]

Love your videos Pedro, I am learning so much from you thank you so much !

[MemiMemi-mw]

Amazing. I hope you create many projects and that by using the API we learn the correct way to connect because your explanation is very wonderful. And keep sending us any useful updates. Thank you.

[SimonBates-yd]

Awesome video! I just started learning React and Tailwindcss this week and this tutorial was very helpful.

[vctrrpl]

Your teaching style is great. Simple and straightforward. Hope to see more project tutorials from you!

[Maryg]

Love your videos always. You explain so well. I've learnt react concepts from you. Thank you Pedro.

[AhmadienHafizhYusufi]

Your teaching method is just the best.

[TewoldeMarie]

your tutorials are the best. I love the way you teach. please post daily vlog as developer...we will learn more from you.

[cljgreg]

"and people will fall for it" 55:40

[adityabagale]

Following the tutorial is good, I followed and made, I'm grateful, but this is all so overwhelming to me, how do I become capable of doing all this by myself!? 😥how long will it take to be able to do all this!?

[ChobacarsPortHarcourt]

The mobile menu that u said u will complete u didn't do it again, I mean when u click on the menu icon the the x one will be transparent and the other one will be showing on the background, u said u will go back to it later

[iNameless]

Hey Pedro great video. One question I did have is after moving variables to the env file and deploying the app to gh pages it seems that it breaks the ability to send emails. Was wondering how to go about fixing it.

[Bladebhaiislive]

Beautiful ❤️.. I Love the way you teach Sir.. so simple I got everything that you explain... thank you for this beautiful portfolio..