Build a NEXT JS Portfolio Website With Tailwind CSS | Jr. Front-End Developer

Follow along as I Build a NEXT JS Portfolio Website With Tailwind CSS. I wanted to update the portfolio and since I am starting to learn Next JS I thought I would build the new version with Next JS using Tailwind CSS for the styling. Lots of really cool features in Next JS - most known for server side rending, lazy loading images, and a built in routing system. We won't be utilizing server side rending in this particular build, however we do incorporate lazy loading images as well as the built in router. (Just to be clear to take advantage of lazy loading you must use the "Image" component imported from next/image. Images used as "img" will not be lazy loaded. Thanks for following along!

ZeroTo Mastery:

Coding Challenges!

Github Repo:

🌇🍕▶️💻
Build Netflix With React JS/Tailwind/Firebase Auth/Database

Timestamps
0:00 - Intro
03:24 - Create Next App
08:02 - Install & configure Tailwind
10:12 - Global styles in Tailwind
17:28 - Navbar component
40:38 - Main component
50:40 - About component
57:08 - Skills component
01:05:36 - Projects component
01:20:06 - Contact component
01:52:59 - Smooth scrolling
01:58:32 - Create project page/route
02:25:54 - Dynamic styles on navbar based on route

Support my coding habit 🤣

Instagram 💪

🔥 My Coding Equipment 🔥

[itss_juno]

This was incredible! Loved the way you taught throughout the guide. You definitely deserve more attention if you're pumping out projects like this and more. Keep up the good work!

[sageosoro]

One thing I like about you and think makes you stand out is the fact that your videos short yet so informative and on point. Thank you for saving time. Your development speed is awesome

[StrawberryMoon]

Last week I completed your react & tailwind portfolio website and yesterday I completed your weather api project. Tbh, I didn't face any error while doing the project even I understand all the things. You kept it so simple! Now you dropped this bomb, A next js portfolio website with tailwind. Surely I will watch this video too cause I'm doing my projects with react, tailwind and next js. Thankyou so much for teaching us. Hope in future you will bring a full stack project with node, mongo, react/nextjs & tailwind as well as some api project.
Once again thank you!🥰

[shayanpayandeh]

45 mins left to finish the video, just want to say "AMAZING JOB" .

[trezentosfull]

28:45 We can access any folder in public just with /, in this case, to access the assets folder "/assets/Your-image"

[shirishasiri]

thankyou so much i did my portfolio i learnt a lot here

[dev-pszn]

Awesome video! The more I watch your videos, I can tell how passionate you're about your craft and how proud you're about yourself. Keep up the good work!

[upanisad]

This is the perfect video to learn Next.js. You are learning at the same time you are building the website. This is the quickest way to learn. I am so sick and tired of all the bloated tutorials that waste time. Thank so much.

[russelgarcia]

I enjoyed the tutorial and fastly got back on track with tailwindcss and learned reactlibrary combination with the nextjs framework. Thanks

[anhtungle]

unbelivable, not just tailwindcss but also everything I need for front-end job !!!

[chrisdavis]

Great stuff, Clint! 👌 I really enjoyed following along, thank you! 🤜🤛

[herrera]

This was by far the funniest I've had! Thank you for giving out instructions and what you were implementing! I know I'm late to the party, but I hope to watch more of your tutorials!

[williamlocke]

One thing I would recommend in the Skills component section is to make an object array with all of the image properties, then do a Array.map() of the parent and the children, using the index of the array as your key property. This is a more "React" way to do this instead of copy-pasting 8 different sections of HTML.

By the way thanks for this tutorial. I followed along but kinda went "off the trail" a bit to style it to my liking. Taught me a lot about how CSS works and how do build future portfolio websites. Really, this is a ton of value. You already know I smashed the like and hit subscribe!

[siriusly]

To get the hamburger menu to change color, add this to the icon:
<AiOutlineMenu size={25} fill={linkColor} />

[Dexquestd]

I'm so glad I found your tutorial, it covers the tech stack that I really wanted to practice, especially with regards to the fact that you used yarn. I don't think there are enough tutorials out there that use yarn instead of npm (knowing what the advantages are).

I'm diving right into this.

Thank you so much for this

[sleepcs]

hahaha cd /desktop/firebriley 😂 that cracked me up. Great vids man keep up the consistent uploads!

[amkamwebavenger]

This is by far the best Portfolio tutorial, styled with TailwindCSS that I've seen to date on YouTube. Please creator, permit me to use and reference this one, cause I really love it. I really like the way you use TailwindCSS, it's my best styling framework. Respect to you brother 👍 and Much love for your work. God bless you 🙏🙏🙏

[robertomattus]

Man youre the best, im learning tailwind watching your videos, thank you!!

[sayatemujin]

This is amazing, thank you so much. I learned tremendously from this video, the fact that you just show every step of the way is amazing. I hope to see more videos like this.

[geoffreymwangi]

Wow this is amazing just when i have started learning Next.js with tailwind and then you drop this..just great.. bring more next.js with tailwind videos..kudos👌👌