🌐 Lingyun's Personal Portal

这是一个基于《蔚蓝档案》(Blue Archive) 风格设计的个人网站。

🖥️ 功能预览

• Dashboard (index.html): 个人信息展示面板，集成实时随机语录（Saying API）。您可访问: lingyun 查看具体预览。
• Memory Archive (image.html): 瀑布流画廊系统，通过 Supabase 云端实时拉取数据，支持无刷新灯箱预览。
• 404 Error Page: 定制错误页面。
• Responsive Design: 适配移动端与桌面端，采用高度还原的倾斜 (Skew) UI 视觉风格。

🚀 快速开始

1. 准备素材

确保你的根目录下包含以下资源文件：

• avatar.jpg: 你的头像。
• 404.png: 用于 404 页面的提示图。
• favicon.png: 网站图标。

2. 配置数据库 (Supabase)

本项目的画廊功能依赖于 Supabase。

1. 在 Supabase 创建一个新项目。

2. 新建一个表，命名为 gallery。

3. 表结构 (Schema) 建议如下：

   列名	类型	说明
   id	int8 (PK)	排序 ID
   title	text	图片标题
   image_url	text	图片链接
   description	text	详细描述
   link	text	艺术家跳转链接

4. 填入 Key: 打开 image.html，将 YOUR_SUPABASE_URL 和 YOUR_SUPABASE_ANON_KEY 替换为你项目中的真实凭证。

3. 部署

由于本项目是纯静态页面，你可以直接使用：

• GitHub Pages: 推送代码后在仓库 Settings > Pages 中开启即可。
• Vercel / Netlify: 关联 GitHub 仓库一键部署。

🛠️ 技术栈

• Frontend: HTML5, CSS3 (CSS Variables, Flexbox, Grid), JavaScript (ES6+).
• Backend: Supabase (Database as a Service).
• Typography: Rajdhani (英文数字), Noto Sans SC (中文).
• API: uapis.cn (随机语录).

📜 免责声明

本项目设计灵感来源于 NEXON Games 开发的游戏《Blue Archive》。相关视觉元素、字体风格等版权归原版权方所有。本项目仅供个人学习与技术交流使用。