独立开发者个人主页 - 玻璃拟态主题切换

技术信息

语言技术
HTML5、CSS、JavaScript系统类型
Web行业分类
内容平台

作品详情

行业场景

独立开发者自我展示场景。面向潜在客户 / 合作方，展示个人服务能力、定价体系、联系方式，建立专业形象。用 AI 工具极速交付，支持定制化二次开发。

功能介绍

1. 玻璃拟态导航 + 明暗主题切换（系统跟随 + 记忆偏好）
2. Hero 区 + 服务定位 + 磁吸 CTA 按钮 + 渐变流动动画
3. 4 大服务卡片（网站定制 / SaaS 落地页 / 小程序 / 咨询服务）
4. 服务定价体系（基础 / 进阶 / 定制三档）+ 价格标签
5. 联系合作区 + 邮件微信 + 动态年份页脚 + 滚动进度条

项目实现

1. 单 HTML 文件个人服务商主页，现代简约风格，玻璃拟态设计贯穿全页
2. 顶部固定导航栏：玻璃拟态 + 明暗主题切换（系统跟随 + 本地记忆）+ 磁吸 CTA 按钮
3. Hero 区：深色渐变背景（#0f172a → #1e1b4b）+ 动态渐变流动动画 + 名字 / 定位 / 双 CTA
4. 服务展示：4 大服务卡片（网站定制 / SaaS 落地页 / 小程序 / 咨询服务），带价格标签与 hover 效果
5. 定价体系：基础 / 进阶 / 定制三档，清晰透明，客户一眼看懂预算范围
6. 联系区：邮箱 + 微信 + 玻璃拟态联系卡片
7. 页脚：动态年份（JS 自动获取当前年份），避免写死日期造成不专业感
8. 全局：滚动淡入、顶部进度条、平滑滚动、磁吸按钮、响应式布局、系统字体栈