Build and Deploy an Amazing Developer Portfolio with Next JS and Framer Motion

Рет қаралды 192,212

Күн бұрын

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

Пікірлер: 520

@sarmad6166 29 күн бұрын

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

@alexeydimov4423 22 күн бұрын

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 22 күн бұрын

GOOD JOB BRO

@aimuzik0 20 күн бұрын

thnk youu bro

@WaqasAhmed-np7sj 19 күн бұрын

Thanks🥰 You really solved my problem.

@samski17 16 күн бұрын

I'm stuck with TypeError: flattenColorPalette is not a function in the tailwind.config.ts have any idea?

@alexeydimov4423 16 күн бұрын

@@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

@peterxavier1 Ай бұрын

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 Ай бұрын

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

@javascriptmastery Ай бұрын

Appreciate it! 🔥

@user-ot6bs1th1t Ай бұрын

OMG! So comprehensive ! Great work !

@user-je8nu5er7c 24 күн бұрын

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.

@wasiqonly 19 күн бұрын

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

@moose43h Ай бұрын

literally doing gods work out here.

@PlxEI Ай бұрын

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 Ай бұрын

I'm so happy to hear that!

@i_vishalsah01 Ай бұрын

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 Ай бұрын

That's the plan!

@michaelojekunle3396 Ай бұрын

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

@javascriptmastery Ай бұрын

My pleasure!

@mohiths1090 Ай бұрын

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

@javascriptmastery Ай бұрын

Great to hear!

@baburqureshi6842 13 күн бұрын

Can you share deployed link

@Jo-vs2ey Ай бұрын

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

@javascriptmastery Ай бұрын

Thanks! Will do!

@alexg7282 Ай бұрын

Always a pleasure to see your videos ! Thanks

@javascriptmastery Ай бұрын

My pleasure!

@laureneipsum6871 Ай бұрын

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

@martys125 Ай бұрын

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

@javascriptmastery Ай бұрын

I appreciate that!

@GabrielElbaz-fn4cy Ай бұрын

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

@sapurachewae9805 Ай бұрын

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

@javascriptmastery Ай бұрын

My pleasure!

@amadeosph2045 Ай бұрын

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

@404-not-found-service Ай бұрын

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 Ай бұрын

I'm so happy to hear that!

@mounir101 Ай бұрын

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

@javascriptmastery Ай бұрын

Appreciate it!

@jorden123 Ай бұрын

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

@javascriptmastery Ай бұрын

Thank you!

@gherbetto Ай бұрын

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 Ай бұрын

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

@anime_edits_0962 Ай бұрын

@@javascriptmasteryhi sir ❤❤❤❤

@kumargupta7149 Ай бұрын

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

@javascriptmastery Ай бұрын

Always!

@limit9483 Ай бұрын

This is amazing, keep the good work up! 😁

@javascriptmastery Ай бұрын

Thank you!

@ghcrocket 9 күн бұрын

Thank you so much, i learned a lot from this Portfolio

@damilolaadejobi5516 Ай бұрын

This is awesome! Well done bro

@javascriptmastery Ай бұрын

Thanks for the visit

@clovermk1635 29 күн бұрын

THANKS SO MUCH! really helpful

@OPGAMER. Ай бұрын

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

@javascriptmastery Ай бұрын

Definitely! 😊

@themountains1701 Ай бұрын

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 Ай бұрын

@@themountains1701 yes

@Dongamoham.18 29 күн бұрын

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

@CheckmateChronicles-yr6xj 20 күн бұрын

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

@ahsankabir6810 Ай бұрын

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 Ай бұрын

Thank you!

@enjamurisagar3554 Ай бұрын

Awesome as always ❤❤

@javascriptmastery Ай бұрын

Thank you so much 😀

@user-bz9zt9we6s Ай бұрын

bro can turn any demand into reality ❤

@Dongamoham.18 29 күн бұрын

You're my Inspiration 💥

@X-Saikat-93 19 күн бұрын

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

@bulelaniquinton7272 22 күн бұрын

this is great and much appreciated work Sir👌👍

@spicyy812 Ай бұрын

svaka čast brate

@ujjwal1969 Ай бұрын

Learning lot from you bro thank you

@javascriptmastery Ай бұрын

Amazing!

@nelsonberm3910 4 күн бұрын

Amaziing tutoriual thank you!

@nelsonberm3910 5 күн бұрын

Thank you for this tutorial

@ardhandimas 13 күн бұрын

amazing tutorial as always

@zain_x_alpha Ай бұрын

Thanks for this✨

@AlexSmith-ms9xb Ай бұрын

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

@asaadsiddiqui45 Ай бұрын

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

@javascriptmastery Ай бұрын

Thanks 😄

@francoavolio5025 Ай бұрын

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

@javascriptmastery Ай бұрын

My pleasure!

@Deevicode Ай бұрын

This is amazing 💪

@MwishaLudack Ай бұрын

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

@MikeNugget Ай бұрын

Incredible!

@javascriptmastery Ай бұрын

Thanks!

@bimasaktikr Ай бұрын

LOVE IT!!!!

@Banksy_said_hi 15 күн бұрын

Amazing Thanks!

@michealskup5730 Ай бұрын

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 Ай бұрын

Great suggestion!

@dev-akeel Ай бұрын

1:30 it should be Deployment and Launch 😊

@javascriptmastery Ай бұрын

Amazing!! ❤️

@dev-akeel Ай бұрын

@@javascriptmastery For 1 or 2?😊

@emmanuelehis1194 Ай бұрын

Another master class . Appreciate your continuous effort!

@javascriptmastery Ай бұрын

Appreciate it

@grenishrai611 Ай бұрын

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

@javascriptmastery Ай бұрын

Enjoy!

@user-bz9zt9we6s Ай бұрын

bro is the master of websites ❤❤

@ahmedbahnasy2243 Ай бұрын

Amazing 💪💪

@RandoxCoding 21 күн бұрын

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

@joshuaochieng3091 28 күн бұрын

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

@techmadeazy Ай бұрын

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 Ай бұрын

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

@ElohimCode 13 күн бұрын

Thanks for this fantastic project! I wanted to ask about the icons in the work experience section. Where can I find similar icons for download, though not exactly the same ones?

@abdullahsufyan7823 Ай бұрын

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

@Piyush-xv1bb Ай бұрын

Ohh man love you ❤❤❤❤

@javascriptmastery Ай бұрын

Thank you! ❤

@revanthreddy790 Ай бұрын

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

@javascriptmastery Ай бұрын

Appreciate it!

@thatOne873 Ай бұрын

everything in one place, awesome!

@javascriptmastery Ай бұрын

Exactly!

@ralphrosael Ай бұрын

The animations are amazing! 🤩🔥 Great work!

@javascriptmastery Ай бұрын

Thank you so much 😀

@vaibhavkolhe8586 18 күн бұрын

Need such more videos on react and next js For creating better UI to stand out in this AI era

@opereznet Ай бұрын

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

@javascriptmastery Ай бұрын

I appreciate that!

@zadrodriguez7709 16 күн бұрын

This is fire! where did you get your assets?

@thereaper7682 Ай бұрын

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 Ай бұрын

Thank you so much! That's the goal!

@aashishkumarsingh428 28 күн бұрын

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

@user-ww4gz7wx4t Ай бұрын

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 Ай бұрын

I have a master designer :D

@olanrewajuiremide6303 Ай бұрын

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

@javascriptmastery Ай бұрын

Yesss! 😊

@thenewsmargstv1816 Ай бұрын

This guy is gooooood 🎉

@mileslegend Ай бұрын

thank you very much , iwill surely build this

@javascriptmastery Ай бұрын

Enjoy! 😊

@methuselahmark7818 Ай бұрын

Love this video man Keep up the good work

@javascriptmastery Ай бұрын

You too!

@learnenglishfromscratch1892 Ай бұрын

You are a blessing. Thank you!

@javascriptmastery Ай бұрын

Happy to help!

@gherbetto 8 күн бұрын

for those who got a problem of magicbutton not working on safari you have to use posttcss otherwise button is gonna look ugly on ios and macos safari, it wasn't mentioned in the video afaik

@sandeepasineth8446 Ай бұрын

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

@AHMEDYASSER-up6yx Ай бұрын

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

@adeuyianjolaoluwa Ай бұрын

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 Ай бұрын

I appreciate that!

@9anzuu7 Ай бұрын

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

@nomanzafarzafar7912 24 күн бұрын

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

@piyushraj5464 Ай бұрын

Love you Adrian

@user-zi9qg6bn9p Ай бұрын

your voice is amazing bro.

@taweezymk Ай бұрын

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

@javascriptmastery Ай бұрын

Appreciate that!

@HimanshuKumar-yh7ox 22 күн бұрын

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

@ABODY734 Ай бұрын

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

@Deus-lo-Vuilt Ай бұрын

Nice proyecto , thanks

@javascriptmastery Ай бұрын

You are welcome

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

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

@abdulaminkhan3275 3 күн бұрын

thank u sir

@subhanath858 Ай бұрын

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

@ShivansMaurya24 Ай бұрын

Most awaited video, Thanks sir.

@javascriptmastery Ай бұрын

Most welcome

@togya4 26 күн бұрын

Js you are the best

@nishantchaudhari3510 Ай бұрын

Adrian you're such a hardworking person ✨

@javascriptmastery Ай бұрын

Oh thank you!

@SoniInterio 28 күн бұрын

Sir make video on sosail media clone with Ad Integration and allow to user monotize your content like KZfaq . And think you so much for making videos like this big fan and new subscriber ❤❤🎉

@TOONSSTATION Ай бұрын

Link to site where it's hosted ?

@EmanuelRusu-sz2kb 21 күн бұрын

amazing projects,i tried to implement the 3d pin cards in my portfolio but i realise it dosn't redirect me to a new webpage when clicked,i clone your repo as well and yours it behaves the same...any idea why??