全栈个人网站工程 · 核心内容
单文件 SPA · 零框架 · 双端部署 · 门户化 CMS
一、站点定位
为 27 届校招打造的个人求职中枢：把简历、项目佐证、学习规划、资料库、投递管理集成到一个可离线访问的 PWA 站点，招聘方打开一个链接即可看到完整画像。
二、技术架构
| 维度 | 设计选择 |
|---|
| 形态 | 单文件 SPA（index.html）+ 主逻辑 JS 分文件，零前端框架、零运行时 CDN 依赖 |
| 视图 | 三视图：首页名片 / 个人简历（HR 视角 portal）/ 就业作战中心（后台 wb） |
| 内容管理 | 内置 PORTAL_PAGES 数组 + Supabase pages 表双源，支持嵌套页面与面包屑 |
| 存储 | Supabase 云端表 + localStorage 本地兜底 |
| 离线 | PWA Service Worker，版本号驱动缓存清理（ljl-home-vNN） |
| 部署 | Surge（ljla.top 主力）+ CloudStudio（备用站）双端热备 |
三、核心模块
- 首页名片：姓名/学校/专业/意向地/联系方式聚合，一键跳转简历与资料库。
- 个人简历 portal：按 JD 切换多版本简历 PDF，配套岗位匹配度分析与投递建议。
- 就业作战中心：专家团调度、情报工作流入口、学习规划、题库、面试准备、资料库。
- AI 作品成果展：独立页面按类型（专家团/工作流/自动化/网站/学习·面试/质检）筛选卡片。
- 资料库：成绩单、证书、实习协议、项目佐证附件分类归档。
四、构建与部署链路
deploy 源→
node _build_dist.js→
五道防线→
dist 构建产物→
bump sw.js→
Surge 发 ljla.top→
CloudStudio 备用→
curl 验证
五、量化成果
| 指标 | 数值 |
|---|
| 网站代码 | 约 2800 行（单文件零框架） |
| portal 子页 | 15 子页 + 10 作战面板 |
| 构建压缩 | index.html 239 KB → 201 KB（-15.9%） |
| 无障碍修复 | 7 轮整改至 0 违规 |
| 部署节点 | 2 个（主力 + 备用） |