# thankgod7.blog

**Repository Path**: thankgod7/thankgod7.blog

## Basic Information

- **Project Name**: thankgod7.blog
- **Description**: 个人blog
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-31
- **Last Updated**: 2026-02-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ThankGod7 Blog

一个采用赛博朋克/霓虹未来主义风格的个人博客，使用 Vue 3 + Vite 构建。

![Vue 3](https://img.shields.io/badge/Vue-3.4-4FC08D?logo=vue.js)
![Vite](https://img.shields.io/badge/Vite-5.2-646CFF?logo=vite)
![Pinia](https://img.shields.io/badge/Pinia-2.1-yellow)

## ✨ 特性

- 🎨 **赛博朋克美学** - 霓虹色彩、粒子背景、故障效果动画
- 📱 **完全响应式** - 完美适配 PC、平板和移动设备
- ⚡ **高性能** - 基于 Vite 的极速开发体验和优化构建
- 🎭 **丰富动画** - 页面过渡、滚动动画、交互反馈
- 🌙 **暗色主题** - 护眼的深色界面设计
- 🔧 **可扩展架构** - 模块化组件和清晰的项目结构

## 🛠️ 技术栈

- **框架**: Vue 3 (Composition API)
- **构建工具**: Vite 5
- **状态管理**: Pinia
- **路由**: Vue Router 4
- **样式**: SCSS + CSS Variables
- **工具库**: VueUse

## 📁 项目结构

```
src/
├── components/          # 可复用组件
│   ├── effects/        # 特效组件 (粒子背景等)
│   ├── home/           # 首页专用组件
│   ├── layout/         # 布局组件 (Header, Footer)
│   └── ui/             # UI 基础组件
├── layouts/            # 页面布局
├── router/             # 路由配置
├── stores/             # Pinia 状态管理
├── styles/             # 全局样式
│   ├── _animations.scss
│   ├── _mixins.scss
│   ├── _variables.scss
│   └── main.scss
└── views/              # 页面视图
```

## 🚀 快速开始

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

### 构建生产版本

```bash
npm run build
```

### 预览生产构建

```bash
npm run preview
```

## 📱 响应式断点

| 断点 | 尺寸 | 设备 |
|------|------|------|
| sm | 640px | 大屏手机 |
| md | 768px | 平板 |
| lg | 1024px | 笔记本 |
| xl | 1280px | 桌面显示器 |
| 2xl | 1536px | 大屏显示器 |

## 🎨 设计系统

### 主题色

- **Primary**: `#00fff5` (霓虹青色)
- **Secondary**: `#ff00ff` (霓虹品红)
- **Accent**: `#fffc00` (霓虹黄色)

### 字体

- **Display**: Orbitron (科技感标题)
- **Body**: Rajdhani (现代正文)
- **Mono**: JetBrains Mono (代码)

## 🔧 自定义配置

### 修改主题变量

编辑 `src/styles/_variables.scss` 来自定义颜色、字体、间距等。

### 添加新页面

1. 在 `src/views/` 创建新的视图组件
2. 在 `src/router/index.js` 添加路由配置
3. (可选) 在 Header 导航中添加链接

### 扩展组件库

在 `src/components/ui/` 中创建新的 UI 组件，遵循现有的命名和样式规范。

## 📄 License

MIT License

---

Made with ❤️ by ThankGod7