Это видео недоступно.
Сожалеем об этом.
Build and Deploy an Amazing Developer Portfolio with Next JS and Framer Motion
HTML-код
- Опубликовано: 5 авг 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
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
Excellent, yes this matches his github repository.
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.
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 :)
Can’t believe how much value you provide for free! Amazing 🔥🔥
Appreciate it! 🔥
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.
OMG! So comprehensive ! Great work !
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.
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!
Sleek🔥🔥 Thank you so much Adrain, been looking already to improving my portfolio, perfect timing.
My pleasure!
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!
sir, always amazed by the kind of ui ux designs you bring life to. they are just amazing.
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!
Thank you so much, i learned a lot from this Portfolio
bro can turn any demand into reality ❤
Always a pleasure to see your videos ! Thanks
My pleasure!
Thank you Adrian for your amazing tutorials 👌🏻👌🏻👌🏻
always love your videos man! Keep up the good work!
Thanks! Will do!
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!
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
THANKS SO MUCH! really helpful
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 sharing this content with us! That helped me a lot.
God bless you.
You're my Inspiration 💥
You're Insane buddy 🔥
Loved it ❤️🩹
this is great and much appreciated work Sir👌👍
This is amazing, keep the good work up! 😁
Thank you!
amazing tutorial as always
Thanks for this✨
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!
As everything from aceternity ... Kudos to Manu paaji 👏🏻👏🏻
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!
This is awesome! Well done bro
Thanks for the visit
Amazing Thanks!
Thank you for this tutorial
Thank you for consistency Adrian❤❤❤❤❤❤❤❤❤❤❤❤
Always!
Amaziing tutoriual thank you!
LOVE IT!!!!
From where do you get those ui designs .any specific website or you create your own from scratch in figma ???
This is amazing 💪
amazing project. almost done.
Thank you so much
Please make a course where you explain how you make those Figma designs. They look awesome!
For some odd reason, when i do the clients section and sections after .... my h1, even logo and logo names images seem to be a bit faded or dull (the color is off - for eg. white is like grey). Double checked my styling, even went to github and checked the styling there... cant seem to find the problem. Anyone experiencing the same thing?
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
I spend 5 day on this tutorial but finally got my top-notch portfolio! :)
Hi, could you please provide the code for this project? I'm encountering several errors while working on it.
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
bro is the master of websites ❤❤
Hey, ive got the error "cannot find module next/font/google" when setting up the project and had to change "moduleResolution": "bundler", to "moduleResolution": "node". Any idea why this happened or why I had to do this?
Incredible!
Thanks!
Thank you so much for what you do for the community Adrian!
My pleasure!
Content are shown twice in scrolls what might me the issue in hero section and from where i can manage cards height and dimensions on large screen it occupies lot of space
?
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!
great job. ive been following and i got to the work experience section and i was curious where you get you svgs from
Hi, Thanks for the tutorial. May I ask what tool have you used to take screenshots of your websites for the portfolio section?
Learning lot from you bro thank you
Amazing!
Amazing 💪💪
Really your coding and design is op
Nice job ❤❤❤
Thanks 😄
When I tried to import into page.tsx, it does not auto import the components. I have es7+ installed too. Anything else I should be installing or why it doesn't work?
bro just changed my whole life in 2hrs plus
its a beautiful world with good peoples in it.
1:30 it should be Deployment and Launch 😊
Amazing!! ❤️
@@javascriptmastery For 1 or 2?😊
Can't believe to build this type of projects and for free
Great gaming video thank you!!!
I remeber your nft game
I think it's time for now one
🎉🎉🎉🎉🎉🎉
My best teacher ❤
Need such more videos on react and next js
For creating better UI to stand out in this AI era
if i wanted to host this on my vps, any clue how icould fix the ssr issue with the gradientbg?
> Export encountered errors on following paths:
/page: /
i believe its an usse with "document"
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?
This is fire! where did you get your assets?
This guy is gooooood 🎉
on 40:00, (tho already on 1 hour+) the floating navbar on mine unfortunately not working as intended. Why is that?
Amazing Project ❤️ & Great Explanation 💯, It was begineer friendly. Unfortunately, In my project the bentogrids layout didn't came as aspected (they occupy full width space and came one below the another, idk but Except that project was Exceptional & FunToDo
Another master class . Appreciate your continuous effort!
Appreciate it
Love you Adrian
what were the technologies we installed in the terminal
I've always wanted to use ActernityUI in nextjs but was confused how to use. Thank you...!!!
Enjoy!
24:40
The "grid and dot background" wont render! idk what mistake i made, but , i get 0 errors in console nor terminal, however the spotlight renders, like shown in 23:50.
anyone have any idea?
We still haven't gotten over the banking app and here you dropped another banger. 🙌🙌🙌
Yesss! 😊
banger, yet again. Im gonna do this now and keep updating my progress here.
Appreciate it!
"Report a bug" button from sentry, is not visible . i mean, when we reload the page, it appears for a brief moment, and when the page loads, it disappears. is it just me or any update or change occured ?
Same here , did you find any solution ?
@@asthamansoriya6006 Yeah same here
same any solution ?
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!
Hello sir, I wanted to ask if there was supposed to be an HTML file included since i wasn't able to run it without a HTML file. I tried hosting it using Github Pages, but it didn't work, so is it only meant for it to be run by the localhost:3000 or not? Also based on the Github repo that you mentioned in the description of this video (which I'm quite grateful for), it also didn't mention any html page at all. Additionally, for context, I only used node v22.4.1, and npm 10.8.1. Again thanks for the great video and I am hoping to hear from you once more
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.
Link to site where it's hosted ?
I am having issue in Report Bug Button. It is appearing at loading a page after that it is not showing. Anybody give me solution.
thank u sir
In the Bento grid section not all of the cards are showing on the screen. they are being cut off
The man, The myth, The legend is back with new content. 🎉
Thank you! 🎉
your voice is amazing bro.
1:25:56 how do you copied many words at once by one by one for pasting? short cut to do that?
react three fiber is not working i have tried installing the dependency multiple times but it is just this React-three-fiber which is not being picked up how to resolve this?
Hello, i am getting this error while running npm run build command ""Export encountered errors on following paths: /page: /"" can you provide solution for this problem?
wow amazing
Thank you so much for making this🫡🫡
22:35 : Ah so that is why the whole tutorial is only 3 hrs long. Without that pasting and component fiddling it would be 10 hours ;) So very much appreciated that you helped me get past this step which is the main reason I never completet a react, next or svelte project ...
This calls for a meme: "BRO JUST GAVE US WORKING NEXTJS"