Build & Deploy a Portfolio Website with Claude Code | Step-by-Step AI Coding Tutorial

Build a cinematic AI-powered portfolio website in just a few minutes using Claude Code. In this tutorial, I’ll show you how to plan and generate the website, add an AI avatar video, test responsiveness with Playwright, push the code to GitHub, and deploy it for free on Vercel. We’ll use Next.js, TypeScript, Tailwind CSS, shadcn/ui, GSAP animations, and AI tools to create a modern portfolio based on a résumé. ⏱️ Timestamps 00:00 Introduction 00:18 Preview of the finished portfolio 01:11 Creating an AI avatar image 01:42 Setting up Claude Code 02:23 Generating an avatar video with AI 04:12 Planning the portfolio with voice mode 05:47 Reviewing the generated avatar video 06:08 Adding the résumé and avatar video 06:28 Customizing animations and deployment options 08:38 Reviewing Claude Code’s project plan 09:05 Refining the design and video requirements 10:25 Tips for planning projects with AI 11:28 Building the portfolio website 12:05 Previewing the generated website 12:35 Requesting improvements and responsive testing 13:53 Customizing the scroll animations 14:27 Testing and fixing the website with Playwright 15:24 Creating a GitHub repository 16:04 Pushing the project to GitHub 17:39 Deploying the portfolio on Vercel 19:42 Viewing the live website 20:12 Final result and outro 🛠️ Technologies and tools used: • Claude Code • ChatGPT • Gemini • Next.js • TypeScript • Tailwind CSS • shadcn/ui • GSAP • Playwright • GitHub • Vercel If you have a project idea you’d like me to build, leave it in the comments. If you have any questions about the tutorial, feel free to ask! 📱 Follow me on Instagram:   / thewaleedashraf   ▶️ Subscribe to my YouTube channel:    / @thewaleedashraf   #ClaudeCode #AICoding #PortfolioWebsite #WebDevelopment #NextJS #ArtificialIntelligence #CodingTutorial #Vercel #Playwright #ChatGPT