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

🔴 LOOKING FOR THE CODE? 🛠️

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:

👉 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 to showcase your skills to the world!

+ SO MUCH MORE!

🎙️ PODCAST

🌍 SOCIALS:

❤️ SUPPORT

🕐 TIMESTAMPS:
00:00 Introduction
00:50 Build Showcase
05:01 Build Explanation (1/2)
06:09 Sanity Sponsorship
06:50 Build Explanation (2/2)
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

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

[jacobrose]

If you're getting issues with Hydration after making the Email logo clickable, its because you have nested <a/> tags.
Social Icon is a component which contains an <a/> 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.

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

[ameersultanabbasi]

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.

[zeropoint]

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.

[davisnwanze]

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.

[sharadkushwah]

For anyone having error while deployment -
reason - using the baseurl when vercel builds the app there are no api functions present at the moment. They will be present after the deployment but the same doesnt let us deploy the function. What we can do is first deploy rest of the code which doesn't use those functions so that later when we deploy the whole code vercel wont have any problem fetching the apis. Because it will already be present there.

Solution - Comment out the code which uses api then deploy the app. Then uncomment the code and deploy it again.

[jshy]

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

[cryptod]

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

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

[m.zhafirrama]

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

[AndreaRiezzo]

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

[tzuilee]

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

[alexmephors]

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

[MonLes-xtgc]

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

[dalestewart]

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

[saumya]

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

[AndrewDBrown]

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

[qingyuanguan]

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