e4272254fe5cd08810d70b5afc257323bf6106b3
- 为黑夜模式下的个人卡片添加呼吸动画和发光效果 - 强化黑夜模式下文字的可读性,使用固定颜色替代渐变 - 优化浮动按钮在黑夜模式下的视觉表现,包括背景渐变与发光 - 统一黑夜模式下各类组件的文字阴影与发光处理 - 添加多层光晕动画,提升整体视觉层次感 - 完善社交图标在黑夜模式下的发光与动画效果 - 重构CSS变量系统,增强主题一致性与扩展性 - 移除音乐模块相关样式代码 - 优化技术栈标签在黑夜模式下的显示效果 - 提升博客与项目列表在黑夜模式下的可读性与美观度
🌟 简介
这是一个现代化的个人主页项目,融合了科技感设计和个性化元素,用于展示个人信息、技术栈、开源项目和博客文章等内容。项目设计美观、响应式布局,支持白天/黑夜模式切换,为访问者提供良好的浏览体验。
✨ 特性
- 🎨 现代化UI设计,融合科技感与个性化元素
- 🌗 白天/黑夜模式自动切换
- 📱 完全响应式设计,适配PC、平板和手机设备
- 🌀 3D交互式技术标签云
- 📊 动态展示GitHub项目和博客文章
- 🌈 个性化的INFJ人格特质展示
- 📞 多种联系方式集成(GitHub、邮箱、微信、知乎等)
- ⚡ 高性能优化,快速加载体验
- 🔧 易于定制和扩展
🚀 技术栈
- HTML5 + CSS3 + JavaScript
- jQuery
- Artalk (评论系统)
- GitHub API
- 和风天气 API
- Hitokoto 一言
📁 项目结构
Home/
├── index.html # 首页
├── about.html # 关于我页面
├── 404.html # 404页面
├── css/
│ ├── style.css # 首页样式
│ ├── about.css # 关于我页面样式
│ └── iconfont.css # 图标字体
├── js/
│ ├── main.js # 首页主逻辑
│ ├── about.js # 关于我页面逻辑
│ ├── config.js # 配置文件
│ └── ...
├── images/ # 图片资源
├── data/ # 数据文件
└── ...
🎯 功能模块
首页 (index.html)
- 个人简介展示
- 头像翻页动画
- Hitokoto一言
- 日期及时间显示
- 实时天气信息
- 星空背景动画
- 社交媒体链接
关于我 (about.html)
- 个人信息展示
- 技术栈3D云图
- INFJ人格特质展示
- GitHub开源项目展示
- 博客文章瀑布流
- 个人时间线
- 联系方式集成
- 留言评论系统
🛠️ 部署
- 克隆项目到本地:
git clone https://github.com/lqbby/Tech-Home.git
-
修改配置文件
js/config.js中的API密钥和个人信息 -
部署到你喜欢的静态网站托管服务(GitHub Pages、Vercel、Netlify等)
🙏 致谢
本项目在开发过程中参考和借鉴了以下开源项目:
- dmego/home.github.io - 提供了个人主页的基础框架和设计思路
- lqbby/Tech-Home - 提供了技术实现方案和部分UI设计元素
向这些项目的作者表示诚挚的感谢!
📄 许可证
本项目采用 MIT 许可证,详情请参见 LICENSE 文件。
👤 作者
Honesty (HeHouHui)
- 博客: blog.hehouhui.cn
- GitHub: @listener-He
- 邮箱: hehouhui@foxmail.com
Languages
HTML
45.6%
CSS
35%
JavaScript
19.4%
