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

  • @sarmad6166
    @sarmad616610 күн бұрын

    This is the type of content for which I pay my internet bills for!!

  • @peterxavier1
    @peterxavier114 күн бұрын

    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.

  • @vaibhavsingh_08
    @vaibhavsingh_0816 күн бұрын

    Can’t believe how much value you provide for free! Amazing 🔥🔥

  • @javascriptmastery

    @javascriptmastery

    16 күн бұрын

    Appreciate it! 🔥

  • @wasiqonly
    @wasiqonly14 сағат бұрын

    Thank you very much. Took me 4 - 5 days to complete this project but finally done. Amazing learning experience! Many thanks :)

  • @user-ot6bs1th1t
    @user-ot6bs1th1t13 күн бұрын

    OMG! So comprehensive ! Great work !

  • @alexeydimov4423
    @alexeydimov44233 күн бұрын

    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

    @vedbesinging3990

    3 күн бұрын

    GOOD JOB BRO

  • @aimuzik0

    @aimuzik0

    Күн бұрын

    thnk youu bro

  • @WaqasAhmed-np7sj

    @WaqasAhmed-np7sj

    7 сағат бұрын

    Thanks🥰 You really solved my problem.

  • @user-je8nu5er7c
    @user-je8nu5er7c5 күн бұрын

    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.

  • @mohiths1090
    @mohiths109015 күн бұрын

    Thanks JS just finished the project and made some changes looks great, as always keep it up

  • @javascriptmastery

    @javascriptmastery

    15 күн бұрын

    Great to hear!

  • @moose43h
    @moose43h15 күн бұрын

    literally doing gods work out here.

  • @amadeosph2045
    @amadeosph204513 күн бұрын

    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 👏👏👏😁

  • @PlxEI
    @PlxEI16 күн бұрын

    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

    @javascriptmastery

    15 күн бұрын

    I'm so happy to hear that!

  • @gherbetto
    @gherbetto12 күн бұрын

    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

    @javascriptmastery

    11 күн бұрын

    I remember feeling the same way when I was learning to code many years ago, that's amazing!

  • @anime_edits_0962

    @anime_edits_0962

    11 күн бұрын

    ​@@javascriptmasteryhi sir ❤❤❤❤

  • @i_vishalsah01
    @i_vishalsah0116 күн бұрын

    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

    @javascriptmastery

    16 күн бұрын

    That's the plan!

  • @michaelojekunle3396
    @michaelojekunle339616 күн бұрын

    Sleek🔥🔥 Thank you so much Adrain, been looking already to improving my portfolio, perfect timing.

  • @javascriptmastery

    @javascriptmastery

    16 күн бұрын

    My pleasure!

  • @Jo-vs2ey
    @Jo-vs2ey15 күн бұрын

    always love your videos man! Keep up the good work!

  • @javascriptmastery

    @javascriptmastery

    15 күн бұрын

    Thanks! Will do!

  • @alexg7282
    @alexg728216 күн бұрын

    Always a pleasure to see your videos ! Thanks

  • @javascriptmastery

    @javascriptmastery

    16 күн бұрын

    My pleasure!

  • @laureneipsum6871
    @laureneipsum687115 күн бұрын

    Aaaaamaziiiing , I know I would do this Saturday night ! Thank's

  • @clovermk1635
    @clovermk163510 күн бұрын

    THANKS SO MUCH! really helpful

  • @sapurachewae9805
    @sapurachewae980516 күн бұрын

    The best! thank you for always giving high quality contents.

  • @javascriptmastery

    @javascriptmastery

    15 күн бұрын

    My pleasure!

  • @GabrielElbaz-fn4cy
    @GabrielElbaz-fn4cy14 күн бұрын

    Thank you Adrian for your amazing tutorials 👌🏻👌🏻👌🏻

  • @mounir101
    @mounir10116 күн бұрын

    Great video as always. Thanks so much for the hard work.

  • @javascriptmastery

    @javascriptmastery

    15 күн бұрын

    Appreciate it!

  • @404-not-found-service
    @404-not-found-service16 күн бұрын

    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

    @javascriptmastery

    15 күн бұрын

    I'm so happy to hear that!

  • @martys125
    @martys12516 күн бұрын

    you'r a legend ! Thanks for sharing such high quality tutorials

  • @javascriptmastery

    @javascriptmastery

    16 күн бұрын

    I appreciate that!

  • @X-Saikat-93
    @X-Saikat-9314 сағат бұрын

    As everything from aceternity ... Kudos to Manu paaji 👏🏻👏🏻

  • @limit9483
    @limit948316 күн бұрын

    This is amazing, keep the good work up! 😁

  • @javascriptmastery

    @javascriptmastery

    15 күн бұрын

    Thank you!

  • @damilolaadejobi5516
    @damilolaadejobi551616 күн бұрын

    This is awesome! Well done bro

  • @javascriptmastery

    @javascriptmastery

    16 күн бұрын

    Thanks for the visit

  • @bulelaniquinton7272
    @bulelaniquinton72723 күн бұрын

    this is great and much appreciated work Sir👌👍

  • @CheckmateChronicles-yr6xj
    @CheckmateChronicles-yr6xjКүн бұрын

    I spend 5 day on this tutorial but finally got my top-notch portfolio! :)

  • @jorden123
    @jorden12312 күн бұрын

    I'm liking your new videos automatically because I already know that it's gonna be fire!

  • @javascriptmastery

    @javascriptmastery

    11 күн бұрын

    Thank you!

  • @Dongamoham.18
    @Dongamoham.1810 күн бұрын

    You're Insane buddy 🔥 Loved it ❤️‍🩹

  • @kumargupta7149
    @kumargupta714915 күн бұрын

    Thank you for consistency Adrian❤❤❤❤❤❤❤❤❤❤❤❤

  • @javascriptmastery

    @javascriptmastery

    15 күн бұрын

    Always!

  • @ahsankabir6810
    @ahsankabir681016 күн бұрын

    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

    @javascriptmastery

    15 күн бұрын

    Thank you!

  • @OPGAMER.
    @OPGAMER.16 күн бұрын

    Those animations are just WOW. This will be a great project to build.

  • @javascriptmastery

    @javascriptmastery

    16 күн бұрын

    Definitely! 😊

  • @themountains1701

    @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

    @javascriptmastery

    13 күн бұрын

    @@themountains1701 yes

  • @spicyy812
    @spicyy81214 күн бұрын

    svaka čast brate

  • @user-bz9zt9we6s
    @user-bz9zt9we6s14 күн бұрын

    bro can turn any demand into reality ❤

  • @Dongamoham.18
    @Dongamoham.1810 күн бұрын

    You're my Inspiration 💥

  • @ujjwal1969
    @ujjwal196916 күн бұрын

    Learning lot from you bro thank you

  • @javascriptmastery

    @javascriptmastery

    15 күн бұрын

    Amazing!

  • @enjamurisagar3554
    @enjamurisagar355415 күн бұрын

    Awesome as always ❤❤

  • @javascriptmastery

    @javascriptmastery

    15 күн бұрын

    Thank you so much 😀

  • @zain_x_alpha
    @zain_x_alpha15 күн бұрын

    Thanks for this✨

  • @AlexSmith-ms9xb
    @AlexSmith-ms9xb15 күн бұрын

    Please make a course where you explain how you make those Figma designs. They look awesome!

  • @asaadsiddiqui45
    @asaadsiddiqui4516 күн бұрын

    Really your coding and design is op Nice job ❤❤❤

  • @javascriptmastery

    @javascriptmastery

    15 күн бұрын

    Thanks 😄

  • @dev-akeel
    @dev-akeel16 күн бұрын

    1:30 it should be Deployment and Launch 😊

  • @javascriptmastery

    @javascriptmastery

    16 күн бұрын

    Amazing!! ❤️

  • @dev-akeel

    @dev-akeel

    16 күн бұрын

    ​@@javascriptmastery For 1 or 2?😊

  • @grenishrai611
    @grenishrai61116 күн бұрын

    I've always wanted to use ActernityUI in nextjs but was confused how to use. Thank you...!!!

  • @javascriptmastery

    @javascriptmastery

    15 күн бұрын

    Enjoy!

  • @Deevicode
    @Deevicode15 күн бұрын

    This is amazing 💪

  • @MwishaLudack
    @MwishaLudack14 күн бұрын

    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

  • @user-bz9zt9we6s
    @user-bz9zt9we6s14 күн бұрын

    bro is the master of websites ❤❤

  • @bimasaktikr
    @bimasaktikr12 күн бұрын

    LOVE IT!!!!

  • @michealskup5730
    @michealskup573015 күн бұрын

    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

    @javascriptmastery

    15 күн бұрын

    Great suggestion!

  • @francoavolio5025
    @francoavolio502516 күн бұрын

    Thank you so much for what you do for the community Adrian!

  • @javascriptmastery

    @javascriptmastery

    16 күн бұрын

    My pleasure!

  • @MikeNugget
    @MikeNugget16 күн бұрын

    Incredible!

  • @javascriptmastery

    @javascriptmastery

    16 күн бұрын

    Thanks!

  • @techmadeazy
    @techmadeazy15 күн бұрын

    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

    @javascriptmastery

    15 күн бұрын

    Cool idea, but might be a bit of an overkill for the portfolio.

  • @olanrewajuiremide6303
    @olanrewajuiremide630316 күн бұрын

    We still haven't gotten over the banking app and here you dropped another banger. 🙌🙌🙌

  • @javascriptmastery

    @javascriptmastery

    16 күн бұрын

    Yesss! 😊

  • @ahmedbahnasy2243
    @ahmedbahnasy224315 күн бұрын

    Amazing 💪💪

  • @emmanuelehis1194
    @emmanuelehis119416 күн бұрын

    Another master class . Appreciate your continuous effort!

  • @javascriptmastery

    @javascriptmastery

    16 күн бұрын

    Appreciate it

  • @abdullahsufyan7823
    @abdullahsufyan782312 күн бұрын

    Can't believe to build this type of projects and for free

  • @RandoxCoding
    @RandoxCoding2 күн бұрын

    Hi, Thanks for the tutorial. May I ask what tool have you used to take screenshots of your websites for the portfolio section?

  • @thereaper7682
    @thereaper768216 күн бұрын

    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

    @javascriptmastery

    16 күн бұрын

    Thank you so much! That's the goal!

  • @thenewsmargstv1816
    @thenewsmargstv181611 күн бұрын

    This guy is gooooood 🎉

  • @Piyush-xv1bb
    @Piyush-xv1bb16 күн бұрын

    Ohh man love you ❤❤❤❤

  • @javascriptmastery

    @javascriptmastery

    16 күн бұрын

    Thank you! ❤

  • @user-ww4gz7wx4t
    @user-ww4gz7wx4t16 күн бұрын

    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

    @javascriptmastery

    16 күн бұрын

    I have a master designer :D

  • @ralphrosael
    @ralphrosael16 күн бұрын

    The animations are amazing! 🤩🔥 Great work!

  • @javascriptmastery

    @javascriptmastery

    16 күн бұрын

    Thank you so much 😀

  • @joshuaochieng3091
    @joshuaochieng30919 күн бұрын

    great job. ive been following and i got to the work experience section and i was curious where you get you svgs from

  • @revanthreddy790
    @revanthreddy79016 күн бұрын

    banger, yet again. Im gonna do this now and keep updating my progress here.

  • @javascriptmastery

    @javascriptmastery

    16 күн бұрын

    Appreciate it!

  • @9anzuu7
    @9anzuu714 күн бұрын

    I remeber your nft game I think it's time for now one 🎉🎉🎉🎉🎉🎉 My best teacher ❤

  • @piyushraj5464
    @piyushraj546414 күн бұрын

    Love you Adrian

  • @thatOne873
    @thatOne87316 күн бұрын

    everything in one place, awesome!

  • @javascriptmastery

    @javascriptmastery

    16 күн бұрын

    Exactly!

  • @nomanzafarzafar7912
    @nomanzafarzafar79125 күн бұрын

    Great work bro. Can you make a web app related to astronomy.

  • @taweezymk
    @taweezymk16 күн бұрын

    God bless this channel 🙏🙏 honestly big shout out for this

  • @javascriptmastery

    @javascriptmastery

    16 күн бұрын

    Appreciate that!

  • @togya4
    @togya47 күн бұрын

    Js you are the best

  • @sandeepasineth8446
    @sandeepasineth844614 күн бұрын

    Thanks bro... Im was searching to create new portfolio and bang ur here.......XD

  • @AHMEDYASSER-up6yx
    @AHMEDYASSER-up6yx12 күн бұрын

    If I want to make a cheat sheet like you what kind of tools you are using and what kind of course you recommend ?

  • @opereznet
    @opereznet16 күн бұрын

    Awesome! Thank you Adrian, for sharing your huge knowledge, you are the Best !

  • @javascriptmastery

    @javascriptmastery

    16 күн бұрын

    I appreciate that!

  • @methuselahmark7818
    @methuselahmark781816 күн бұрын

    Love this video man Keep up the good work

  • @javascriptmastery

    @javascriptmastery

    16 күн бұрын

    You too!

  • @user-zi9qg6bn9p
    @user-zi9qg6bn9p15 күн бұрын

    your voice is amazing bro.

  • @HimanshuKumar-yh7ox
    @HimanshuKumar-yh7ox3 күн бұрын

    Thanks Adrian for your amazing tutorials. can you make another tutorials of SaaS application. Love from india❤

  • @mileslegend
    @mileslegend16 күн бұрын

    thank you very much , iwill surely build this

  • @javascriptmastery

    @javascriptmastery

    16 күн бұрын

    Enjoy! 😊

  • @shaheermansoor2560
    @shaheermansoor256016 күн бұрын

    The man, The myth, The legend is back with new content. 🎉

  • @javascriptmastery

    @javascriptmastery

    16 күн бұрын

    Thank you! 🎉

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt16 күн бұрын

    Nice proyecto , thanks

  • @javascriptmastery

    @javascriptmastery

    16 күн бұрын

    You are welcome

  • @aashishkumarsingh428
    @aashishkumarsingh4289 күн бұрын

    From where do you get those ui designs .any specific website or you create your own from scratch in figma ???

  • @adeuyianjolaoluwa
    @adeuyianjolaoluwa16 күн бұрын

    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

    @javascriptmastery

    16 күн бұрын

    I appreciate that!

  • @subhanath858
    @subhanath85813 күн бұрын

    your content is immacable. Sir plz create a end to end binance like project(binance clone) with efficient features in next video... plz sir

  • @learnenglishfromscratch1892
    @learnenglishfromscratch189216 күн бұрын

    You are a blessing. Thank you!

  • @javascriptmastery

    @javascriptmastery

    16 күн бұрын

    Happy to help!

  • @Insane.18_7
    @Insane.18_78 күн бұрын

    ❤‍🔥 from India Buddy. Thank you so much. And how can we add custom fonts like google fonts into our project? Can you please tell

  • @BHUPENDRAKUMAR-rf3hx
    @BHUPENDRAKUMAR-rf3hx10 күн бұрын

    You're awesome 👌👌👌👌👌👌👌👌👌

  • @ShivansMaurya24
    @ShivansMaurya2416 күн бұрын

    Most awaited video, Thanks sir.

  • @javascriptmastery

    @javascriptmastery

    16 күн бұрын

    Most welcome

  • @harshitnegi05
    @harshitnegi0515 күн бұрын

    Please make proper tutorial on three js and gsap brother Love from india❤

  • @nishantchaudhari3510
    @nishantchaudhari351016 күн бұрын

    Adrian you're such a hardworking person ✨

  • @javascriptmastery

    @javascriptmastery

    16 күн бұрын

    Oh thank you!

  • @eminent-
    @eminent-13 күн бұрын

    i Appreciate💖💖

  • @ajcreations3918
    @ajcreations391813 күн бұрын

    Thank you so much for making this🫡🫡

  • @SoniInterio
    @SoniInterio9 күн бұрын

    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 ❤❤🎉

  • @markjaylunas105
    @markjaylunas105Күн бұрын

    please create videos for some great tools like that aceternity ui

  • @nayanbramhane8077
    @nayanbramhane807714 күн бұрын

    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

  • @ABODY734
    @ABODY73414 күн бұрын

    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

  • @meltjac_Techs
    @meltjac_Techs16 күн бұрын

    Adrian is back and he bout to serve us up another masterpiece 🎨...much love❤ from Kenya

  • @javascriptmastery

    @javascriptmastery

    16 күн бұрын

    Greetings to Kenya! 😊

  • @DigitalCreator5
    @DigitalCreator516 күн бұрын

    This is amazing Adrian 🎉

  • @javascriptmastery

    @javascriptmastery

    16 күн бұрын

    Thank you!

  • @nowroz745
    @nowroz74516 күн бұрын

    Can you make a multiplayer player gaming website like tic tac toe with room code like to play between friends?

  • @javascriptmastery

    @javascriptmastery

    16 күн бұрын

    Cool idea!

  • @fahimmohammadsiam1318
    @fahimmohammadsiam13183 күн бұрын

    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?

  • @themihirmathurofficial
    @themihirmathurofficial16 күн бұрын

    Nice as always

  • @javascriptmastery

    @javascriptmastery

    16 күн бұрын

    Thanks again!

  • @user-hw1pt5pe4w
    @user-hw1pt5pe4w16 күн бұрын

    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

    @javascriptmastery

    16 күн бұрын

    That's true, Aceternity requires some code copying

  • @HistoricShadows
    @HistoricShadows3 күн бұрын

    Bro how do you make the portfolio section click over to the Live Site?