Join the world’s BEST developer community “Zero to Full Stack Hero” NOW: https://www.papareact.com/course

Want coding problems (with solutions!) delivered to your inbox daily!?
Sign Up Here: https://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: https://links.papareact.com/github

PODCAST
https://links.papareact.com/podcast

SOCIALS:
Instagram: https://links.papareact.com/instagram
Facebook: https://links.papareact.com/facebook
LinkedIn: https://links.papareact.com/linkedin
Twitter: https://links.papareact.com/twitter
Discord: https://links.papareact.com/discord
Newsletter: https://links.papareact.com/newsletter

❤ SUPPORT
PAPA Merch: https://links.papareact.com/merch
Donate: https://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