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

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

📖 Video Resources

Timestamps:
00:00 | Introduction and Project Setup
03:30 | TailwindCSS Setup and Theme Customization
32:30 | Theme Toggle and Background Effects
56:30 | Building the Navbar
1:18:00 | Hero Section Implementation
1:28:30 | About Me Section
1:40:45 | Skills Section
1:56:00 | Projects Section
2:10:00 | Contact Section
2:36:00 | Footer, Final Review, and Deployment

[PedroTechnologies]

Use the code EARLY100 to get 20% off if you are one of the first 100 people :)

[wearestormz]

Hey Pedro, I am your student on your full react course. I just wanna thank you for creating those videos. Because of your videos I am now a graduating student and currently employed at a startup company. I just wanna say thank you so much man for these type of videos. You help a lot of people like me who are clueless on where to start learning. Thank you so much Pedro!!

[pengooo]

I've been learning react and nodejs for the past 3 months and I gotta say your vids helped alot man. Thanks for the making these videos.

[omeryasin]

Thank you pedro. I really need a protofolio and this just came in time. Just lemme finish the 5 projects in my hand and I'll do it

[FullStackVet]

Fantastic tutorial. I've been uncomfortable with doing a lot in the custom tailwind world and this really helped my better grasp the setup and implementation of it. Appreciate the great explanations along the way. Cheers.

[shriner]

I think it's now considered best practice to use min-h-dvh to better handle layout variations across different devices. 14:15

[devmanus]

simple but great professional looking...when i look at the portfolio it doesnt feel ovredone with many animations and all thank you for this video

[nupecartoontv]

You are a lifesaver, and I really enjoyed learning through your videos. However, I have a suggestion, there’s no theme toggle button on the mobile view

[Miguelv]

thank you so much for the tutorial, i suggest to use the toastify library instead of the one that you used. Is more simple to config ans save a lot of time, also is really simple to configurate with the themes that we are using

[jonathanpark]

I like the Lucide react - recently got to know. Also would love to see your video session on using shadcn as well! Thanks for the vid!

[josealfredoarevalomoreno]

Hi Pedro. I'm here again. I'm very excited to be able to finish this new tutorial.

[jeffersonrizzetto]

Thank you for the classes! I've really learned a lot from you. Great project!

[samriddhadewan]

thanks a lot, this is my first portfolio website, applied the form submission feature with web3form! thanks Pedro!💗

[appmake]

I am Subscribed to this channel, and have benefited a lot from your content. Thank you very much. My question is: whats the point of making a portfolio website in ONLY react without ssr?

[customname]

Hey
There's a bit of an issue with the Tailwind v4 @apply that wasn't addressed, since it's not recognized under utility
can you explain how you solved it, or pin the answer seems a lot of people experienced that too

[videosurferx]

you see when adding animation to the user interacts very well even the viewer, I like you to do a project about global news and use GSAP scroll animation effect. Because in fact now simple front-end projects AI can do very logically... and the trend of creating no code websites today is to use Animation GSAP plugins, Framer Motion... interacting with users in every project and their topics are really great! so hopefully the next topic will increase its complexity. Thanks for the great video!

[vokery]

Nice project. I think the contact section could use a bit of further polish, but apart from that it looks great. Learned a lot from this!

[edehchinedu]

Tailwind css have a toggle dark mode function.

Like dark:bg-black
Check it out tho.
I have used it in Tailwind v3


That's for ur videos it have been helpful.

But let start building with typescript.

And also a video on how to use custom components, hooks

[lrangerpt]

Big thank you from Portugal. One question... why are you using those "old school" media queries instead of just using tailwind lg:max-w and xl:max-w etc to define the same thing?

[pragmaticcoder]

Hi Pedro, I've been coding this since 3 days and I am halfway through. I am really having difficulty with the CSS stuff. Do you recommend any beginners course that I can follow in order to have basic understanding of CSS that you used to code this portfolio site? Many thanks!