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.
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 ❤️😊
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 🔥🔥🔥
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
@@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.
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.
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.
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
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!
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.
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!
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.
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
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!
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.
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!
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.
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.
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.
Hello! Thanks again for a great tutorial. I wanted to share another good way of solving the rotation inside the . To achieve the same results I added the following CSS rule in the global styles.css file. .button-animation:hover span { @apply rotate-90; } And added the className='button-animation' to the parent of the . Then added to both the button and the span className='duration-300' and voilà.
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.☺
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.
"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.
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.
quick question: in Navbar.js, about the social icons. in , ml-[-100px] hover:ml-[-10px], it says ''ml-[-100px]' applies the same CSS properties as 'ml-[-10px]'', the sliding effect didn't work... any ideas to solve this? thanks in advance
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!
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.
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 .
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!
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.
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.
Thank you for doing this, i have been looking to update my portfolio and boom here you are , thank you very much
nice!
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.
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
No other programmer has influenced me the way you have done, Clint. Thanks for being such a massive plus to my software development journey.
hi Clint love from India i completed this and added Particle JS for background really thanks
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.
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
Nice tutorial,
I is great for React practicing.
Personally, I would refactor parts of the codes, create reusable components and such
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!
You're the best! I just completed my very own portfolio following this video!
Love you bro. This is the Best UA-cam Channel for learning react
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
The way you're teaching is excellent! Thank you for your time and effort !
You're very welcome!
Hi Tailor! I am from Belarus. I very apreciate you for such a content. Great job. Go ahead and good luck!
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
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!
This is amazing. Your teaching style is awesome. Learned a lot. Thank you so much for this. Keep uploading tutorials. 😊
Its help me to develop my portfolio, thankyou so much for these tutorial and keep doing and do lots of projects
Chose this for my portfolio with some customizations of mine.
Nice little tricks and helps a lot .
Thanks boom Man.
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.
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!
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 😂
Excellent This literally landed me my first cyber security job!
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
Thank you Sooo much, I havent found a better teacher than you in all of my years of coding :)
Thanks dude! Much appreciated!
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.
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! 💪
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
nice project. everything was explained smoothly and easily understandable. you earned one more subscriber :)
You're so underrated sir, you deserve more recognition.
Thanks dude! Much appreciated!
very resourceful thanks clint, we'll be following again and again
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....
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
Thank you very much for helping me improve my design skills. This video was very beneficial. Keep up the good work!
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.
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!
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
thank you sir, I was wondering around many portfolio website but you are the 1 stop solution, thanks for awesome and understandable explanation 🤝🙏
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
Thanks! This was incredibly helpful
Thank you so much dude! 🙏
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 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.
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.
Cant wait to start making my own version of this. THANKS A MILLION it looks beautiful !!!
Thank you!
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!
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 👏
your UI skills are amazing! love it
much love dude!
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 💯
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!
Thanks for this video, super helpful and using it for my portfolio site. Just subscribed :)
Awesome dude!
Please, how do I add my completed portfolio codes to my existing website page? Again thanks for this awesome eye-opener tutorial. Cheers.
Wonderful tutorial! Thank you!
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!
Bro this was so dope! You have a gift! Keep teaching!
Thank you so much dude!
Your work really helped me a lot thank you so much for these epic tutorials
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!
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??
Excellent video, so clear and easy, congratulations for your job
Hello! Thanks again for a great tutorial.
I wanted to share another good way of solving the rotation inside the .
To achieve the same results I added the following CSS rule in the global styles.css file.
.button-animation:hover span {
@apply rotate-90;
}
And added the
className='button-animation'
to the parent of the . Then added to both the button and the span
className='duration-300'
and voilà.
Thank you Santiago! I was scratching my head there for a minute! Lol
Badass project watched from start to end 🔥🔥
Really good and responsive portfolio and every bit of code is well explained. Thanks Man.
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!
Thank you for this! Great tutorial and very helpful content.
Loved the tutorial learn react-scroll and getforms
Cool little effects! Also could just set scroll behavior in CSS :)
Thanks buddy!
What a professional tutorial.
You are AWESOME!
You’re awesome!! Thank you dude!
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!
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.
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
It is a really nice work. Thanks a lot, I have learned a lot from you.
Great work one of the best free tutorial on UA-cam thanks you sir 🏴☠️
Thank you , keep up bro you are amazing!
Thanks, will do!
absolutely loved this video and learned a lot from this. kudos to you sir.
Thank you sir!
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🙏🏼
"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.
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!
Great job, good explanation, design is also pretty good. Thanks.
ur a giga chad man ty for this !
Haha!
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!
You have made the absolute best tutorial. Thanks.
Wow, thanks dude!
Thank you for this awesome video, really learnt alot
Glad it was helpful!
Wonderful video, great instructions. Thank you for this. Subscribed.
Thank you!
I like your boom. When I say Boom, mostly its a compile error.
Most of my booms are errors 😂
Another great tutorial - learning alot thanks mate!
Thank you my friend!
Thank you so so so much I learned a lot making this portfolio site and again thanks to you🔥🔥🔥
Thank you so much dude
You my friend are a legend, thank you!
Thank you so much for this tutorial. Your explanations are wonderful.
Thank you fayehill!
quick question: in Navbar.js, about the social icons. in , ml-[-100px] hover:ml-[-10px], it says ''ml-[-100px]' applies the same CSS properties as 'ml-[-10px]'', the sliding effect didn't work... any ideas to solve this? thanks in advance
Amazing video. So easy to follow! Thanks for putting this out for free.
Thanks Karan!
Hi Clint, you are an amazing, thank so so much
Amazing!! Thank you.
Thank you for the tutorial, the explanation in this video is very clear and awesome
Subbed
Thank you so much!