Summary
Keywords
Full Transcript
🚨 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 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
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
