Dự án nhỏ - Trang Portfolio cá nhân

Bài học này sẽ hướng dẫn học viên xây dựng trang Portfolio cá nhân đơn giản, bao gồm các thành phần quan trọng như Header, Section giới thiệu và Footer. Học viên sẽ thực hành tổ chức layout hiệu quả và tối ưu giao diện bằng Tailwind CSS.

Trang Portfolio cá nhân

1. Thiết kế Header với Menu Navigation

Ví dụ Header đơn giản:

<header class="bg-gray-800 text-white p-4">
  <nav class="flex justify-between items-center">
    <h1 class="text-xl font-bold">My Portfolio</h1>
    <ul class="flex space-x-4">
      <li><a href="#about" class="hover:text-gray-400">Giới thiệu</a></li>
      <li><a href="#projects" class="hover:text-gray-400">Dự án</a></li>
      <li><a href="#contact" class="hover:text-gray-400">Liên hệ</a></li>
    </ul>
  </nav>
</header>

Giải thích:

• flex justify-between items-center: Bố cục ngang với các mục được căn đều.
• space-x-4: Khoảng cách giữa các liên kết.
• hover:text-gray-400: Hiệu ứng đổi màu khi hover.

2. Section Giới Thiệu Bản Thân

Ví dụ Section Giới Thiệu:

<section id="about" class="bg-white p-8 text-center">
  <img src="https://via.placeholder.com/150" alt="Avatar" class="mx-auto rounded-full w-32 h-32">
  <h2 class="text-2xl font-bold mt-4">Nguyễn Văn A</h2>
  <p class="mt-2 text-gray-600">Lập trình viên Frontend với niềm đam mê xây dựng giao diện người dùng hiện đại.</p>
</section>

Giải thích:

• rounded-full: Làm tròn ảnh thành hình tròn.
• text-2xl font-bold: Tăng kích thước và đậm chữ cho tiêu đề.
• text-gray-600: Màu chữ xám nhạt.

3. Thiết Kế Footer

Ví dụ Footer:

<footer class="bg-gray-800 text-white p-4 text-center">
  <p>&copy; 2025 Nguyễn Văn A. Mọi quyền được bảo lưu.</p>
  <div class="flex justify-center space-x-4 mt-2">
    <a href="#" class="hover:text-gray-400">Facebook</a>
    <a href="#" class="hover:text-gray-400">LinkedIn</a>
    <a href="#" class="hover:text-gray-400">GitHub</a>
  </div>
</footer>

Giải thích:

• flex justify-center: Căn giữa các liên kết mạng xã hội.
• hover:text-gray-400: Thêm hiệu ứng khi hover vào liên kết.

Kết Luận

Sau bài học này, học viên đã hoàn thiện trang Portfolio cá nhân cơ bản với các thành phần cần thiết. Hãy thực hành mở rộng trang này bằng cách thêm các dự án và thông tin liên hệ chi tiết hơn để tạo dấu ấn cá nhân.