Thanks for a great tutorial! For those, who stuck with bento grid not working properly, in BentoGrid component string part of return className should be: "grid grid-cols-1 md:grid-cols-6 lg:grid-cols-5 md:grid-row-7 gap-4 lg:gap-8 mx-auto" Replace default Aceternity style with this, and it should work like a charm
@@samski17 not completely sure what could be the reason, but you probably should check that you've done everything correct starting from 21:42. If everything is copied-pasted and edited correct, might be some trouble during installation of Tailwind lib
The fix for the hydration error message involving and is actually pretty straightforward. The error is coming from the fact that there is an nested inside of a in the 3d-pin.tsx file (just search for "" in that file to find it). You should never have a link nested inside another link. So to resolve it, just change the to a instead. The linking functionality is passed down from so that inner isn't necessary. Hope this helps!
Woe dude nice job! Could you tell me what are the prerequisites that I should know before starting to make this? I know js html & css. Ofc I'm learning React but it's gonna take time
@@jadencoober6484html css javascript, typescript a bit similar to jsband a bit react and it's component and you are ready to go buddy but even though you don't know these still I would suggest you to go through from it you will get to know many things that you are not going to learn from boring lectures 🩵
This tutorial is pure gold! The way you integrated Next.js with Framer Motion is super smooth. It really takes the portfolio game to the next level! 🚀 The section at [12:45] where you explain the animations in detail was a game-changer for me! Totally inspired to revamp my own portfolio now. Thanks for the clear and easy-to-follow guide!
Awesome tutorial! If someone is stuck with the ReactCurrentOwner error when making the globe, try downgrading Next.js to version 14. It might fix the issue(you will have to change the next.config.ts file as well!).
You're awesome mehn 🔥🔥 I was planning on redesigning my portfolio this week. Great timing. I have been following your channel for years now and you never disappoint.
Hello, I'm from Brazil, I really learned a lot from this video, I hope you can always create these videos that are better than many courses I've already taken here..... thank you and may God bless and gave everything for you and yours team keep up the wonderful work 👏👏👏😁
That was amazing Adrian, this is the first portfolio I have ever made, and I am pretty confident in that. And of course I plan to make good changes in it soon. Thank you again and have a blessed life.
For those who meet "hydration error" in RecentProjects component, try using dynamic import instead: replace import { PinContainer } from "./ui/Pin"; with import dynamic from "next/dynamic"; const PinContainer = dynamic( () => import("./ui/Pin").then((mod) => mod.PinContainer), { ssr: false } );
Another option is inside /3d-pin, change the to a div, then just add the somewhere inside the in /RecentProjects. Seems to just be an HTML nesting issue with the pin component from Aceternity
Thank you, Adrian! Every project you share is of such high quality, and it's even more impressive how easy they are to understand thanks to your clear explanations and excellent accent.
Thank you very much, I learn a lot about design and how to implement these things for my websites, these types of shorter projects are appreciated but they teach a lot
Thank you for your great tutorial! Yesterday, I graduated from a Web Development Bootcamp. During the bootcamp, I sought inspiration and examples by following your channel. Amazing! Your explanations and material are understandable for a beginner like me! I am very grateful to have followed this channel. Right now i already have my own Website Portofolio by watching this video and edit some part. God bless you, good person!
Adrian you're the best teacher that's still provides free content unlike other youtubers who are fake with the so called "free" but only provide paid reference code and no Github repo, they just want to sell every piece of code they teach and they don't offer any other options or solution for any bugs of their projects. I'm sick and tired of them. I'll just stick with you in the future
for the issue in the footer, we can use the className "overflow-clip" it also words and solve it. You don't need to remove the whole div as it was looking great
Awesome tutorial Adrian! This is the second react portfolio tutorial I'm watching on JSM, I watched the one from 3 years ago now this and I like this one better, though I wished the portfolio had a blog section for marketing and all. I think organic traffic would be a boost for freelance developers.
Guys in the tutorial he tells you to make a ui folder, the spotlight animation, button, or text generation will not work unless you add "./ui/**/*.{ts,tsx}", to the tailwind.config.ts file in the content section
Hi Adrian, thank you for the amazing portfolio tutorial! Your content is always top-notch and incredibly helpful. Could you please consider creating a tutorial on building a social media app using Expo and Appwrite? I think it would be a fantastic project for the community. Thanks again for all your hard work!
You are the best. I wish I could sign up for the jsm masterclass and dive deep into the world of Javascript, React and Next.js. Love your content and dedication.
Great Tutorial, But you are not following the NextJS guidelines. One of the most common mistake you are doing is you have to rename the component names to pascal case.
22:35 : Ah so that is why the whole tutorial is only 3 hrs long. Without that pasting and component fiddling it would be 10 hours ;) So very much appreciated that you helped me get past this step which is the main reason I never completet a react, next or svelte project ... This calls for a meme: "BRO JUST GAVE US WORKING NEXTJS"
Great work as always. Brings new features and integrating it seamlessly for the community to follow along and build exciting projects every time kudos to you adrian!!! 🎉
This is absolutely legendary! 💎I've learned so much from your tech content, and this tutorial is perfect for showcasing web development skills and as always quality of your teaching, animation, and video production Premium. Keep up the fantastic work! ❤
This is great! It would be awesome if this had an admin panel feature as well which allows the user to edit content without touching the code (lets say only text and images for now)
The web ui designs, use of nice images and colors are what always sold your websites tutorials. How do you come up with such designs effortlessly everytime.
@br3ak_ I actually try to add my own creative touches to it while i am coding along with the video, even add my own design. I try to do each component my own way before continuing to watch the solution provided by the vide.
Loving the tutorial! Got a hydration which I could resolve with the suppressHydrationWarning attribute on the html tag within the root layout. But then I got a type error...Cannot read properties of undefined (reading 'ReactCurrentOwner'). Anyone else got the same? ** Got this resolved by down grading to Next.js 14
You are killing me 😭. I literally just finished your 3d portfolio one and before that I was doing your other portfolio website😂. Thanks for everything you do though ❤😂
I know pretty much 0 about coding was told the best thing to learn is to jump straight into a project which is why I'm following you, I'm noticing as I'm following you alot of errors happen and I don't even know if what I'm doing is right or wrong. Do you think I should not jump straight into projects?
great content, but only worth it when you have some experience and knowledge of the libraries and frameworks used in this project and also debugging skills to understand your own code
Thanks for a great tutorial!
For those, who stuck with bento grid not working properly, in BentoGrid component string part of return className should be:
"grid grid-cols-1 md:grid-cols-6 lg:grid-cols-5 md:grid-row-7 gap-4 lg:gap-8 mx-auto"
Replace default Aceternity style with this, and it should work like a charm
GOOD JOB BRO
thnk youu bro
I'm stuck with TypeError: flattenColorPalette is not a function
in the tailwind.config.ts
have any idea?
@@samski17 not completely sure what could be the reason, but you probably should check that you've done everything correct starting from 21:42. If everything is copied-pasted and edited correct, might be some trouble during installation of Tailwind lib
Excellent, yes this matches his github repository.
Can’t believe how much value you provide for free! Amazing 🔥🔥
Appreciate it! 🔥
The fix for the hydration error message involving and is actually pretty straightforward. The error is coming from the fact that there is an nested inside of a in the 3d-pin.tsx file (just search for "" in that file to find it). You should never have a link nested inside another link. So to resolve it, just change the to a instead. The linking functionality is passed down from so that inner isn't necessary. Hope this helps!
html goat right here
thanks!
thanks brother, it helps me a lot
This is the type of content for which I pay my internet bills for!!
Thank you very much. Took me 4 - 5 days to complete this project but finally done. Amazing learning experience! Many thanks :)
Woe dude nice job! Could you tell me what are the prerequisites that I should know before starting to make this? I know js html & css. Ofc I'm learning React but it's gonna take time
@@jadencoober6484html css javascript, typescript a bit similar to jsband a bit react and it's component and you are ready to go buddy but even though you don't know these still I would suggest you to go through from it you will get to know many things that you are not going to learn from boring lectures 🩵
This tutorial is pure gold! The way you integrated Next.js with Framer Motion is super smooth. It really takes the portfolio game to the next level! 🚀 The section at [12:45] where you explain the animations in detail was a game-changer for me! Totally inspired to revamp my own portfolio now. Thanks for the clear and easy-to-follow guide!
Awesome tutorial!
If someone is stuck with the ReactCurrentOwner error when making the globe, try downgrading Next.js to version 14. It might fix the issue(you will have to change the next.config.ts file as well!).
I did this and for some reason all the layout is messed up after using the same version of next as in the demo and copying the next.config.mjs file.
You're awesome mehn 🔥🔥 I was planning on redesigning my portfolio this week. Great timing.
I have been following your channel for years now and you never disappoint.
Those animations are just WOW. This will be a great project to build.
Definitely! 😊
I'm somewhat between an beginner and intermediate react developer and I don't know NextJs, is it worth watching this tutorial for me?
@@themountains1701 yes
It's really nice that you included an example of how you configure Tailwind. Keep up the great work! I'm always following your updates.
Man... from Chile, my thanks. Your content is of the highest quality. I will save up to buy your course as soon as I can. Best regards!
I'm so happy to hear that!
Hello, I'm from Brazil, I really learned a lot from this video, I hope you can always create these videos that are better than many courses I've already taken here..... thank you and may God bless and gave everything for you and yours team keep up the wonderful work 👏👏👏😁
I'm liking your new videos automatically because I already know that it's gonna be fire!
Thank you!
That was amazing Adrian, this is the first portfolio I have ever made, and I am pretty confident in that.
And of course I plan to make good changes in it soon.
Thank you again and have a blessed life.
We still haven't gotten over the banking app and here you dropped another banger. 🙌🙌🙌
Yesss! 😊
Those animations are amazing, now want to go deeper with the Framer Motion. Thanks for the inspiration!
For those who meet "hydration error" in RecentProjects component, try using dynamic import instead:
replace
import { PinContainer } from "./ui/Pin";
with
import dynamic from "next/dynamic";
const PinContainer = dynamic(
() => import("./ui/Pin").then((mod) => mod.PinContainer),
{ ssr: false }
);
Thanks bro ! very helpful
Thanks
thanks man! but can you tell me what was the issue and what was the fix? so that we can also understand for future reference.
Another option is inside /3d-pin, change the to a div, then just add the somewhere inside the in /RecentProjects. Seems to just be an HTML nesting issue with the pin component from Aceternity
My thmesProvider is not dooing my whole theme black, the texts are in black and bg for hero section is white, How to resolve ?
1:30 it should be Deployment and Launch 😊
Amazing!! ❤️
@@javascriptmastery For 1 or 2?😊
Thank you, Adrian! Every project you share is of such high quality, and it's even more impressive how easy they are to understand thanks to your clear explanations and excellent accent.
Thank you very much, I learn a lot about design and how to implement these things for my websites, these types of shorter projects are appreciated but they teach a lot
I'm so happy to hear that!
Thank you for your great tutorial! Yesterday, I graduated from a Web Development Bootcamp. During the bootcamp, I sought inspiration and examples by following your channel. Amazing! Your explanations and material are understandable for a beginner like me! I am very grateful to have followed this channel. Right now i already have my own Website Portofolio by watching this video and edit some part. God bless you, good person!
bro can turn any demand into reality ❤
Thanks JS just finished the project and made some changes looks great, as always keep it up
Great to hear!
Can you share deployed link
As everything from aceternity ... Kudos to Manu paaji 👏🏻👏🏻
Adrian you're the best teacher that's still provides free content unlike other youtubers who are fake with the so called "free" but only provide paid reference code and no Github repo, they just want to sell every piece of code they teach and they don't offer any other options or solution for any bugs of their projects. I'm sick and tired of them. I'll just stick with you in the future
Thank you so much! That's the goal!
The man, The myth, The legend is back with new content. 🎉
Thank you! 🎉
The best! thank you for always giving high quality contents.
My pleasure!
literally doing gods work out here.
sir, always amazed by the kind of ui ux designs you bring life to. they are just amazing.
for the issue in the footer, we can use the className "overflow-clip" it also words and solve it. You don't need to remove the whole div as it was looking great
Thank you for consistency Adrian❤❤❤❤❤❤❤❤❤❤❤❤
Always!
I spend 5 day on this tutorial but finally got my top-notch portfolio! :)
Hi, could you please provide the code for this project? I'm encountering several errors while working on it.
@@sachinkumar-yz6ul bro have all of you issues have been fixed?
are all resources being used free?
I think this tutorial is over my head right now, I'm too much a beginner to follow and understand everything. I'll go back to the basics.
Thanks
Awesome tutorial Adrian! This is the second react portfolio tutorial I'm watching on JSM, I watched the one from 3 years ago now this and I like this one better, though I wished the portfolio had a blog section for marketing and all. I think organic traffic would be a boost for freelance developers.
you'r a legend ! Thanks for sharing such high quality tutorials
I appreciate that!
Guys in the tutorial he tells you to make a ui folder, the spotlight animation, button, or text generation will not work unless you add "./ui/**/*.{ts,tsx}", to the tailwind.config.ts file in the content section
OMG! So comprehensive ! Great work !
There are honestly no words just thanks
Thank you so much for what you do for the community Adrian!
My pleasure!
Supercool, Thankyou for using Aceternity UI and explaining it so well. :)
Well, thank you for MAKING IT! :D
Hi Adrian, thank you for the amazing portfolio tutorial! Your content is always top-notch and incredibly helpful. Could you please consider creating a tutorial on building a social media app using Expo and Appwrite? I think it would be a fantastic project for the community. Thanks again for all your hard work!
Great suggestion!
Really your coding and design is op
Nice job ❤❤❤
Thanks 😄
You are the best. I wish I could sign up for the jsm masterclass and dive deep into the world of Javascript, React and Next.js. Love your content and dedication.
Thank you!
Thanks for sharing this content with us! That helped me a lot.
God bless you.
You're my Inspiration 💥
Always a pleasure to see your videos ! Thanks
My pleasure!
Adrian you're such a hardworking person ✨
Oh thank you!
always love your videos man! Keep up the good work!
Thanks! Will do!
bro just changed my whole life in 2hrs plus
You are absolutely awesome. Thanks for sharing all the knowledge and I know this is not easy.
Great Tutorial, But you are not following the NextJS guidelines. One of the most common mistake you are doing is you have to rename the component names to pascal case.
22:35 : Ah so that is why the whole tutorial is only 3 hrs long. Without that pasting and component fiddling it would be 10 hours ;) So very much appreciated that you helped me get past this step which is the main reason I never completet a react, next or svelte project ...
This calls for a meme: "BRO JUST GAVE US WORKING NEXTJS"
Great work as always. Brings new features and integrating it seamlessly for the community to follow along and build exciting projects every time kudos to you adrian!!! 🎉
That's the plan!
You're Insane buddy 🔥
Loved it ❤️🩹
This is absolutely legendary! 💎I've learned so much from your tech content, and this tutorial is perfect for showcasing web development skills and as always quality of your teaching, animation, and video production Premium. Keep up the fantastic work! ❤
I appreciate that!
its a beautiful world with good peoples in it.
This is amazing, keep the good work up! 😁
Thank you!
this is great and much appreciated work Sir👌👍
This is great! It would be awesome if this had an admin panel feature as well which allows the user to edit content without touching the code (lets say only text and images for now)
Cool idea, but might be a bit of an overkill for the portfolio.
Sleek🔥🔥 Thank you so much Adrain, been looking already to improving my portfolio, perfect timing.
My pleasure!
Great video as always. Thanks so much for the hard work.
Appreciate it!
Please make a course where you explain how you make those Figma designs. They look awesome!
A beginner's Heaven 🔥
I remeber your nft game
I think it's time for now one
🎉🎉🎉🎉🎉🎉
My best teacher ❤
Thank you Adrian for your amazing tutorials 👌🏻👌🏻👌🏻
This is awesome! Well done bro
Thanks for the visit
The web ui designs, use of nice images and colors are what always sold your websites tutorials. How do you come up with such designs effortlessly everytime.
I have a master designer :D
Aaaaamaziiiing , I know I would do this Saturday night ! Thank's
Thank you so much, i learned a lot from this Portfolio
Getting this error:- TypeError: Cannot read properties of undefined (reading 'ReactCurrentOwner') when rendering model using react-three libraries
Try to downgrade your next.js to version 14
Can't wait to go home to start working on this project, Thank you 🙏 for offering this for free
Enjoy!
You mean Adrian or his team worked on it and the rest of you just code along and copy what you see on screen lol
@br3ak_ I actually try to add my own creative touches to it while i am coding along with the video, even add my own design. I try to do each component my own way before continuing to watch the solution provided by the vide.
Bro we need to React js Projects , Next js is very heavy on browser My Laptop is Crashing 😢😢
Need such more videos on react and next js
For creating better UI to stand out in this AI era
I've always wanted to use ActernityUI in nextjs but was confused how to use. Thank you...!!!
Enjoy!
cool , even intro made me write thank you , right away ,
Love it, Love it, Love it!!
22:22 Thanks for Open-source
This is amazing Adrian 🎉
Thank you!
amazing project. almost done.
great course,
If anyone gets the hydration error, the PinContainer has some divs inside a , it throws the error.
How did you fix it?
@@yeahno2466 make the component a client component by adding "use client" to the first line of the component
@@billionairejamil6593 It doesn't work to me...
Loving the tutorial! Got a hydration which I could resolve with the suppressHydrationWarning attribute on the html tag within the root layout. But then I got a type error...Cannot read properties of undefined (reading 'ReactCurrentOwner'). Anyone else got the same? ** Got this resolved by down grading to Next.js 14
Awesome as always ❤❤
Thank you so much 😀
The animations are amazing! 🤩🔥 Great work!
Thank you so much 😀
You are killing me 😭. I literally just finished your 3d portfolio one and before that I was doing your other portfolio website😂. Thanks for everything you do though ❤😂
Haha, thank you!
bro is the master of websites ❤❤
Can't believe to build this type of projects and for free
Awesome! Thank you Adrian, for sharing your huge knowledge, you are the Best !
I appreciate that!
banger, yet again. Im gonna do this now and keep updating my progress here.
Appreciate it!
Learning lot from you bro thank you
Amazing!
woow amazing bro, pls another video for building e-learning website using react
Will do soon
I know pretty much 0 about coding was told the best thing to learn is to jump straight into a project which is why I'm following you, I'm noticing as I'm following you alot of errors happen and I don't even know if what I'm doing is right or wrong. Do you think I should not jump straight into projects?
0:23 did anyone notice That Sheetal is Munni , Nisha is Munni and Munni is Aditi Famous Dialogue is Written From Bhagam Bagh😂
Haha, nice catch! 😂
Another master class . Appreciate your continuous effort!
Appreciate it
amazing tutorial as always
Please make proper tutorial on three js and gsap brother
Love from india❤
great content, but only worth it when you have some experience and knowledge of the libraries and frameworks used in this project and also debugging skills to understand your own code
That's true, Aceternity requires some code copying
Hey adrian is back with another level content 🤠🤠
Yess! 🔥
Can you please make a video how to extract padding, spacing .Etc from Figma . It useful for every beginner developer.
Might do something soon
Agree with this one!
God bless this channel 🙏🙏 honestly big shout out for this
Appreciate that!
bro your course is peak fiction your youtube videos are better than most of udemy courses
That's the goal!