Code a Modern Dev Portfolio with Next.js, Typescript, Tailwind, Shadcn & Aceternity UI Pt. 3
Join Discord (AquaWolf Academy): / discord
Project Github Repo: https://github.com/0xAquaWolf/portfolio
🚀 Series Overview: Follow along as I build a modern developer portfolio using cutting-edge technologies and UI libraries.
Episodes 3
Previous Streams:
pt.0: • Code a Modern Dev Portfolio with Next.js, ...
pt.1: • Code a Modern Dev Portfolio with Next.js, ...
pt.2: • Code a Modern Dev Portfolio with Next.js, ...
📚 What We'll Cover:
Setting up a Next.js project with TypeScript
Implementing responsive designs with Tailwind CSS
Integrating Shadcn UI components for a polished look
Enhancing user experience with Aceternity UI animations
Creating a fully functional, performant developer portfolio
AquaFiles (dotfiles):
👉 https://github.com/0xAquaWolf/AquaFiles
Ready to level up your web development skills?
Like, subscribe, and hit the notification bell to stay updated on each episode of our journey to create a stunning modern developer portfolio!
Timestamps:
00:00:00 Intro and review of previous progress
00:05:00 Discussion on using Cursor AI and planning for YouTube video section
00:10:00 Demonstrating how to fetch YouTube data using API
00:15:00 Encountering and resolving module errors
00:20:00 Issues with exporting components and font ligatures
00:25:00 Converting client-side component to server-side
00:30:00 Implementing YouTube API and creating components
00:35:00 Discussion on fonts and OAuth authentication
00:40:00 Using Ublock Origin as an ad blocker
00:45:00 Troubleshooting Beno grid issues
00:50:00 Discussing coding tools and caching API calls
00:55:00 Exploring UI libraries and indexing process
01:00:00 Optimizing API usage for local development vs. production
01:05:00 Discussing rendering backgrounds and caching in Next.js
01:10:00 Encountering issues with third-party authentication
01:15:00 Demonstrating Obsidian for managing to-do lists
01:20:00 Discussing productivity workflow and screenshot management
01:25:00 Working on portfolio layout and discussing data syncing
01:30:00 Creating new components for video display
01:35:00 Troubleshooting grid structure issues
01:40:00 Replicating components using Tailwind CSS
01:45:00 Resolving import issues and discussing learning resources
01:50:00 Recommending Scrimba as a learning platform
01:55:00 Implementing dynamic routing with Next.js
02:00:00 Troubleshooting positioning issues
02:05:00 Adjusting aspect ratios and managing API keys
02:10:00 Creating and securing new API keys
02:15:00 Comparing project management tools
02:20:00 Updating readme file and discussing project languages
02:25:00 Fetching video information from YouTube API
02:30:00 Downloading and importing thumbnails
02:35:00 Configuring thumbnails and resolving errors
02:40:00 Adjusting video card layout
02:45:00 Displaying latest videos dynamically
02:50:00 Searching for specific files and links
02:55:00 Updating component data and discussing frameworks
03:00:00 Q&A session on UI/UX design tips
03:05:00 Discussing file compression and sharing large files
03:10:00 Exploring file sizes and uploading to Google Drive
03:15:00 Demonstrating file upload to Vercel
03:20:00 Customizing portfolio layout and adding shadow effects
03:25:00 Debating CSS organization methods
03:30:00 Fixing design issues and adjusting padding
03:35:00 Adjusting gradient background and planning next steps
03:40:00 Designing button appearance
03:45:00 Implementing dynamic routing with Next.js
03:50:00 Building contact form using Aceternity UI and Shadcn
03:55:00 Continuing work on contact form and form validation
04:00:00 Resolving rate limiting issues
04:05:00 Troubleshooting button shadow issues
04:10:00 Adjusting shadow effects using Tailwind CSS
04:15:00 Demonstrating Tailwind CSS customization
04:20:00 Optimizing visual elements and fixing issues
04:25:00 Adjusting layout of logo and buttons
04:30:00 Fixing various layout issues
04:35:00 Setting up "About Me" component
04:40:00 Generating Lorem Ipsum text and creating React component
04:45:00 Styling portfolio elements and borrowing inspiration
04:50:00 Converting HTML to React component
04:55:00 Simplifying code based on viewer feedback
05:00:00 Adjusting portfolio design and planning future sections
05:05:00 Working on layout and color scheme
05:10:00 Recap of day's achievements and future plans
05:15:00 Implementing dynamic routing and custom components
