chanhdai.com 项目亮点解析

项目的基础介绍

chanhdai.com 是一个开源的个人作品集网站，由软件开发工程师和 UI/UX 设计师 Chánh Đại 创建。该网站展示了他的工作和经验，同时也是一个持续进化的侧项目，用于实验新技术并跟进 Web 开发的最新进展。网站采用了 Next.js、Tailwind CSS 和 shadcn/ui 等现代技术，以提供优雅、快速且无缝的用户体验。

项目代码目录及介绍

项目的主要代码目录如下：

• public/: 存放公共资源，如图片、样式表、脚本等。
• src/: 源代码目录，包括页面、组件、样式配置等。
• .github/: 包含 GitHub Actions 工作流和其他 GitHub 相关的配置文件。
• .husky/: 用于配置 Husky，一个用于在提交代码前运行任务的工具。
• components.json: 定义了项目中使用的组件。
• next.config.ts: Next.js 的配置文件。
• package.json: 定义了项目的依赖和脚本。
• pnpm-lock.yaml: pnpm 的锁文件，确保依赖的一致性。
• postcss.config.mjs: PostCSS 的配置文件。
• tsconfig.json: TypeScript 的配置文件。

项目亮点功能拆解

1. 优雅且极简的 UI 设计：项目采用了干净、现代的设计风格，以提供更好的用户体验。
2. 暗黑模式支持：支持切换浅色和深色主题，适应不同用户的使用习惯。
3. vCard 集成：提供数字名片功能，方便用户分享联系信息。
4. SEO 优化：通过 JSON-LD schema、站点地图和 robots 文件等，提高搜索引擎的优化效果。
5. 电子邮件保护：通过混淆技术保护电子邮件地址，防止垃圾邮件。
6. 可安装的 PWA：支持渐进式 Web 应用，提高网站的可用性和用户体验。

项目主要技术亮点拆解

1. Next.js 15：使用了最新的 React 框架，提供优化后的性能和可扩展性。
2. Tailwind CSS v4：采用了现代的 utility-first CSS 框架，使得样式编写更加高效和灵活。
3. MDX & Markdown 支持：在博客部分支持 MDX 和 Markdown，使得内容编写更加便捷。
4. 动态 OG 图像：为社交媒体提供丰富的预览图，提升分享效果。

与同类项目对比的亮点

chanhdai.com 在以下方面与同类项目相比具有显著亮点：

1. 现代技术的整合：项目整合了最新的前端技术和框架，提供了出色的性能和用户体验。
2. 持续维护和更新：项目作者持续地更新和维护项目，确保其与最新的 Web 开发趋势保持一致。
3. 详细的开发文档：项目提供了完整的开发指南，方便其他开发者了解和使用项目。
4. 开源友好：项目遵循 MIT 许可，鼓励和方便其他开发者使用和二次开发。