🧑‍💻 Xây dựng Giao diện Website Portfolio/Blog với Tailwind CSS

Dưới đây là phần tiếp theo trong chuỗi học Tailwind CSS thực chiến, giúp bạn áp dụng toàn bộ kiến thức đã học để xây dựng giao diện website Portfolio hoặc Blog cá nhân – một bước cực kỳ quan trọng nếu bạn đang hướng đến nghề lập trình Front-End, UI/UX designer hoặc freelancer.

NỘI DUNG

🎯 Mục tiêu

Xây dựng layout hoàn chỉnh: Header – Nội dung – Footer
Thiết kế giao diện chuẩn UI/UX hiện đại
Sử dụng component tái sử dụng: thẻ bài viết, contact form, CTA
Hỗ trợ Dark mode, responsive, hiệu ứng animation mượt mà

📐 1. Cấu trúc tổng thể

project-root/
├── index.html
├── style.css
├── tailwind.config.js
└── assets/
     ├── avatar.jpg
     └── blog-image.jpg

<!-- File: index.html -->
<body class="bg-white text-gray-800 dark:bg-gray-900 dark:text-white">
  <!-- Navbar -->
  <!-- Hero Section -->
  <!-- About Me -->
  <!-- Portfolio / Bài viết -->
  <!-- Contact -->
  <!-- Footer -->
</body>

🧭 2. Navbar đơn giản (có dark mode)

<header class="bg-white dark:bg-gray-800 shadow-md">
  <div class="container mx-auto px-4 py-4 flex justify-between items-center">
    <h1 class="text-xl font-bold">MyPortfolio</h1>
    <nav class="space-x-6 hidden md:flex">
      <a href="#about" class="hover:text-blue-600">Giới thiệu</a>
      <a href="#projects" class="hover:text-blue-600">Dự án</a>
      <a href="#contact" class="hover:text-blue-600">Liên hệ</a>
    </nav>
  </div>
</header>

🖼️ 3. Hero section – Giới thiệu bản thân

<section class="text-center py-16 bg-gray-100 dark:bg-gray-800">
  <img src="./assets/avatar.jpg" class="w-32 h-32 mx-auto rounded-full mb-4" />
  <h2 class="text-3xl font-bold">Chào, tôi là <span class="text-blue-600">Hưng</span></h2>
  <p class="mt-2 text-gray-600 dark:text-gray-300">Lập trình viên Front-End yêu thích UI đẹp và code sạch</p>
  <a href="#projects" class="mt-6 inline-block bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 transition">Xem dự án</a>
</section>

📁 4. Dự án / Bài viết nổi bật (Portfolio hoặc Blog)

<section id="projects" class="py-12 px-4 max-w-5xl mx-auto">
  <h3 class="text-2xl font-bold mb-8 text-center">📁 Dự án nổi bật</h3>

  <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition">
      <img src="./assets/blog-image.jpg" alt="" class="rounded-t-lg">
      <div class="p-4">
        <h4 class="text-lg font-semibold mb-2">Landing Page Sản phẩm</h4>
        <p class="text-sm text-gray-600 dark:text-gray-300">Dự án thiết kế responsive landing page với Tailwind.</p>
        <a href="#" class="text-blue-600 hover:underline text-sm">Xem chi tiết →</a>
      </div>
    </div>

    <!-- Thêm nhiều card khác -->
  </div>
</section>

📬 5. Form liên hệ (Contact)

<section id="contact" class="bg-gray-50 dark:bg-gray-900 py-12 px-4">
  <div class="max-w-xl mx-auto">
    <h3 class="text-2xl font-bold text-center mb-6">📫 Liên hệ với tôi</h3>
    <form class="space-y-4">
      <input type="text" placeholder="Họ và tên" class="w-full p-3 rounded border dark:bg-gray-800 dark:border-gray-600" />
      <input type="email" placeholder="Email" class="w-full p-3 rounded border dark:bg-gray-800 dark:border-gray-600" />
      <textarea rows="5" placeholder="Nội dung..." class="w-full p-3 rounded border dark:bg-gray-800 dark:border-gray-600"></textarea>
      <button type="submit" class="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 transition">Gửi</button>
    </form>
  </div>
</section>

🦶 6. Footer

<footer class="bg-white dark:bg-gray-800 text-center text-sm py-4">
  © 2025 ThS. Đỗ Trung Thành. All rights reserved.
</footer>

🌗 7. Nút chuyển chế độ sáng/tối (dark mode)

<button onclick="document.documentElement.classList.toggle('dark')" class="fixed bottom-4 right-4 p-2 bg-gray-200 dark:bg-gray-700 rounded-full">
  🌓
</button>

🧪 Gợi ý mở rộng

Thêm animation xuất hiện khi cuộn (AOS hoặc Intersection Observer + Tailwind transition)
Tạo menu mobile toggle
Sử dụng component từ ShadCN UI, Flowbite, Headless UI
Kết hợp với markdown blog (nếu dùng Next.js) hoặc tích hợp Notion API để tạo blog cá nhân động

✅ Kết luận

Với Tailwind CSS, bạn có thể xây dựng một website Portfolio hoặc Blog cá nhân:

Đẹp mắt, chuẩn responsive, hỗ trợ dark mode
Dễ nâng cấp và tuỳ biến
Làm nổi bật kỹ năng lập trình và thiết kế UI của bạn
Dễ triển khai lên Vercel, Netlify, GitHub Pages trong vài phút

HTML, CSS