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

Sonny Sangha

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

πŸ«‚ Join my Community, “University of Code” for FREE: https://www.universityofcode.com

πŸ”΄ LOOKING FOR THE CODE? πŸ› οΈ
https://links.papareact.com/github

πŸ“© Want coding problems (with solutions!) delivered to your inbox daily? https://www.papareact.com/dailycodingchallenges

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

+ SO MUCH MORE!

πŸŽ™οΈ 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