Build and Deploy an Amazing Developer Portfolio with Next JS and Framer Motion
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
Пікірлер: 472
This is the type of content for which I pay my internet bills for!!
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 🔥🔥
@javascriptmastery
16 күн бұрын
Appreciate it! 🔥
Thank you very much. Took me 4 - 5 days to complete this project but finally done. Amazing learning experience! Many thanks :)
OMG! So comprehensive ! Great work !
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
@vedbesinging3990
3 күн бұрын
GOOD JOB BRO
@aimuzik0
Күн бұрын
thnk youu bro
@WaqasAhmed-np7sj
7 сағат бұрын
Thanks🥰 You really solved my problem.
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.
Thanks JS just finished the project and made some changes looks great, as always keep it up
@javascriptmastery
15 күн бұрын
Great to hear!
literally doing gods work out here.
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 👏👏👏😁
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!
@javascriptmastery
15 күн бұрын
I'm so happy to hear that!
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!
@javascriptmastery
11 күн бұрын
I remember feeling the same way when I was learning to code many years ago, that's amazing!
@anime_edits_0962
11 күн бұрын
@@javascriptmasteryhi sir ❤❤❤❤
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!!! 🎉
@javascriptmastery
16 күн бұрын
That's the plan!
Sleek🔥🔥 Thank you so much Adrain, been looking already to improving my portfolio, perfect timing.
@javascriptmastery
16 күн бұрын
My pleasure!
always love your videos man! Keep up the good work!
@javascriptmastery
15 күн бұрын
Thanks! Will do!
Always a pleasure to see your videos ! Thanks
@javascriptmastery
16 күн бұрын
My pleasure!
Aaaaamaziiiing , I know I would do this Saturday night ! Thank's
THANKS SO MUCH! really helpful
The best! thank you for always giving high quality contents.
@javascriptmastery
15 күн бұрын
My pleasure!
Thank you Adrian for your amazing tutorials 👌🏻👌🏻👌🏻
Great video as always. Thanks so much for the hard work.
@javascriptmastery
15 күн бұрын
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
@javascriptmastery
15 күн бұрын
I'm so happy to hear that!
you'r a legend ! Thanks for sharing such high quality tutorials
@javascriptmastery
16 күн бұрын
I appreciate that!
As everything from aceternity ... Kudos to Manu paaji 👏🏻👏🏻
This is amazing, keep the good work up! 😁
@javascriptmastery
15 күн бұрын
Thank you!
This is awesome! Well done bro
@javascriptmastery
16 күн бұрын
Thanks for the visit
this is great and much appreciated work Sir👌👍
I spend 5 day on this tutorial but finally got my top-notch portfolio! :)
I'm liking your new videos automatically because I already know that it's gonna be fire!
@javascriptmastery
11 күн бұрын
Thank you!
You're Insane buddy 🔥 Loved it ❤️🩹
Thank you for consistency Adrian❤❤❤❤❤❤❤❤❤❤❤❤
@javascriptmastery
15 күн бұрын
Always!
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.
@javascriptmastery
15 күн бұрын
Thank you!
Those animations are just WOW. This will be a great project to build.
@javascriptmastery
16 күн бұрын
Definitely! 😊
@themountains1701
13 күн бұрын
I'm somewhat between an beginner and intermediate react developer and I don't know NextJs, is it worth watching this tutorial for me?
@javascriptmastery
13 күн бұрын
@@themountains1701 yes
svaka čast brate
bro can turn any demand into reality ❤
You're my Inspiration 💥
Learning lot from you bro thank you
@javascriptmastery
15 күн бұрын
Amazing!
Awesome as always ❤❤
@javascriptmastery
15 күн бұрын
Thank you so much 😀
Thanks for this✨
Please make a course where you explain how you make those Figma designs. They look awesome!
Really your coding and design is op Nice job ❤❤❤
@javascriptmastery
15 күн бұрын
Thanks 😄
1:30 it should be Deployment and Launch 😊
@javascriptmastery
16 күн бұрын
Amazing!! ❤️
@dev-akeel
16 күн бұрын
@@javascriptmastery For 1 or 2?😊
I've always wanted to use ActernityUI in nextjs but was confused how to use. Thank you...!!!
@javascriptmastery
15 күн бұрын
Enjoy!
This is amazing 💪
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
bro is the master of websites ❤❤
LOVE IT!!!!
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!
@javascriptmastery
15 күн бұрын
Great suggestion!
Thank you so much for what you do for the community Adrian!
@javascriptmastery
16 күн бұрын
My pleasure!
Incredible!
@javascriptmastery
16 күн бұрын
Thanks!
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)
@javascriptmastery
15 күн бұрын
Cool idea, but might be a bit of an overkill for the portfolio.
We still haven't gotten over the banking app and here you dropped another banger. 🙌🙌🙌
@javascriptmastery
16 күн бұрын
Yesss! 😊
Amazing 💪💪
Another master class . Appreciate your continuous effort!
@javascriptmastery
16 күн бұрын
Appreciate it
Can't believe to build this type of projects and for free
Hi, Thanks for the tutorial. May I ask what tool have you used to take screenshots of your websites for the portfolio section?
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
@javascriptmastery
16 күн бұрын
Thank you so much! That's the goal!
This guy is gooooood 🎉
Ohh man love you ❤❤❤❤
@javascriptmastery
16 күн бұрын
Thank you! ❤
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.
@javascriptmastery
16 күн бұрын
I have a master designer :D
The animations are amazing! 🤩🔥 Great work!
@javascriptmastery
16 күн бұрын
Thank you so much 😀
great job. ive been following and i got to the work experience section and i was curious where you get you svgs from
banger, yet again. Im gonna do this now and keep updating my progress here.
@javascriptmastery
16 күн бұрын
Appreciate it!
I remeber your nft game I think it's time for now one 🎉🎉🎉🎉🎉🎉 My best teacher ❤
Love you Adrian
everything in one place, awesome!
@javascriptmastery
16 күн бұрын
Exactly!
Great work bro. Can you make a web app related to astronomy.
God bless this channel 🙏🙏 honestly big shout out for this
@javascriptmastery
16 күн бұрын
Appreciate that!
Js you are the best
Thanks bro... Im was searching to create new portfolio and bang ur here.......XD
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 !
@javascriptmastery
16 күн бұрын
I appreciate that!
Love this video man Keep up the good work
@javascriptmastery
16 күн бұрын
You too!
your voice is amazing bro.
Thanks Adrian for your amazing tutorials. can you make another tutorials of SaaS application. Love from india❤
thank you very much , iwill surely build this
@javascriptmastery
16 күн бұрын
Enjoy! 😊
The man, The myth, The legend is back with new content. 🎉
@javascriptmastery
16 күн бұрын
Thank you! 🎉
Nice proyecto , thanks
@javascriptmastery
16 күн бұрын
You are welcome
From where do you get those ui designs .any specific website or you create your own from scratch in figma ???
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! ❤
@javascriptmastery
16 күн бұрын
I appreciate that!
your content is immacable. Sir plz create a end to end binance like project(binance clone) with efficient features in next video... plz sir
You are a blessing. Thank you!
@javascriptmastery
16 күн бұрын
Happy to help!
❤🔥 from India Buddy. Thank you so much. And how can we add custom fonts like google fonts into our project? Can you please tell
You're awesome 👌👌👌👌👌👌👌👌👌
Most awaited video, Thanks sir.
@javascriptmastery
16 күн бұрын
Most welcome
Please make proper tutorial on three js and gsap brother Love from india❤
Adrian you're such a hardworking person ✨
@javascriptmastery
16 күн бұрын
Oh thank you!
i Appreciate💖💖
Thank you so much for making this🫡🫡
Sir make video on sosail media clone with Ad Integration and allow to user monotize your content like KZread . And think you so much for making videos like this big fan and new subscriber ❤❤🎉
please create videos for some great tools like that aceternity ui
what's with the project in the repo, there is some mismatch in files with what you have made video with, the video project is little different and the one on the repo is little different, when i started the repo project the lights effect on start is not smooth
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
Adrian is back and he bout to serve us up another masterpiece 🎨...much love❤ from Kenya
@javascriptmastery
16 күн бұрын
Greetings to Kenya! 😊
This is amazing Adrian 🎉
@javascriptmastery
16 күн бұрын
Thank you!
Can you make a multiplayer player gaming website like tic tac toe with room code like to play between friends?
@javascriptmastery
16 күн бұрын
Cool idea!
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?
Nice as always
@javascriptmastery
16 күн бұрын
Thanks again!
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
@javascriptmastery
16 күн бұрын
That's true, Aceternity requires some code copying
Bro how do you make the portfolio section click over to the Live Site?