๐Ÿ”ด Let’s build a Modern Portfolio with NEXT.JS (Framer Motion, Tailwind CSS, Sanity.io, React) | 2023

Sonny Sangha

๐Ÿ“ฉ Want coding problems (with solutions!) delivered to your inbox daily!?
Sign Up Here: https://www.papareact.com/universityofcode

โ—๏ธThis video may contain code snippets or concepts that are specific to a previous version of Sanity Studio. In most cases, you can find the information needed to adapt the material to the latest Studio version by exploring Sanity docs: https://www.sanity.io/docs/migrating-from-v2

๐Ÿšจ Join the worldโ€™s BEST developer community โ€œZero to Full Stack Heroโ€ NOW: https://www.papareact.com/course

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!


๐Ÿ–ฅ๏ธ CODE
Get the code for my builds here: https://links.papareact.com/github


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

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