🔴 Let's build a Modern Portfolio with NEXT.JS (Framer Motion, Tailwind CSS, Sanity.io, React)

🔴 Let's build a Modern Portfolio with NEXT.JS (Framer Motion, Tailwind CSS, Sanity.io, React) | 2023

Рет қаралды 1,378,707

Күн бұрын

🚨 Join the world’s BEST developer community “Zero to Full Stack Hero” NOW: www.papareact.com/course
📩 Want coding problems (with solutions!) delivered to your inbox daily!?
Sign Up Here: www.papareact.com/universityo...
Join me as I teach you how to build a RESPONSIVE Modern Portfolio with NEXT.JS, you'll learn how to do the following in this build:
👉 Optimise Next.js to its FULL potential to build a website which loads in milliseconds!
👉 Use Sanity.io and its incredible CMS capabilities to power the backend, allowing you to easily update the contents of your portfolio from anywhere in the world!
👉 Add Silky smooth animations with Framer Motion for a unique & breathtaking UI/UX experience!
👉 Use Tailwind CSS to build a beautiful responsive Modern website!
👉 Deploy your masterpiece to Vercel so you can showcase your skills to the world!
+ SO MUCH MORE!
🖥️ CODE
Get the code for my builds here: links.papareact.com/github
🎙️ PODCAST
links.papareact.com/podcast
🌍 SOCIALS:
Instagram: links.papareact.com/instagram
Facebook: links.papareact.com/facebook
LinkedIn: links.papareact.com/linkedin
Twitter: links.papareact.com/twitter
Discord: links.papareact.com/discord
Newsletter: links.papareact.com/newsletter
❤️ SUPPORT
PAPA Merch: links.papareact.com/merch
Donate: links.papareact.com/donate
🕐 TIMESTAMPS:
00:00 Introduction
00:50 Build Showcase
05:01 Build Explanation (1/2)
06:09 Sanity Sponsorship
06:50 Build Explanation (2/2)
10:02 Setting up Next.js & TypeScript
15:12 Setting up Tailwind CSS
22:28 Initialising the Build
23:55 Building the Header Section (1/2)
27:42 Implementing React Social Icons Library
31:37 Building the Header Section (2/2)
36:10 Implementing Framer Motion
43:50 Building the Hero Section (1/2)
44:46 Implementing React Simple Typewriter Library
50:12 Adding Background Circles with Framer Motion
1:01:41 Building the Hero Section (2/2)
1:12:24 Building the About Section
1:25:10 Building the Work Experience Section
1:29:15 Building the Experience Cards in the Work Experience Section
1:41:26 Building the Skills Section
1:46:31 Building the Skill Component in the Skills Section
1:54:49 Building the Projects Section
2:07:12 Building the Contact Me Section (1/3)
2:10:14 Implementing Heroicons v2
2:14:42 Building the Contact Me Section (2/3)
2:20:24 Implementing React Hook Forms Library
2:23:41 Building the Contact Me Section (3/3)
2:28:59 Implementing Tailwind Scroll Bar Library
2:33:37 Adding the Home Button
2:35:16 Implementing Sanity
2:39:25 Changing & Adding in Sanity Schemas
2:51:49 Using GROQ to Query Data
2:54:27 Connecting Sanity to the Build
3:03:06 Creating Type Definitions
3:10:30 Creating Utility Functions to Fetch Data
3:14:11 Implementing Incremental Static Regeneration
3:19:33 Adding Sanity Data in the Header Section
3:22:46 Adding Sanity Data in the Hero Section
3:25:21 Adding Sanity Data in the About Section
3:27:36 Adding Sanity Data in the Work Experience Section
3:35:00 Adding Sanity Data in the Skills Section
3:37:05 Animating Icons in the Skills Section
3:39:25 Adding Sanity Data in the Projects Section
3:43:34 Final Build Explanation & Demo
3:45:45 Deploying to Vercel
3:52:32 Final Deployed Build Demo
3:53:30 Outro
#nextjs #portfolio #tutorial #javascript #sanityio #cms #beginner #tailwindcss #framermotion

Пікірлер: 692

@SonnySangha Жыл бұрын

📬Do you want DAILY coding problems sent DIRECTLY to your Inbox? (with solutions the next day) 👉 links.papareact.com/university

@ravi12rocks Жыл бұрын

@@vnm_8945 use axios instead of the fetch method.then it will work. Worked for me.

@jeremymcdonald5281 Ай бұрын

I concur. . . Bro is the DMX of the software engineering realm

@therhythmatic Жыл бұрын

This dude kept the exact same energy level for almost 4 hours. Last time I saw someone do that, it was DMX in concert.

@SonnySangha Жыл бұрын

Hahahahaha love this comment

@derekprieur5258 Жыл бұрын

Really awesome video Sonny! Your energy throughout was great to see and I definitely learned a lot of new things 👍

@xibble_developer7474 Жыл бұрын

Wow! Just started learning React and Next JS, this livestream/tutorial was quite helpful! Thank you Sonny! I'll look forward to more streams like this! :)

@davisnwanze4456 Жыл бұрын

In case you have a prerendering error at "./". The problem is from getStaticProps. This function is trying to request from an api endpoint that hasn't been built yet. The api routes in this application are in the next js application which is getting built. To solve this issue take the logic from the getPageInfo, getExperience...etc and put it in the respective helper methods in the utils folder. Basically, make your request to sanity straight from the helper utils without the api routes. After I did this it deployed. So you will be fetching like this const res = await sanityClient.fetch(query) const experiences: Experience [ ] = result return experiences The query is your groq query string.

@tzuilee588 Жыл бұрын

Thanks for your explanation buddy! It really helped me out! 😁

@Vaiez Жыл бұрын

any chance you could show the repo for this to compare? trying to figure out where i've gone wrong. thanks

@muhammadshadreza1636 Жыл бұрын

I also am facing issues with deploy I used try catch in the index.tsx cause the data was not coming up now when giving "vercel deploy --prebuilt" then it's not working. ENOENT: no such file or directory, stat '/vercel/path0/.vercel/output/functions/_next/data/td_4cUkOhbVy6u7Kx0Fm8/index.json.func' though I see this dir in the .vercel build folder any thoughts on that? thanks in advance

@ArturLan Жыл бұрын

@@muhammadshadreza1636 Just delete this "data" folder and then run "vercel deploy --prebuilt"

@ArturLan Жыл бұрын

Thank you for explanation, that makes sense, so basically you can't call internal Next.JS APIs from getStaticProps. But I wonder then why vercel build worked on video?

@husseinkizz Жыл бұрын

I think this channel is just underrated yet, am a web dev youtube channels nomad and I can say this is going to the moon!!!

@kamalchakma4927 Жыл бұрын

appreciate the hardwork put behind this. such a underrated youtuber

@jeromemanceau4263 Жыл бұрын

Thanks Sonny! It's always a pleasure to watch you working and explaining the code! Appreciate a lot!

@ameersultanabbasi5596 2 ай бұрын

I was scrolling and searching who help me to build my next portfolio. after passing through many youtubers i finally came to ur channel. u r just awsm bro. keep ir up my prayer are with u bro

@lokeshnegi5051 Жыл бұрын

you never disappoint with your content keep up the good work !

@rodrigofrancescani4223 Жыл бұрын

Love your energy, and the content is gold, you're a blessing !

@AndrewDBrown2020 Жыл бұрын

Sonny - amazing!!! Your knowledge, delivery and energy (for the entire video) - wow - you're the man!!!

@Tech_Alchemy Жыл бұрын

Thanks as always for your amazing content Sonny.

@jacobrose6661 Жыл бұрын

If you're getting issues with Hydration after making the Email logo clickable, its because you have nested tags. Social Icon is a component which contains an tag and Link is just a fancy a tag, so it will complain. I solved this by just using the url property of the social Icon and wrapping the get in touch with me text in a Link tag, which works since they are on the same level now and no longer nested.

@dknsapatin Жыл бұрын

Thanks! This helped me a lot!

@mustafa-bilen Жыл бұрын

or you can just give LegacyBehavior to tag its gonna work

@jesusxchristo Жыл бұрын

@@mustafa-bilen that worked perfectly thank you!

@SatyamKumar-vz6kg Жыл бұрын

I removed the link tag and just added onClick={() => (window.location.href = "#contact")} to motion.div

@gushawke4393 Жыл бұрын

@@SatyamKumar-vz6kg THANK YOU

@Vikingsplayer Жыл бұрын

awesome bro love your toturials and respect your effort to teach us like this

@zeropoint25 Жыл бұрын

For anyone having problem with smaller screen devices, you can add zoom 67% at the first div on index tsx. Then replace h-screen on each component by 150vh. Mine looks good on Laptop and Phone.

@binodkhatri7738 Жыл бұрын

@Rizki Rajar my comment do you have any idea about that??

@ifaizanMK Жыл бұрын

can you please share your code? i have some issues

@zeropoint25 Жыл бұрын

@@binodkhatri7738 no idea, sry

@harishg9429 Жыл бұрын

coding is so much enjoyable with Sonny, thank you

@m.zhafirrama9881 Жыл бұрын

Best soft soft tutorial for beginners on KZfaq! I'm an absolute beginner and all the other tutorials I've found on KZfaq have been so

@advidsanimationvideosvisual 2 ай бұрын

The video editing in this video is flawless. The seamless transitions and perfect timing create a polished and professional presentation.

@saumya8407 Жыл бұрын

This is amazing. And this is 100 times better than the best selling udemy bootcamp. Thank you for sharing it for free.

@ishaankulkarni49 Жыл бұрын

had so much fun building this. Cant thank you enough Sonny!

@ThugLifeModafocah Жыл бұрын

You, as usual, just killing it. Thanks Sonny.

@londelidess 20 күн бұрын

I love any projects you can configure contents in cms after deployed. That makes more sense to customer based products. I love this video!

@brianmanguriu9960 Жыл бұрын

This guy is amazing, great video and the way you solve the errors its just amazing good trainer.

@cryptod6976 Жыл бұрын

My bro, even though I'm a skilled NextJS developer, your videos especially this one still have room to add value myself. Really Appreciated!

@binodkhatri7738 Жыл бұрын

@Crypto D do you have any idean about my issue please read the comment the issue am facing??

@carosendahl Жыл бұрын

The video is very good. I enjoy watching them. One comment though: Not everyone has a 4k screen resolution (3840 x 2160), so the apps need to usually be tweaked (sizes scaled down) to fit traditional smart phones and screen resolutions.

@xdeclipseytu_3790 Жыл бұрын

I’m new to tailwind css, I got mine uploaded but having an issue with smooth scroll that he got, would that be the issue with Google by any chance? Cause I went to his deployed page and it was the same thing there too

@pedroaznarez1879 11 ай бұрын

the website is'n really responsive. so thats something we'll have to do on our own

@alexmephors Жыл бұрын

The way Sonny sold me on this tutorial in the intro, I just had to watch it. 😂😂

@AndreaRiezzo Жыл бұрын

Your channel is a nice surprise. I'm looking forward to watch other good content. Thank you for sharing your knowledge!

@SonnySangha Жыл бұрын

You’re welcome!!! Thanks for supporting!

@dadtheautomator9553 Жыл бұрын

Love this guy's energy on a topic can overwhelmingly be a bit dry from other content creators!

@sheheryarqazi1006 Жыл бұрын

You the one and only always make the most energetic tutorial 💯

@masadamsahid Жыл бұрын

Thanks. This project helped me understanding how NextJs work. And additionaly, it helped me understanding about Sanity and Framer Motion. Big thanks, Sonny 👍

@SonnySangha Жыл бұрын

You’re welcome!!

@MonLes-xt7gc Жыл бұрын

51:00 For windows users, select multiple things --> ctrl + alt + arrow key

@tzuilee588 Жыл бұрын

The energy in this channel is insane, never thought coding can be this energetic

@qingyuanguan 24 күн бұрын

This video is so interesting. I've watched it several times without getting tired of it, it's amazing!

@laryssagomes6261 Жыл бұрын

thank you straight to the point

@nicholasbazzoni7084 Жыл бұрын

Great learning experience thank you .

@zementsega6196 Жыл бұрын

amazing energy and content .thank you sonny sangha..

@jshy6847 Жыл бұрын

there is a way in react to make your redundant code look more cleaner, its using the loop method (map in the jsx). Makes the code alot cleaner and easy to use. You also edit the element only one time and all of them get the changes

@ismailMerced Жыл бұрын

I use this method all the time for duplicates components nice tip

@ahmed27218 11 ай бұрын

can any one face the issue of CSS styling not showing in the page

@WilliamTreble 9 ай бұрын

@@ahmed27218is it imported properly?

@abdelrahmanzaitoun4402 3 ай бұрын

absolutely amazing sonny. keept it up bro

@--m.b. 3 ай бұрын

thanx, bro. Nice words - I'm in full agreement, 💯percent

@test3373 Жыл бұрын

THANK YOU!! THIS WAS THE BEST AND EASIEST TUTORIAL

@zydraakiss Жыл бұрын

Did you deployed this tutorial project?

@lokeshnegi5051 Жыл бұрын

hey man if u have completed can u please share your gituhb code link

@apekshafernando2750 Жыл бұрын

sonny This is my first testing react web and no words to say really.......... good Thanks sonny, love you 🖤🖤💯💥🍻

@evanmarshall9498 7 ай бұрын

In the hero component for useTypeWriter you defined both a text and count const. Did you ever use the count variable?

@derealratos6332 Жыл бұрын

love your vibe and your content sonny I want to be more like you

@toiletinspector Жыл бұрын

Thanks Sonny! Loved the code along!

@abhinavdhama3014 Жыл бұрын

This is what i was looking for . Franer motion ❤

@user-lq8jx8ji3s 6 ай бұрын

Simply the best Sonny you are doing the best work Champ!!!

@tawfiqtb Жыл бұрын

you are changing my life bro ... keep doing what you do best

@tawfiqtb Жыл бұрын

am learning so much in a short time

@dalestewart Жыл бұрын

At 30:31 you can press SHIFT+OPTION+DOWNARROW to get multiple lines of the SocialIcon

@binodkhatri7738 Жыл бұрын

@Dale Stewart do you have any idea about this Binod khatri 1 second ago can anybody help me with the my skill section in his project the animation somewhat paused for a while and collaps together i have tried same code as his but in my context the animation is like linear there is no paused for a moment whyy is that so i am doing with reactjs does that make a difference ?? or am missing something ??

@danlake201 Жыл бұрын

Thanks, this is a great video!!! Any suggestion on using clip path for backdrop of images in react or framer motion?

@freewebdevelopment521 Жыл бұрын

Just amazing bro!!!!!!

@hiteshnalamwar2722 Жыл бұрын

Learning coding from the best teacher out there) If you were my teacher in my Engineering school I would not wasted those 4 years :)

@clipartinc Жыл бұрын

Thanks for your videos! They help a lot. Can you do a NextAuth video using an Email provider using a mySQL database? Please use more mySQL database setups in your projects.

@techie_teko8923 Жыл бұрын

this channel is Amazing ... THANK YOU

@Eternal_Image Жыл бұрын

Great work Sonny!

@lycan2494 Жыл бұрын

i needed this!!

@feliwein_cc Жыл бұрын

killer build man, wtf i love you

@charbelsarkis3567 Жыл бұрын

Amazing content. 🥰👍

@frankdearr2772 Ай бұрын

great topic, thanks 👍

@Elgond Жыл бұрын

was watching live in 5am in the morning , Liked , Subscribed and saved to Playlist .

@Forthepeople74 Жыл бұрын

I just love your content. Hard work matters

@dineshkatariya5966 Жыл бұрын

I'm going to modify this project and use it as my portfolio website. Thanks man for such amazing content

@chad4698 Жыл бұрын

smart me too

@xdeclipseytu_3790 Жыл бұрын

@nandasoe5104 Жыл бұрын

I checked - everything is clean

@kaioalexandremarques525 Жыл бұрын

I sincerely love this man!

@SonnySangha Жыл бұрын

I love you too thanks for being awesome!!!

@briananderson8632 Жыл бұрын

Sonny, first time watching one of your videos and I am impressed with how much content you cover in a matter of a few hours! Being a manager I don't get to code as often as I would like, but videos like this keep me energized. Quick question, in the projects section how did you make the images that show the project in the different form factors? That is a nice visual for each project that I would be interested in replicating.

@SonnySangha Жыл бұрын

Thanks Brian!! Could you elaborate on your question and send it to our team email at papareact.team@gmail.com as it always gets buried here!

@maximilianojuega17 Жыл бұрын

did you get an answer for this question ?

@tephlondandada156 Жыл бұрын

Wow! That’s amazing! Are you able to do a tutorial for beginners like myself on how to convert a Wordpress website into an app using react js?

@theoloisel4754 Жыл бұрын

works, chock-full thanks!

@haroonalbar2725 Жыл бұрын

If anyone ran into the problem of the image not rendering use this in the terminal yarn add next-images use the Image component inside a div like so

@lokeshnegi5051 Жыл бұрын

bro if u have completed can u please share your git hub repo for this project

@yashbarman9404 Жыл бұрын

@@lokeshnegi5051 me to bro

@binodkhatri7738 Жыл бұрын

@Haroon Albar do you have any idea about this issue help me can anybody help me with the my skill section in his project the animation somewhat paused for a while and collaps together i have tried same code as his but in my context the animation is like linear there is no paused for a moment whyy is that so i am doing with reactjs does that make a difference ?? or am missing something ??

@sourabhranakoti9339 10 ай бұрын

the animation on the skills section is not getting triggered for 3 column in small screen, similarly in project section animation is not getting triggered hence image is also not rendering. I have checked the container div size, that is not the issue. Can you tell me how to solve this issue?

@ibrahimiltifat7045 Жыл бұрын

Thank you !!!

@ramydaher6193 Жыл бұрын

Very niceee 👑❤️ Can you teach us how to build website with ruby and rails? Thank you 😊😍

@user-ed8zl7jo9e Ай бұрын

Thank you!

@kietttran Жыл бұрын

Thank you 🙏

@vijaynarayanan3258 Жыл бұрын

great ui! It'd be much appreciated if you try to make these fully responsive starting from phone to desktop

@PattyBeautCode Жыл бұрын

This is the portfolio project for now to the future !

@SonnySangha Жыл бұрын

❤🎉

@Zubairkhan-rb1fx Жыл бұрын

@@SonnySangha Error: getStaticProps is not supported in app/, detected in. I am getting this error.. Is it due to next13?

@KCODivyanshuKatyan 7 ай бұрын

Quality content you earned a sub

@carosendahl Жыл бұрын

Add " | order(dateStarted desc, dateEnded)" to the end of your GroQ experience query and " | order(dateStarted desc)" to your projects query to get the array in a nice ordered list for rendering..

@MrGangstergang Жыл бұрын

thanks man

@camoman1000 Жыл бұрын

Love the video! Would love to have this portfolio but with svelte/sveltekit or Astro with sanity cms

@anhbientu1420 Жыл бұрын

Nice video pro, keep it up!

@TomasJansson Жыл бұрын

Great video. Is there a good reason to why you create the endpoints to get the data when everything is rendered server side? Can’t you just call sanity directly from getStaticProps?

@red.williams18 5 ай бұрын

For building the header section, something neat i saw another developer do was to create an array (in this case, it would just hold the url", .map() over that with a key and url and return the fc with that url as the normal argument. Dry at its best

@maha33612 3 ай бұрын

another develper who?please can yo tell ?

@thegoldenagelegendz4425 Жыл бұрын

Sangha bhaijaan your content always rocked everyone.

@PeppiePeppa Жыл бұрын

hey im getting Server Error TypeError: Only absolute URLs are supported. What did I do wrong here?

@bukolaidowu6572 Жыл бұрын

Sonny thank you very much for this tutorial. When I was following the build I noticed that anytime i refreshed the page it snaped to the about section or the experience section instead of the Hero section. Please how can i fix this?

@bedohabashi6770 Жыл бұрын

You are the best Sonny Sangha. You have helped and inspired me a lot brother. Because of I become a freelancer.

@SonnySangha Жыл бұрын

Incredible!!! #PAPAFAM

@Zubairkhan-rb1fx Жыл бұрын

@@SonnySangha Error: getStaticProps is not supported in app/, detected in. I am getting this error.. Is it due to next13?

@ilmu_web 5 ай бұрын

Wow, thanks for tutorial nice..

@anime_edits_0962 10 күн бұрын

Bro 1no ❤❤❤❤😊

@Nik.305 2 ай бұрын

GWAAN SONNY! This is 🔥 I don't suppose you created an updated version of this since then?

@SonnySangha 11 күн бұрын

I’m thinking of doing one!

@jingli9232 Жыл бұрын

genius and angel to the community

@pierre1979 Жыл бұрын

From the intro you know this is some heat lmaoo

@franciscosouza1826 Жыл бұрын

Thanks for the excellent video. + 1 subscriber.🙃

@sheheryarqazi1006 Жыл бұрын

great teacher wish i could make you proud by learning

@Vanderjigs12 Жыл бұрын

Love this video, but I am having issues with proper spacing of the images throughout the course, maybe because of the resolution?

@andreaskarz Жыл бұрын

Hi Sonny, I love you videos they are full of energy, thank you. Wath do you think about Flowbite? I love it, then it saves a lot of work when you use Tailwind.

@jeremymcdonald5281 Ай бұрын

Im a Controls engineer. .. meaning I program machines and industrial software systems. I came across this in my suggested feeds. . . dude. . .your video totally makes me want to leave the industrial and manufacturing sector and come into the full stack developer arena. just your energy and style was enough and has me hooked. . . i got to get out of the dark

@SonnySangha Ай бұрын

This is such an awesome comment haha thank you!!! I’m glad you enjoyed it!

@zidxne Жыл бұрын

Guys if you are get getting "projectId" error when deploying or 500 internal error on vercel. Follow these steps: 1. Make sure your gitignore file does not have # local env files # .env*.local in it. 2. Change the NEXT_PUBLIC_BASE_URL in .env.local to your vercel site url NOT localhost:3000.

@ShivamVerma-ut6nk Жыл бұрын

thanks man !!!! it worked.

@mamunahmed8113 Жыл бұрын

same problem but i can't fixed this error. could you help me?

@samahshakir8468 Жыл бұрын

Thanks man

@amadeusocean1201 Жыл бұрын

@@mamunahmed8113 same here. Let me know if you find a solution

@sayanmanna2511 Жыл бұрын

@@mamunahmed8113 same problem.. have you solved it?

@jakubwasilewski9518 Жыл бұрын

Love this video

@developermithu Жыл бұрын

That is so cool 🔥

@bedohabashi6770 Жыл бұрын

Without a doubt Sonny is the best #papafam

@Anita-kf8yw Жыл бұрын

I have a question about the section projects and the slide. There is a mapping and it cunts each project, but how to make it display different paragraphs while keeping the counting?