个人作品集网站 - Helior的小破站

项目背景

作为程序员，需要一个专业的线上名片来展示个人项目、技术博客和能力。本项目旨在构建一个现代化的个人作品集网站，通过精心设计的视觉体验和流畅的交互，向招聘方、技术爱好者和潜在合作者展示个人技术实力。

技术实现

技术架构

• 框架: Next.js 16 App Router，支持服务端渲染和静态生成
• 语言: TypeScript，确保类型安全
• 样式: Tailwind CSS + CSS变量，实现暗夜森林主题
• 动画: Framer Motion，提供流畅的页面过渡和微交互
• 主题: next-themes，支持暗黑/明亮模式切换
• 内容: Markdown文件管理，支持Frontmatter元数据

视觉设计

暗夜森林主题设计语言：

• 深蓝灰背景 (#1a2a3a)
• 暖金色强调色 (#f5a623)
• 玻璃拟态卡片 (backdrop-blur + 半透明)
• 大圆角设计 (卡片20px, 按钮12px)
• 松树剪影装饰 + 视差滚动背景

核心功能

• 首页: Hero区 + 关于 + 技能 + 项目预览 + 博客预览
• 项目展示: 卡片网格 + 详情页 + 技术栈标签
• 技术博客: 目录导航 + 代码高亮 + 阅读进度条
• 全局搜索: Cmd+K 快捷键搜索项目/博客

SEO优化

• 页面级元数据 (title, description, keywords)
• Open Graph 社交分享卡片
• 自动生成 sitemap.xml
• robots.txt 配置
• Vercel Analytics 访问分析

项目亮点

• ✅ 独特的暗夜森林视觉主题
• ✅ 流畅的页面过渡和微交互动画
• ✅ 完整的SEO优化方案
• ✅ 响应式设计，适配多端设备
• ✅ Markdown内容管理，易于维护