🎨 Phantom Blog - Persona 5 风格个人博客

灵感来自《女神异闻录 5》的现代化个人博客网站，采用炫彩设计风格和流畅的动画效果。

🌐 在线访问

项目已部署在 GitHub Pages 上：https://legimity.github.io/phantom-blog/

✨ 主要特性

• 🎭 独特的设计风格 - 受《女神异闻录 5》启发的视觉设计
• ⚡ 流畅动画效果 - 使用 Framer Motion 实现精美的页面动画
• 📱 响应式设计 - 完美适配各种屏幕尺寸
• 🎯 丰富的交互 - 悬停效果、平滑滚动等交互体验
• 🚀 快速加载 - 基于 Vite 构建的高性能应用
• 💨 返回顶部 - 右下角心形按钮支持平滑返回页面顶部

🛠️ 技术栈

核心框架

• React 19 - 现代 UI 库
• TypeScript - 提供类型安全
• Vite - 下一代前端构建工具

动画和 UI

• Framer Motion - 专业的动画库
• Lucide React - 精美的 SVG 图标库
• Tailwind CSS - 原子化 CSS 框架

构建和部署

• ESLint - 代码质量检查
• gh-pages - GitHub Pages 部署工具

📦 项目结构

phantom-blog/
├── src/
│   ├── main.tsx           # 主应用组件
│   ├── App.tsx            # 应用入口
│   ├── App.css            # 应用样式
│   ├── index.css          # 全局样式
│   └── assets/            # 静态资源
├── public/                # 公共资源
├── vite.config.ts         # Vite 配置
├── tsconfig.json          # TypeScript 配置
├── tailwind.config.js     # Tailwind 配置
└── package.json           # 项目依赖配置

🚀 快速开始

前置要求

• Node.js >= 16
• npm 或 yarn

安装依赖

npm install

开发模式

npm run dev

然后在浏览器中打开 http://localhost:5173

构建生产版本

npm run build

本地预览

npm run preview

部署到 GitHub Pages

npm run deploy

📝 可用的脚本命令

• npm run dev - 启动开发服务器
• npm run build - 构建生产版本
• npm run lint - 运行代码检查
• npm run preview - 预览生产构建
• npm run deploy - 部署到 GitHub Pages

🎨 自定义

修改主题色

编辑 src/main.tsx 中的颜色值：

• 红色: #D91818
• 黄色: #FFE600
• 黑色: #080808
• 白色: #FFFFFF

修改首页内容

在 src/main.tsx 中的 App 组件中编辑文本内容和布局。

🔧 配置说明

GitHub Pages 配置

• 在 package.json 中配置 homepage 字段
• 在 vite.config.ts 中配置 base 路径

示例：

"homepage": "https://legimity.github.io/phantom-blog"

export default defineConfig({
	base: '/phantom-blog/',
	plugins: [react()],
});

📄 许可证

MIT License

👨‍💻 作者

Legimity

---

享受创意和代码的碰撞！ 🚀✨