🦆 想打造一个「极简」「表达自我」的个人主页？或许 Duckfolio 能成为你的起点。项目已开源，欢迎 Star & Fork！
🧠 为什么做这个项目？
起初只是想给自己做一个拿得出手的主页。但找遍了市面模板，不是太花就是太丑，千篇一律、毫无个性。
于是，我动手做了 Duckfolio，一个真正为开发者量身定制的主页模板，目标是：
- ✨ 简洁但不失设计感
- 🧱 技术栈现代，结构清晰，方便维护
- 🧩 可展示项目、社交信息，支持扩展
- 🌗 内置深浅主题切换和动画交互
整个过程不仅是一次实践，也是一场技术和审美的探索。
🚀 在线预览
🛠️ 技术栈一览
| 技术 | 用途 |
|---|---|
| Next.js | 框架 |
| Turbopack | 构建工具 |
| Tailwind CSS | 样式框架 |
| Shadcn UI | 无障碍组件库 |
| Framer Motion | 动画库 |
| Zustand | 状态管理 |
| next-themes | 主题切换 |
✨ 功能亮点
-
首页介绍 + 技术栈展示
-
支持添加项目展示模块，可跳转 GitHub
-
支持深浅主题切换
-
响应式布局，移动端适配良好
-
使用 App Router 和 Turbopack，构建速度快
-
后续会继续迭代
📸 页面截图
首页 - Profile
链接页 - Links
🔧 快速开始
git clone https://github.com/Yorlg/Duckfolio.git
cd Duckfolio
pnpm install
pnpm dev
访问 http://localhost:3000 即可本地预览。
📁 项目结构一览
📂 Duckfolio
├── 📂 .github # GitHub 相关配置
│ └── 📂 workflows # GitHub Actions 工作流
│ └── 📄 docker-image.yml # Docker 镜像构建流程
│
├── 📂 docs # 文档
│ ├── 📄 deploy-to-cloudflare-pages.md # Cloudflare Pages 部署指南
│ └── 📄 deploy-to-vercel.md # Vercel 部署指南
│
├── 📂 public # 静态资源
│ ├── 📄 avatar.png # 头像图片
│ ├── 📄 logo.png # 网站 Logo
│ └── 📄 platform-config.json # 平台配置文件
│
├── 📂 src # 源代码
│ ├── 📂 app # Next.js App Router
│ │ ├── 📄 layout.tsx # 根布局组件
│ │ └── 📄 page.tsx # 首页组件
│ │
│ ├── 📂 components # React 组件
│ │ ├── 📄 avatar.tsx # 头像组件
│ │ ├── 📄 custom-cursor.tsx # 自定义光标组件
│ │ ├── 📄 theme-provider.tsx # 主题提供者组件
│ │ └── 📄 toggle-theme.tsx # 主题切换组件
│ │
│ ├── 📂 lib # 工具库
│ │ ├── 📄 config.ts # 配置管理
│ │ ├── 📄 store.ts # 状态管理
│ │ ├── 📄 useDynamicTheme.ts # 实现动态主题
│ │ └── 📄 utils # 工具
│ │
│ ├── 📂 packages # UI组件
│ │
│ └── 📂 styles # 样式文件
│ ├── 📄 globals.css # 全局样式
│ └── 📄 theme.css # 主题样式
│
├── 📂 types # TypeScript 类型定义
│ └── 📄 color-thief-browser.d.ts # 类型声明
├── 📄 .gitignore # Git 忽略文件
├── 📄 .prettierignore # Prettier 忽略配置
├── 📄 components.json # Shadcn UI 组件配置
├── 📄 docker-compose.yml # Docker Compose 配置文件
├── 📄 Dockerfile # Docker 构建配置
├── 📄 eslint.config.mjs # ESLint 配置
├── 📄 LICENSE # 许可证文件
├── 📄 next-env.d.ts # Next.js 类型定义
├── 📄 next.config.ts # Next.js 项目配置
├── 📄 package.json # 项目依赖管理
├── 📄 pnpm-lock.yaml # pnpm 锁文件
├── 📄 postcss.config.mjs # PostCSS 配置
├── 📄 README.md # 项目说明文档
├── 📄 tsconfig.json # TypeScript 配置
├── 📄 tsconfig.scripts.json # 脚本 TypeScript 配置
├── 📄 wrangler.jsonc # Cloudflare Wrangler 配置
📦 开源地址
项目仓库地址：
如果觉得有参考价值，欢迎点个 Star！
🙋♂️ 给你的小建议
如果你也正在考虑做一个自己的主页，希望：
- 技术栈现代
- 页面够简洁但有特色
- 可以自由扩展内容
- 配置 & 部署简单
那 Duckfolio 也许可以帮到你，或者作为一个起点模板。
💬
如果你有任何建议、想法，或者发现了什么问题，欢迎直接在 GitHub 提 Issue，或者 PR！
