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

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

[@MindfulMoments-fl5ln]

If anyone has completed this project, could you kindly share your code? I am encountering numerous issues with the responsiveness of the project.

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

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

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

[@ameersultanabbasi5596]

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

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

[@PedroAznarez99]

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

[@MindfulMoments-fl5ln]

If anyone has completed this project, could you kindly share your code? I am encountering numerous issues with the responsiveness of the project.

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

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

[@atiati83]

@3:51:50 sonny mentioned to change the base URL where to change the base url. And where to get the baseURL please let me know. Or if someone copy paste the base URL and in which file. Please will be great help Thanks

[@DirilisErtugrulUrduATV]

At 3:15:14 you implementing incremental static regeneration In pageinfo line I got error by running Vercel build

[@DirilisErtugrulUrduATV]

Reply please

[@ensar6803]

yes need help with 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?

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

[@tzuilee588]

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

[@leandro1.618]

1:18:24 You cant use the from next with the , like you have to use the default . Or at least i couldent.

[@harishg9429]

coding is so much enjoyable with Sonny, thank you

[@qingyuanguan]

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

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

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

[@itsTRBLE]

@@ahmed27218is it imported properly?

[@dadtheautomator9553]

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

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

[@Liveyyy-ic9jl]

life saver man

[@m.zhafirrama9881]

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

[@kamalchakma4927]

appreciate the hardwork put behind this. such a underrated youtuber

[@londelidess]

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

[@MonLes-xt7gc]

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

[@saumya8407]

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

[@victorjohnn]

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

[@AndrewDBrown2020]

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

[@Elgond]

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

[@rodrigofrancescani4223]

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

[@PeppiePeppa]

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

[@jeromemanceau4263]

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

[@apekshafernando2750]

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

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

[@lokeshnegi5051]

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

[@ishaankulkarni49]

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

[@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! :)

[@tawfiqtb]

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

[@tawfiqtb]

am learning so much in a short time

[@JaineelShah-tx9gv]

2:45:32 I can't start sanity shows some error => [postcss] Cannot read properties of undefined (reading 'config')

[@samarthsheth8797]

Everything is working on my localhost but I am not able to deploy it Its showing error in yarn run build while deployment. Any help

[@prajwalladkat]

have you got your website deployed successfully?

[@samarthsheth8797]

@@prajwalladkat no

[@alexmephors]

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

[@ooweew]

Just wondering about a thing. Have not watched the whole video yet, but half-way. Does he have his browser on 80% zoom? Because right now on my 100% zoom (default), the h3 title (for example "Skills") is at the same level as the skill-icons and are behind them. Will he fix this later in his video?

[@biosxx]

Have you figured this out ? I am having the same issue currently. Even on my mobile the website looks weird

[@johnwinchester8911]

@@biosxx just messed around with font-size and padding with various screen sizes seemed to have fixed the problem for me.

[@ooweew]

@@biosxx Hi, it's sad, but at the same time i'm glad it's not just me. But no, not yet. I have still more of the video left to watch. I just finished the "Project Section", and that section looks fine. Still want to watch the whole video to see if they fix that bug later. Have you watched the whole video yet?

[@jingli9232]

@@ooweew same issue, try to debug myself, then mess around with the layouts, sad

[@ooweew]

​@@biosxx Later in the video, he adds "max-h-96 overflow-y-scroll scrollbar-thin scrollbar-track-black scrollbar-thumb-[#F7AB0A]/80" to the ul that has the bullet-points, so that might help a little bit on the "Experience"-page. I took the "max-h" to "max-h-20"

[@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 :)

[@antoniomiguel9447]

' TypeError: Only absolute URLs are supported ' does anyone knows how to fix it in this project ?

[@andrewreddin8853]

Same Error!!

[@marvin_e]

@@andrewreddin8853 same here

[@zydraakiss]

Same to me!

[@antoniomiguel9447]

If any of you find out, please share with us

[@darkArcher06]

same here

[@vijaynarayanan3258]

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

[@justangryvideos47]

at 1:40:25 how is he able to scroll through the experience section with his mouse wheel?

[@ThugLifeModafocah]

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

[@MahsinSaifullah]

what is the vs code extension do you use for that code autosuggestion ? The one that suggests you from a previous code that you have written.

[@sahilsolkar8110]

Tabnine

[@ensar6803]

github copilot, paid service

[@PysznePysznosci]

Does anybody have any idea why when he does the absolute/relative thing to the div parent and then h2/3/4 sections like experience and such and later on he puts skills items they are apart from eachother? When I do that they keep overlapping looking nowhere like what he does :/ Anyone could perhaps help?

[@al-doori2392]

You don't need to do exactly what he is doing, and in this build in the video there is so much UI bugs, you can simply put the h1/h2/h3..etc in a div above the real content

[@trooper_z3712]

Man I appreciate your tutorial, I used to hate web and front end dev as a back end guy, but now it's so much easier and straight forward! BTW, what extension are you using that makes the suggested code at 1:06:51?

[@red.heifer]

its called autopilot

[@alphaAmeturegarage9960]

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

[@hashtag1315]

At 21:05 when the tailwind is unable to integrate with the source code What exactly is done to resolve that Even I am facing the same issues

[@Salaralali]

clean the repo and repeat the steps without installing the wrong tailwindcss stuff, that he did at the beginning

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

[@andremansour]

This is a good video but heres some advice, instead of using the responsive tab in the browser, instead change it to a device size so that you can check if it is truly is responsive. The build is somewhat broken when you test it on iPhone. nevertheless keep up the great work.

[@ayushagrawal7052]

Same. Btw could you be able to resolve that?

[@red.williams18]

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]

another develper who?please can yo tell ?

[@TheNta10]

2:37:32 i did it with TS.. are there some difference between that and JS? cus the API sanity page isnt showing any value in the query vison ([] 0 items).. i did it step by step like you. Thanks!

[@yigll0029]

im having the same issue too. like get apis is not fecthing the values for me. i just went detched the whole sanity thing and added the components manually and now about to deploy it.

[@nandasoe5104]

I checked - everything is clean

[@Nik.305]

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

[@SonnySangha]

I’m thinking of doing one!

[@bedo-habashi]

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?

[@Matiast9477]

2:10:00 if you're having getting the error "Could not find a declaration file for module '" change the import to "import { PhoneIcon } from '@heroicons/react/24/solid';"

[@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 [e-mail] as it always gets buried here!

[@maximilianojuega17]

did you get an answer for this question ?

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

[@sheheryarqazi1006]

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

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

[@getssa]

Thanks man

[@amadeusocean1201]

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

[@sayanmanna2511]

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

[@muhammadshadreza1636]

Sonny I really am frustrated man! What a sweet build it has been so far. Came along till the deployment but errors started to occur. Especially now after solving the vercel build stuff by keeping the local host on and by running vs code on administration now I am having "Error: ENOENT" in the vercel deploy --prebuilt. though I can clearly see the directory but I am not getting any way out... I would really love some guidance from you guys...

[@amadeusocean1201]

same. doesnt work. super frustrating!!!

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

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

[@chaitanyaramji]

Hey Sonny, I followed the last 20 mins of your tutorial or so, right from adding Sanity to deploying on Vercel. While the code works perfectly for me locally, as soon as I try to build & deploy it on vercel, I get an error "TypeError: fetch failed" Any idea what could be the error? Happy to bundle and share my code with you.

[@amadeusocean1201]

I had the same problem. I learned through the Sanity Slack, that the way it's implemented in the video here isn't how it's supposed to be done. I used one of the vercel/sanity starter kits and built the side from there up. Let me know if you need further assistance with it.

[@clairefinnie2770]

@@amadeusocean1201 Had this same issue and couldn't figure out what was going on! Missed your reply when I was first scanning the comments, this would have saved me a good bit of time this afternoon if I'd seen it because I finally decided that's what I'll have to try tomorrow 🤦‍♀

[@federicodinuzzo1547]

@@amadeusocean1201 when I put npm run dev at sanity folder it says: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. I tried a lot of things but nothing works, someone can help me plis? Im stuck here for daysss

[@mohamedabdulla8097]

anyone figured this out?

[@naumantanwir]

I tried the "leerob's next portfolio template" but, that one has prisma and few other things. So, can you please share your code repo or may be codesandbox link or something? that would be extremely helpful.

[@DirilisErtugrulUrduATV]

When I run Vercel build I get error in 78:9 const pageInfo

[@ensar6803]

this error gives me so much trouble I tried everything pls help.

[@sayanmanna2511]

Deployment failing because of staticprops. Any solution?

[@garvitagrawal5945]

I am not getting any data return from my CMS I dont know how to do it pls help. My api/getSocials is showing an Empty page " {"socials":[]} " like that. after timestamp 3:09:56

[@shrutisemwal2224]

That's happening because probably you didn't publish the data you entered in Sanity Studio.

[@evanmarshall9498]

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

[@lebonbauma4167]

As I'm following tried it on my side, but everything in my HTML attribute < className="" > isn't working. Some guidance will be appreciated!😎

[@thtguy001]

same please help

[@apurvasingh2822]

@@thtguy001 same

[@PattySpicy]

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?

[@feliwein_cc]

killer build man, wtf i love you

[@HumanTouchArt]

did aynone get pass this error on vercel Unexpected token T in JSON at position 0 have no idea how to get past that

[@BrandonUK]

Anyone else having the issue where the circles refuse to align with the hero content?

[@3yut023]

Has anyone got an error when you guys try deployment? The message is "ECONNREFUED 127:0.0.1:3000". From what I'm understanding, it's caused by an API call. I need to change the BASE URL but I have no idea what it should be...

[@nikitataranenko998]

same problem, did u fix it?

[@cebacaro]

Hi there. On the 2:00:00 I keep getting an error while trying to add a div tag (Missing "key" prop for element in iterator) can somebody help me with that. I'm really enjoying this tutorial and I'll love to continue with it.

[@eniolaadebayo5681]

same here

[@ShoggyR79]

I followed the tutorial but my sections are overlapping when i switch to a small screen, what should I do

[@Forthepeople74]

I just love your content. Hard work matters

[@willyhuang6858]

Did anyone run into the errors say that "Configuration must contain `projectId`", the 'vercel build and deploy' were successful, but the final page show code 500? not sure what is going on. Please help!

[@ensar6803]

@HOME OF ART replace dotenv files with .env file. problem caused by sanity client cannot get project id from files that Sonny created. I dunno why but either hardcode your projectId or as the way I said first.

[@KCODivyanshuKatyan]

Quality content you earned a sub

[@HealthHabitsHQ.]

If you make the google chrome client smaller (Vertical) all of the content will bunch up. How would I fix this?

[@StackswopoGang]

Great work Sonny!

[@riyazm9518]

Hi, I'm trying to follow the same steps you do but the installer at the start for create next app is different. Should I use the new app router? I'm not familiar with next js and am diving headfirst to learn it through this video.

[@Vanderjigs12]

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

[@derekprieur5258]

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

[@ricardoandrade1313]

yo great shot dude!

[@piyush9688]

As soon as I installed sanity using npm, I am getting following error "Error: Hydration failed because the initial UI does not match what was rendered on the server."

[@franchescoVirguline]

mine is not with a smoth scroll animation, someone know how to sove it in tailwind? I've tried scroll_behavior, but still not working :(

[@xdeclipseytu_3790]

Same, any luck? My mobile view is all messy too

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

[@frankdearr2772]

great topic, thanks 👍

[@Vikingsplayer]

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

[@holyfreakinguacamole]

THIS is the energy I'm looking for!! 🌟🍪🍰🤟

[@SonnySangha]

🤙🏽🔥

[@thegoldenagelegendz4425]

Sangha bhaijaan your content always rocked everyone.

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

[@thomasmortaro7597]

awesome video!! thank you! Just one thing, in my case the experience card and the projects doesn't scrool. Perhaps do you know why?

[@jamangueira7]

Me too. Did you manage to solve it?

[@thomasmortaro7597]

@@jamangueira7 unfortunately no :(

[@ogulcanmdev]

Error occurred prerendering page "/". Anyone solve this problem. Edit; After 7 hours i solve it. Change the staticProps to serverSideProps.....

[@tzuilee588]

thanks man

[@Vaiez]

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

[@nandk45523]

i am having the same error please show me to fix it

[@TeuPai01]

Hi, can you help me with this? I'm going through the same problem. And I can't fix it.

[@orlius]

I find a solution, i had the same problem. Add some Environnement Variable (into the Vercel Project go to Setting) : NEXT_PUBLIC_SANITY_PROJECT_ID and NEXT_PUBLIC_BASE_URL With the right value. Don't forget the "" for the url. Let me know if it solve the problem on your side

[@jingli9232]

genius and angel to the community

[@ahmed-alamodi]

I try to build my project, but I got this error I searched to resolve this error Type error: Module '"sanity"' has no exported member 'defineConfig'. 😅

[@sicruse9472]

I stumbled across this and loved the tutorial, nice work! Having built out the majority of the code I ran into an incompatibility with Next 14+ in that GetStaticProps isn't supported in the app directory, which is where my main page is located. What are your thoughts on providing some guidance on adjusting the tutorial for next 14+? Cheers!

[@YungHavy]

I fixed that problem: I can send you a gist of it?

[@pushkarguptamusic]

@@YungHavy yes please

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