vaheedsk36/portfolio-website-nextjs

🚀 Portfolio Next.js 16 với hiệu ứng chuyển động sống động

Portfolio cá nhân của Masood Akhtar Vaheed — một trang web đa hiệu ứng, được tối ưu cho triển khai trên Vercel.

Đây là trang web portfolio cá nhân của Masood Akhtar Vaheed (Vaheed Shaik), một kỹ sư phần mềm tại 1Digitalstack.ai. Trang web này không chỉ là một không gian để trưng bày kỹ năng, dự án và kinh nghiệm, mà còn là một ví dụ nổi bật về cách xây dựng một giao diện người dùng hiện đại, sinh động và tối ưu hiệu suất bằng Next.js 16.

✨ Điểm nổi bật

• Hero động: Đèn spotlight theo chuột, mẫu chấm, hiệu ứng hiện chữ từng ký tự và lưới màu gradient di chuyển theo con trỏ.
• Thẻ kinh nghiệm dính dán: Hiệu ứng thu phóng và thay đổi độ trong suốt khi cuộn trang.
• Bento bất đối xứng: Hiển thị công việc nổi bật với hiệu ứng nghiêng 3D, dải viền di chuyển và hiệu ứng hover màu gradient.
• Marquee công nghệ: Hai dải chạy đối lập nhau với hiệu ứng mờ hai mép.
• Palette lệnh ⌘K: Truy cập nhanh các tuyến đường, sao chép email, tải CV và liên kết xã hội.
• Ngăn kéo di động: Hiệu ứng trượt từ bên phải với các hiệu ứng hiện lên từng phần tử.
• Email có thể sao chép: Hiệu ứng bọt confetti khi người dùng nhấn vào.
• Tối ưu cho mọi thiết bị: Tương thích hoàn toàn với mọi kích thước màn hình và tôn trọng thiết lập prefers-reduced-motion.

💡 Vì sao đáng chú ý

Dự án này nổi bật bởi sự kết hợp hoàn hảo giữa Next.js 16 (với App Router, Turbopack và View Transitions) và Tailwind CSS v4, tạo ra một trải nghiệm người dùng mượt mà và hiện đại. Nhờ việc sử dụng thư viện motion v12 (người kế nhiệm Framer Motion) cùng với Lenis smooth scroll, trang web mang lại những hiệu ứng chuyển động tự nhiên và cuốn hút. Ngoài ra, phần mục Writing được tích hợp trực tiếp từ Medium thông qua RSS, giúp nội dung luôn cập nhật mà không cần quản lý thủ công.

#NextJS #PortfolioWebsite #TailwindCSS #OpenSource #TiniX