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 !!
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
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!!
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.
Ma'am, your channel is very underrated 😔. I haven't seen anyone on UA-cam explain content step-by-step as well as you do 👀. I found your channel by searching in incognito mode, and now I'm commenting from my ID 💬. You explain and teach full stack projects very well. Thanks, ma'am! 🙏 by way i'm from india ❤❤
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!
@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
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!
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!
00:02 Build a responsive portfolio using NextJs & Tailwind with advanced animations in 2023 02:33 Setting up and starting the application 07:26 Using containers for responsive layout design 09:58 Adding and styling images in NextJs for a responsive design. 15:16 Styling and arranging buttons and containers 17:52 Implementing responsive design and advanced styling using Tailwind CSS 22:44 Implementing animated typing effect in hero section 25:07 Setting up the logo and navigation menu 29:52 Creating navigation links and styling the menu items. 32:39 Styling the navigation bar and menu items 37:25 Styling the button with hover effects and interactivity 39:47 Integrating logic and components from nav bar 44:56 Adding images and content to the portfolio section 47:20 Creating tabs and adding functionality 52:25 Implementing tab functionality for different sections 54:50 Implementing tab functionality to display different content based on selection. 59:35 Creating image background and divs for project display 1:02:08 Updating project card styling 1:06:57 Centering and styling links and icons 1:09:25 Setting the URLs for links and fixing errors 1:14:31 Setting dynamic styles and handling states in project section 1:17:22 Implement handle tag change function 1:22:02 Setting up email configuration in the project 1:24:23 Creating a section with two columns for information and social links. 1:29:30 Adding styling to the email section form. 1:32:12 Adding and styling form inputs 1:37:42 Creating a circular and blurred effect 1:40:03 Styling the footer with proper elements and layout 1:44:51 Creating function to handle form submission and API request 1:47:06 Setting up form submission functionality 1:51:48 Updating layout and styling for achievement section and hero section. 1:54:35 Customizing main colors in project theme for easy customization 1:59:40 Customizing modules for responsive animations 2:02:37 Configure advanced animations using configurations and framer motions 2:08:21 Use useInView hook to trigger animations when components are visually visible 2:11:13 Implementing animations for project appearance 2:18:07 Deployment using Vercel for hosting portfolio
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
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.
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!
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')
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 :)
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
Website works fine till the end when deploying through vercel i get the error Module not found: Can't resolve 'react-type-animation' type animation is working fine locally any fix?
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
Here's a short about how I generated it: ua-cam.com/users/shorts3xOPCMJE1eg?si=pMr64AlTjCvxcFrU If you don't want to subscribe and just need to order a customzied avatar, you can do that from here: webdecoded.gumroad.com/l/weooa
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?
for some reason, my numbers at 2:03:51 isnt showing up, it just shows 0000, any ideas why? i tried searching the internet but just cant find the answer ://
@@dhairyapatel5162 not exactly a solution, but i found a way around it using a different method, i think it was called count up, so instead of random nums, it counts up to the num, not as cool but did the job for me
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 ?
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.
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?
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?
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?
I have a Q please at the part of email send i have an issue i put in env.local file RESEND_API_KEY='2d' FROM_EMAIL='my email' but still have an error in API "Missing API key. Pass it to the constructor `new Resend("re_123")`"
email section not working with me , api response in postman not like in video , so is resend in next.js not free?? i don't know what a problem !!, the env.local file , i write my resend api key var , and also from email but the from_email var , this is email that i recieve the messages over it or not ??? where i put my gmail to recieve the messgges correctly from form that user write it in inputs, please help me to understand it , thank you
Resend is the third-party library so the first step is we install it and yes it is free until the limit, more details here: resend.com/pricing. The from_email is the email address that will send the email in this case it would be yours as there's no generic resend email account that sends it. You mentioned gmail but to be able to use resend you would need your domain and an email from your domain and as I mentioned you would have to configure that on the resend dashboard. Wish there was an easier way but that's what it takes to send emails on the web. Do the steps I mentioned make sense?
so we can't just use our everyday gmail in FROM_EMAIL? I tried to do what you did on Postman and I get this error "POST localhost:3000/api/send 404 (Not Found)" @@webdecoded
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
Just asking, is react-animated-numbers no longer works in next js 13.5? The values are not even animated, and the numbers are 000000 edit: nvm, it works when I deploy it on vercel, thank you!
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)
Check out my favorite VSCode extensions in this video:
ua-cam.com/video/2ss1FcM0st8/v-deo.htmlsi=KNDdAXwqOkYJo52m
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
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 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
I was stuck on this for a very long time, thank you for clarifying that
@@shanesharareh7881 No problem! I've gotten stuck in things like that before and have been saved by a commenter before lol
Holy shit, i never knew vs code had its own browser. Thats going to make everything so much easier o.o
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!
Awesome tutorial!! Have been waiting for this one 🎉
Ma'am, your channel is very underrated 😔. I haven't seen anyone on UA-cam explain content step-by-step as well as you do 👀. I found your channel by searching in incognito mode, and now I'm commenting from my ID 💬. You explain and teach full stack projects very well. Thanks, ma'am! 🙏 by way i'm from india ❤❤
@@ManishRaj-xi9wh thank you so much for sharing this!! I'm super excited that my channel has been helpful for you🙏
Very Beautiful! Amazing Job!
Thank you very much!
Definitely a very simple and well-designed portfolio, ill try out!
Thank you! Looking to hear how you like it
Hi Judy, thanks this is amazing , You have helped Me
to put Next .js theory into practical shape
I'm so glad!!
Muchas gracias! Aprendi muchisimo con este video! saludosd!!
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!
Great Tutorial! You are a genius, Judy! Thank you
You are so welcome!
Nice Tutorial and Work , Thank you very much and keep posting these type of tutorial it will help us a lot
loved this ❤🎉
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
@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
Love it!!!!!!!! Thanks!!!!!!!!!!!!
You are soo GOOD. Please create tutorial on Node.js, React.js
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!
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
Subscribed, as great content and video. Thank you 🙂
Thank youuu
You are awesome I want more video from basics to advance till deploying to server live
Realy good video !
Glad you think so!
Thank you very much!
muchas gracias , buen video saludos desde peru
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!
00:02 Build a responsive portfolio using NextJs & Tailwind with advanced animations in 2023
02:33 Setting up and starting the application
07:26 Using containers for responsive layout design
09:58 Adding and styling images in NextJs for a responsive design.
15:16 Styling and arranging buttons and containers
17:52 Implementing responsive design and advanced styling using Tailwind CSS
22:44 Implementing animated typing effect in hero section
25:07 Setting up the logo and navigation menu
29:52 Creating navigation links and styling the menu items.
32:39 Styling the navigation bar and menu items
37:25 Styling the button with hover effects and interactivity
39:47 Integrating logic and components from nav bar
44:56 Adding images and content to the portfolio section
47:20 Creating tabs and adding functionality
52:25 Implementing tab functionality for different sections
54:50 Implementing tab functionality to display different content based on selection.
59:35 Creating image background and divs for project display
1:02:08 Updating project card styling
1:06:57 Centering and styling links and icons
1:09:25 Setting the URLs for links and fixing errors
1:14:31 Setting dynamic styles and handling states in project section
1:17:22 Implement handle tag change function
1:22:02 Setting up email configuration in the project
1:24:23 Creating a section with two columns for information and social links.
1:29:30 Adding styling to the email section form.
1:32:12 Adding and styling form inputs
1:37:42 Creating a circular and blurred effect
1:40:03 Styling the footer with proper elements and layout
1:44:51 Creating function to handle form submission and API request
1:47:06 Setting up form submission functionality
1:51:48 Updating layout and styling for achievement section and hero section.
1:54:35 Customizing main colors in project theme for easy customization
1:59:40 Customizing modules for responsive animations
2:02:37 Configure advanced animations using configurations and framer motions
2:08:21 Use useInView hook to trigger animations when components are visually visible
2:11:13 Implementing animations for project appearance
2:18:07 Deployment using Vercel for hosting portfolio
Thanks a lot
hi! can you please share a tutorial on how to get that memoji that you used on your website pls?
ua-cam.com/users/shorts3xOPCMJE1eg?si=MKXVH-9QbrFPPKBr
Thanks. nice portfolio.
Glad you like it:)
Have issues with the Resend, It did not work well for me and always throws error messages, But i appreciate
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
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 :)
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!
Gracias me ayudaste a configurar resend.
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!
thank you
very nice
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 :(
you are awesome mi lady
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
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
please share how you created the memoji
Website works fine till the end
when deploying through vercel
i get the error
Module not found: Can't resolve 'react-type-animation'
type animation is working fine locally
any fix?
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.
please tell me why my “hero image”cannot show up.
Hey, react-animated-numbers is not working with Next.js v13.5.6. Can you help me with this?
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
Like it! Can you please share with me that where can I generate avatar kind of you were using?
Here's a short about how I generated it: ua-cam.com/users/shorts3xOPCMJE1eg?si=pMr64AlTjCvxcFrU
If you don't want to subscribe and just need to order a customzied avatar, you can do that from here: webdecoded.gumroad.com/l/weooa
@@webdecoded thanks!
thankssss
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: ua-cam.com/users/shorts3xOPCMJE1eg?si=CNgeuohSwne6xI4k
what do we have to fill in the FROM_EMAIL part in the env/local file
cannot destructure body in route.js
Hi, where did you download the SVG for GitHub icon and LinkedIn icon?
Hey @webdecoded awesome explanation. Which extension you used in vscode for that autofill suggestion ???
I was wonder, why you are rendering portfolio section as client side. Isn't it bad for SEO?
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: ua-cam.com/users/shorts3xOPCMJE1eg
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?
for some reason, my numbers at 2:03:51 isnt showing up, it just shows 0000, any ideas why? i tried searching the internet but just cant find the answer ://
lograste resolverlo? por que me pasa lo mismo
Hey! Did you find any solution ? I am facing the same issue numbers are not animating and they come out to be Zero
@@dhairyapatel5162 not exactly a solution, but i found a way around it using a different method, i think it was called count up, so instead of random nums, it counts up to the num, not as cool but did the job for me
same problem, did you all found any solution?
Can you make a more clear video on how to make deployment and how others can see our website?
i am facing too. did you solve the deployment
Hello That's a great portfolio may I use this theme for my portfolio
I have a little problem. After deployment on vercel, images don’t load, everything works fine on my live server.
i want to know how are you making the div so easily what is the keyword or shortcut
the mobile overlay doesnt close after selecting an option from the menu
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: ua-cam.com/users/shorts3xOPCMJE1eg?si=MKXVH-9QbrFPPKBr
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
I have a problem in making the hero image appear in a rounded circle please help me.
really appreciate this, but which email api did you use?
i'm stuck step add domain resend service, can someone suggest for me some website get own domain free and longterm. Thank btw
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
22:30 text animation
Great video! I am wondering what theme used in your vscode!
night owl!
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
You need to add a domain that you own first for the Resend API to send from
@@earlgwin15 i have done that but still facing same issue
my projects section doesn't show up to my page how do I fix it ,its the same code
in the project section, i want people to view my all phots of projects how i'm going to do it ? any advice ?
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
I'm curious about the prompt for the image...
we have to give yes for src folder
I have a Q please at the part of email send i have an issue i put in env.local file
RESEND_API_KEY='2d'
FROM_EMAIL='my email'
but still have an error in API "Missing API key. Pass it to the constructor `new Resend("re_123")`"
you don't need quotes and have to restart the app since it reads env variables at the start: npm run dev
i made this may be cuz my domin is still pending ?@@webdecoded
anyone had an issue with Tailwind classes not applying after closinf vs code?
how can i get an avatar like yours? I searched for it but dind't find
email section not working with me , api response in postman not like in video , so is resend in next.js not free?? i don't know what a problem !!, the env.local file , i write my resend api key var , and also from email but the from_email var , this is email that i recieve the messages over it or not ??? where i put my gmail to recieve the messgges correctly from form that user write it in inputs, please help me to understand it , thank you
Resend is the third-party library so the first step is we install it and yes it is free until the limit, more details here: resend.com/pricing. The from_email is the email address that will send the email in this case it would be yours as there's no generic resend email account that sends it. You mentioned gmail but to be able to use resend you would need your domain and an email from your domain and as I mentioned you would have to configure that on the resend dashboard. Wish there was an easier way but that's what it takes to send emails on the web. Do the steps I mentioned make sense?
so we can't just use our everyday gmail in FROM_EMAIL? I tried to do what you did on Postman and I get this error "POST localhost:3000/api/send 404 (Not Found)" @@webdecoded
What is the grid shortcut that you used
what domain should we add to resend?
Bro I am also stuck here....what do we have to add here?
Same code in vd doesnt work the way it should work.. why?
hey! are you planning to record prompts video?
what prompts did you use for midjourney?
Shared here: ua-cam.com/users/shorts3xOPCMJE1eg?si=CNgeuohSwne6xI4k
where is the id's for the links so I can jump from section to section?
we have 2 env var what about 2nd from_email what is this one about
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
can i deploy this on github pages ??? if yes they how i tried following one video but that method is giving me errors
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
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 ua-cam.com/users/shorts3xOPCMJE1eg?si=CNgeuohSwne6xI4k
Just asking, is react-animated-numbers no longer works in next js 13.5? The values are not even animated, and the numbers are 000000
edit: nvm, it works when I deploy it on vercel, thank you!
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
aside from resend are there any other organisations that send automated emails for free?