1
随着 AI 应用开发、前端工程和全栈岗位竞争加剧，仅靠 PDF 简历难以完整展示项目成果、线上 Demo 和 AI 协作能力。求职者在投递实习时，HR 和技术面试官往往需要在短时间内了解候选人的技术栈、代表项目和可访问的线上作品，传统 Word/PDF 简历存在信息分散、链接不便、视觉表达弱等问题。
本项目面向 个人求职与作品集展示 场景，为软件工程本科生提供一套可在线访问、移动端友好、内容结构清晰的个人品牌站点，解决「简历信息单一、项目难以直观呈现、AI 协作作品无法集中展示」的痛点，适用于校招/实习投递、技术面试前置了解、社交分享等典型业务背景。
网站采用单页结构，主要包含以下功能模块：
Hero 首屏与个人信息面板：展示姓名、方向定位、核心优势标签，以及电话、邮箱、GitHub/Gitee、优选城市等联系方式，支持邮箱一键复制。
个人简介与岗位匹配：说明 AI 应用开发、前端与全栈能力，并列出大模型应用开发、前端开发、AI 工具方向、全栈开发四类目标岗位。
能力概览条：以 AI / Frontend / Backend / Deploy 四维度快速呈现技术栈。
代表项目展示：主推 AIFriends 虚拟角色平台（大图 + 详情），并以卡片形式展示 AcApp 实时对战、KOF 格斗游戏、KOB 企业级后端等项目，每项均附线上 Demo 与源码链接。
能力矩阵：展示 AI 应用研发技能矩阵图，配合大模型、AI 工具、前端、后端与部署四类文字说明。
AI 协作作品集（Vibe Coding Lab）：集中链接 World Cup 2026、Roamio、重庆旅行卡片站、八股文口袋书、年度总结网站、中药炼丹台等 6 个 AI 辅助开发的原型项目。
简历下载：提供正式版 PDF（8 页）与图文作品集 PDF（9 页）两种格式下载。
响应式导航与 SEO：粘性顶栏锚点跳转、Open Graph / Twitter 卡片元信息，适配桌面与移动端浏览。
本人负责：需求梳理与信息架构设计、页面结构与文案编写、index.html 语义化布局、styles.css 视觉与响应式样式实现、项目截图与 PDF 资源整理、邮箱复制交互、部署配置与线上发布验证。
技术栈与架构：纯静态站点，HTML5 + CSS3，无前端框架、无构建工具；通过 CSS 变量统一设计系统，Grid/Flex 布局实现多栏与卡片结构；内联 JavaScript 调用 Clipboard API 实现邮箱复制；静态资源存放于 assets/，通过 Netlify / 帽子云静态托管部署，根目录 netlify.toml 指定发布目录为 site/。
实现亮点与难点：一是将 PDF 简历内容重构为可浏览、可跳转的单页 Web 体验，信息层级清晰；二是兼顾视觉设计（渐变标题、信号扫描动画、卡片 hover 动效）与 prefers-reduced-motion 无障碍支持；三是针对 620px 以下移动端做溢出检测与断点优化，确保技能矩阵图、长标题等不出现横向滚动问题；四是维护 Git 版本迭代，持续更新项目链接、技能矩阵图与简历 PDF，保证线上版本与投递材料一致。
评论