🔥 Build a REACT JS Portfolio Website Using Tailwind CSS - Get Hired!
Вставка
- Опубліковано 6 жов 2024
- Build a React JS Portfolio Website using React & Tailwind CSS. I threw this together the other day and wanted to share it with you guys. Feel free to follow along and use this as your own portfolio website to get a job in tech or any other profession! Make sure you have some cool projects to throw in the "Work" section!
🔥🔥🔥
We will be starting off in VS code creating our React App, installing and configuring Tailwind CSS and then build out each component in the portfolio. We will be using getform.io for a functional form to submit messages with automation! How cool is that!? Hope you guys like it!
** If you want to build this as a multi-page app with react-router-dom instead of smooth-scroll you can see that here**
• Change The React JS Po...
ZeroTo Mastery:
Master React JS Course - bit.ly/Learn-R...
Complete Web Developer in 2023 - bit.ly/Complet...
Coding Challenges!
bit.ly/Code-Ch...
GitHub (Images located:: /src/assets)
github.com/fir...
Getform.io
getform.io/
☕ Buy me a Coffee ☕
www.buymeacoff...
Instagram 💪
/ fireclint
🔥 My Coding Equipment 🔥
Logitech MX Wireless Keyboard - amzn.to/3xKPFiN
Logitech MX Master 2S Wireless Mouse - amzn.to/3O5WmRD
SAMSUNG 49-Inch Gaming Monitor - amzn.to/3mvUy8M
Shure MV7 USB Podcast Microphone - amzn.to/3O00nqG
Mic Boom Arm - amzn.to/3NHn6YU
Monitor Desk Light Bar - amzn.to/3xzKlyj
A lil extra credit :D
For social media icons:
For the container:
- Remove "hidden lg:"
For the li className:
- Change the width parameter to "w-[80px] md:w-[142px] lg:w-[160px]"
- Change the height parameter to "h-[40px] lg:h-[60px]"
For the (e.g. ) icons add:
- className="mr-[-10px] lg:mr-0 duration-300"
This makes the icons hidden off the screen for small windows, then they slide into view as small icons for a medium screen, then grow smoothly to large icons for a large screen! Neat!
This is my first time hearing about tailwind css, and so far absolutely loving it. Nice one Clint your tut rocks.
Thank you so much dude!! That’s awesome! 🔥
"Boom, there we go!" Cheers for the epic video dude - Boom!
Haha!! Thanks man 💪
@@codecommerce Just finished this tutorial dude! Am going to use as my portfolio with tweaks. Have credited you in html code man :)
Best in the World 👌
Simple, Decent, Professional, Awesome 🔥🔥🔥
ur absolutely right we don't need fancy & animated portfolio 🙏
just 1 suggestion create playlist category wise.. u deserve millions of Subscriber & sure soon we will achieve ❤️😊
Thank you so much 😀 I will look into that. I'm still new to YT and learning all of their features!
Thanks a lot for this! The first tutorial that made me love React and Tailwind, keep up man ur work and the way u share ur knowledge are awesome :)
Thank you so much!
Thank you for doing this, i have been looking to update my portfolio and boom here you are , thank you very much
nice!
In the sea of React portfolio tutorials yours was by far the best and easiest to follow. Subscribed and looking forward to more content!
Thank you for the kind words man!
+1
The way you're teaching is excellent! Thank you for your time and effort !
You're very welcome!
Bro proper straightforward and clear! Nice work man you'll be at 30k+ subscribers this year for sure at this rate of teaching and quality
Thanks dude!
Thank you Clint for your help! Just finished my portfolio with your help and it's looking fire! I'm glad you didn't cut the video in anytime which makes us understand how a dev works, even when finding for little bugs that might show up. Thanks man, truly appreciated.
No other programmer has influenced me the way you have done, Clint. Thanks for being such a massive plus to my software development journey.
i don't know why but i'm feeling you came from a hard life and now building your life from 0. (like mostly us) maybe because of that you're really good teacher. Right know i'm trying to built my life from 0 for my kids. Thank you .
So good as usual React and TailwindCss are working so well. I really advice for all containers (NavBar, Main section....) to use a padding of minimum 2rem (px-8) and you can go easily to 4rem, because below the elements are so close to the borders, as a design point of view it's better and also for small devices where you have to press with your finger it can be not as easy as it should. It's only my personal advice, and this is what we see now on the websites. Really good job. Thanks
Thank you for the feedback Christophe!
@@codecommerce Hey Clint, I need some help. I can't manage to get the CV downloaded. I don't know why, but VS Code doesn't recognize the file, so I can't download it.
Hi Clint, I sincerely thank you for your kindness in sharing such nice projects with us. We love your work and the ideas that you constantly add to your projects. You are my go-to channel for React js/Tailwind CSS tutorials. I have learned a lot from you mate! Thank you so much.
Love you bro. This is the Best UA-cam Channel for learning react
Appreciate your time on this tutorial! I was looking for learning both CSS Tailwind and learning how to build a portfolio! Thanks so much!
Glad it was helpful!
You're the best! I just completed my very own portfolio following this video!
hey man, thank you for this video. Just want to let you know, its 1 year after your post, and its still helping people like me, keep it up.
hi Clint love from India i completed this and added Particle JS for background really thanks
at 12 minutes in, you already managed to make me wrap my head around adding icons...didn't know about react-icon and had a lot of troubles working with icons up until now...
I had this video pinned for a week and am soo eager to watch and replicate...
I'm already subscribing
A true professional tutorial. I used canva to create my own logo designs.
Canva is great. And tailwind is a game changer when it comes to writing styles. It’s so fast
This is amazing. Your teaching style is awesome. Learned a lot. Thank you so much for this. Keep uploading tutorials. 😊
This is TOP really! Helped me a lot to get to know Tailwind better. Above of all, you are a truly talented teacher. Everything so understandable, easy to follow, every minute well utilised, no redundant "noise" around the useful stuff. Professional, clean and elegant result. Thank you for this effort and definitely going to look at more of your materials. For me the best course so far - no kidding!
Wow, thank you so much! Just trying to share what I am learning. :)
@@codecommerce you are an awesome teacher men keep it up
Its help me to develop my portfolio, thankyou so much for these tutorial and keep doing and do lots of projects
Hi Tailor! I am from Belarus. I very apreciate you for such a content. Great job. Go ahead and good luck!
Chose this for my portfolio with some customizations of mine.
Nice little tricks and helps a lot .
Thanks boom Man.
discovered your channel a few days ago and I must say I'm really enjoying the content & the vibe you put out man ! Thank you 👏
Thanks dude!
my brother, truly going to become one of the most popular web-dev-youtube channels. mark my words.
Its really easy to use variables in tailwind bro, just go to config and do this
-----------------------------------
theme: {
extend: {
colors: {
bgcolor: '#0a192f',
},
},
},
--------------------------------
the best thing is that works with tailwing classes like "bg-bgcolor" instead of "bg-[#whatever]"
thanks so much 🔥🔥🔥
Thank you Oscar! That certainly seems a lot nicer way of doing things.
Hi Clint! i love your channel! great and easy portfolio for beginners like me, thank you so much, greetings from Argentina!!
Argentina dude that’s awesome! Thank you Rodrigo! 💪
Nice tutorial,
I is great for React practicing.
Personally, I would refactor parts of the codes, create reusable components and such
All I can say is AMAZING VID!!! I had zero knowledge about tailwind before this vid but you make it simple af! Thank you. Subcribed.
hi, this was awesome. thanks alot. your explanation made it so easily to understand. you just made coding look so easy and fun.
Thank you my friend
man...Thank you!
You earned a new sub. Love the react focus on your videos.
Don't take this the wrong way but you come across as an intelligent, techie no BS gym bro. Your explanations really make sense to me as a result.
Haaha thanks man! Thats funny 😂
You're so underrated sir, you deserve more recognition.
Thanks dude! Much appreciated!
Hey Clint! after watching this amazing video I realized you never linked anything to the View work button on the home page! I was wondering if you'd be able to show me how to link it to the work page using react scroll
Loved the tutorial learn react-scroll and getforms
Cool little effects! Also could just set scroll behavior in CSS :)
Took 2 days lol but I got this bad boy up and running. Now its time to try again and use what I learned to make mine my own. Appreciate the help! I feel like I learned a lot through out this!
Yeah Buddy!!! That’s what it’s about dude!
Hamburger is not showing
Can you anyone help
Hey mate another great tutorial. Keep it up, myself and so many others are learning alot from your teaching style!
Thank you! That’s so awesome!!
yeah his style is so cool, fast yet really clear....
Thank you Sooo much, I havent found a better teacher than you in all of my years of coding :)
Thanks dude! Much appreciated!
Excellent This literally landed me my first cyber security job!
Thank you very much for helping me improve my design skills. This video was very beneficial. Keep up the good work!
nice project. everything was explained smoothly and easily understandable. you earned one more subscriber :)
Thanks! This was incredibly helpful
Thank you so much dude! 🙏
This by way far , the best and well explained portfolio building tutorial ever.....Thanks Clint....You have my support for the channel
Much appreciated - that's awesome!!
@@codecommerce Any time Dude
This is by far the best concise portfolio website video under react i have ever seen. God bless you for putting in all these effort for us.
I'm trying to develop ideas about yours and use it to build mine and it's going well thanks soo much.
I really love your videos, you make all work out just perfect, almost without any errors (all fixeable). Please keep along with this kind of content. Awesome job sensei!
Thank you Leandro!
thank you sir, I was wondering around many portfolio website but you are the 1 stop solution, thanks for awesome and understandable explanation 🤝🙏
Cant wait to start making my own version of this. THANKS A MILLION it looks beautiful !!!
Thank you!
Pal, you have done a great job here. Well explained with emphasis. I thought Tailwind was another lang but you really simplified it. Perfect! Many thanks.
Glad you enjoyed it! Thank you!
Badass project watched from start to end 🔥🔥
very resourceful thanks clint, we'll be following again and again
your UI skills are amazing! love it
much love dude!
Another great project. I'm doing your projects one by one and I'm learning a lot of stuff. You're awesome man.
Thank you so much Mostafa! That is awesome 👏
Hey Clint! Thanks for sharing this awesome video. I had 0 knowledge of tailwind but your teaching while coding made it so clear for me.
Subscribed and definitely checking all of your videos.
Thank you Kevin. Tailwind is awesome.
Please, how do I add my completed portfolio codes to my existing website page? Again thanks for this awesome eye-opener tutorial. Cheers.
Amazing tutorial Sir. Keep it up.
I have subscribed and liked your videos for such amazing content.
You should deserve millions of subscribers 😉
Thank you man!
hey bro thank you so much for provide this video to us .after watching i fix same problem in my personal portfolio .Love from India thank you so much
"I think this is too many technologies for a portfolio"
I have 12 on my site and that was after cutting out eight to ten technologies that I'm constantly asked about by hiring teams.
Eight is nowhere near too many. That said, six to eight are plenty if you only work with that many relevant items.
Subscribed and liked! Thank you for the straight and simplistic tutorial. The other tutorials where so complicated and over the top for a portfolio. Thanks! hoping to see more video from you.
Amazing video! Helped me a lot getting things more clear with react! Have a great one and looking forward for more videos like this from you! BIG THUMBS UP!
Thank you Simon! That’s awesome
Hey could you please make a project on eCommerce with third-party api for data.
Thats a great idea man - I actually started off doing e-commerce dev. I was thinking about doing a custom Shopify store with React front-end!
@@codecommerce can't wait🙏🏼
The amount of good karma coming your way, mate 🙏
Great content as always. Very well explained and easy to follow.
Thank you, Clint!
Thank you so much dude! Much love!
Great work one of the best free tutorial on UA-cam thanks you sir 🏴☠️
Fantastic! Thanks so much, brother. This was my first time doing a code-a-long with TailwindCSS, and you made it easy to understand. 🧠
Thanks dude! Love tailwind- it’s so fast to write.
i just wanted to know that is post CSS working for you??
Bro this was so dope! You have a gift! Keep teaching!
Thank you so much dude!
Really good and responsive portfolio and every bit of code is well explained. Thanks Man.
Thank you!
i had some problems with the icons going over the text so i switched the icon sides to right side other than that a really good tutorial.
I must say this is one of the best video whats seems like a piece of cake .
Great Job and wait for many more !!!!!
Wow, thank you so much!
You my friend are a legend, thank you!
In this tutorial code, if you add for example 12 images in "WORKS" block, it will go outside the background at the bottom and overlap SKILLS block at the top, because of "h-screen" in the main DIV of this block.
It's better to use "h-fit" or "h-full" and make some vertical padding on this block.
Isn't it?
As I'm fixing this up yes. Also I changed it a bit so it uses React Router so I have multiple pages and the Nav covers some parts of the pages so I added padding to the top to fix that.
Thank you , keep up bro you are amazing!
Thanks, will do!
That is a real good follow through, tied everything that i was learning and showed me how to apply on my onw projects, thank you so much 💯
Thanks buddy!
What a professional tutorial.
You are AWESOME!
You’re awesome!! Thank you dude!
Thank you for this awesome video tutorial, I have been able to to build a new portfolio for myself with this. Thank you so much and keep up the good work.
That’s so awesome Francisca! Much love!
Thanks a lot for making this video and such a clean portfolio.
I'm gonna build my portfolio with the help of your video, you really explain simple and clear everything.
I liked the video and subscribed.☺
That’s so awesome Somaya! Share your finished portfolio!
Thank you for this awesome video, really learnt alot
Glad it was helpful!
Thanks for this video, super helpful and using it for my portfolio site. Just subscribed :)
Awesome dude!
Your work really helped me a lot thank you so much for these epic tutorials
Wonderful tutorial! Thank you!
Love this. Simple, elegant, and it leaves room your viewer to customize as they wish. Just subscribed to your channel.
Thank you Elias!
You have made the absolute best tutorial. Thanks.
Wow, thanks dude!
absolutely loved this video and learned a lot from this. kudos to you sir.
Thank you sir!
Excellent video, so clear and easy, congratulations for your job
Hi Clint, you are an amazing, thank so so much
At the end of the video where you said you wanted to do this Live but you dont have enough subscribers made me subscribe you lol. Thanks for the awesome video.
I don't know what made you give up your career in K1 and start coding but you're doing a great job, thx! :)))
Haha thanks!
I like your boom. When I say Boom, mostly its a compile error.
Most of my booms are errors 😂
It is a really nice work. Thanks a lot, I have learned a lot from you.
So AWESOME!!! Thank you thank you 👍
Thank you my friend!
Great video, very detailed. But earned the like when my man said "so Boom". He's speaking my language now lol
Thank you for this! Great tutorial and very helpful content.
Really appreciate the tutorial, it opened my eyes to react! I have a question about the button with the tailwind animation
Is it supposed to be functional? How do we make it lead to the work section once it's clicked?
You just caught something that I left out! Yes - to have "smooth scroll" you would import "Link" from react-scroll on the "Home" component. Then wrap the entire button with the "Link" element. Just like we did in the Navbar component. Hope that helps!
@@codecommerce Really appreciate the response! I totally forgot about importing Link from react-scroll lol
@@codecommerce you will have to add inline-block on the Link element or the whole length of the screen will activate the scroll, not only the button
thanks for the amazing video 💖
You are the best brother
Thanks my dude!
Nice content You do, bro! Thanx and best regards from Poland!
Thank you so much dude! All the way from Poland, that’s awesome!
Amazing video. So easy to follow! Thanks for putting this out for free.
Thanks Karan!
Thank you so so so much I learned a lot making this portfolio site and again thanks to you🔥🔥🔥
Thank you so much dude
Another great tutorial - learning alot thanks mate!
Thank you my friend!
Great job, good explanation, design is also pretty good. Thanks.
What a genius, thanks for sharing your knowledge, it helped me a lot💚
Thank you Elena!
It's hilarious that everything you import it's about to exlode bomm.. 🤣🤣🤣.. great work bro!.. good stuff.. keep'em coming!
BOOM! Haha thanks dude!