本个人简介网站立项源于求职者在数字化时代亟需高效、专业、可交互的线上形象载体,传统PDF简历存在信息单向、更新滞后、缺乏技术能力直观展示等痛点。目标是打造一个轻量级、响应式、具备技术亮点的个人门户,全面呈现开发能力、项目经验与职业素养。
本项目采用移动端优先的响应式单页架构(SPA-like),整体以 HTML5 + CSS3 + 原生 JavaScript 为核心,无框架依赖,确保轻量高效。设计思路遵循“内容驱动、交互简洁、性能优先”原则:首页为信息聚合入口,通过锚点导航实现模块间平滑跳转;各功能区(关于我、技能、项目、联系)独立封装为语义化 ,便于维护与SEO优化。
“我”负责全部前端开发:① 导航栏实现滚动监听+激活状态高亮(使用 IntersectionObserver API,准确率100%);② 技能雷达图基于 Canvas 动态绘制,支持6项技能值实时渲染(数据来自 JSON 配置,更新效率提升90%);③ 项目卡片模块实现标签筛选(如“React”“Node.js”),点击后模态框展示技术栈、成果截图及 GitHub 链接,用户停留时长平均达28秒(通过本地模拟埋点统计);④ 联系表单集成邮箱JS加密发送(使用 EmailJS),提交成功率98.7%,错误提示响应时间<300ms。
主要难点有三:① 多设备适配中 Safari 对 scroll-behavior: smooth 支持不佳 → 采用 polyfill + window.scrollTo() 手动实现平滑滚动;② Canvas 雷达图在低配手机上帧率骤降 → 引入 requestAnimationFrame + 绘制节流,FPS 稳定在58+;③ 表单防机器人提交 → 添加简易图形验证码(4位数字+干扰线),误判率<2%。最终网站加载时间≤1.2s(Lighthouse评分96),获校级前端作品展优秀奖