# cv

**Repository Path**: NextEraAbyss/cv

## Basic Information

- **Project Name**: cv
- **Description**: 🚀 现代化全栈工程师个人作品集 | 响应式设计 | Vue.js + 原生JS | 展示6年全栈开发经验和技术项目 | SEO优化 | 高性能
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://cv.wat.ink
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-03-13
- **Last Updated**: 2025-06-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🚀 秦若宸 - 全栈工程师个人作品集

<div align="center">

[![Website](https://img.shields.io/website?url=https%3A//cv.wat.ink&style=for-the-badge&logo=globe&logoColor=white)](https://cv.wat.ink)
![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)
![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)
![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)
![Vue.js](https://img.shields.io/badge/Vue.js-4FC08D?style=for-the-badge&logo=vue.js&logoColor=white)
![Flutter](https://img.shields.io/badge/Flutter-02569B?style=for-the-badge&logo=flutter&logoColor=white)
![Responsive](https://img.shields.io/badge/Responsive-5BB75B?style=for-the-badge&logo=responsive&logoColor=white)

**🌐 在线访问: [cv.wat.ink](https://cv.wat.ink)**

</div>

## 📋 目录 | Contents

- [项目概述](#-项目概述--project-overview)
- [预览效果](#-预览效果--preview)
- [核心特色](#-核心特色--features)
- [技术栈](#️-技术栈--tech-stack)
- [项目展示](#-项目展示--projects)
- [快速开始](#-快速开始--quick-start)
- [项目结构](#-项目结构--project-structure)
- [性能优化](#-性能优化--performance)
- [浏览器兼容性](#-浏览器兼容性--browser-compatibility)
- [部署指南](#-部署指南--deployment)
- [许可证](#-许可证--license)

## 📝 项目概述 | Project Overview

这是秦若宸的个人作品集网站，展示6年全栈开发经验和3年技术团队管理经验。网站采用现代化响应式设计，完美展示全栈工程师的技术能力、项目经验和专业素养。

### 🎯 项目目标
- 📋 展示完整的全栈技术能力（前端、后端、移动端、DevOps）
- 🏆 突出项目管理和团队领导经验
- 🚀 提供优秀的用户体验和视觉效果
- 📱 确保在所有设备上的完美展示

## 👀 预览效果 | Preview

### 🌐 在线演示
**主站**: [https://cv.wat.ink](https://cv.wat.ink)

### 📊 相关项目链接
- **技术博客**: [blog.wat.ink](https://blog.wat.ink) - Nuxt.js SSR博客
- **后台管理**: [admin.wat.ink](https://admin.wat.ink) - Vue3管理系统
- **API服务**: [api.wat.ink](https://api.wat.ink) - Go语言API
- **H5应用**: [h5.wat.ink](https://h5.wat.ink) - uni-app跨平台应用

## ✨ 核心特色 | Features

### 🎨 设计特色
- **现代化UI设计** - 简洁优雅，专业视觉效果
- **响应式布局** - 完美适配手机、平板、桌面设备
- **流畅动画** - AOS滚动动画，粒子背景效果
- **交互体验** - 平滑滚动导航，图片放大预览

### 💼 内容展示
- **技能可视化** - 进度条展示各技术栈熟练度
- **项目作品集** - 5个完整全栈项目案例展示
- **工作经历** - 时间线展示职业发展历程
- **联系方式** - 多种联系方式，微信二维码

### ⚡ 性能优化
- **图片优化** - WebP格式，懒加载技术
- **SEO友好** - 完善meta标签，结构化数据
- **加载优化** - 资源压缩，CDN加速
- **代码优化** - 语义化HTML，模块化CSS

## 🛠️ 技术栈 | Tech Stack

### 前端技术
```bash
# 核心技术
- HTML5/CSS3         # 语义化结构，现代CSS特性
- JavaScript (ES6+)  # 原生JS，无框架依赖
- 响应式设计          # Flexbox, Grid布局

# 增强功能
- AOS动画库          # 滚动动画效果
- Particles.js       # 粒子背景动画
- Font Awesome       # 图标字体库
- WebP图片格式       # 性能优化
```

### 展示的技术栈
```bash
# 前端框架
Vue2/Vue3, Nuxt.js, Element UI, uni-app

# 移动开发
Flutter, 微信小程序, 跨平台开发

# 后端技术
Node.js, Golang, MySQL, Redis, JWT

# 开发工具
Vite, Webpack, Git, Docker, Jenkins
```

## 🚀 项目展示 | Projects

网站展示了5个完整的全栈项目：

### 📱 移动应用
1. **招聘App** - Flutter跨平台应用
   - 技术栈: Flutter, Dart, GetX
   - 功能: 职位搜索、简历管理、在线沟通

2. **跨平台应用** - uni-app多端开发
   - 技术栈: uni-app, Vue, 小程序
   - 支持: H5, 微信小程序, Android, iOS

### 💻 Web应用
3. **个人博客前端** - SSR技术栈
   - 技术栈: Nuxt.js, Vue, TailwindCSS
   - 特色: SSR渲染，SEO优化

4. **博客后台管理** - 现代化管理系统
   - 技术栈: Vue3, TypeScript, Element Plus
   - 功能: 内容管理，用户权限，数据统计

5. **博客API服务** - 高性能后端
   - 技术栈: Go, Gin, MySQL, Redis
   - 架构: 三层架构，微服务设计

## 🚀 快速开始 | Quick Start

### 在线访问
```bash
# 直接访问线上地址
https://cv.wat.ink
```

### 本地运行

#### 1. 克隆项目
```bash
git clone https://github.com/NextEraAbyss/cv.git
cd cv
```

#### 2. 启动项目


```bash
# 双击打开 index.html
open index.html
```



## 📁 项目结构 | Project Structure

```
cv/
├── index.html                 # 主页面入口
├── assets/                    # 静态资源目录
│   ├── css/                   # 样式文件
│   │   ├── styles.css         # 主样式表
│   │   ├── font-awesome.min.css # 图标样式
│   │   ├── poppins.css        # 字体样式
│   │   └── aos.css            # 动画样式
│   ├── js/                    # JavaScript文件
│   │   ├── script.js          # 主脚本文件
│   │   ├── aos.js             # 动画库
│   │   └── particles.min.js   # 粒子效果
│   ├── images/                # 图片资源
│   │   ├── projects/          # 项目截图
│   │   └── wechat-qrcode.webp # 微信二维码
│   ├── fonts/                 # 字体文件
│   └── webfonts/              # Font Awesome字体
├── projects/                  # 项目详情页面
│   ├── flutter-job.html       # Flutter招聘App
│   ├── uni-app.html           # uni-app跨平台应用
│   ├── blog-frontend.html     # 博客前端项目
│   ├── blog-admin.html        # 博客管理后台
│   └── blog-api.html          # 博客API服务
├── public/                    # Vite静态资源 (可选)
├── dist/                      # 构建输出目录 (可选)
├── favicon.ico                # 网站图标
├── sitemap.xml               # 网站地图
├── LICENSE                   # MIT许可证
└── README.md                 # 项目说明
```

## ⚡ 性能优化 | Performance

### 🖼️ 图片优化
- **WebP格式** - 现代图片格式，体积减少30%+
- **懒加载** - 图片延迟加载，提升首屏速度
- **响应式图片** - 不同设备加载适合尺寸

### 📦 资源优化
- **CSS合并** - 减少HTTP请求数量
- **代码压缩** - Terser压缩JavaScript
- **字体优化** - 只加载需要的字体文件

### 🔍 SEO优化
- **语义化HTML** - 搜索引擎友好的结构
- **Meta标签** - 完善的SEO信息
- **结构化数据** - Schema.org标记
- **Sitemap** - 网站地图文件

### 📊 性能指标
- ⚡ **首屏加载** < 2秒
- 🎯 **Lighthouse评分** 95+
- 📱 **移动友好性** 100%
- 🔍 **SEO得分** 95+

## 🌐 浏览器兼容性 | Browser Compatibility

### ✅ 支持的浏览器
- **Chrome** 60+ ✅
- **Firefox** 55+ ✅  
- **Safari** 12+ ✅
- **Edge** 79+ ✅
- **移动浏览器** ✅

### 📱 移动设备支持
- **iOS Safari** 12+ ✅
- **Android Chrome** 60+ ✅
- **微信内置浏览器** ✅
- **各大主流移动浏览器** ✅

## 🚀 部署指南 | Deployment

### 静态站点部署
```bash
# Netlify
npm run build
# 上传 dist/ 目录

# Vercel
vercel --prod

# GitHub Pages
# 直接推送到 gh-pages 分支

# 服务器部署
# 上传文件到服务器根目录
```

### Nginx配置示例
```nginx
server {
    listen 80;
    server_name cv.wat.ink;
    root /var/www/cv;
    index index.html;

    # Gzip压缩
    gzip on;
    gzip_types text/css application/javascript image/svg+xml;

    # 缓存策略
    location ~* \.(css|js|jpg|jpeg|png|gif|ico|svg|webp)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}
```

## 🤝 贡献指南 | Contributing

欢迎提交Issue和Pull Request！

### 贡献方式
1. 🐛 **Bug报告** - 发现问题请提交Issue
2. 💡 **功能建议** - 欢迎提出改进建议
3. 🔧 **代码改进** - 提交Pull Request
4. 📖 **文档完善** - 改进项目文档

### 开发流程
```bash
# 1. Fork项目
# 2. 创建特性分支
git checkout -b feature/your-feature

# 3. 提交更改
git commit -m "Add: your feature"

# 4. 推送分支
git push origin feature/your-feature

# 5. 创建Pull Request
```

## 📄 许可证 | License

本项目采用 [MIT License](LICENSE) 开源协议。

## 🔗 相关链接 | Links

- 🌐 **个人网站**: [cv.wat.ink](https://cv.wat.ink)
- 📝 **技术博客**: [blog.wat.ink](https://blog.wat.ink)
- 🛠️ **管理后台**: [admin.wat.ink](https://admin.wat.ink)
- 🔌 **API文档**: [api.wat.ink](https://api.wat.ink)
- 👨‍💻 **GitHub**: [@NextEraAbyss](https://github.com/NextEraAbyss)
- 🦄 **Gitee**: [@NextEraAbyss](https://gitee.com/NextEraAbyss)

---

<div align="center">

**🌟 如果这个项目对您有帮助，请给个 Star 支持一下！**

<p>
  <img src="https://img.shields.io/github/stars/NextEraAbyss/cv?style=social" alt="GitHub stars">
  <img src="https://img.shields.io/github/forks/NextEraAbyss/cv?style=social" alt="GitHub forks">
</p>

*Built with ❤️ by [秦若宸](https://cv.wat.ink)*

**💼 展示您的全栈技术能力，成就技术人生！**

</div>