Xây dựng Portfolio chuyên nghiệp với React + Vite: Đa chủ đề, Hiệu ứng Particles và Tích hợp Dữ liệu Động

Mới đây, tôi đã xây dựng lại trang portfolio cá nhân của mình để phản ánh phong cách xây dựng sản phẩm mà tôi yêu thích: kiến trúc rõ ràng, giao diện biểu cảm mạnh mẽ, hiệu suất mặc định tốt và các phần nội dung dựa trên dữ liệu luôn được cập nhật mới.

Trang chủ Portfolio

Dự án này không chỉ đơn thuần là một trang hồ sơ, mà còn là một sân chơi frontend "sống" để tôi thử nghiệm các hệ thống UI, trực quan hóa dữ liệu và các mẫu tương tác trong môi trường thực tế.

Tổng quan về Project

Portfolio này được xây dựng dựa trên nền tảng công nghệ hiện đại:

• React 18 + TypeScript
• Vite 5
• styled-components
• React Router (lazy route loading)
• tsParticles cho hiệu ứng nền động
• Tích hợp Dev.to API cho các bài viết
• Tích hợp GitHub GraphQL API cho các widget hiển thị đóng góp và hồ sơ

Mục tiêu của tôi rất đơn giản: Giữ cho giao diện trực quan sống động nhưng không gây rối mắt, giữ cho nội dung động ở mức tối đa có thể (từ GitHub và Dev.to), và đảm bảo mã nguồn模块 hóa (modular) để dễ dàng cá nhân hóa.

Thiết kế và Kiến trúc

Tôi muốn trải nghiệm người dùng mang đậm bản sắc của một developer nhưng vẫn được trau chuốt như một sản phẩm hoàn thiện: màu sắc điểm nhấn rực rỡ có thể chuyển đổi ngay khi runtime, hiệu ứng kính mờ (glassmorphism) tinh tế nơi cần thiết, và các chi tiết vui nhộn như hiệu ứng vẽ tay hay tương tác phong cách phong bì cho CV.

Toàn bộ bố cục dựa trên các phần (section), trong đó mỗi trang có một nhiệm vụ thị giác rõ ràng:

• Home: Ấn tượng ban đầu + Kêu gọi hành động (CTA)
• Projects: Bằng chứng công việc
• Posts: Các bài viết và tư duy
• About: Chi tiết hồ sơ + Tín hiệu từ GitHub

Về kiến trúc, tôi sử dụng một route layout (bố cục chia sẻ) luôn hiển thị: menu sidebar, outlet của route đang hoạt động, bộ chuyển đổi giao diện (theme toggler) và nền particle. Cấu trúc này giúp giữ hành vi toàn cục tập trung trong khi các trang vẫn giữ được sự tập trung vào nội dung riêng biệt.

Hệ thống Giao diện (Theme Engine) Đa sắc thái

Một trong những tính năng tôi thích nhất ở dự án này là hệ thống giao diện.

• Các giao diện được tạo ra thông qua một theme factory nhỏ (createTheme) sử dụng các giá trị màu nền, màu chính và phông chữ.
• Ứng dụng tạo ra các biến CSS cho mỗi lớp giao diện.
• Việc chuyển đổi giao diện dựa trên lớp của document.documentElement để hoán đổi biến tức thì.
• Một lớp chuyển tiếp nhỏ làm mượt việc thay đổi màu sắc.

Tôi cũng ánh xạ màu sắc của giao diện vào bảng màu của biểu đồ đóng góp trên GitHub, giúp các trực quan dữ liệu trông tự nhiên với bất kỳ giao diện nào đang được kích hoạt.

Giao diện chuyển đổi chủ đề

Nền hiệu ứng Particles và Logo công nghệ

Nền sử dụng thư viện tsParticles trong hai lớp: các hạt chuyển động cơ bản và các hạt hình ảnh logo công nghệ trôi nổi được lấy từ danh sách logo của tôi.

Một bộ tải theo lô (batched loader) sẽ tiêm dần các hạt logo này để hiệu ứng tăng dần thay vì xuất hiện cùng một lúc. Điều này mang lại chuyển động môi trường cho trang trong khi vẫn giữ nội dung dễ đọc.

Trang Dự án (Projects)

Trang Projects được dẫn động bởi dữ liệu (data-driven) từ một nguồn dữ liệu duy nhất, hỗ trợ mô tả dạng markdown, biểu tượng công nghệ cho từng dự án, hỗ trợ ảnh/video slide và xem trước toàn màn hình.

Tôi xen kẽ hướng bố cục giữa các mục dự án chẵn/lẻ để tạo nhịp điệu thị giác trên màn hình lớn, sau đó thu gọn thành dòng chảy một cột trên thiết bị di động.

Trang Dự án

Trang Bài viết (Posts) tích hợp Dev.to API

Trang bài viết lấy trực tiếp các bài viết từ tài khoản Dev.to của tôi và hiển thị dưới dạng thẻ (cards) hoàn chỉnh với ảnh bìa, thẻ (tags), ngày đăng, số lượng bình luận và phản ứng. Tôi lọc bỏ các mục giống như đăng lại (repost) bằng cách kiểm tra thời gian đọc để trang nhấn mạnh vào các bài viết kỹ thuật toàn vẹn.

Trang Bài viết từ Dev.to

Trực quan hóa dữ liệu GitHub

Trang About kết hợp ngữ cảnh hồ sơ tĩnh với dữ liệu trực tiếp từ GitHub.

Lịch sử đóng góp (Contributions)

Tôi lấy các năm và lịch sử đóng góp từ GitHub GraphQL, sau đó hiển thị biểu đồ SVG tùy chỉnh. Các tính năng bao gồm hiển thị tuần ảo (virtualized week rendering) để cuộn mượt mà hơn, nhiều chế độ thị giác (Heatmap, Forest, Garden, Skyline), điều khiển chuyển năm, và phát lại tự động (auto-scroll playback).

GitHub Showcase

Tôi cũng xây dựng một module giới thiệu hồ sơ sử dụng GraphQL để hiển thị các chỉ số người theo dõi và kho lưu trữ, chỉ số đóng góp, thanh phân bố ngôn ngữ và các kho lưu trữ được ghim/hàng đầu với huy đề chủ đề.

Hiệu suất và Trải nghiệm Nhà phát triển

Một số quyết định triển khai đã giúp ích đáng kể cho dự án:

• Lazy imports ở cấp độ route.
• Nhóm chunk thủ công cho các thư viện nhà cung cấp và thư viện particle.
• Kiểm tra TypeScript/ESLint tùy chọn vào thời gian phát triển thông qua các công tắc môi trường.
• Đầu kết xuất trực quan của bản dựng (build visualizer output) để kiểm tra bundle.
• Cấu hình TypeScript nghiêm ngặt và các script lint/format.

Để triển khai, GitHub Pages chịu trách nhiệm xây dựng và vận hành thông qua GitHub Actions.

Kết luận

Portfolio này đã trở nên hơn một trang hồ sơ. Nó hiện là một sân chơi frontend nơi tôi có thể thử nghiệm các hệ thống UI, trực quan hóa dữ liệu và các mẫu tương tác trong môi trường sản xuất thực tế.

Nếu bạn muốn khám phá hoặc fork dự án này, hãy truy cập vào các liên kết bên dưới:

• Website trực tiếp: https://singhamandeep007.github.io/
• Kho mã nguồn: https://github.com/singhAmandeep007/singhAmandeep007.github.io

Tôi rất mong nhận được phản hồi về các quyết định kiến trúc và UX trong dự án này.