Build and Deploy an Amazing Developer Portfolio with Next JS and Framer Motion
Вставка
- Опубліковано 30 чер 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
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
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 🔥🔥
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 !
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.
literally doing gods work out here.
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!
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 👏👏👏😁
always love your videos man! Keep up the good work!
Thanks! Will do!
Sleek🔥🔥 Thank you so much Adrain, been looking already to improving my portfolio, perfect timing.
My pleasure!
Always a pleasure to see your videos ! Thanks
My pleasure!
Thank you Adrian for your amazing tutorials 👌🏻👌🏻👌🏻
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!
you'r a legend ! Thanks for sharing such high quality tutorials
I appreciate that!
The best! thank you for always giving high quality contents.
My pleasure!
Great video as always. Thanks so much for the hard work.
Appreciate it!
Aaaaamaziiiing , I know I would do this Saturday night ! Thank's
I'm liking your new videos automatically because I already know that it's gonna be fire!
Thank you!
Thank you so much, i learned a lot from this Portfolio
This is amazing, keep the good work up! 😁
Thank you!
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
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!
You're Insane buddy 🔥
Loved it ❤️🩹
Thank you for consistency Adrian❤❤❤❤❤❤❤❤❤❤❤❤
Always!
THANKS SO MUCH! really helpful
This is awesome! Well done bro
Thanks for the visit
svaka čast brate
bro can turn any demand into reality ❤
this is great and much appreciated work Sir👌👍
You're my Inspiration 💥
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
Thanks for this✨
Awesome as always ❤❤
Thank you so much 😀
LOVE IT!!!!
Amazing Thanks!
amazing tutorial as always
Please make a course where you explain how you make those Figma designs. They look awesome!
Learning lot from you bro thank you
Amazing!
Amaziing tutoriual thank you!
I spend 5 day on this tutorial but finally got my top-notch portfolio! :)
Thank you for this tutorial
This is amazing 💪
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!
As everything from aceternity ... Kudos to Manu paaji 👏🏻👏🏻
Incredible!
Thanks!
Amazing 💪💪
amazing project. almost done.
Really your coding and design is op
Nice job ❤❤❤
Thanks 😄
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
I've always wanted to use ActernityUI in nextjs but was confused how to use. Thank you...!!!
Enjoy!
This is fire! where did you get your assets?
1:30 it should be Deployment and Launch 😊
Amazing!! ❤️
@@javascriptmastery For 1 or 2?😊
bro is the master of websites ❤❤
great job. ive been following and i got to the work experience section and i was curious where you get you svgs from
Thank you so much for what you do for the community Adrian!
My pleasure!
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.
Ohh man love you ❤❤❤❤
Thank you! ❤
This guy is gooooood 🎉
Hi, Thanks for the tutorial. May I ask what tool have you used to take screenshots of your websites for the portfolio section?
Love you Adrian
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
From where do you get those ui designs .any specific website or you create your own from scratch in figma ???
Great work bro. Can you make a web app related to astronomy.
Need such more videos on react and next js
For creating better UI to stand out in this AI era
Another master class . Appreciate your continuous effort!
Appreciate it
Спасибо за связку, бро.
Can't believe to build this type of projects and for free
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?
❤🔥 from India Buddy. Thank you so much.
And how can we add custom fonts like google fonts into our project? Can you please tell
Thanks Adrian for your amazing tutorials.
can you make another tutorials of SaaS application.
Love from india❤
i Appreciate💖💖
The animations are amazing! 🤩🔥 Great work!
Thank you so much 😀
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!
Js you are the best
thank u sir
We still haven't gotten over the banking app and here you dropped another banger. 🙌🙌🙌
Yesss! 😊
bro just changed my whole life in 2hrs plus
God bless this channel 🙏🙏 honestly big shout out for this
Appreciate that!
Nice proyecto , thanks
You are welcome
banger, yet again. Im gonna do this now and keep updating my progress here.
Appreciate it!
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!
I remeber your nft game
I think it's time for now one
🎉🎉🎉🎉🎉🎉
My best teacher ❤
please create videos for some great tools like that aceternity ui
your content is immacable. Sir plz create a end to end binance like project(binance clone) with efficient features in next video... plz sir
Awesome! Thank you Adrian, for sharing your huge knowledge, you are the Best !
I appreciate that!
You are a blessing. Thank you!
Happy to help!
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
Thanks bro... Im was searching to create new portfolio and bang ur here.......XD
Sir make video on sosail media clone with Ad Integration and allow to user monotize your content like UA-cam . And think you so much for making videos like this big fan and new subscriber ❤❤🎉
If I want to make a cheat sheet like you what kind of tools you are using and what kind of course you recommend ?
thank you very much , iwill surely build this
Enjoy! 😊
Love this video man
Keep up the good work
You too!
You're awesome 👌👌👌👌👌👌👌👌👌
everything in one place, awesome!
Exactly!
your voice is amazing bro.
Can you make a multiplayer player gaming website like tic tac toe with room code like to play between friends?
Cool idea!
woow amazing bro, pls another video for building e-learning website using react
Will do soon