← Back

个人网站项目

关于这个网站

这是我使用 Next.js 框架搭建的个人网站项目。

🚀 技术栈

  • Next.js 16 - React 框架，提供服务端渲染和静态生成
  • TypeScript - 类型安全的 JavaScript 超集
  • Tailwind CSS - 实用优先的 CSS 框架
  • Markdown - 使用 Markdown 文件管理博客内容

✨ 功能特点

1. Markdown 博客系统

  • 使用 .md 文件轻松管理文章
  • 支持完整的 Markdown 语法
  • 自动生成文章列表和详情页

2. 深色/浅色主题

  • 一键切换明暗主题
  • 主题偏好自动保存
  • 响应系统主题设置

3. 响应式设计

  • 移动端优先的设计理念
  • 适配各种屏幕尺寸
  • 简洁清爽的界面

4. 项目展示

  • 展示个人项目作品
  • 每个项目可以有独立的介绍页面
  • 支持外部链接和详细描述

📁 项目结构

my-website/
├── app/                  # Next.js App Router
│   ├── blog/            # 博客页面
│   ├── projects/        # 项目页面
│   └── page.tsx         # 首页
├── components/          # React 组件
├── content/             # Markdown 内容
│   ├── blog/           # 博客文章
│   └── projects/       # 项目介绍
└── lib/                 # 工具函数

🎯 设计理念

这个网站的设计灵感来自于 Jude Gao 的个人网站，追求：

  • 简洁：专注内容，去除冗余
  • 高效：快速加载，流畅体验
  • 易维护：Markdown 管理，简单直接
  • 现代化：使用最新的 Web 技术

🔧 未来计划

  • [ ] 添加文章标签分类
  • [ ] 集成评论系统
  • [ ] RSS 订阅支持
  • [ ] 搜索功能
  • [ ] 阅读时长估算

如果你也想搭建类似的网站，欢迎参考这个项目！