Trang web Portfolio tích hợp GA

Trang web cá nhân này là một Portfolio (Hồ sơ cá nhân) nghệ thuật kết hợp Bảo tàng ký ức thu nhỏ của Dương (biệt danh Rayan, sinh năm 2007), một người đam mê bóng đá cuồng nhiệt và là nhà sưu tầm áo đấu cùng những chữ ký huyền thoại tại Hà Nội.

Dưới đây là giới thiệu chi tiết về cấu trúc và các điểm nổi bật của trang web:

1. Ý tưởng & Nội dung chính

Trang web được xây dựng như một cuốn nhật ký hành trình ghi lại ngọn lửa đam mê với trái bóng tròn, tập trung vào:

• Hành trình cá nhân (About): Kể câu chuyện từ khi chớm nở tình yêu bóng đá đẹp vào năm 2015 khi xem Barcelona và Neymar thi đấu, cho đến những cột mốc thực tế săn lùng chữ ký của các huyền thoại thế giới khi họ tới Hà Nội như Rivaldo (2023) và Ronaldinho (2024).
• Động lực đam mê (Passion): Chia sẻ sâu sắc về triết lý bóng đá quyến rũ của FC Barcelona (Tiki-Taka), phong cách ngẫu hứng đầy phóng khoáng của những "vũ công Samba" Neymar & Ronaldinho, cùng sự cuồng nhiệt của các giải đấu lớn La Liga & Champions League.
• Bảo tàng ký ức (Collection & Gallery): Trưng bày bộ sưu tập đồ sộ gồm hàng chục chiếc áo đấu (Jersey) và chữ ký (Signature) cực kỳ giá trị được Dương sưu tầm qua các năm.

2. Các phân trang & Tính năng chính

Giao diện của trang web được chia thành các phần cuộn mượt mà (Single-page Portfolio):

• Trang Chủ (Hero Section): Banner mở đầu ấn tượng với hình nền sân cỏ huyền ảo cùng khẩu hiệu, nút kêu gọi hành động điều hướng nhanh.
• Hành Trình (About): Gồm thẻ thông tin cá nhân (Profile Card), danh sách dấu ấn nổi bật và Dòng thời gian (Timeline Milestones) chi tiết từ năm 2015 đến 2026.
• Đam Mê (Passion): 3 thẻ nội dung (Đội bóng, Thần tượng, Giải đấu) được thiết kế dạng lưới tuyệt đẹp với hiệu ứng phủ mờ và biểu tượng SVG sắc nét.
• Bộ Sưu Tập (Collection): Tính năng Lọc danh mục động cho phép người xem chuyển đổi mượt mà giữa các danh mục "Áo Đấu" và "Chữ Ký".
• Thư Viện Ảnh (Gallery): Thư viện tổng hợp tất cả hình ảnh chất lượng cao. Tích hợp tính năng Lightbox (Hộp đèn) thông minh bằng phím mũi tên hoặc nút nhấn để duyệt ảnh toàn màn hình vô cùng trực quan.
• Liên Hệ (Contact): Nơi kết nối giao lưu thông qua Email, Facebook, Instagram cùng lời cảm ơn chân thành từ Dương gửi đến người ghé thăm.

3. Nền tảng Công nghệ & Thiết kế

• Thiết kế Cao cấp (Premium Design Aesthetics): Sử dụng phông chữ hiện đại (Outfit & Inter), hệ màu tối (dark mode) huyền bí kết hợp ánh sáng neon (glow effects) và bo góc mềm mại tạo cảm giác vô cùng hiện đại.
• HTML5 & CSS3 thuần (Vanilla CSS): Tận dụng tối đa Flexbox, CSS Grid và hiệu ứng kính mờ (Glassmorphism) mà không cần dùng đến các thư viện CSS nặng nề. Hỗ trợ responsive hiển thị hoàn hảo trên cả điện thoại, máy tính bảng và desktop.
• Javascript thuần (Vanilla JS): Xử lý toàn bộ logic như: tự động hiển thị lưới ảnh từ danh sách nguồn, hiệu ứng cuộn trang đổi màu navbar, hiệu ứng xuất hiện từ từ khi cuộn tới (Scroll Reveal bằng Intersection Observer), bộ lọc danh mục và trình chiếu Lightbox.
• Tích hợp GA4: Google Analytics 4 được tích hợp sẵn giúp theo dõi lưu lượng và hành vi của người truy cập một cách chính xác.