源码系统概览
文章正文
这套个人主页源码把毛玻璃质感和拟态阴影直接做进了前端页面，打开就能看到时间、天气、站点导航和音乐播放器一字排开。
源码免费下载后，改几张图和几行文字就能部署上线，对想搭个人主页的人来说比较省事。
源码简介
One degree个人主页是一套纯前端实现的个人引导页模板。
页面整体走毛玻璃加拟态UI的视觉路线，没有后端，也没有数据库，所有交互都靠原生JavaScript和CSS3完成。
源码包里只有index.html首页、一个404页面、几段JS效果和两套响应式样式表。
顶部是大标题和毛玻璃卡片容器，中间安排了个人信息、站点入口、天气组件和音乐播放控件，PC端加载style.pc.css，手机端自动切换到style.mobile.css，两边的浏览体验都能照顾到。
另外还接入了51LA访问统计和移动端rem适配，日常展示基本够用。
适用场景
这套源码比较适合做个人博客引导页、开发者作品集入口、个人品牌展示页，或者工作室简介页。
前端新手也可以拿它练手，熟悉HTML5结构、CSS3布局和响应式适配的思路。
功能亮点
页面主体是毛玻璃拟态UI风格，背景图可以自己替换。
首页左边有实时时钟和天气信息卡片，中间用Swiper做了一个轮播区域，适合放头像或者推荐站点。
点击页面任意位置会触发烟花动画，算是一个小彩蛋。
底部还留了一个音乐播放器，UI已经做好，音频文件按自己需求填进去就行。
PC和手机分别加载不同样式表，404页面也内置好了，传到服务器就能直接跑。
技术架构与部署指南
| 维度 | 本套源码 | 同类通用方案 |
|---|---|---|
| 技术栈 | 前端：HTML5 + CSS3 + 原生 JavaScript 后端：无 数据库：无 运行环境：任意静态 Web |
依具体方案选型，需自行搭建与维护 |
| 部署方式 | 把源码解压到网站根目录或者任意子目录里，然后访问index.html就能预览。 | 多托管于第三方平台或订阅云服务 |
| 功能侧重 | 页面主体是毛玻璃拟态UI风格，背景图可以自己替换。 | 功能通用，定制深度有限 |
| 数据归属 | 数据自持，部署在自有服务器，不出站 | 数据通常留存于服务商侧 |
| 成本模式 | 获取后自主部署，无持续授权费用 | 通常按订阅或调用量计费 |
技术栈与运行环境
前端：HTML5 + CSS3 + 原生 JavaScript
后端：无
数据库：无
运行环境：任意静态 Web 服务器，或本地直接打开 index.html
其他依赖：Swiper.js 轮播库、51LA 统计 SDK、flexible.js 移动端 rem 适配
安装与部署提示
把源码解压到网站根目录或者任意子目录里，然后访问index.html就能预览。
背景图在static/css/style.pc.css和style.mobile.css里替换，个人信息、站点链接和头像集中在index.html和static/js/index.js中改，保存后刷新页面就能看到效果。
项目是纯静态资源，用Nginx、Apache或者任何静态托管平台发布都可以。
截图与演示说明
本源码没有额外第三方演示截图，页面结构可以直接在浏览器里验证。
顶部是One degree大标题和毛玻璃卡片容器，左侧放时间和天气卡片，中间是个人头像、站点入口和下拉站点列表，右侧是音乐播放器卡片，底部有ICP备案和运行天数信息。
手机打开时会变成单列纵向布局，所有卡片依次堆叠显示。
常见问题
问：这套源码需要服务器环境吗？
不需要。
它完全由HTML、CSS和JavaScript组成，本地双击index.html或者放到任意静态服务器上都能运行。
问：音乐播放器为什么没有声音？
源码里只保留了播放器UI和控制逻辑，真正的音频文件地址需要在index.js里自己配置，配好并上传对应音乐文件后才能播放。
问：如何修改首页背景？
打开static/css/style.pc.css和style.mobile.css，找到背景图片相关的样式行，替换成自己的图片路径或者网络地址即可。
安全风险提示
特别提示：本源码未检测安全风险文件，下载后请务必进行安全审计，删除恶意代码后再部署使用！
下载说明
本源码仅供学习研究与技术交流使用，请勿用于任何违法违规用途。
下载后建议先自行审计代码，确认没有异常再上传到生产服务器。
因使用源码产生的任何责任由使用者自行承担，本站只提供资源整理与分享服务。
