源码系统概览
文章正文
新拟态（Neumorphism）是一种流行的 UI 风格，通过柔和的内外阴影让按钮、卡片像从背景中凸出或凹陷，呈现低对比、极简安静的质感。
这套新拟态个人主页网站源码正是基于该风格打造的纯前端引导页，以浅灰底色配合同向柔光阴影，风格统一。
页面通过顶部导航在“首页 / 关于 / 历程 / 站点”四个板块间横向切换，点击与滑动联动，浏览顺滑。
源码不含后端与数据库，内容全部由 data.json 驱动，适合想快速拥有设计感主页又不愿折腾框架的用户。
源码简介
本源码是一套纯前端个人主页静态网站，由作者“景昇”编写，2021 年完成首版，2024 年全面重构优化。
采用原生 HTML、CSS、JavaScript 实现，不依赖任何框架，体积小、结构清晰，便于学习与改造。
项目遵循 GPL-3.0 开源许可，可自由运行、研究、复制与分发，但需保留原作者版权声明并在同等许可下开放修改版。
源码包含 index.html、assets/style.css、assets/index.js、data.json、404 页面与说明文档，整体约 22 个文件，含大量 SVG 图标与字体资源。
适用场景
本源码适合：个人博客、作品集或社交聚合入口，集中展示常用账号与导航；
前端初学者练手，理解新拟态阴影、横向滚动 Tab 与事件委托；
作为个人导航站或书签页收录常用站点；
课程作业或开源展示用的干净前端作品。
它纯静态、无后台，也常用于静态托管平台上的低成本个人站点。
功能亮点
视觉上，全站采用统一的新拟态柔光阴影与同色系配色，卡片、按钮、头像框保持一致的凸起质感，辨识度高。
交互上，导航“首页 / 关于 / 历程 / 站点”支持点击切换与滚动联动双模式，滑动时标签自动高亮并平滑过渡。
功能模块方面，首页展示背景图、头像与社交图标；
关于板块介绍作者；
历程板块以时间轴呈现成长记录；
站点板块列表展示常用导航并标注可达状态。
源码还内置暗黑模式（localStorage 记忆）、背景音乐开关与第三方天气小组件，完成度较高。
技术架构与部署指南
| 维度 | 本套源码 | 同类通用方案 |
|---|---|---|
| 技术栈 | 前端：HTML/CSS/JS 后端：无 数据库：无 运行环境：任意静态服务器 其他依赖：无 |
依具体方案选型，需自行搭建与维护 |
| 部署方式 | 由于脚本使用 fetch 读取 data.json 渲染内容，直接以 file:// 双击打开会因浏览器安全策略导致数据 | 多托管于第三方平台或订阅云服务 |
| 功能侧重 | 视觉上，全站采用统一的新拟态柔光阴影与同色系配色，卡片、按钮、头像框保持一致的凸起质感，辨识度高。 | 功能通用，定制深度有限 |
| 数据归属 | 数据自持，部署在自有服务器，不出站 | 数据通常留存于服务商侧 |
| 成本模式 | 获取后自主部署，无持续授权费用 | 通常按订阅或调用量计费 |
技术栈与运行环境
前端：HTML/CSS/JS
后端：无
数据库：无
运行环境：任意静态服务器
其他依赖：无
安装与部署提示
由于脚本使用 fetch 读取 data.json 渲染内容，直接以 file:// 双击打开会因浏览器安全策略导致数据无法加载，务必通过静态服务器访问。
本地可用 Python 的 http.server 或任意静态托管环境预览。
二次开发主要修改 data.json 即可更换社交图标、历程与站点，无需改动脚本；
替换头像、背景图与音乐可分别更换 assets/images 下资源及音频地址（外部音频可能失效，建议改本地文件）。
天气组件依赖第三方服务与密钥，不需要可在页面移除对应节点。
截图与演示说明
下方截图展示了这套新拟态个人主页的实际效果。
页面以浅灰为底色，顶部为横向导航与音乐、暗黑模式切换按钮，主体为带柔光阴影的头像卡片与个人简介，下方排列一排社交图标，呈现典型的新拟态“软凸”质感，观感干净统一。
该截图对应源码首页板块，其余“关于 / 历程 / 站点”板块可通过导航或左右滑动切换，建议下载后在本地静态服务器中体验各板块与暗黑模式。
常见问题
页面打开后内容空白？
多为未通过静态服务器访问，脚本无法 fetch 读取 data.json，请用本地静态服务或静态托管打开，勿直接双击。
暗黑模式不记忆？
状态存于浏览器 localStorage，首次访问默认浅色，点击切换即可，属正常行为。
背景音乐无声音？
音频来自外部链接可能失效，页面已给出更换提示，建议替换为本地音频文件。
天气组件不显示？
依赖第三方服务与密钥，未配置或受限时不展示，不影响主页其他功能。
安全风险提示
本源码为纯静态前端模板，不含后端接口、数据库与用户提交逻辑，运行时不接收外部输入，不存在命令执行、SQL 注入或服务端越权等常见风险。
使用前请确认托管环境基础安全配置，并从可信渠道获取源码，避免被植入可疑外部资源。
下载说明
本页源码仅用于学习、研究与个人非商业用途参考，版权归原作者所有。
下载后请遵守开源许可的署名与再发布要求，不得用于违法违规用途。
资源来自第三方公开分享，如有争议请及时联系删除，使用风险由使用者自行承担，本站不对任何损失负责。
