Portfolio Blog - 个人作品展示博客
纯前端静态网站
为个人创作者、开发者、设计师提供零成本、简单易用的作品展示与管理解决方案。无需服务器、无需数据库，通过浏览器即可完成所有操作。
- 前端开发者展示个人项目
- 设计师展示作品集
- 自由职业者展示服务案例
- 学生展示课设/毕设项目
作为访客，我想：
- 快速浏览创作者的所有作品
- 点击作品卡片直接跳转到项目链接
- 在手机上也能流畅浏览
- 了解每个作品的基本信息（标题、描述）
作为创作者，我想：
- 快速上线个人作品展示页面
- 方便地添加/修改/删除作品
- 上传作品封面图片
- 设置作品跳转链接
- 保护管理页面不被随意访问
| 功能 | 优先级 | 描述 |
|---|---|---|
| 作品卡片列表 | P0 | 网格布局展示所有作品 |
| 作品信息展示 | P0 | 显示标题、描述、图片 |
| 外部链接跳转 | P0 | 点击卡片跳转到作品链接 |
| 响应式布局 | P0 | 适配手机、平板、桌面 |
| 空状态提示 | P1 | 无作品时显示引导提示 |
交互细节：
- 卡片悬停时轻微上浮 + 边框高亮 + 阴影增强
- 链接悬停时箭头图标右移
- 图片加载失败时显示占位图标
| 功能 | 优先级 | 描述 |
|---|---|---|
| 密码登录 | P0 | 简单密码保护管理功能 |
| 添加作品 | P0 | 表单添加新作品 |
| 编辑作品 | P0 | 修改现有作品信息 |
| 删除作品 | P0 | 移除不需要的作品 |
| 作品预览 | P1 | 快速查看作品效果 |
交互细节：
- 登录失败显示错误提示
- 表单验证必填项
- 删除操作需二次确认
- 操作成功/失败显示 toast 提示
| 功能 | 优先级 | 描述 |
|---|---|---|
| 本地存储 | P0 | 使用 localStorage 持久化数据 |
| 作品增删改 | P0 | 完整的 CRUD 操作 |
| 示例数据 | P1 | 首次访问显示示例作品 |
interface Work {
id: string; // UUID，唯一标识
title: string; // 作品标题（必填）
description: string; // 作品描述（可选）
link: string; // 作品链接（可选）
image: string; // 封面图片 URL（可选）
createdAt: string; // 创建时间 ISO 字符串
updatedAt?: string; // 更新时间 ISO 字符串
}| 键名 | 存储内容 |
|---|---|
portfolio_works |
作品数组 JSON |
portfolio_admin_password |
管理员密码 |
风格定位： 深色现代卡片式设计，强调内容层次
配色方案：
主色调: #6366f1 (Indigo)
背景色: #0f172a (深蓝黑)
卡片色: #1e293b (深灰蓝)
文字主色: #f8fafc (近白)
文字次要: #94a3b8 (灰蓝)
边框色: #334155 (深灰)
字体： Inter (Google Fonts)，备选系统无衬线字体
圆角： 8px (小)、12px (中)、16px (大)、24px (特大)
阴影： 深色系阴影，强调层次感
| 设备 | 断点 | 列数 |
|---|---|---|
| 手机 | < 768px | 1 列 |
| 平板+ | ≥ 768px | 自适应 (minmax 320px) |
按钮组件：
- Primary: 渐变背景 (primary → primary-dark)
- Secondary: 深色背景 + 边框
- Danger: 红色背景
- Icon: 透明背景 + 图标
表单组件：
- Input: 深色背景 + 亮色边框
- Textarea: 同 Input，支持高度调整
- Focus 状态: 主色边框 + 淡主色光晕
卡片组件：
- 默认: 深色背景 + 细边框
- 悬停: 边框变主色 + 上浮 + 阴影增强
模态框组件：
- 遮罩: 半透明黑 + 毛玻璃
- 内容: 深色背景 + 圆角
- 动画: 缩放淡入
Toast 提示：
- 位置: 右下角
- 动画: 从下方滑入
- 类型: Success (绿边框) / Error (红边框)
- 首屏加载 < 1s
- 无外部依赖请求
- 图片懒加载
- 目标浏览器: Chrome/Firefox/Safari/Edge 最新版
- 支持 ES6+ JavaScript
- CSS 变量统一管理主题
- 模块化 JavaScript (IIFE 封装)
- 清晰的代码注释
- 管理页面会话级登录（关闭浏览器后需重新登录）
- 无敏感数据存储
- XSS 防护（HTML 转义）
-
index.html- 展示页面 -
admin.html- 管理页面 -
css/style.css- 样式文件 -
js/data.js- 数据存储模块 -
js/app.js- 展示页面逻辑 -
js/admin.js- 管理页面逻辑 -
README.md- 使用说明
- 分类/标签功能
- 搜索/筛选功能
- 作品详情页
- 访问统计
- 密码修改功能
- 数据导出/导入
- 深色/浅色主题切换