ncdai/chanhdai.com

💼 Portfolio dev pixel-perfect kết hợp registry shadcn

Portfolio dev được thiết kế tỉ mỉ pixel-perfect, đồng thời là một registry shadcn để xây dựng và chia sẻ các thành phần tái sử dụng.

Đây là trang cá nhân của một Design Engineer, được xây dựng với Next.js 16, Tailwind CSS v4 và shadcn/ui. Trang hỗ trợ chủ đề sáng/tối, tích hợp vCard, tối ưu SEO với JSON-LD schema, sitemap, robots, và có thể cài đặt như PWA. Nội dung được quản lý qua MDX với hệ thống tài liệu thống nhất cho blog và tài liệu thành phần.

✨ Điểm nổi bật

• Thiết kế hiện đại: Giao diện sạch, đẹp với hỗ trợ chủ đề sáng/tối.
• Tối ưu SEO: Sử dụng JSON-LD schema, sitemap, robots để cải thiện thứ hạng tìm kiếm.
• AI-ready: Hỗ trợ /llms.txt giúp công cụ AI dễ dàng đọc nội dung.
• Bảo vệ email: Ngăn chặn spam thông qua kỹ thuật bảo vệ email.
• PWA hỗ trợ cài đặt: Có thể cài đặt trên thiết bị như một ứng dụng di động.
• Phân tích dữ liệu: Tích hợp PostHog và OpenPanel để theo dõi người dùng.
• Registry shadcn: Xây dựng và phân phối các thành phần, hook, trang tái sử dụng với shadcn CLI.
• Nội dung MDX: Hệ thống tài liệu thống nhất với phân loại danh mục và hỗ trợ RSS.

💡 Vì sao đáng chú ý

Dự án không chỉ là một portfolio đơn thuần mà còn là một registry shadcn hoàn chỉnh, cho phép người khác dễ dàng xây dựng và chia sẻ các thành phần UI tái sử dụng. Mỗi thành phần đều có tài liệu chi tiết kèm theo live preview, đoạn mã và lệnh cài đặt một cú click.

Đặc biệt, việc sử dụng Next.js 16 kết hợp Tailwind CSS v4 mang lại hiệu năng cao và trải nghiệm người dùng mượt mà. Dự án còn hỗ trợ xuất khẩu nội dung dưới dạng .mdx để máy đọc AI dễ dàng xử lý, đồng thời tích hợp các công cụ phân tích hàng đầu như PostHog và OpenPanel.

#NextJS #ShadcnUI #TailwindCSS #Portfolio #DevPortfolio #TiniX