Build and Deploy an Amazing Developer Portfolio with Next JS and Framer Motion
ฝัง
- เผยแพร่เมื่อ 6 มิ.ย. 2024
- Learn how to build and deploy a modern developer portfolio with animations using Next.js. Perfect for showcasing your web development skills!
⭐ Hostinger - hostinger.com/mastery10
Use the code JAVASCRIPTMASTERY to save up to 91% on all yearly hosting plans.
🌟 Sentry - bit.ly/4abT6PG
🎨 Portfolio Figma Design - resource.jsmastery.pro/minima...
📘 Portfolio Best Practices Guide - resource.jsmastery.pro/portfo...
🤖 Special Discord Forum - resource.jsmastery.pro/portfo...
🌟 Become a top 1% Next.js 14 developer: jsmastery.pro/next14
🚀 Skyrocket your career in 4 months: jsmastery.pro/masterclass
📚 Materials/References:
GitHub Repository (give it a star ⭐): github.com/adrianhajdin/portf...
README (assets & code): github.com/adrianhajdin/portf...
💻 Join our Discord Community - / discord
🐦 Follow us on Twitter: / jsmasterypro
🖼️ Follow us on Instagram: / javascriptmastery
💼 Business Inquiries: contact@jsmastery.pro
Time Stamps 👇
00:00:00 - Intro
00:05:40 - Project Setup
00:14:48 - Hero Section
00:40:30 - Bento Grid
01:23:18 - Recent Projects
01:43:40 - Sentry
01:52:56 - Testimonials
02:06:00 - Work Experience
02:14:18 - My Approach Section
02:26:24 - Footer
02:35:13 - Fixing Bugs
02:39:19 - Deployment
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.
Can’t believe how much value you provide for free! Amazing 🔥🔥
Appreciate it! 🔥
OMG! So comprehensive ! Great work !
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 :)
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.
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 👏👏👏😁
literally doing gods work out here.
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
Thanks🥰 You really solved my problem.
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
Thanks JS just finished the project and made some changes looks great, as always keep it up
Great to hear!
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!
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!
Sleek🔥🔥 Thank you so much Adrain, been looking already to improving my portfolio, perfect timing.
My pleasure!
always love your videos man! Keep up the good work!
Thanks! Will do!
Aaaaamaziiiing , I know I would do this Saturday night ! Thank's
Thank you Adrian for your amazing tutorials 👌🏻👌🏻👌🏻
This is an amazing tutorial, I'm a Vue developer and never had a chance to try React and Tailwind and this is an awesome experience so far! its 4:00am here and I'm on 30th minute but got the hero section done. It's an amazing feeling how sleek and responsive it feels. Can't wait to finish it. Thanks! Cheers!
I remember feeling the same way when I was learning to code many years ago, that's amazing!
@@javascriptmasteryhi sir ❤❤❤❤
Always a pleasure to see your videos ! Thanks
My pleasure!
The best! thank you for always giving high quality contents.
My pleasure!
you'r a legend ! Thanks for sharing such high quality tutorials
I appreciate that!
I'm liking your new videos automatically because I already know that it's gonna be fire!
Thank you!
You're Insane buddy 🔥
Loved it ❤️🩹
Great video as always. Thanks so much for the hard work.
Appreciate it!
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!
I spend 5 day on this tutorial but finally got my top-notch portfolio! :)
THANKS SO MUCH! really helpful
This is amazing, keep the good work up! 😁
Thank you!
You're my Inspiration 💥
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!
bro can turn any demand into reality ❤
Thank you for consistency Adrian❤❤❤❤❤❤❤❤❤❤❤❤
Always!
Amazing Thanks!
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
this is great and much appreciated work Sir👌👍
This is awesome! Well done bro
Thanks for the visit
svaka čast brate
As everything from aceternity ... Kudos to Manu paaji 👏🏻👏🏻
Please make a course where you explain how you make those Figma designs. They look awesome!
Thanks for this✨
Awesome as always ❤❤
Thank you so much 😀
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
Learning lot from you bro thank you
Amazing!
bro is the master of websites ❤❤
Really your coding and design is op
Nice job ❤❤❤
Thanks 😄
This is amazing 💪
Incredible!
Thanks!
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!
LOVE IT!!!!
1:30 it should be Deployment and Launch 😊
Amazing!! ❤️
@@javascriptmastery For 1 or 2?😊
I've always wanted to use ActernityUI in nextjs but was confused how to use. Thank you...!!!
Enjoy!
Thank you so much for what you do for the community Adrian!
My pleasure!
Another master class . Appreciate your continuous effort!
Appreciate it
This is fire! where did you get your assets?
Hi, Thanks for the tutorial. May I ask what tool have you used to take screenshots of your websites for the portfolio section?
great job. ive been following and i got to the work experience section and i was curious where you get you svgs from
Amazing 💪💪
The animations are amazing! 🤩🔥 Great work!
Thank you so much 😀
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.
Can't believe to build this type of projects and for free
From where do you get those ui designs .any specific website or you create your own from scratch in figma ???
Need such more videos on react and next js
For creating better UI to stand out in this AI era
This guy is gooooood 🎉
banger, yet again. Im gonna do this now and keep updating my progress here.
Appreciate it!
Love this video man
Keep up the good work
You too!
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
everything in one place, awesome!
Exactly!
Love you Adrian
We still haven't gotten over the banking app and here you dropped another banger. 🙌🙌🙌
Yesss! 😊
your voice is amazing bro.
I remeber your nft game
I think it's time for now one
🎉🎉🎉🎉🎉🎉
My best teacher ❤
If I want to make a cheat sheet like you what kind of tools you are using and what kind of course you recommend ?
Awesome! Thank you Adrian, for sharing your huge knowledge, you are the Best !
I appreciate that!
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!
Thanks Adrian for your amazing tutorials.
can you make another tutorials of SaaS application.
Love from india❤
Ohh man love you ❤❤❤❤
Thank you! ❤
The man, The myth, The legend is back with new content. 🎉
Thank you! 🎉
Most awaited video, Thanks sir.
Most welcome
Great work bro. Can you make a web app related to astronomy.
Nice proyecto , thanks
You are welcome
thank you very much , iwill surely build this
Enjoy! 😊
You are a blessing. Thank you!
Happy to help!
Js you are the best
God bless this channel 🙏🙏 honestly big shout out for this
Appreciate that!
Adrian you're such a hardworking person ✨
Oh thank you!
Link to site where it's hosted ?
❤🔥 from India Buddy. Thank you so much.
And how can we add custom fonts like google fonts into our project? Can you please tell
your content is immacable. Sir plz create a end to end binance like project(binance clone) with efficient features in next video... plz sir
Thanks bro... Im was searching to create new portfolio and bang ur here.......XD
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!
thank you for this amazing video
i have problem with 3d assets with browsers i did the 3d portfolio that had the desktop PC 3d model using react it didn't show up in any browsers except Firefox after deployment and i am disappointed that after this work i couldn't use it as my portfolio i hope this one is different
You're awesome 👌👌👌👌👌👌👌👌👌
Bro how do you make the portfolio section click over to the Live Site?
Please make proper tutorial on three js and gsap brother
Love from india❤
please create videos for some great tools like that aceternity ui
i Appreciate💖💖
Sir make video on sosail media clone with Ad Integration and allow to user monotize your content like TH-cam . And think you so much for making videos like this big fan and new subscriber ❤❤🎉
Supercool, Thankyou for using Aceternity UI and explaining it so well. :)
Well, thank you for MAKING IT! :D
Adrian is back and he bout to serve us up another masterpiece 🎨...much love❤ from Kenya
Greetings to Kenya! 😊
I am having issue with the bento grid part. It is not showing the exact design of the about grid after adding the classnames. I am using macbook air m1. What to do to correct it?
This is amazing Adrian 🎉
Thank you!