NEXT JS 14， Tailwind CSS 创建现代投资组合网站
- 1. Resources & Requirements
- 1. Prerequisite
- 2. Download Source Code
- 2. Next JS Basics
- 1. Create Next.js Project
- 2. Next.js Folder Structure
- 3. Next.js Routing
- 4. Next.js Server Side vs Client Side Components
- 5. What is Tailwind CSS
- 6. Set Font Family
- 3. Dark and Light Theme Setting
- 1. Section Intro
- 2. Install Next Themes Package
- 3. Create Switch Component
- 4. Make Switch Component Dynamic
- 4. Header
- 1. Section Intro
- 2. Let's Start Header Section
- 3. Add More Header Data
- 4. Make Header Responsive
- 5. Contacts & About
- 1. Intro
- 2. Setup Data For Contacts Section
- 3. Style Contacts Section
- 4. About Section Data
- 5. Style About Section
- 6. Skills
- 1. Intro
- 2. Skills Data
- 3. Loop Skills Array
- 7. Work History
- 1. Intro
- 2. Work History Section Data
- 3. Use Work History Data
- 4. Loop Skills and Options
- 8. Projects
- 1. Intro
- 2. Projects Data
- 3. Use Projects Data
- 4. Image Aspect Ratio
- 5. Create Model
- 6. Make Model Dynamic
- 7. Display Project Details in Model
- 9. Reviews
- 1. Intro
- 2. Reviews Data
- 3. Loop Reviews
- 4. Masonry Layout
- 5. Show More Button
- 6. Create Footer Component
- 10. Deployment
- 1. Upload Source Code on Github
- 2. Deploy on Vercel
- 3. Fix Issue