本项目用于打造一个专属于个人的主页网站，集中展示个人信息、作品集、擅长领域与联系方式。整体追求唯美、精致的视觉风格，并采用当下前沿的 UI 布局与交互方式。
默认后台地址/admin
账号admin，密码admin123
一、项目概述
项目定位：个人品牌展示门户，既是个人名片，也是作品与能力的窗口。
目标用户：潜在合作伙伴、招聘方、客户、同行及感兴趣的朋友。
核心目标
清晰、专业地呈现"我是谁、我能做什么、我做过什么、如何联系我"。
通过优秀的视觉与交互带来"眼前一亮"的印象，强化个人品牌形象。
内容可由后台自助维护，降低后续运营成本。
二、功能模块
1. 个人信息（About）
头像、姓名/昵称、一句话简介（Slogan）。
详细自我介绍、所在城市、当前状态（如求职中 / 接单中 / 自由职业）。
社交平台入口（GitHub、掘金、微博等，可配置）。
2. 作品集（Portfolio）
作品列表，支持分类与标签筛选。
单个作品详情：封面图、标题、简介、技术栈、角色与贡献、链接（线上地址 / 源码）与配图。
支持置顶、排序与是否公开。
3. 擅长领域（Skills）
技能分组展示（如前端、后端、设计、工具等）。
每项技能支持熟练度（百分比 / 等级）可视化。
可展示相关项目或证书作为佐证。
4. 联系方式（Contact）
邮箱、电话、微信/QQ、社交账号等。
访客留言表单（姓名、联系方式、留言内容），支持防垃圾校验。
留言进入后台待处理列表。
5. 后台管理（Admin）
登录鉴权（账号 + 密码，建议加盐哈希）。
对上述模块内容的增删改查（CRUD）。
留言查看与回复状态管理。
基础站点设置（站点标题、关键词、页脚信息等）。
三、技术与架构
后端：PHP（建议 ≥ 7.4，采用 PDO 访问数据库，防范 SQL 注入）。
数据库：MySQL 5.6。
前端：原生 HTML/CSS/JS（无第三方依赖），自研 Canvas 粒子背景与滚动动效；如需也可切换为 Tailwind / GSAP / AOS 等方案。
部署：支持常见 LAMP 环境，目录结构清晰、便于迁移。
安全要点
表单与接口做 CSRF 防护、输入校验与输出转义。
后台路径/接口需登录态校验，敏感操作留痕。
文件上传限制类型与大小，存储于非执行目录。
四、视觉与交互要求
整体气质：唯美、干净、有呼吸感；留白充足，配色柔和（可结合个人品牌色）。
前沿布局：首屏 Hero 区强视觉冲击；滚动视差、渐入动画、卡片悬浮反馈。
响应式：完美适配桌面、平板、手机；移动端以单栏 + 汉堡菜单为主。
性能：图片懒加载、关键资源压缩，首屏加载流畅。
可访问性：语义化标签、合理的对比度与键盘可达性，并支持 prefers-reduced-motion 降级。
已实现动效（炫酷增强）
前台已落地以下视觉与交互效果：
全屏粒子背景：Canvas 绘制缓慢漂浮、彼此连线发光的粒子，数量按屏幕自适应。
名字渐变流动：Hero 标题采用流动渐变文字（hue 动画）。
打字机 Slogan：标语逐字打出，带闪烁光标。
滚动进度条：页面顶部细线随滚动增长并流光。
鼠标光晕：鼠标移动时跟随的紫色光晕（仅精确指针设备启用）。
作品卡片 3D 悬浮：鼠标在卡片上移动产生倾斜视差。
错落揭示动画：各区块滚动进入时子元素依次浮现，区块标题下划线展开，技能条填充。
按钮流光：主按钮持续扫光。
无障碍降级：尊重系统"减少动态效果"设置，不支持 IntersectionObserver 时直接显示内容。
五、页面结构（信息架构）
首页（Home）
├─ 首屏 Hero：姓名 / Slogan / 主视觉 / 进入作品
├─ 关于我（About）：简介 + 社交入口
├─ 擅长领域（Skills）：可视化技能
├─ 作品集（Portfolio）：分类筛选 + 卡片列表
└─ 联系我（Contact）：信息 + 留言表单
后台（/admin）
├─ 登录
├─ 个人信息管理
├─ 作品管理
├─ 技能管理
├─ 留言管理
└─ 站点设置
五之二、项目文件结构（已实现）
个人主页/
├── config.php # 数据库配置 + 公共函数（转义/鉴权/CSRF/提示）
├── setup.php # 一键安装：建库建表 + 初始数据（含默认管理员）
├── index.php # 前台首页（关于/技能/作品/联系）
├── contact.php # 联系表单提交处理
├── assets/
│ ├── css/style.css # 前台样式（含炫酷动效）
│ └── js/main.js # 前台交互（粒子/打字机/进度条/光晕/3D/揭示）
└── admin/ # 后台管理
├── login.php / logout.php
├── index.php # 控制台（数据统计）
├── profile.php # 个人信息
├── projects.php # 作品管理
├── skills.php # 技能管理
├── messages.php # 留言管理
├── settings.php # 站点设置 + 修改密码
└── admin.css
。
六、数据库设计（MySQL 5.6 草案）
注意 MySQL 5.6 不支持 utf8mb4_0900_* 排序规则，统一使用 utf8mb4_general_ci。
七、实现进度（已全部完成）
[x] 需求与页面结构规划
[x] 数据库建表与数据访问层（PDO 预编译，防 SQL 注入）
[x] 前台首页：关于 / 技能 / 作品 / 联系，含全部炫酷动效
[x] 后台：登录鉴权、个人信息、作品、技能、留言、站点设置、修改密码
[x] 安全加固：CSRF 防护、输出转义、密码加盐哈希、登录态校验
[x] 一键安装脚本 setup.php（默认管理员 admin / admin123）
✅ 视觉风格：已落地"唯美 + 炫酷动效"方向（玻璃拟态、渐变、粒子、流光）。
