Jan 16
Loading video player...
1️⃣ Get Started with Sanity 👉 https://www.sanity.io/sonny?utm_source=youtube&utm_medium=video&utm_content=next-gen-portfolio 2️⃣ Get Started with Clerk 👉 https://go.clerk.com/O6Jzq2c ❗️Get the Full Source Code for FREE here 👉 https://www.papareact.com/next-gen-portfolio-form 🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: https://www.papareact.com/course 🛠️ Looking for the Code for this build? (Plus over 55+ others!) https://links.papareact.com/github 🎯 What You’ll Learn 🚀 Modern Tech Stack (Using the NEWEST Releases!): - Next.js 16 - JUST RELEASED! React 19 with App Router, Turbopack, and Server Components - OpenAI’s BRAND NEW AgentKit & ChatKit* - OpenAI’s latest release for building AI agents with streaming chat - Sanity CMS - Headless CMS with custom schemas, Studio dashboard, VISUAL EDITING with Presentation Tool - Clerk - Complete authentication with customizable components - Tailwind CSS v4 - Modern utility-first styling - Framer Motion - Smooth animations and micro-interactions - Aceternity UI - Stunning animated components (dotted glow backgrounds, ripple effects, comet cards) 💻 Core Features: - AI Twin Chat - Built with OpenAI’s NEW ChatKit - 3 personality modes (Crisp, Clear, Chatty) - Dual App Architecture - Public portfolio + Sanity Studio CMS in one codebase - Visual Content Editing - Edit in Sanity Studio and see changes LIVE with Presentation Tool - Dynamic Hero Section - Animated text-flipping headlines - Comprehensive Sections - Skills charts, experience timeline, projects, blog, testimonials, achievements - Floating Navigation Dock - Beautiful macOS-style dock - Real-Time Content - Live updates with Sanity’s Live API and draft mode preview 🛠️ Advanced Concepts: - OpenAI AgentKit Integration - NEW framework for AI agents with context awareness - Sanity Visual Editing - Presentation Tool with side-by-side editing and live preview - Draft Mode - Preview unpublished content before going live - GROQ Queries - Powerful filtering with Sanity’s query language + Vision tool playground - Server Actions - Form submissions with Next.js 16 - Type Safety - End-to-end TypeScript with auto-generated Sanity types - Accessibility First - Radix UI primitives 🚀 Production Skills: - Dual App Deployment - Portfolio on Vercel + Sanity Studio hosting - Content Management - 61 sample documents with automated import scripts - Custom UI Components - Aceternity UI animations, animated testimonials, world maps, charts (Recharts) - Icon Systems - Lucide React + Tabler Icons - Modern Tooling - Biome for ultra-fast linting and formatting - SEO Optimization - Metadata configuration and structured content - Performance - Server Components, image optimization, and fast page loads Perfect for developers who want to learn the LATEST technologies: Next.js 16 | OpenAI’s AgentKit & ChatKit | Sanity Visual Editing | Aceternity UI | Production-ready tooling 🎵 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST? Sign up for the PAPAFAM Newsletter here 👉 https://links.papareact.com/newsletter 🕐 TIMESTAMPS: 0:00 Introduction 1:03 Build Demo 10:52 Clerk for Authentication 11:05 Sanity Powering the Backend 16:47 Build Tech Stack Breakdown 23:12 Why Use Sanity & Clerk 25:37 Initialising the Build 30:08 Setting Up Clerk 33:20 Setting Up Sanity 38:51 Setting Up Sanity Schemas 44:53 Sanity CMS Structuring 58:39 Displaying Sanity Backend Data on the Frontend 1:05:53 Setting Up Shadcn 1:09:01 Building the Hero Section of the Portfolio (w/ Aceternity UI) 1:36:50 Implementing a Sidebar for “Chat with my AI Twin” Functionality 1:43:55 Building the About Section 1:48:29 Building the “Chat with my AI Twin” Functionality 1:56:47 Implementing OpenAI AgentKit & ChatKit 2:07:55 Explaining & Implementing Sanity MCP Tools 2:13:48 Connecting Sanity’s MCP Server to OpenAI AgentKit 2:28:06 Implementing OpenAI ChatKit in the Portfolio 2:45:01 Building the Testimonials Section 2:52:16 Building the Skills Section 2:57:25 Building the Experience Section 2:59:29 Building the Education Section 3:00:05 Building the Projects Section 3:02:05 Building the Certifications Section 3:05:11 Building the Achievements, Services & Blog Sections 3:07:18 Building the Contact Section 3:22:08 Implementing the Floating Dock 3:27:04 Implementing Dark Mode Functionality 3:30:27 Implementing Sanity’s Visual Editing Feature 3:40:45 SKIP 3:43:32 Final Build Fixes 3:47:48 Deploying to Vercel 4:11:58 Final Deployed Build Demo & Outro Let’s get it PAPAFAM 🔥. DISCLAIMER: This Video is made for informational and educational purposes only. Copyright Disclaimer under section 107 of the Copyright Act 1976, allowance is made for “fair use” of this video for education purposes. #nextjs16 #portfolio #openai #agentkit #react19 #ai #nextgen #clerk #sanity #learning #coding #nextjs #tutorial #beginner #programming