Build and Deploy a Responsive Personal Portfolio Website Using Next.js 13, Tailwind CSS and Vercel

[@MonstersofFuture]

Why this channel got only 650 sub , it deserves more.

[@BrewskaySA]

Hosna your amazing, this is my first ever watch of one of your videos and I thought it was amazing!

[@hqasmei]

Thank you, I appreciate it ☺

[@Saasdapps]

This video is a big recommendation for anyone that’s learning tailwind css. You’re amazing Hosna❤

[@metaeducation6813]

Hey, a quick suggestion, please explain each step you're doing briefly, so that if some beginner is seeing this, they'll fully take advantage of video, like explain tailwindcss classes, what each does, rest each and everything is super amazing with your video

[@HassanElMghari]

Dang, you're on fire lately with these tutorials! Great work!

[@hqasmei]

Thanks Hassan 😁!

[@dariaradu7905]

Great tutorial! It was great to quickly have a portfolio tutorial especially as someone who is not new to JS/React (but new to Next) - thank you!

[@hqasmei]

Happy to hear!

[@GregPeters1]

I like your teaching style, very organized.

[@over1498]

This is awesome and you really cornered the market with a quick tutorial that is not just ripped off from Next, or having some subscription service tied to it. Just practical knowledge😀

[@sobi-94]

You're brilliant Hosna! I think you're innately gifted at teaching I think. I really liked how you broke down everything and how you structured your explanations. Sending love and duas from the UK.

[@AhmadHassan-hb3lb]

This channel is a wild fire 🔥

[@EllisEnobun]

This is .... I am short of words to express how AMAZING!!! You made this look sooooooo easy! THANK YOU. I subscribed! please do more videos like this. Your channel will definitely grow.

[@girlsforstemusa970]

Very smart and knowledgeable!

[@brendanmilton5025]

Great tutorial Honsa! Thank you so so much for the help. I had a little Vercel deployment issue so just sharing that for me it worked with "@types/react": "18.2.25", in package.json both dependencies and devDependencies. Then npm install and deploy. FYI - Vercel deployment error: Overload 1 of 2, '(props: LinkProps | Readonly): Link', gave the following error. Type 'Element' is not assignable to type 'ReactNode'. Overload 2 of 2, '(props: LinkProps, context: any): Link', gave the following error. Type 'Element' is not assignable to type 'ReactNode'.

[@hqasmei]

Hi @brendanmilton5025, thanks for sharing that. Yeah, since I created that portfolio Vercel and Next.js has gotten a lot of updates 😅 I created this branch to hopefully solve the issue with updates, github.com/hqasmei/tailwindcss-and-nextjs-portfolio/tree/next14-portfolio.

[@FoodReviewerByNusrat]

New sub! This is great content! Thank you for the tutorial

[@jezza9774]

New sub! This is great content! Thank you for the tutorial. I’m about to graduate from my coding bootcamp and have been messing around with multiple frameworks for my portfolio and I really like next js. Tailwind is a huge plus! Have a great day!

[@richardmpofu7729]

Best of the best pliz give us more!!!!!!!!!!!

[@SuperArnie1974]

Also thanks for the turtorial have learnt bag loads so thank yo.

[@johnmason4264]

Great videos, and amazing content. Thank you for sharing your knowledge

[@Jafar801]

Hey Hasna, I’m planning to add a blog nav item that opens in a new page when clicked. Could you help me with how to handle this?

[@girlsforstemusa970]

Thank you for the great work for sharing!

[@Salah-YT]

this looks like a nice project so I did SUB and liked for u so ill follow this project soon thank u

[@amit_c]

Thank you so much Hosna for making this really simple video on NextJs and tailwind css, I can't emphasize more on how easy and smooth journey you made with your video for people like me who are new to coding which clearly shows your mastery over the subject. I usually don't comment much on YT videos but after watching your complete video I felt that atleast I should thank you for helping me who are new to coding. once a again a big thank you for your efforts and video. Love and respect from India.

[@hqasmei]

Thank you for those kind word. Glad it was helpful :)

[@KeKuHauPiOx]

The guide was decent overall. Luckily I had previous experience with Next JS cause it got confusing with lack of explanation on some things. Keep it up - you provide great content!

[@drianeperez2906]

Amazing video was trying to find a tutorial of add dark mode and light mode using tailwind and finally found it. I have a question though you are using use client in the main page isn't that causing any problems when trying to use server components?

[@hqasmei]

It does give some problems, in terms of late loading latency, but looking into using SWR way.

[@isuchanz]

Good tutorial so far. But can you please explain what is the purpose of "use client" line of code on the top of the HeroSection component?

[@hqasmei]

In Next.js 13, a component becomes a Client Component when using the "use client" directive at the top of the file (before any imports). Here’s the documentation that explains it beta.nextjs.org/docs/rendering/server-and-client-components

[@goldenknowledge5914]

Great Video Hosna! I'm not sure if it's just me, but I'd really appreciate if you can record in 1080p or higher, since the texts seem a bit blurry for me and i'm having a hard time following along. Keep up the good work!

[@hqasmei]

Yes, will make sure the quality is better in future videos.

[@zoki5388]

It would be great if you could cover nextjs dynamic navigation.

[@hqasmei]

You got it! Coming soon

[@user-dg8ys]

thankssssssssssssss!

[@vasylms2459]

could you explain how to use metadata inside layout in next.j13? because it doesn't work with 'use client'

[@rebeccaindy]

I started this project 9 months ago, and I'm picking it back up this week. I previously got all the way to having a cloned version (with rough new design) setup on Vercel and able to be deployed. Now I just need to reacclimate myself to the whole project and then finish up design and content. Any things to keep in mind, anything that has been updated or needs to be updated? Thanks!

[@shivaskanthan6144]

Nice video!

[@raphauy]

Thank you Hosna!

[@moseska9050]

thanks this is great

[@LisandroPradaToledo]

Hi, nice work! I wonder how to solve useTheme() => theme=undefined. Causing relaod page to brake theme. Thanks!

[@giovankabisano2266]

You need to explain why your project structure is different with the standart of Next JS 13. I use the standart framework and it doesn't have `app` project structure. Are there any particular reason why you create that `app` folder?

[@hqasmei]

Hi @giovankabisano2266, the app directory is currently experimental in Next.js 13. I made the video because there aren't many videos using this directory yet. Here is more information if you would like to know more about it. I'm still learning about it as well. beta.nextjs.org/docs/app-directory-roadmap

[@zuschauer5]

This is a great tutorial, thank you so much! How would you recommend adding an extra page for a project that is not deployed elsewhere? So instead of linking to the external project, I'd like to link to a new page within my portfolio, that contains some information about the project. I have added a file within the pages directory, which seems to work with routing, but the Tailwind CSS is not applying to it...

[@hqasmei]

For routing within Next.js you can use Link. nextjs.org/docs/pages/building-your-application/routing/linking-and-navigating

[@narayandhungel1117]

great content

[@zacharygitahi5036]

why is it not cloning?

[@AndriyNosov]

Thanks for your tutorial. In your project, you use react-scroll lib to move between sections. I have an additional page on my site. If I at this page(site/catalog) and want to move for example to the main page (site#about) the link react-scroll doesn't work. is it possible to fix it? thanks for your answer.

[@hqasmei]

Hi Andriy, just got your email. Just sent you a response there.

[@codewithxavi]

Hola tenia una pregunta relacionada con el header. El ancho es de full width y me gustaria que ocupase por ejemplo la mitad como el resto de contenedores de la pagina porque a mi no me gusta que ocupe todo el ancho de la pàgina. estoy peleando y no logro arreglarlo, un saludo

[@hqasmei]

Lo siento por la respuesta tardía. No vi tu comentario. Puedes ajustar el div con max-w-xl o algo así si no quieres llenar todo el encabezado. Si aún necesitas ayuda, puedes enviarme un mensaje en Discord.

[@yashbarot3709]

Great video ma'am. I had a query that when i have trying to take my home proj .. and all to right side then they are not getting placed. Can you please tell how should I solve this as i am using the same code of your.?

[@hqasmei]

Do you have your source code available?

[@yashbarot3709]

@@hqasmei yes ma'am.

[@yashbarot3709]

I am not getting what I am missing while doing. It will be great if you guide me ma'am. I am make the proj by following your video tutorial.

[@hqasmei]

@@yashbarot3709 Can't really help you without seeing your code, if you can share it through github link

[@yashbarot3709]

@@hqasmei Query resolved ma'am.

[@villejac]

How to handle "warning: Extra attributes from the server: class,style" with ThemeProvider?

[@villejac]

"suppressHydrationWarning" in layout html tag does the trick for now.

[@Amelias_Vibe]

I created in the same way and on local host it is working perfectly but when I deployed it on vercel it is not generating any quotes.

[@hqasmei]

Hey, Mohsin. Did you remember to add the environmental variables in Vercel?

[@Amelias_Vibe]

Yeah I didn't set that

[@shoaib7542]

​@@hqasmeisame 😢 issue is also arise with me please help me out and in video there no mention any environment variables mentioned?

[@hqasmei]

Hi @@shoaib7542 , I believe this person was referencing a different video. I explain how to add the env variables there. kzbin.info/www/bejne/bpvWl4yvfMiWgLcsi=doedzGNfxK52VeZk&t=859 Let me know if you're still stuck. You can message me on Discord

[@Gikkeoi]

Does anybody else is having problem of the navbar with a bg of black the whole time?

[@hqasmei]

Which portion specifically? doing bg-black and bg-white in the classNames? If that doesn't work try replacing it with bg-black with (bg-gray-900) and bg-white with (bg-gray-50). Let me know if that works.

[@Gikkeoi]

@@hqasmei nope, it is like my default bg color is black. I even copy your code but still having the same problem. I just changed the color of the text to white when it isn’t on dark mode

[@Gikkeoi]

@@hqasmei anyways it is still an amazing navbar

[@Gikkeoi]

@@hqasmei never mind, I think I fixed

[@yifeiw9117]

@@Gikkeoi Hi Jose, i met the same problem, how did you fix it?

[@aymanechaaba]

Wanna build a project together?

[@jeffqseid2169]

love your content but hate your way of explaining stuff, need more context than a lot of copy pasting. Anyway thanks!

[@WHITEHIGHLIGHT]

fu

[@avelinecash]

thanks hosna

[@yashbarot3709]

404: NOT_FOUND Code: NOT_FOUND ID: bom1::ftntn-1690288657537-124964ea4b80 I am getting the above error maam What to do now?