# StudioX

**Repository Path**: vic-gao/StudioX

## Basic Information

- **Project Name**: StudioX
- **Description**: 一个现代化的个人作品集网站，专为开发者、设计师和创意工作者设计。
网站采用响应式设计，支持移动端和桌面端，提供优雅的用户体验和丰富的交互功能。
提供配置项可以直接修改展示内容。
- **Primary Language**: HTML
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-08-18
- **Last Updated**: 2025-08-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 程序员作品集网站 - StudioX

## 📋 项目概述

这是一个现代化的个人作品集网站，专为开发者、设计师和创意工作者设计。网站采用响应式设计，支持移动端和桌面端，提供优雅的用户体验和丰富的交互功能。


演示地址:https://www.autorepairehelper.cn/profile/

## 🖼️ 实际效果

![1](shots/1.png)

![2](shots/2.png)

![3](shots/3.png)

![4](shots/4.png)

![5](shots/5.png)

![6](shots/6.png)


## 🎨 设计思路

### 整体设计理念
- **简约现代**：采用简洁的设计语言，突出内容本身
- **响应式布局**：完美适配各种设备尺寸
- **优雅动画**：流畅的过渡效果和微交互
- **内容优先**：以展示作品和技能为核心

### 技术架构
- **前端技术**：HTML5 + CSS3 + JavaScript
- **字体选择**：Space Grotesk - 现代感强，可读性佳
- **图标系统**：SVG图标，支持自定义颜色和大小
- **图片处理**：支持本地图片和网络图片，具备错误处理机制

## ✨ 功能特性

### 🖼️ 轮播图展示
- **自动轮播**：3秒间隔自动切换
- **无限循环**：无缝循环播放
- **指示器**：直观的页面指示
- **悬停暂停**：鼠标悬停时暂停自动播放
- **响应式**：适配不同屏幕尺寸

### 📱 技术栈展示
- **图标化展示**：每个技术栈配有专属图标
- **分类清晰**：按技术类型分组展示
- **动态加载**：支持从配置文件动态加载

### 📚 项目展示
- **精选项目**：展示最重要的作品
- **开源项目**：展示开源贡献
- **精选案例**：展示服务案例
- **点击跳转**：支持项目链接跳转

### 👤 个人资料
- **可点击联系**：电话、邮箱、个人主页支持点击
- **地图集成**：所在城市支持高德地图跳转
- **教育经历**：展示学历背景，支持学校Logo

### 🎓 教育经历
- **学校Logo**：自动匹配学校Logo
- **标签系统**：显示学习类型（全日制/在职）
- **时间轴**：清晰的时间展示

## 🛠️ 配置说明

### 1. 基础配置 (`config.js`)

网站的所有内容都通过 `config.js` 文件进行配置，结构如下：

```javascript
const profileData = {
  "profile": {
    "pageTitle": "页面标题",
    "title": "网站标题",
    
    // 个人介绍
    "introduction": {
      "title": "个人介绍",
      "content": "详细介绍内容"
    },
    
    // 技术栈
    "skills": {
      "title": "技术栈",
      "items": [
        {
          "name": "技术名称",
          "icon": "图标类型"
        }
      ]
    },
    
    // 轮播图
    "heroCarousel": {
      "slides": [
        {
          "image": "图片路径",
          "alt": "图片描述"
        }
      ]
    },
    
    // 联系信息
    "contact": {
      "title": "个人资料",
      "items": [
        {
          "label": "标签",
          "value": "值"
        }
      ]
    }
  }
};
```


## 📁 文件结构

```
private-profile-website/
├── html/
│   ├── index.html          # 主页面
│   ├── config.js           # 配置文件
│   ├── script.js           # 交互脚本
│   ├── styles.css          # 样式文件
│   └── images/             # 图片资源
│       ├── logo.png
│       ├── logo2.png
│       ├── jsdx.jpeg
│       ├── njdx.jpeg
│       └── README.md
├── files/                  # 其他文件
├── package.json            # 项目配置
├── server.js              # 本地服务器
└── README.md              # 项目说明
```

## 🚀 快速开始

### 1. 克隆项目
```bash
git clone [项目地址]
cd private-profile-website
```

### 2. 配置数据
编辑 `html/config.js` 文件，修改个人信息：

```javascript
const profileData = {
  "profile": {
    "pageTitle": "您的姓名 - 个人作品集",
    "title": "您的姓名",
    // ... 其他配置
  }
};
```

### 3. 添加图片
将您的图片放入 `html/images/` 目录，然后在配置中引用：

```javascript
"image": "images/your-image.jpg"
```

### 4. 启动服务
```bash
# 使用Node.js服务器
node server.js

# 或使用Python服务器
cd html
python -m http.server 8000
```

### 5. 访问网站
打开浏览器访问 `http://localhost:3000` 或 `http://localhost:8000`

## 🎯 自定义指南

### 修改颜色主题
在 `styles.css` 中修改CSS变量：

```css
:root {
  --primary-color: #4a9eff;
  --secondary-color: #2b3036;
  --accent-color: #66b3ff;
}
```

### 添加新的图标类型
在 `script.js` 的 `getSkillIcon` 函数中添加：

```javascript
'your-icon': '<svg path...>',
```

### 隐藏/显示区域
在HTML中添加 `style="display: none;"` 来隐藏区域：

```html
<section class="team-section" style="display: none;">
  <!-- 内容 -->
</section>
```

## 📱 响应式设计

网站采用移动优先的响应式设计：

- **移动端** (< 768px)：单列布局，优化触摸交互
- **平板端** (768px - 1024px)：双列布局
- **桌面端** (> 1024px)：多列布局，充分利用屏幕空间

## 🔧 浏览器兼容性

- ✅ Chrome 60+
- ✅ Firefox 55+
- ✅ Safari 12+
- ✅ Edge 79+
- ✅ iOS Safari 12+
- ✅ Android Chrome 60+

## 📈 性能优化

- **图片优化**：支持WebP格式，提供fallback
- **字体优化**：使用Google Fonts CDN
- **代码分割**：CSS和JS分离
- **缓存策略**：静态资源缓存
- **压缩优化**：CSS和JS压缩

## 🎨 设计亮点

### 1. 现代化UI
- 使用Space Grotesk字体，现代感强
- 渐变背景和阴影效果
- 圆角设计和卡片布局

### 2. 流畅动画
- CSS过渡动画
- 轮播图滑动效果
- 悬停状态变化

### 3. 交互体验
- 可点击的联系信息
- 地图集成
- 项目链接跳转

### 4. 内容组织
- 清晰的信息层级
- 逻辑化的内容排列
- 重点内容突出显示

## 🔄 更新日志

### v1.0.0 (2025-07-29)
- ✨ 初始版本发布
- 🎨 现代化设计
- 📱 响应式布局
- 🖼️ 轮播图功能
- 📞 可点击联系信息
- 🗺️ 高德地图集成
- 🎓 教育经历展示
- 💼 技术栈展示
- 📚 项目展示功能

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。

## 📞 联系方式

- 项目维护者：hfqf123
- 邮箱：hfqf123@126.com
- 个人主页：https://gitee.com/hfqf1234

---

⭐ 如果这个项目对您有帮助，请给它一个星标！