开源分享程序员专用作品集网站 - StudioX

程序员作品集网站 - StudioX

📋 项目概述

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

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

仓库地址:gitee.com/hfqf1234/St...

🖼️ 实际效果

🎨 设计思路

整体设计理念

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

技术架构

前端技术：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": "值"
        }
      ]
    }
  }
};

📁 文件结构

csharp 复制代码

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 文件了解详情。

📞 联系方式

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

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

开源分享程序员专用作品集网站 - StudioX

程序员作品集网站 - StudioX

📋 项目概述

🖼️ 实际效果

🎨 设计思路

整体设计理念

技术架构

✨ 功能特性

🖼️ 轮播图展示

📱 技术栈展示

📚 项目展示

👤 个人资料

🎓 教育经历

🛠️ 配置说明

1. 基础配置 (config.js)

📁 文件结构

🚀 快速开始

1. 克隆项目

2. 配置数据

3. 添加图片

4. 启动服务

5. 访问网站

🎯 自定义指南

修改颜色主题

添加新的图标类型

隐藏/显示区域

📱 响应式设计

🔧 浏览器兼容性

📈 性能优化

🎨 设计亮点

1. 现代化UI

2. 流畅动画

3. 交互体验

4. 内容组织

🔄 更新日志

v1.0.0 (2025-07-29)

📄 许可证

📞 联系方式

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