Build and Deploy a Responsive Personal Portfolio Website Using Next.js 13, Tailwind CSS and Vercel
HTML-код
- Опубликовано: 6 июн 2024
- Are you ready to level up your web development skills and create a stunning personal portfolio that showcases your work in the best light? Watch this video and learn how to build a responsive website using Next.js, Tailwind CSS and Vercel. By the end of it, you'll be equipped with the knowledge to create a professional-looking portfolio that will impress potential clients and employers.
📚 Resources
- Tailwind CSS Documentation: tailwindcss.com/docs/customiz...
- Tailwind CSS with Next.js: tailwindcss.com/docs/guides/n...
- VS Code Extension: marketplace.visualstudio.com/...
- Vercel: vercel.com/home?...
- GitHub Repo: github.com/hqasmei/tailwindcs...
- UPDATED: Next.js 14 GitHub Repo: github.com/hqasmei/tailwindcs...
👩💻 Connect
Github: github.com/hqasmei
Twitter: / hqasmei
LinkedIn: / hosnaqasmei
⌛ Timestamps
0:00 Intro
1:08 Setting Up Project
4:06 Header (Navbar)
8:41 Light/Dark Mode
14:48 Home Section
23:24 About Section
31:22 Projects Section
39:39 Footer
42:45 Finishing Touches
44:52 Deploy
45:55 End
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😀
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!
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.
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!
Happy to hear!
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.
Very smart and knowledgeable!
I like your teaching style, very organized.
Why this channel got only 650 sub , it deserves more.
Dang, you're on fire lately with these tutorials! Great work!
Thanks Hassan 😁!
Great videos, and amazing content.
Thank you for sharing your knowledge
Thank you for the great work for sharing!
New sub! This is great content! Thank you for the tutorial
This channel is a wild fire 🔥
Hosna your amazing, this is my first ever watch of one of your videos and I thought it was amazing!
Thank you, I appreciate it ☺
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
Also thanks for the turtorial have learnt bag loads so thank yo.
Best of the best pliz give us more!!!!!!!!!!!
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.
Thank you for those kind word. Glad it was helpful :)
Nice video!
this looks like a nice project so I did SUB and liked for u so ill follow this project soon thank u
Thank you Hosna!
thanks this is great
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'.
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.
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!
great content
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!
Yes, will make sure the quality is better in future videos.
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?
It does give some problems, in terms of late loading latency, but looking into using SWR way.
Hi, nice work! I wonder how to solve useTheme() => theme=undefined. Causing relaod page to brake theme. Thanks!
thankssssssssssssss!
could you explain how to use metadata inside layout in next.j13? because it doesn't work with 'use client'
It would be great if you could cover nextjs dynamic navigation.
You got it! Coming soon
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?
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
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...
For routing within Next.js you can use Link. nextjs.org/docs/pages/building-your-application/routing/linking-and-navigating
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.
Hi Andriy, just got your email. Just sent you a response there.
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?
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
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
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.
How to handle "warning: Extra attributes from the server: class,style" with ThemeProvider?
"suppressHydrationWarning" in layout html tag does the trick for now.
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.?
Do you have your source code available?
@@hqasmei yes ma'am.
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.
@@yashbarot3709 Can't really help you without seeing your code, if you can share it through github link
@@hqasmei Query resolved ma'am.
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.
Hey, Mohsin. Did you remember to add the environmental variables in Vercel?
Yeah I didn't set that
@@hqasmeisame 😢 issue is also arise with me please help me out and in video there no mention any environment variables mentioned?
Hi @@shoaib7542 , I believe this person was referencing a different video. I explain how to add the env variables there. ruclips.net/video/8jsfYyGccJU/видео.htmlsi=doedzGNfxK52VeZk&t=859
Let me know if you're still stuck. You can message me on Discord
Wanna build a project together?
Does anybody else is having problem of the navbar with a bg of black the whole time?
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.
@@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
@@hqasmei anyways it is still an amazing navbar
@@hqasmei never mind, I think I fixed
@@Gikkeoi Hi Jose, i met the same problem, how did you fix it?
love your content but hate your way of explaining stuff, need more context than a lot of copy pasting. Anyway thanks!
fu
thanks hosna
404: NOT_FOUND
Code: NOT_FOUND
ID: bom1::ftntn-1690288657537-124964ea4b80
I am getting the above error maam What to do now?