NextJs Portfolio Tutorial - Build a Responsive Portfolio Website w/ Advanced Animations (2023)
HTML-код
- Опубликовано: 6 июн 2024
- In this tutorial, we will build a responsive and customizable portfolio website using NextJs and Tailwind.
🐝Register for Beehiiv: www.beehiiv.com/?via=judy/
✉️Sign up for my newsletter: eepurl.com/h4X959
👾Join my Discord: / discord
✍️Full-Stack Roadmap: webdecoded.gumroad.com/l/full...
🌐GitHub URL: github.com/judygab/nextjs-por...
🌎Hosted Version Preview: nextjs-portfolio-mu-swart.ver...
📁Memoji Collections: www.figma.com/community/file/... www.figma.com/file/RJXiye3epa...)
🔥Firebase: CRUD - • React Firebase CRUD tu...
⚛️More on React: Build a Portfolio Website - • React Project Tutorial...
MERN Stack Project: Food Ordering App - • Food Ordering App - Re...
☕Support the channel: buymeacoff.ee/webdecoded5
🧑🚀AI Chatbot for your website: letsask.ai/
💻Want to contribute to ope-source projects? Find repos here: decontrib.netlify.app/repos
disclaimer: I am affiliated, but not sponsored. This means I might make money when you purchase paid services through the links provided and I might be able to offer discounts when available.
00:00 - Demo
01:56 - Project Setup
03:15 - Hero Section (1.1-header-section)
24:10 - Header (1.2-navbar)
42:45 - About Me Section (1.3-about-me)
58:14 - Projects (1.4-projects-section)
01:20:03 - Email Section(1.5-email-section)
01:58:47 - Animations(1.7-animations)
02:18:16 - Deployment 
Наука
Check out my favorite VSCode extensions in this video:
ruclips.net/video/2ss1FcM0st8/видео.htmlsi=KNDdAXwqOkYJo52m
Awesome tutorial!! Have been waiting for this one 🎉
This video helped me build my own portfolio while at the same time learning about routing in Next.js. Thank you so much
Judy you're great! I've been looking for a video like this, so clear and clarifying, thanks!
Thank you! Will have more like this!
Great video! It sure helped me a lot to build my portfolio!! Just found your channel, and I think I will learn a lot from you!
Nice Tutorial and Work , Thank you very much and keep posting these type of tutorial it will help us a lot
Im not going to be a full stack dev or a front end but i wanted to have a nice portfolio to introduce myself and to keep track of my improvements, this is the best tutorial i ve seen so far, and i ve been trying and discarding many tutorials in the past few months, glad i found this. thank you very much!!
Thank you for sharing your experience with us! I’m happy you liked it
I went from not having a clue about website creation to creating and personalising an entire portfolio site in the matter of days. Really appreciate this !!
wow this comment means a lot to me!
The is good, but you need to know the language first, starting with this tutorial will never help you if you want to become a developer, you need to start when learning vanilla Javascript, HTML and CSS, cause even tailwind to work with it you need to understand CSS. Be careful
Very Beautiful! Amazing Job!
Thank you very much!
Hi Judy, thanks this is amazing , You have helped Me
to put Next .js theory into practical shape
I'm so glad!!
Great Tutorial! You are a genius, Judy! Thank you
You are so welcome!
loved this ❤🎉
Definitely a very simple and well-designed portfolio, ill try out!
Thank you! Looking to hear how you like it
Love it!!!!!!!! Thanks!!!!!!!!!!!!
Subscribed, as great content and video. Thank you 🙂
Thank youuu
Loved it
You are awesome I want more video from basics to advance till deploying to server live
thank you
Holy shit, i never knew vs code had its own browser. Thats going to make everything so much easier o.o
Thank you very much!
Realy good video !
Glad you think so!
You are soo GOOD. Please create tutorial on Node.js, React.js
muchas gracias , buen video saludos desde peru
Thanks a lot
I got confused when you checked the folder and there was an src folder cause you said "say no to src" but checking the video, you actually selected yes. Just wanted to leave a comment in case anyone got confused at the beggining with that.
Lol, same
very nice
Hey thanks amazing video. You could implement smooth scrolling on future projects i think it's look better. I would like to know what prompts you used for the image so i can generate one too looks amazing.
images are great for sure, hopefully we get the source :)
Thanks. nice portfolio.
Glad you like it:)
Hey, amazing work here! Thanks to you I learned how to code nextjs ! But I have a question, where did you find the hero image with ur Memoji using a computer ?
Thanks! I made a video about how I did it here: ruclips.net/user/shorts3xOPCMJE1eg?si=MKXVH-9QbrFPPKBr
Gracias me ayudaste a configurar resend.
Good job on the Portfolio, I love it. If you can tell me how did u make the projects images they look so professional, what did u use?
Thank you! I made a quick video about it here: ruclips.net/user/shorts3xOPCMJE1eg
thankssss
very beautiful portfolio, thank you, I will take it as an example although I am still a little green for the design and that, but I will study more, teacher
Like it! Can you please share with me that where can I generate avatar kind of you were using?
you are awesome mi lady
@webdecoded thanks for this tutorial, it is very helpful, i am trying to get the functional parts working, can you share in more details how does the email work? and how i would get the download to work? please
This is great but I would appreceiate if you teach to fix the navbar footer etc, but for me I'll do it myself. And, a combination of poppins and inter in a project isn't bad it looks great! (Like rounded image in about me, fix navbar links, and how should we add a text for logo instead of image because who does..) thanks!
How can I fix the useless (like 2 or 3 pixels) white overlay at background at footer
The course is not too bad, I liked the section related to the animation buuuut the section about the contact form is really bad. I checked comments and I am not the only one that had problem with it. I’ll make my own contact form but anyway thank you for sharing this!
really appreciate this, but which email api did you use?
Hey ! thank you so much for this tutorial, it super nice !!! Could you tell me please what you are using for suggesting you what to write on vs code? There were times on the video that you would write something and it shows with faded letters a recommendation to complete the line.
Glad you liked it! It’s GitHub CoPilot
Hi, where did you download the SVG for GitHub icon and LinkedIn icon?
Great video! I am wondering what theme used in your vscode!
night owl!
Hello That's a great portfolio may I use this theme for my portfolio
This is a great video! One thing that I can't seem to get to work is the email section. I am stuck on the "Email sent successfully!" section, specifically at 1:49:35. When I click "Send Message" nothing happens. As a result, I setup some error exception handling inside the handleSubmit. I checked the inspect terminal in Firefox and I am receiving: "Error sending message: Error: HTTP error! Status: 500". I cannot seem to get this to work, if anybody has any idea on how to fix this or has had something similar happen, please feel free to leave a reply! Thank you for any help in advance!
hey! are you planning to record prompts video?
Great Video, Nice website, everything is awesome... but please what extension or command did you used for the div tag creation around highlighted piece of code like when putting div tag around the image tag. how were you able to do that? Thanks
if you click in view in vscode and then command palette, you can type 'Emmet: Wrap with abreviation'. You can set a shortcut, if you want.
Thanks
@@arturcarmezini
Thanks for the tutorial. The email is not working in the deployed site. The environment variables are set in Vercel, and it's working locally.
how did you make all those project screenshots? Photoshop? Is there a tool for easy generating screenshots?
i want to know how are you making the div so easily what is the keyword or shortcut
Hello, thanks for the video, but I have a question how did you wrap the elemnts like with div when you select it? what did you click?
Select the code you want to wrap. Press CTRL + SHIFT + P. Type "Wrap" and select "Emmet: Wrap with Abbreviation". Type span or whatever element you'd like in the search, press enter and voila :)
@@ninti212 thnx
hi! can you please share a tutorial on how to get that memoji that you used on your website pls?
ruclips.net/user/shorts3xOPCMJE1eg?si=MKXVH-9QbrFPPKBr
What is the grid shortcut that you used
Have issues with the Resend, It did not work well for me and always throws error messages, But i appreciate
Can you make a more clear video on how to make deployment and how others can see our website?
in the project section, i want people to view my all phots of projects how i'm going to do it ? any advice ?
Hey, react-animated-numbers is not working with Next.js v13.5.6. Can you help me with this?
also I am running into an issue where I cant submit the email without an error 500(internal error) and get Uncaught(in promise) syntax error....my code is exactly the same as in your source code but it doesnt work for me for some odd reason. The only thing i have different from your vid is that I dont have the fromEmail because I am not sure what i am supposed to put there!
please share how you created the memoji
I was wonder, why you are rendering portfolio section as client side. Isn't it bad for SEO?
Hi!! 16 years old and learning web development. I'm having really hard time understand the first scene tho, do you download the nextjs first in ur computer before you code in vs? im a window user, so i don't know about apple
This is really amazing ! but I can't do the email part. I got 'Attempted import error: 'renderToReadableStream' is not exported from 'react-dom/server' (imported as 'renderToReadableStream')
Hi I got a similar error: I cannot get the data from localhost:3000/api/send. Do you have this issue, I am stuck at here.. Thank you!
how did you highlight a section of code and in seconds wrap it in a new ?
I am on Mac.
extension - htmltagwrap on vs code
I have a little problem. After deployment on vercel, images don’t load, everything works fine on my live server.
Great tutorial. Please use word-wrap for your next video! It would be easier to follow along and see all of the code at once
great suggestion, thanks!
agree. it was really difficult to follow esp the css
Bro you are great, thank you!
I have a question...if you open the navbar on mobile-sized window, then go to desktop-size, the mobile-sized navbar remains open and needs to refresh or go mobile-size back to disable it. It shows double navbar then.
(However its not seriously, who can change mobile to desktop directyly)
Why was my tag filtering not working? I did everything same
Thank you!! If you want to push your current code to github or anywhere else I can take a look🙂
@@webdecoded Sure let me complete it just
I am having issues with the email.js section with the API end point, I get a 404 error with the end point you specified
thanks for this,
please share how you created the memoji
i tried to make one but i have failed hahaha
I posted a video about it: ruclips.net/user/shorts3xOPCMJE1eg?si=CNgeuohSwne6xI4k
can i deploy this on github pages ??? if yes they how i tried following one video but that method is giving me errors
you add your domain, to send message from postman ?
I have a problem in making the hero image appear in a rounded circle please help me.
Hi Judy! Firstly, thanks a ton for creating this tutorial, I have enjoyed the tutorial so far, however I am facing an issue in the Achievement Section where you animate the numbers, I am unable to animate the numbers and their value come out to be zero. At 2:04:17
I tried using react-spring library, but it didn't turn out as expected.
I even used parseFloat instead of parseInt as one of the values I have is a decimal number. I would really appreciate it, if you could help me out on this. Thank you so much again, this is a really good tutorial.
@dhairyapatel5162 It`s not working on localhost but once you deploy it will work. I also faced the same challenge at first
what extension is that which shows tags and possible code before you fill it in?
ex: Creating nav menu at 25:00
inside the nav div it show's a link href in grey text before you add it
github copilot
I would love to know that too, did you find out?
The best portfolio website i have seen. please what is the name of the tool you used to generate the images
Thank you! it's midjourney
Here is another video I did about it ruclips.net/user/shorts3xOPCMJE1eg?si=CNgeuohSwne6xI4k
Was running through this tutorial pretty easily until I got to the part where I added the XmarkIcon. Now I’m getting an error message that says “check the render method of `Navbar`” my syntax is identical to yours so I’m not understanding what I did wrong. Any suggestions?
import XMarkIcon instead
Hi ! The email integration using resend is not working for me.
In the .env.local file i have entered the RESEND_API_KEY=generated_id (no quotes just included the copied id)
and FROM_EMAIL=my_mail_id (no quotes as well). I restarted VSC, npm run dev so it could read the env but it doesnt show any response in postman. Could u help me out?
help me please same issue
aside from resend are there any other organisations that send automated emails for free?
how can i get an avatar like yours? I searched for it but dind't find
Hi, I loved this tutorial. It was super helpful! I just had a question about the links in your navbar. How can you get it to either open on a new page or for when a link is clicked, it scrolls to that section on your page?
Pls could you show how to make the memojii
can you make a detailed video on contact page on sending emails i got strucked here
med too, a bit of jumping around and cutting the video in places then when back the code is not as it was left :(
I'm curious about the prompt for the image...
the mobile overlay doesnt close after selecting an option from the menu
Quick question, when coding along I noticed that my text doesn’t change. As in, if I change the color of my text or even the size it remains the same for both h1 and p tags of my hero section
seems like tailwind styles aren't being applied, after updating tailwind config file did you re-start the app?
Sorry for the bother. I noticed my components folder was in the wrong directory. Thanks
no worries, glad it was resolved!@@manuelmarful8518
my projects section doesn't show up to my page how do I fix it ,its the same code
anyone had an issue with Tailwind classes not applying after closinf vs code?
Hello, what extensions do you use?
what prompts did you use for midjourney?
Shared here: ruclips.net/user/shorts3xOPCMJE1eg?si=CNgeuohSwne6xI4k
we have to give yes for src folder
i need some some help the website looks good but i want the main page to be zoomed out a bit its looking kinda big or zoomed in and another thing when i add another section after certficate its no longer resizing in another format when i open in mobile devices
Re: zoomed out, you can modify the numbers for the font as well as the width and size of the image, as for the certificate you mentioned mind sharing the code on discord?
Amazing tutorial...the only confusing part is the FROM_EMAIL??? like i am not sure what supposed to go there? i must have missed something? is that my email-address or? if it has to be set up on Resend with the domain...how do i do that?
I was confused with that as well. What you need to do is add the email you got from your domain. Cloudflare is an easy domain to use
How to Build a Accessibility Menu that can change the color, increase/decrease website text, underline text, dyslexic font, dark and light mode in next js and tailwind css
Resend only work's with a custom domain ?
cannot destructure body in route.js
can you please tell me which extension you are using for the suggestion showing the whole line...?
It's GitHub Copilot
@@webdecoded thank you 💌
Would love to know the prompt that you use for MidJourney, ty
I got you: memoji of a female with a laptop in front, apple-style, modern, pink hair, black sweater, computer in hand --ar 1:1
Here's a video if you want to see more results ruclips.net/user/shorts3xOPCMJE1eg?si=CNgeuohSwne6xI4k
hey my background images are not showing up in production what shall i do?
You added the image in the public folder right? Also what do you see when you inspect element on your production site does it have url, is it working if you open url in the new tab?
we have 2 env var what about 2nd from_email what is this one about
I am having issues with the navbar not navigating to different components. Do you have any tips?
Hey, could you fix it? I have the same issues
where is the id's for the links so I can jump from section to section?
what should I include in the FROM_EMAIL env
Hi, i have the sameproblem, i just put my name + mydomain on there and it works