This tutorial uses Next.js 13 version but Don't worry everything will work except the exit animation since it is not compatible with the app directory and in the tutorial we are using pages directory. You can follow the tutorial and use the app directory instead of pages and other components will stay the same. Make sure to add "use client" at the top of the component if the component requires browser or user interaction. (use of side effects or useState). Apart from that you can checkout following URL and see how you can migrate from old Next.js version to Next.js 15: Hope you'll enjoy the tutorial😇 nextjs.org/docs/app/building-your-application/upgrading/version-15
brother i am going to make this portfolio but the problem is that i am using typescript and work on next js 14 but the video is fully opposite of my tech stack now what should i do know i wanted to make this project bcz i like this now what??
@@Malik-of3vv Hey, all the components that we're building in this video are usable in Next.js 14 or 15 version. There is no difference in it. For the typescript you just have to add relevant types for the props/libraries that you are passing to the components.
Finally I have done it! Took me 3 days. I was trying to learn NextJS and also was in need of a personal portfolio. This tutorial helped me so much. learned a lot about framer motion too. going to do some customization on this to make it unique now. Thanks man!
I have been searching for the best way to learn Next JS (with Tailwind CSS) on top of React JS. But this tutorial covers that and much more. I haven't watched a tutorial this thorough from beginning to end before. Thank you so much for your willingness to share knowledge.
Guys ,if you want then buy it , it won’t do a justice to CodeBucks ….if I just gave you. Spend around 10 hours building this , and you want for free ? Not good man .
I'm doing this and finished only 1 hour long. But OMG I really need to say this. I'm appreciate your work. I have tried to do the whole website myself before but there are too many things I don't know how to do. And sometime the instruction I found on internet is hard to follow and understand. Until I found this video. You make it easy and cover almost everything I need for. Thank you so much.
Thank you so much for your kind words! I'm thrilled to hear my video made your journey easier. I can say once you complete the whole project you'll get more satisfaction and few skills as well.
This is the most impresive portfolio I have seen. Currently working on another when with tutorial help and making it my own but wow, I just feel like starting over with thiis one.
After 15 days with full determination, now I can say that I have done exactly like this. Initially it was looking tough for me and I supposed it may have frustrated. With patience I was keeping doing the development and follow your instructions then now i complete 💯. Thank you for the awesome portfolio guidence.
@@CodeBucks Bro please try to share the code files and the links in the description as soon as possible. Please post the complete code as a single file brother. Thank You so much.
Bro, excellent content. I'm just halfway through and have already learned a lot of new things; thanks for showing how you got the assets, which is often not covered by other creators
Haven't quite finished yet (up to dark/light mode) but gotta say this is the most fun tutorial I have ever done on UA-cam... just so cool... usually (because it is work) everything is grindy but this is creative... loving it...
Finally completed will update and make it more precise according to my need....thanks for the video it is one of the most effecient and understable video i have seen so far.....
After more than 50 hours I have completed this portfolio using Vite instead of Next. I added some features like an animation for closing navbar, when the navbar is open and resize the page it's close and added an other icon with the italian flag and the english flag for changing the language. Thank you very much for this video :)
Congratulations🎉 on successfully completing this entire tutorial! I hope it has been helpful in enhancing your knowledge. I would love to see the changes that you have made.
Wow, I'm thoroughly impressed by your portfolio! I've only watched about 8 minutes so far, but it's already the best one I've seen. I do have a question though - I don't have much experience with NextJS, but I'm comfortable with Tailwind and Framer Motion. Everything else looks good to me, but I'm a little bit intimidated by NextJS. I've worked on a few projects before with version 12, and I also did a crash course on version 13, so I do have some familiarity with it. However, after watching your video, I feel inspired to take a deeper dive into JavaScript and tackle NextJS version 13. Thank you so much for sharing your knowledge and expertise. I've already subscribed to and liked your video, and I'll do my best to understand NextJS 13.
Hey, thanks for all the appreciation❣️. Next.js is really not that hard and whenever you found any concept a bit hard then you can read the documentation right away which will increase your conceptual understanding. You can reach out to me if you need any help.
@@CodeBucks Hey bro, Can I get this complete code for free if it is possible. If you could provide me the code for free then it will be really helpful for me to my further projects and it could raise or boost my skills and levels in the Resume and Profile. So I hope you can understand the situation and kindly do provide me the code files and the links in the description for free as soon as possible for free. I will be waiting for your response. Thank You.
@@pandipatipavan3804 Hey, I don't think If I give you code then it will boost your skills. Instead if you follow the whole tutorial then it will increase your skills for sure. The final code is the same as shown in the tutorial. You can give some time and follow the tutorial it will benefit for your future and definitely you'll learn something.
Wow after over 2 weeks I finally finished! Took much longer because I wanted to do some side quests and add some custom features and also fixing numerous unforeseen bugs that only seem to to occur on my end which lead me to going down into many rabbit holes. Thanks so much @codebucks for making this tutorial! Your coding and design skills are incredible and I really appreciate you putting in hours at a time and the effort to teach others these modern frameworks and technologies.
Hey, Congratulations🎉 on completing this tutorial, I know it's long but I guess it's worth it to create your own portfolio. I appreciate your kind words and I'm glad you liked the video, have a great journey ahead.
If you get errors on your end, it's most likely because you are using different versions of the packages used. A simple way to start (for those who want to learn and not just straight copy the entire code) is to first copy the package file into your own, then start writing the code. This prevents any different scenarios in case of deprecated functionality etc.
Best portfolio website tutorial in UA-cam, your channel is among the underrated channel. Like and comment so that your channel reach out more Best wishes brother
Hii sir!!, i found this video last week, i am so glad that i've finished this tutorial with my own style preference, it takes 7 days for me to finish this, thank you so much😁
Wow, I'm thrilled to announce that I just finished watching your video! I cannot recall how many days it took me, but I spent around 30 minutes to an hour every day watching it. Plus, I also took a JavaScript course, and I must say, it was an incredible experience, and I am grateful to you for sharing your expertise. Your project is so fantastic that I hope it garners more than a million views. Thank you for your hard work and dedication. I can't wait to see what you'll create next with NextJS 13. If I may make a suggestion, could you consider incorporating sanityCMS in your future projects? Thank you once again! ... comment was done by chatGPT wow 🙂
@@wiizyhimsev6172 Here is my github profile: github.com/codebucks27 Here is the project repo of starter code: github.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code
I'm planning to do this for my design portfolio. I have a background in HTML and CSS, Next JS makes it pretty nice to create components even though I don't know React very well.
Sure I will keep this in mind for the future tutorials, for now you should check the iPhone launch page from the other videos. In that tutorial I have used react-three-fiber and gsap.
Thank you so much this is very helpful I’ve been watching your video for over 5 days now I’m finally done thank a lot it’s helpful 🙌🙌 I got everything correctly no errors aside the skills part and the circle it wasn’t responsive to I had to change it but thanks a lot ❤️
Yes, both of these portfolios has different approach to UI and UX. This portfolio has traditional vertical layout while the old portfolio has unique layout.
Hi, first off, I want to say that I thoroughly enjoyed building my portfolio following your guidance. It's been a fantastic learning experience! I'm curious about one aspect of your approach: I noticed you often use a desktop-first strategy for styling. Could you share your insights on why you prefer this method over the mobile-first approach, especially considering the mobile-first philosophy of frameworks like Tailwind CSS? I'm eager to understand the benefits and reasoning behind this choice. Thanks for all the great content and looking forward to your response!
I'm happy to hear that you found my video helpful in building your portfolio. Regarding your question, the choice between desktop-first and mobile-first often comes down to the specific needs of the project and the audience it's targeting. In my case, while I recognize the growing importance of mobile-first design, especially with frameworks like Tailwind CSS, I often start with desktop-first for a few reasons. 1) Many of the projects I work on have a user base that accesses content via desktop. This makes it logical to prioritize the desktop experience. 2) I find that certain design and functional elements are easier to conceptualize and implement initially on a larger screen. This allows me to explain complex UI element or animation easily and it will be easier for a begineer to learn and implement it. 3) As per my experience In mobile devices due to small screen we have to hide some elements thus we can not completely create everything like we do in the desktop-first approach. I do use desktop first approach but I always make sure that the final product is fully responsive and provides a seamless experience across all devices. I hope this answers your question.
Hey, I loved this course bro, it's splendid portfolio website! but I had this doubt that, is this the only method to theme the website? -- like go to every page and then use dark:text-light... and all? But all-in-all I loved this tutorial! 💗
Actually you can use variable, first you can define variable in :root in the globals css file then use that variables in the tailwind Css. Then add one prefers-color-scheme media query and change the variable value based on the prefered color schema.
Just be aware that when you get to the Logo/Icons section make sure that export const DribbleIcon on line 75 of icons.js is written with two letter Bs and not DribbbleIcon with 3 B's as this caused me an error and had to work backwards to realise there was an extra B there that caused an import export error.
Thank you very much for the video, it helped me a lot with my portfolio, because I'm starting now and I still don't have much knowledge, your videos are excellent, very well explained and easy to follow, keep it up.
hello, great video, can you talk about hosting such an app? I have learned lots from many of your nextjs tutorials. But am stuck trying to host the site, is there a way to make it a static site? Or using a vps?
Hey, you can use vercel or netlify to host Next.js site. You just have to create github repo and push your code to the repo connect it with vercel and just follow on screen instructions. That's it. I also have one video where I'm using Netlify to host website you can check it out.
A portfolio isn’t just for coders; it’s essential for anyone looking to showcase their work and skills online. Whether you’re a designer, data analyst, or any professional needing a digital presence. It serves as a powerful tool for building your personal brand and demonstrating your expertise, regardless of your field. Having a portfolio helps you present your work effectively and stand out, making it a valuable asset for anyone aiming to establish a strong online presence.
Hey, I'd suggest that you start with their documentation and apply it on your own small projects, you can check their examples to understand more about the implementation.
I watched the video and followed the instructions but still can't complete the dark and light mode when loading the page :( . but this is creative... loving it
@@CodeBucks thank you so much for this tutorial and adding the timestamp🙏. This has been my first react project and I really appreciate how much detail you go into. I got confused by the refresh issue and thought I did something wrong so spent awhile trying to troubleshoot 😵💫. It was only when I gave up and kept watching that I realized you went back and fixed it. I hope the timestamp and this comment will save someone from the same confusion. 😁
Great looking design. The code could be cleaned up a lot but a great intro video. I am quite lost at the stage of creating the svg in canva. Any chance you could walk that through step by step? After canva, remove bg, convert to svg, okay. Then you skip the part where you have converted it into a function. If I replace the path in the svg with my own ones it doesn't scale at all and is oversized. I chose the same instagram option in canva you had
Hey, I'm glad you liked the portfolio, yes code is not cleaned up enough but I have already mentioned that I have kept the code this way for the tutorial only and I don't want to waste time in creating and finding multiple files for the tutorial. I have converted the SVG by using svgr playground then I have used it as a React component. Have you tried converting it using Svgr?
I just finished implementing this and I learn a lot especially when it comes to responsive design and animations using framer motions! Has anyone tried and been able to make the exit transition animation works with next13/14 app router? That's the only thing I can't figure out.
Hey, Congratulations on completing this tutorial. yes it's an issue in the app router and I don't think framer-motion has anything yet that can help us to create the same effect.
If you liked this video don't forget to share your feedback in the comment section, it means a lot❣to me. Also, share this video with your friends who would like to create beautiful websites😉 ----------------------------------------------------------------------------------- Starter CODE: ➡ Link 💚: github.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code Final CODE: ➡ Link 💚: codebucks.gumroad.com/l/cdccc ➡ Link [For INDIAN users] 💚: buy.stripe.com/dR6dRx2HbeyNdz29AD This link contains all the code which is used in the Video -----------------------------------------------------------------------------------
Bro please try to share the code files and the links in the description as soon as possible. Please post the complete code as a single file brother. Thank You so much.
awesome tutorial , learnt a lot and got new ideas to create my portfolio website , Just want to know how you did that svg path as its not explained properly . I have created my own svg image but dont know how to change it in icons svg path for circular text.
@@CodeBucks Yes , it has svg code in icons.js as circular text , i dont know why when i paste my svg path instead of that its not working , how you made that combined path as a one ?. my svg has multiple paths
@@abhinavkumar3405 Have you used canva to create the circular text? Once you convert the png into svg make sure to use react svgr playground to convert that svg to react component.
Thank you so much for your video guide, it was fun and educational at the same time! Has anyone else followed along but on the latest App Router instead of Pages Router. I did that and had to work through some Router changes. Following your guide I am unable to get exit with AnimatePresence to work. Just curious if anyone else ran into the same thing.
Thank you very much for the video, it helped me a lot with my portfolio, because I'm starting now and I still don't have much knowledge, your videos are excellent, very well explained and easy to follow, keep it up. Could you make a video helping to transform the articles part into a blog with cms like Netlify CMS or something like that to generate the posts?
Very nice project, congratulations. Bro, I want to post it on my Hostinger server. Can I use the command: "npm rum build" to convert it and use it as html?
It seems you have explained so well,i have just started and install the setup files.but there is a pages instead of /app . And i wanted to learn about it
Hey, I have used pages directory and not the app because at the time of recording this tutorial app directory was not stable. In my future videos I will use app directory.
It's just an amazing tutorial, as a noob i learnt a lot, I just wanted to know that to add articles should i create a new page and add the articles separately, sorry to ask this as i am a beginner :)
In this portfolio I have only added a component which links to your articles that is on the other website but if you want to add and show your written articles on this same website you could checkout my latest tutorial on how to create the blog using Next.js. After completing that tutorial you could integrate that to this portfolio.
Brother, I have a question, which is: Can I follow your this portfolio video in October 2024 because NextJS version 14 is running? Please help me. Can I completely watch your full portfolio video because your project was so amazing and you did a great job on this portfolio? GOOD WORK BRO.
You can definitely follow this portfolio. The only aspect that won't function in the Next.js 14 App directory is the exit animation that triggers when changing or reloading the page, which relies on Framer Motion. Everything else will work seamlessly. If you opt for the pages directory, the animation will work perfectly.
Here is the process: -> Create the circular text from the canva and get it in the png or any image format -> Use the erase.bg or remove.bg to remove the background and make it transparent -> Use any good png to svg converter to convert it into a svg file -> Use the react-svgr playground to convert the svg to a React component then place it in the Icons.js file
I tried but got multiple path and d value and it's not even work with animation and the background . could you generate one for me please ? i will send you the png and svg file . please provide your mail@@CodeBucks
Hey! I came across this video trough my recommended page. But I'm wondering I'm pretty new to Javascript, where should I begin first? Do you have any other more beginner friendly projects? Thanks!
This is a great work....... congratulations for the views and all the best for your upcoming projects, i have a problem... I'm trying to build a website using html and css....and i want to keep that hovering 'hire me' icon which will redirect to email.....can you please explain how to do it?🙂
You can do that by using anchor link. In the href you have write mailto and email like this "mailto:email@gmail.com" . This will open up the email client.
@@CodeBucks no , actually I guess I didn't make it clear what I want, I'm making a portfolio website for my own, I'm not into this coding and all, but I managed to do it by watching videos.....while watching so, I liked your 'hire me' floating button , and I wanted to do something like that, but I don't know how to do it, because I'm designing my website on html and css , and you're doing it on js, I thought if I created a js file and write the code of you and Linked it to my html , it'll work, but it didn't, and I understand that it's because of something like react js or something, I don't know how to specify that because I don't know, but this is my problem......I don't know how to get that same hovering button in my html , but not js ....can you help me with it??? If you didn't understand, I would like to send you an email of my query so that you can understand better of it, If you did understand, please help me
@@sujaiboddana Hey, you can also create such button using only html and css. Once you get the round text from the canva and transform it to an svg. You just have to use link element and add css to create this hire me button. Place it at the center of the rounded text. You can use the same css I have used for this button. To make the round text spin you can create keyframes in react which rotates the svg.
Thanks! This was an amazing tutorial. Just a question into the crowd - does anyone know how to remove the scroll? I've tried playing around with varying options, like min-h-screen to h-full; also trying on different components (with _app.js as the parent).
This tutorial uses Next.js 13 version but Don't worry everything will work except the exit animation since it is not compatible with the app directory and in the tutorial we are using pages directory. You can follow the tutorial and use the app directory instead of pages and other components will stay the same. Make sure to add "use client" at the top of the component if the component requires browser or user interaction. (use of side effects or useState). Apart from that you can checkout following URL and see how you can migrate from old Next.js version to Next.js 15:
Hope you'll enjoy the tutorial😇
nextjs.org/docs/app/building-your-application/upgrading/version-15
brother i am going to make this portfolio but the problem is that i am using typescript and work on next js 14 but the video is fully opposite of my tech stack now what should i do know i wanted to make this project bcz i like this now what??
@@Malik-of3vv Hey, all the components that we're building in this video are usable in Next.js 14 or 15 version. There is no difference in it. For the typescript you just have to add relevant types for the props/libraries that you are passing to the components.
Finally I have done it! Took me 3 days.
I was trying to learn NextJS and also was in need of a personal portfolio. This tutorial helped me so much. learned a lot about framer motion too. going to do some customization on this to make it unique now. Thanks man!
Great to hear! Congratulations on completing the tutorial. Keep up the great work, and best of luck with your future endeavors!
Hi bro my childern method not working for layout and home file?
@@Gyanendra-Singh Could you share your code where you are getting the problem?
@@CodeBucks where can I share ?
drive.google.com/file/d/1mQCbw1oV1nX1u4E_p1F7OEMWd92JNKYm/view?usp=sharing
@@CodeBucks
I have been searching for the best way to learn Next JS (with Tailwind CSS) on top of React JS. But this tutorial covers that and much more. I haven't watched a tutorial this thorough from beginning to end before. Thank you so much for your willingness to share knowledge.
Great to hear! Thanks for your appreciation😇
@@CodeBucks very nice commnet, i wanted to comment same , thanks man
@@sui16chillax75 your welcome😇
@@CodeBucks can you modify this and develop scend part for the responsiveness for this
@@hamzaali-ie3nq It's responsive and also included that part in the tutorial. Check the timestamps from the description.
Took me 3 days to Complete it but Literally One Of the Best Explained Projects on Tailwind CSS and NextJS ! Loved it
Thank you so much for taking the time to complete the project! I'm glad you found the tutorial helpful and appreciate the positive feedback! 😊
Guys ,if you want then buy it , it won’t do a justice to CodeBucks ….if I just gave you.
Spend around 10 hours building this , and you want for free ?
Not good man .
@@ankitshah4326 Hey, sorry I can not. The code used in the video is same as the provided in the gumroad link.
Hey, can you please tell me the site from where can I get the cover image of my projects?
@@ankitshah4326 Canva
Bro, after everything you've done, I can only say: you're an angel developer
Thank you so much for such kind words😇
I'm doing this and finished only 1 hour long. But OMG I really need to say this. I'm appreciate your work. I have tried to do the whole website myself before but there are too many things I don't know how to do. And sometime the instruction I found on internet is hard to follow and understand. Until I found this video. You make it easy and cover almost everything I need for. Thank you so much.
Thank you so much for your kind words! I'm thrilled to hear my video made your journey easier. I can say once you complete the whole project you'll get more satisfaction and few skills as well.
I enjoyed the code along journey and finally finished it with some tweaks. Thanks man you're a star!
I'm glad you liked it😇
This is the most impresive portfolio I have seen. Currently working on another when with tutorial help and making it my own but wow, I just feel like starting over with thiis one.
Hey, I'm glad you liked this portfolio😉 I hope this will help you learn and build your own portfolio.
After 15 days with full determination, now I can say that I have done exactly like this. Initially it was looking tough for me and I supposed it may have frustrated. With patience I was keeping doing the development and follow your instructions then now i complete 💯. Thank you for the awesome portfolio guidence.
Hey, Congratulations🎉 on completing the whole tutorial and thanks for all the appreciation.
can you share your website link?
@@gaurav13020He might not have it running.
Jumping to your next NEXT.JS tutorial: Next.js Blog Tutorial. You truly are the best!! 😊💗 Thanks heaps and heaps again bro!
Thank you for your kind words❣ It means a lot.
thank you. i'm confused about what design i should use for my portofolio, so i decided to use this video
I'm glad that you liked it!😄
That's the best guide to create Portfolio Website I have ever seen in my life. Thank you so much ~
Glad it was helpful!😉
@@CodeBucks Bro please try to share the code files and the links in the description as soon as possible.
Please post the complete code as a single file brother. Thank You so much.
@@pandipatipavan3804 Hey Code is already shared in the description.
@@CodeBucks Fine. Done brother. Thank You so much.
wow this looks amazing… cant wait to start on it 👨💻
Hope you enjoy it!😉
I am not even a web developer but still wanted to make a portfolio website of my own. Glad I saw this video. Great work brother🙌
Thanks for your kind words😇
Dude, this tuto is so great!!!!you did everything without using any package...RESPECT!!!! you are very good....
Thanks a lot! 😇
Bro, excellent content. I'm just halfway through and have already learned a lot of new things; thanks for showing how you got the assets, which is often not covered by other creators
Glad to help! Thanks for your kind words😇
bro can you share your github repo
Haven't quite finished yet (up to dark/light mode) but gotta say this is the most fun tutorial I have ever done on UA-cam... just so cool... usually (because it is work) everything is grindy but this is creative... loving it...
Thank you so much for your kind words! Keep up the enthusiasm, and happy learning! 🎉
is dynamic can we add things later on
Finally completed will update and make it more precise according to my need....thanks for the video it is one of the most effecient and understable video i have seen so far.....
Congratulations🎉 on completing this tutorial. I'm glad you liked the video😇
This is beautiful work bro, the portfolio is superb
Glad you like it!😉
man u r too good to be a real person
thank u so much u r the BEST❤❤❤❤
Thank you for all the appreciation❣️
I got a Job just because of this tutorial . Seriously Love you and thanks for this
wow! I'm really happy for you. Thanks for sharing and congratulations🎉
After more than 50 hours I have completed this portfolio using Vite instead of Next. I added some features like an animation for closing navbar, when the navbar is open and resize the page it's close and added an other icon with the italian flag and the english flag for changing the language. Thank you very much for this video :)
Congratulations🎉 on successfully completing this entire tutorial! I hope it has been helpful in enhancing your knowledge.
I would love to see the changes that you have made.
I texted you on instagram because I cant share you the link here. Please be nice :D@@CodeBucks
I would like to but I dont know how to send it to you. They keep deleting my comment here...@@CodeBucks
Amazing video. Thanks man! Just subscribed and look forward to more NextJS content!
Hey, Thanks for the subscribe. I am glad you liked the video. More Next.js projects coming soon.
Great Work Bro Such an Aesthetic and Minimalistic Portfolio i was in search of good design like this Awesome Work
Glad you like it
Really great work! Thanks for sharing
I'm glad you liked it🥳
Wow, I'm thoroughly impressed by your portfolio! I've only watched about 8 minutes so far, but it's already the best one I've seen. I do have a question though - I don't have much experience with NextJS, but I'm comfortable with Tailwind and Framer Motion. Everything else looks good to me, but I'm a little bit intimidated by NextJS. I've worked on a few projects before with version 12, and I also did a crash course on version 13, so I do have some familiarity with it. However, after watching your video, I feel inspired to take a deeper dive into JavaScript and tackle NextJS version 13. Thank you so much for sharing your knowledge and expertise. I've already subscribed to and liked your video, and I'll do my best to understand NextJS 13.
Hey, thanks for all the appreciation❣️. Next.js is really not that hard and whenever you found any concept a bit hard then you can read the documentation right away which will increase your conceptual understanding. You can reach out to me if you need any help.
@@CodeBucks thank u so bro until now im ok im about 30 minute now I fill ok so if I need help ill ask u thank u so much
@@CodeBucks Hey bro, Can I get this complete code for free if it is possible. If you could provide me the code for free then it will be really helpful for me to my further projects and it could raise or boost my skills and levels in the Resume and Profile. So I hope you can understand the situation and kindly do provide me the code files and the links in the description for free as soon as possible for free. I will be waiting for your response. Thank You.
@@pandipatipavan3804 Hey, I don't think If I give you code then it will boost your skills. Instead if you follow the whole tutorial then it will increase your skills for sure. The final code is the same as shown in the tutorial. You can give some time and follow the tutorial it will benefit for your future and definitely you'll learn something.
@@CodeBucks Yeah okay bro. Thank You so much ❤️
You’re the bestt mshaalah
I'm glad you liked it 😊
awesome lesson! thank you!
I'm glad you enjoyed it!
Wow after over 2 weeks I finally finished! Took much longer because I wanted to do some side quests and add some custom features and also fixing numerous unforeseen bugs that only seem to to occur on my end which lead me to going down into many rabbit holes. Thanks so much @codebucks for making this tutorial! Your coding and design skills are incredible and I really appreciate you putting in hours at a time and the effort to teach others these modern frameworks and technologies.
Hey, Congratulations🎉 on completing this tutorial, I know it's long but I guess it's worth it to create your own portfolio. I appreciate your kind words and I'm glad you liked the video, have a great journey ahead.
If you get errors on your end, it's most likely because you are using different versions of the packages used. A simple way to start (for those who want to learn and not just straight copy the entire code) is to first copy the package file into your own, then start writing the code. This prevents any different scenarios in case of deprecated functionality etc.
Show us your results. Any vercel uploading??
can u give ur github profile
Best portfolio website tutorial in UA-cam, your channel is among the underrated channel. Like and comment so that your channel reach out more Best wishes brother
I'm glad you liked this tutorial😇 Thanks for your kind words and wishes.
Amazing man i love this portfolio..
Thanks man😁
Awesome tutorial! Thank you!
I'm glad you liked it😇
This is so perfect lesson. Thank you so much!
Glad you liked it😇
Amazing tutorial. Finally watched and coded along till the end of it. 🎉
Hey, that's great. I'm glad that you completed the whole tutorial😉 Keep coding✨
@@CodeBucks Thank you 🙏🏻
Excellent video. Thanks for such a detailed tutorial!
I'm glad that you liked the video😇
Hii sir!!, i found this video last week, i am so glad that i've finished this tutorial with my own style preference, it takes 7 days for me to finish this, thank you so much😁
Hey, I'm glad that you liked the tutorial. Congratulations on completing this portfolio😉
Can you share your github repo of this project?
Wow, I'm thrilled to announce that I just finished watching your video! I cannot recall how many days it took me, but I spent around 30 minutes to an hour every day watching it. Plus, I also took a JavaScript course, and I must say, it was an incredible experience, and I am grateful to you for sharing your expertise. Your project is so fantastic that I hope it garners more than a million views. Thank you for your hard work and dedication. I can't wait to see what you'll create next with NextJS 13. If I may make a suggestion, could you consider incorporating sanityCMS in your future projects? Thank you once again! ... comment was done by chatGPT wow 🙂
Hey, thank you for all your kind words😄, Sure I will try to add CMS in my next videos. Hope you have a great developer journey ahead😉
Awesome work bro👏
Thanks man😁
I just finished the whole tutorial. Thank you soo much
Hey, Thank you for finishing the whole tutorial. I appreciate your efforts 🎉
whats your github link
@@wiizyhimsev6172 Here is my github profile: github.com/codebucks27
Here is the project repo of starter code:
github.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code
thank you for such a cool tutorial,im sure i will learn a lot of new things，look forward more tutorials about new skills.
You are welcome! Sure I will soon create one tutorial like this one. 😇
Amazing video! Keep it up! I bought the code too and finished the video
Awesome thank you for your purchase!😇
Thankx for your guidelines
Any time😇
Nah bro. You just gained one subscriber. Very nice work
Hey, thanks for the sub!😉
whats even better is to make something just as useful as framer motion was for this creation.
Hey, can you suggest your ideas or any project that you have in mind?
@@CodeBucks that's a million dollar question
Uau! Amazing project!. I love this
Thank you! Cheers!
I'm planning to do this for my design portfolio. I have a background in HTML and CSS, Next JS makes it pretty nice to create components even though I don't know React very well.
I think You should watch any crash course available on React then you will understand this much better.
Thanks man you're a star!🤗
Thanks for your kind words😇
Fantastic portifolio!
Glad you think so!🍻
Amazing job! Thank you so much!
I'm glad you liked it😇
Thank you so much man, keep up your Work!!!
I'm glad you liked it. Yes we'll do😇
Actually an awesome tutorial
Very helpful 🎉❤
Could you please make another video for deployment of these kind of app 😊
Thanks for your kind words! Sure I will create one video for deployment.
Really good job dude!
Hey, thanks!😇
This is beatiful job 🤩
I'm glad that you liked it😇
can't wait to follow along.
I hope you will like the whole tutorial 😇
I just finished watching your video and I found it to be super amazing. I want to express my appreciation for your excellent work.
Glad you enjoyed it. Thanks for your appreciation!😇
did you build the portfolio..without getting any error?
@@tanyaverma9450 Yes I did. Did you face any error?
@@tanyaverma9450 Let me know which error you are facing.
this is beautiful!
Thank you😇
Excelent... can wait to see something using React three fiber and GSAP again!
Sure I will keep this in mind for the future tutorials, for now you should check the iPhone launch page from the other videos. In that tutorial I have used react-three-fiber and gsap.
Wow! Thanks for sharing!
Your welcome😄
Thank you so much this is very helpful I’ve been watching your video for over 5 days now I’m finally done thank a lot it’s helpful 🙌🙌 I got everything correctly no errors aside the skills part and the circle it wasn’t responsive to I had to change it but thanks a lot ❤️
I subscribed 🙌
I'm glad you liked it. Congratulations on completing this tutorial🎉
Can you please share your github repo of this project?
@@ankitshah4326 Hey, you can get the code from gumroad link.
You worked so hard to make it
Hey, yes😅 It's long tutorial. Thanks for noticing😇
Amazing... But the previous portfolio website was the best
Yes, both of these portfolios has different approach to UI and UX. This portfolio has traditional vertical layout while the old portfolio has unique layout.
thx bro, for this tutorial , i hope for you the best
Hey, I'm glad that you liked the video😇
Hi, first off, I want to say that I thoroughly enjoyed building my portfolio following your guidance. It's been a fantastic learning experience! I'm curious about one aspect of your approach: I noticed you often use a desktop-first strategy for styling. Could you share your insights on why you prefer this method over the mobile-first approach, especially considering the mobile-first philosophy of frameworks like Tailwind CSS? I'm eager to understand the benefits and reasoning behind this choice. Thanks for all the great content and looking forward to your response!
I'm happy to hear that you found my video helpful in building your portfolio.
Regarding your question, the choice between desktop-first and mobile-first often comes down to the specific needs of the project and the audience it's targeting. In my case, while I recognize the growing importance of mobile-first design, especially with frameworks like Tailwind CSS, I often start with desktop-first for a few reasons.
1) Many of the projects I work on have a user base that accesses content via desktop. This makes it logical to prioritize the desktop experience.
2) I find that certain design and functional elements are easier to conceptualize and implement initially on a larger screen. This allows me to explain complex UI element or animation easily and it will be easier for a begineer to learn and implement it.
3) As per my experience In mobile devices due to small screen we have to hide some elements thus we can not completely create everything like we do in the desktop-first approach.
I do use desktop first approach but I always make sure that the final product is fully responsive and provides a seamless experience across all devices. I hope this answers your question.
Hi, please would like to ask, were you able to use midjourney
@@arikedada No, I used chatGPT 4.0
this is fire❤🔥❤🔥❤🔥❤🔥❤🔥❤🔥❤🔥❤🔥❤🔥. this alone is enough to subscribe
Hey, Thank you. I'm glad you liked it😇
Hey, I loved this course bro, it's splendid portfolio website!
but I had this doubt that, is this the only method to theme the website? -- like go to every page and then use dark:text-light... and all?
But all-in-all I loved this tutorial! 💗
Actually you can use variable, first you can define variable in :root in the globals css file then use that variables in the tailwind Css. Then add one prefers-color-scheme media query and change the variable value based on the prefered color schema.
@@CodeBucks oh okay... Thanks a lot for your reply! That's so sweet of you to reply 💗
Just be aware that when you get to the Logo/Icons section make sure that export const DribbleIcon on line 75 of icons.js is written with two letter Bs and not DribbbleIcon with 3 B's as this caused me an error and had to work backwards to realise there was an extra B there that caused an import export error.
Thanks for the clarification!
Thank you very much for the video, it helped me a lot with my portfolio, because I'm starting now and I still don't have much knowledge, your videos are excellent, very well explained and easy to follow, keep it up.
I'm glad it helped you😇
nice thank you 👌👌🙌🙌👍👍
Welcome 😊
hello, great video, can you talk about hosting such an app? I have learned lots from many of your nextjs tutorials. But am stuck trying to host the site, is there a way to make it a static site? Or using a vps?
Hey, you can use vercel or netlify to host Next.js site. You just have to create github repo and push your code to the repo connect it with vercel and just follow on screen instructions. That's it. I also have one video where I'm using Netlify to host website you can check it out.
vercel is the way to go. like two clicks to deploy. It'll even fetch from your github and deploy changes automatically when you push
What is the point of creating such portfolio and use it if you can not code it on your own? Serious question :)
A portfolio isn’t just for coders; it’s essential for anyone looking to showcase their work and skills online. Whether you’re a designer, data analyst, or any professional needing a digital presence. It serves as a powerful tool for building your personal brand and demonstrating your expertise, regardless of your field. Having a portfolio helps you present your work effectively and stand out, making it a valuable asset for anyone aiming to establish a strong online presence.
Thanks bro...✨
Welcome 😊
This is next level
I'm glad you liked it😇
Thanks for the tut. Great learning. Can you suggest on how can we get more details learning for Framer-motion?
Hey, I'd suggest that you start with their documentation and apply it on your own small projects, you can check their examples to understand more about the implementation.
I watched the video and followed the instructions but still can't complete the dark and light mode when loading the page :( . but this is creative... loving it
Share your code of the hook so that I can take a look.
Awesome bro! On the Home section, Do you know what that type of portrait(Person image) is called?
Hey, I have used digital art created by using midjourney. You can get the prompt from the starter code files.
BUG FIX Timestamp: Dark Mode on refresh - @4:10:09
Done! By the way it's not bug😉
@@CodeBucks thank you so much for this tutorial and adding the timestamp🙏. This has been my first react project and I really appreciate how much detail you go into.
I got confused by the refresh issue and thought I did something wrong so spent awhile trying to troubleshoot 😵💫. It was only when I gave up and kept watching that I realized you went back and fixed it. I hope the timestamp and this comment will save someone from the same confusion. 😁
@@GentlemanTomcat I'm glad you liked the tutorial. Thanks for the timestamp as well. It was very thoughtful suggestion.
Great looking design. The code could be cleaned up a lot but a great intro video. I am quite lost at the stage of creating the svg in canva. Any chance you could walk that through step by step? After canva, remove bg, convert to svg, okay. Then you skip the part where you have converted it into a function. If I replace the path in the svg with my own ones it doesn't scale at all and is oversized. I chose the same instagram option in canva you had
Hey, I'm glad you liked the portfolio, yes code is not cleaned up enough but I have already mentioned that I have kept the code this way for the tutorial only and I don't want to waste time in creating and finding multiple files for the tutorial. I have converted the SVG by using svgr playground then I have used it as a React component. Have you tried converting it using Svgr?
I just finished implementing this and I learn a lot especially when it comes to responsive design and animations using framer motions!
Has anyone tried and been able to make the exit transition animation works with next13/14 app router?
That's the only thing I can't figure out.
Hey, Congratulations on completing this tutorial. yes it's an issue in the app router and I don't think framer-motion has anything yet that can help us to create the same effect.
If you liked this video don't forget to share your feedback in the comment section, it means a lot❣to me.
Also, share this video with your friends who would like to create beautiful websites😉
-----------------------------------------------------------------------------------
Starter CODE:
➡ Link 💚: github.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code
Final CODE:
➡ Link 💚: codebucks.gumroad.com/l/cdccc
➡ Link [For INDIAN users] 💚: buy.stripe.com/dR6dRx2HbeyNdz29AD
This link contains all the code which is used in the Video
-----------------------------------------------------------------------------------
Bro please try to share the code files and the links in the description as soon as possible.
Please post the complete code as a single file brother. Thank You so much.
I have already shared the code links in the description and in this pinned comment as well😇.
@@CodeBucks Done. I got the code from the description. Thank You so much ❤️ brother. All The Best 👍 for your success. Thank You 🙏
@@CodeBucks Please provide the code files and the links for free. I really want this code for free brother.
Hey, you can follow the tutorial, the final code is same as in the tutorial. Also by following the tutorial you'll learn thing or two.
awesome tutorial , learnt a lot and got new ideas to create my portfolio website , Just want to know how you did that svg path as its not explained properly . I have created my own svg image but dont know how to change it in icons svg path for circular text.
Glad you liked it! Are you refering to the circular text that is in the home page?
@@CodeBucks Yes , it has svg code in icons.js as circular text , i dont know why when i paste my svg path instead of that its not working , how you made that combined path as a one ?. my svg has multiple paths
@@abhinavkumar3405 How did you created your svg?
@@CodeBucks The same way as mentioned in video by using adobe express
@@abhinavkumar3405 Have you used canva to create the circular text? Once you convert the png into svg make sure to use react svgr playground to convert that svg to react component.
I really loved your video! :) Very good!
How would you make a cms system for the blog and projects? would be a nice video to also learn from
Hey, i'm glad you liked the video. Yes in future videos I will use CMS based application.
@@CodeBucks Please do as soon as possible it's such a great Idea!!!!! also thanks a lot for this video
@@idank9753 Sure.
Thank you so much for your video guide, it was fun and educational at the same time! Has anyone else followed along but on the latest App Router instead of Pages Router. I did that and had to work through some Router changes. Following your guide I am unable to get exit with AnimatePresence to work. Just curious if anyone else ran into the same thing.
Hey, I don't know if anyone have faced similar issue. Make sure you pass key to the AnimatePresence component and try again.
I've found the same issue, have you found the solution?
Thank you very much for the video, it helped me a lot with my portfolio, because I'm starting now and I still don't have much knowledge, your videos are excellent, very well explained and easy to follow, keep it up.
Could you make a video helping to transform the articles part into a blog with cms like Netlify CMS or something like that to generate the posts?
Hey, thanks for all the appreciation. Yes I will create a video on creating a blog using CMS or local files.
Very Good! thks guy!
Could you please make the same portfolio by using vue.js and Tailwind CSS? Please make a video on this.
Hey, I have not much experience with vue.js but sure In the future I'll create another portfolio video using vue.js
@@CodeBucks Thanks I am waiting please make it soon.🙂
Very nice project, congratulations.
Bro, I want to post it on my Hostinger server.
Can I use the command: "npm rum build" to convert it and use it as html?
Hey, Thanks for your kind words. I don't know about the hostiger but I'm sure you will get tutorials to help you to host the Next.js website.
It seems you have explained so well,i have just started and install the setup files.but there is a pages instead of /app . And i wanted to learn about it
Hey, I have used pages directory and not the app because at the time of recording this tutorial app directory was not stable. In my future videos I will use app directory.
It's just an amazing tutorial, as a noob i learnt a lot, I just wanted to know that to add articles should i create a new page and add the articles separately, sorry to ask this as i am a beginner :)
In this portfolio I have only added a component which links to your articles that is on the other website but if you want to add and show your written articles on this same website you could checkout my latest tutorial on how to create the blog using Next.js. After completing that tutorial you could integrate that to this portfolio.
Thanks a lot for the reply, you are great ✨
Brother, I have a question, which is: Can I follow your this portfolio video in October 2024 because NextJS version 14 is running? Please help me. Can I completely watch your full portfolio video because your project was so amazing and you did a great job on this portfolio? GOOD WORK BRO.
You can definitely follow this portfolio. The only aspect that won't function in the Next.js 14 App directory is the exit animation that triggers when changing or reloading the page, which relies on Framer Motion. Everything else will work seamlessly. If you opt for the pages directory, the animation will work perfectly.
@@CodeBucks ok brother thats great
Very well done. I didn't like the Desktop first approach.
I really need that thanks
1:22:27 - How you convert circular-text.png to svg in icon.js bit confused
Here is the process:
-> Create the circular text from the canva and get it in the png or any image format
-> Use the erase.bg or remove.bg to remove the background and make it transparent
-> Use any good png to svg converter to convert it into a svg file
-> Use the react-svgr playground to convert the svg to a React component then place it in the Icons.js file
I tried but got multiple path and d value and it's not even work with animation and the background . could you generate one for me please ? i will send you the png and svg file . please provide your mail@@CodeBucks
which icon theme are you using? is very minimalistic
Do you mean vs code theme or icons in the website?
Nice portfolio❤❤
Hey Thanks😉
i love this guy
🥂
Hey! I came across this video trough my recommended page. But I'm wondering I'm pretty new to Javascript, where should I begin first? Do you have any other more beginner friendly projects?
Thanks!
Hey, How much do you know about the React.js or you want to make projects in JavaScript?
This is a great work....... congratulations for the views and all the best for your upcoming projects, i have a problem... I'm trying to build a website using html and css....and i want to keep that hovering 'hire me' icon which will redirect to email.....can you please explain how to do it?🙂
You can do that by using anchor link. In the href you have write mailto and email like this "mailto:email@gmail.com" . This will open up the email client.
@@CodeBucks no , actually I guess I didn't make it clear what I want, I'm making a portfolio website for my own, I'm not into this coding and all, but I managed to do it by watching videos.....while watching so, I liked your 'hire me' floating button , and I wanted to do something like that, but I don't know how to do it, because I'm designing my website on html and css , and you're doing it on js, I thought if I created a js file and write the code of you and Linked it to my html , it'll work, but it didn't, and I understand that it's because of something like react js or something, I don't know how to specify that because I don't know, but this is my problem......I don't know how to get that same hovering button in my html , but not js ....can you help me with it??? If you didn't understand, I would like to send you an email of my query so that you can understand better of it, If you did understand, please help me
@@sujaiboddana Hey, you can also create such button using only html and css. Once you get the round text from the canva and transform it to an svg. You just have to use link element and add css to create this hire me button. Place it at the center of the rounded text. You can use the same css I have used for this button. To make the round text spin you can create keyframes in react which rotates the svg.
Thanks! This was an amazing tutorial. Just a question into the crowd - does anyone know how to remove the scroll? I've tried playing around with varying options, like min-h-screen to h-full; also trying on different components (with _app.js as the parent).
Can you tell me which scroll you want to remove?
I’m stuck at 27:56 the transition and infinity mine isn’t working I’m getting an error message in the local host please help 🙏🏾
Hey, Can you tell me the error message that you are getting?
A request please turn on auto save for reloading the page it on a real time that will help beginners . They'll see what's happening
Hey, can you explain what do you mean by auto save for reloading?