Các công cụ Vibe Code

Từ Zero Đến Hero: Khởi Tạo Landing Page Với v0.dev

Đây là bài học thực hành đầu tiên trong project cuối khóa. Chúng ta sẽ sử dụng v0.dev - AI-powered UI generator của Vercel để tạo foundation cho Landing Page cá nhân.

Tại Sao v0.dev?

v0.dev là tool perfect cho việc scaffolding UI nhanh:

• Generates React + Tailwind code
• Shadcn/ui components built-in
• Responsive by default
• Copy-paste friendly

Workflow:

v0.dev (Generate UI) → Cursor/Windsurf (Refine) → Vercel (Deploy)

Step 1: Define Your Landing Page Structure

Trước khi prompt v0.dev, plan structure:

Landing Page Structure:
├── Hero Section
│   ├── Headline + Tagline
│   ├── Profile Photo
│   └── CTA Buttons
├── About Section
│   ├── Bio/Story
│   └── Key Skills
├── Projects Section
│   ├── Project Cards Grid
│   └── Each: Image, Title, Description, Link
├── Contact Section
│   ├── Contact Form
│   └── Social Links
└── Footer
    ├── Copyright
    └── Quick Links

Step 2: v0.dev Prompt Strategy

Prompt 1: Hero Section

Create a hero section for a personal portfolio.
Include:
- Large headline: "Xin chào, tôi là [Name]"
- Subtitle: "Frontend Developer | AI Enthusiast"  
- Circular profile image placeholder
- Two CTA buttons: "Xem Projects" and "Liên hệ"
- Subtle gradient background
- Animate in on load

Modern, minimal design. Vietnamese text.
Use Shadcn components.

Prompt 2: Projects Grid

Create a projects showcase section.
Grid layout: 3 columns on desktop, 1 on mobile.
Each card:
- Project thumbnail (16:9 ratio)
- Title
- Short description (2 lines max)
- Tech stack tags
- "View Project" button
Hover effect: slight lift and shadow.
Include section header: "Dự Án Nổi Bật"

Prompt 3: Contact Section

Create a contact section with:
- Left side: Contact form (Name, Email, Message)
- Right side: Social links (GitHub, LinkedIn, Twitter)
- Form validation visual feedback
- Submit button with loading state
Section header: "Kết Nối Với Tôi"
Background: subtle pattern or gradient

Step 3: Export và Organize

Sau khi v0.dev generate, export code:

1. Copy code từ v0.dev
2. Create file structure:

src/
├── components/
│   ├── landing/
│   │   ├── HeroSection.tsx
│   │   ├── AboutSection.tsx
│   │   ├── ProjectsSection.tsx
│   │   ├── ContactSection.tsx
│   │   └── Footer.tsx
│   └── ui/
│       └── [shadcn components]
├── app/
│   └── page.tsx
└── styles/
    └── globals.css

3. Assemble trong page.tsx:

export default function LandingPage() {
  return (
    <main>
      <HeroSection />
      <AboutSection />
      <ProjectsSection />
      <ContactSection />
      <Footer />
    </main>
  );
}

Common v0.dev Issues & Fixes

Pro Tips Cho v0.dev

• Be specific about layout: "3-column grid" vs "list of items"
• Mention framework: "React với Tailwind và Shadcn"
• Include interactions: "hover effect", "loading state"
• Specify responsive: "mobile-first, stack on small screens"
• Request Vietnamese: "Text in Vietnamese"

Customization Checklist

Sau khi export, customize:

• Replace placeholder images
• Update copy với personal content
• Adjust colors theo brand
• Add real project data
• Connect contact form
• Add analytics

💡 Key Learning: v0.dev là starting point, không phải final product. Cursor/Windsurf sẽ refine.

Bài Tập

1. Go to v0.dev
2. Generate Hero Section với personal info
3. Export và setup trong Next.js project
4. Take screenshot của result