这是一个极简风格的个人主页模板，专为开发者、创作者和AI时代的超级个体设计。采用简洁优雅的设计理念，帮助您快速搭建专属的数字名片，高效展示个人品牌。
设计理念：在信息爆炸与个体崛起并行的时代，每一个独特的人都应该拥有一个代表自己的精美主页。
- 极简设计：去除冗余，专注核心信息展示
- 高性能优化：优化动画效果，减少DOM操作，提升用户体验
- 响应式布局：完美适配桌面、平板、手机等各种设备
- 现代交互：流畅的动画效果和触摸反馈
- 易于定制：模块化配置，轻松个性化
相比传统的“图片式名片”或单一平台主页，一个定制化的网页具备更强的表达力与链接能力：
- 引导关注：访客一旦打开主页，就能被结构清晰地引导至你的核心平台（如博客、GitHub、微信公众号等）。
- 聚合链接：整合你所有重要账号和内容输出渠道，构建完整的个人网络入口。
- 满足好奇心：简单直接的界面满足访客对“你是谁”的第一层好奇，有效提升转化率。
- 控制权更高：独立部署、完全掌控，不受限于任何平台规则。
一个好主页，不需要堆砌大量内容，只需准确传递你的核心价值，并为真正感兴趣的用户提供继续了解的路径。
.
├── index.html # 主HTML文件
├── style.css # CSS样式文件
├── script.js # JavaScript功能文件
├── vercel.json # Vercel部署配置文件
├── assets/ # 资源文件夹（图片等）
│ └── images/
│ ├── Muse.jpg
│ ├── Wechat.jpg
│ └── gzh.jpg
└── README.md # 项目说明
- 柔和渐变背景：优化的动画频率，更舒适的视觉体验
- 微妙阴影层次：多重阴影效果，增强界面深度感
- 优雅动画效果：流畅的悬停和交互动画
- 现代毛玻璃效果：backdrop-filter增强视觉层次
- 智能设备适配：桌面悬停效果，移动端触摸反馈
- 一键复制功能：微信号快速复制到剪贴板
- 社交媒体集成：支持微信、GitHub、YouTube、B站等平台
- 二维码展示：公众号二维码弹窗显示
- 节流优化：鼠标跟随效果和滚动进度条性能优化
- 元素池技术：减少DOM操作，提升动画流畅度
- 响应式布局：完美适配各种屏幕尺寸
- 移动端优化：专门的触摸交互和性能调优
当前页面包含以下核心模块：
- 个人资料 - 头像、姓名、职位、位置信息
- 联系方式 - 社交媒体链接和联系方式
- 关于我 - 个人介绍和背景描述
- 个人产品 - 产品展示区域（可配置）
点击下面的按钮，可以直接将此项目部署到Vercel平台：
- 点击上方 "Deploy with Vercel" 按钮
- 使用 GitHub 账号登录 Vercel
- 授权 Vercel 访问您的 GitHub 仓库
- 等待自动部署完成
- 获得您的专属域名，如：
https://your-project.vercel.app
部署完成后，您可以在 Vercel 控制台中：
- 添加自定义域名
- 配置 HTTPS 证书（自动）
- 设置环境变量（如需要）
直接在浏览器中打开 index.html 文件即可。
# 使用Python启动本地服务器
python3 -m http.server 8000
# 然后在浏览器访问
http://localhost:8000# 安装serve
npm install -g serve
# 启动服务器
serve
# 或者使用npx
npx serve由于项目已经极度简化，您可以轻松部署到任何静态网站托管平台：
- Vercel: 使用上方一键部署按钮
- Netlify: 直接拖拽项目文件夹到 Netlify
- GitHub Pages: 推送到 GitHub 仓库并启用 Pages
- Cloudflare Pages: 连接 GitHub 仓库自动部署
要自定义个人信息，只需编辑 script.js 文件中的 CONFIG 对象：
const CONFIG = {
// 基本信息
basic: {
name: "你的名字",
title: "你的职位描述",
location: "你的位置",
avatar: "./assets/images/你的头像.jpg"
},
// 联系方式
contact: {
contactText: "欢迎添加个人社交媒体互相学习！",
wechat: "你的微信号",
publicAccount: "./assets/images/你的公众号二维码.jpg",
github: "https://github.com/你的用户名",
youtube: "https://www.youtube.com/@你的频道",
bilibili: "https://space.bilibili.com/你的UID"
},
// 关于我
about: {
content: "你的个人介绍，可以包含专业背景、兴趣爱好、价值观等"
},
// 个人产品
products: {
comingSoon: true, // 设为false可展示具体产品
productsList: [] // 产品列表（当comingSoon为false时使用）
},
// 版权信息
copyright: {
year: "2021 - 2025",
name: "你的名字",
url: "https://你的网站.com"
}
};在 CONFIG 对象中还可以自定义主题颜色：
// 主题颜色
theme: {
primary: "#3b82f6", // 主色调
primaryLight: "#60a5fa", // 浅色主色调
primaryDark: "#2563eb", // 深色主色调
background: "#f9fafb", // 背景色
cardBackground: "#ffffff", // 卡片背景色
text: "#1f2937", // 文字颜色
textLight: "#6b7280", // 浅色文字
accentGreen: "#10b981", // 绿色强调色
accentPurple: "#8b5cf6", // 紫色强调色
accentOrange: "#f59e0b" // 橙色强调色
}确保在 assets/images/ 文件夹中包含以下图片：
Muse.jpg- 个人头像Wechat.jpg- 微信二维码gzh.jpg- 公众号二维码
项目使用CSS变量系统，可以轻松自定义主题：
:root {
/* 主色调 */
--primary: #3b82f6;
--primary-light: #60a5fa;
--primary-dark: #2563eb;
/* 背景色 */
--bg: #f9fafb;
--card-bg: #ffffff;
/* 文字颜色 */
--text: #1f2937;
--text-light: #6b7280;
--text-muted: #9ca3af;
/* 阴影效果 */
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
/* 排版变量 */
--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.75;
}项目完全支持响应式设计，在以下设备上都能完美显示：
- 桌面电脑 (> 1024px) - 完整功能，包含悬停效果和鼠标跟随
- 平板设备 (768px - 1024px) - 适配触摸交互
- 手机设备 (< 768px) - 优化的移动端体验
- 小屏手机 (< 480px) - 紧凑布局，保持可用性
- ✨ 极简化设计，移除冗余模块
- ⚡ 性能大幅优化，减少DOM操作
- 📱 增强移动端体验
- 🎨 优化视觉效果和动画
- 🎉 初始版本发布
- 📋 完整的个人主页模板
- HTML5 - 语义化标记
- CSS3 - 现代样式特性
- Vanilla JavaScript - 原生JS，无依赖
- Font Awesome - 图标库
- Google Fonts - 字体支持
MIT License
欢迎提交 Issue 和 Pull Request！
- Fork 本仓库
- 创建特性分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 打开 Pull Request
如果您在使用过程中遇到问题，可以：
注意：请确保 assets/images/ 文件夹中包含必要的图片文件（头像、微信二维码等）。
Made with ❤️ by 缪斯