作为一名专注 Vue 企业管理后台的前端开发者，我在程序员客栈、远程协作等场景下需要一份「专业、可信、能直接转化咨询」的线上名片。传统简历 PDF 难以展示视觉审美、交互细节和项目案例结构；社交平台主页又缺少完整的服务说明与合作入口。
因此发起「知远个人站」项目：面向有 Vue 管理后台开发、老项目维护、数据看板、远程协作需求的中小企业技术负责人与产品经理，解决「找不到靠谱前端、沟通成本高、无法快速判断交付能力」的痛点。
站点以 B 端开发者接单场景为核心，将 8 年 Vue 业务系统经验、代表案例、服务范围、合作方式与联系方式整合在一页式体验中，让潜在雇主在 3 分钟内完成「了解背景 → 查看案例 → 发起咨询」的完整路径，降低首次沟通门槛，提升接单转化效率。
一、首页 Hero 区
动态打字机展示核心定位（Vue 管理后台 / B 端交付 / 远程协作），配合在线状态徽章与双 CTA（查看服务、咨询合作），首屏即传达专业形象与合作意愿。
二、关于我模块
个人简介、8 年经验与 30+ 项目交付数据（数字滚动动画），以及 Vue2/Vue3、Element UI/Plus、ECharts 等技能标签，帮助雇主快速建立信任。
三、服务模块
四大接单方向卡片：Vue 管理后台模块开发、老项目维护/二开、复杂表单/列表/图表页、技术调研与方案落地；每项含适用场景、周期与需客户提供的信息，降低沟通成本。
四、代表案例模块
脱敏展示 4 个 B 端项目（研发流程系统、隐私计算平台、政务预算系统、智慧园区可视化），采用「职责 / 技术 / 结果」三段式结构，突出真实交付能力。
五、工作经历时间轴
按时间线展示 8 年职业路径，含当前工业科技企业研发线前端职责，增强履历可信度。
六、联系与合作模块
集成 Web3Forms 异步联系表单（姓名、邮箱、合作类型、项目描述），支持一键复制邮箱/微信、Toast 反馈；展示合作方式、可接时间与 24h 响应承诺。
七、交互与体验
鼠标光晕、卡片/头像 3D 倾斜、滚动视差、星光粒子、导航栏滚动隐藏、移动端汉堡菜单、平滑锚点跳转；全站响应式适配，支持键盘导航与「减少动画」无障碍偏好。
在线地址：http://49.232.134.224:8080
个人职责（独立全栈前端）：
独立完成需求梳理、信息架构、视觉风格、页面开发、交互实现、表单对接与上线部署（含 ICP 备案展示）。从「接单转化」目标反推内容结构，将简历式信息重构为雇主视角的服务展示页。
技术方案：
采用 HTML5 语义化 + Tailwind CSS（CDN）+ 原生 JavaScript 的零构建静态方案，无需 Node 打包即可部署至任意静态托管，加载快、维护成本低。样式层使用 OKLCH 色彩与 CSS 变量统一主题；交互层基于 IntersectionObserver、requestAnimationFrame 实现滚动Reveal、3D 倾斜、数字计数等动效，并对 scroll 事件做 throttle/passive 优化。
亮点与难点：
1. 卡片 3D 倾斜：用 pointer 坐标 + RAF 平滑插值，解决 transform 边缘抖动与 scroll 时 rect 偏移问题；
2. 联系表单：对接 Web3Forms API，异步提交 + 加载/成功/失败状态反馈，含 botcheck 防 spam；
3. 复制功能：Clipboard API 降级至 execCommand，兼容非 HTTPS 环境； 4. 无障碍：prefers-reduced-motion 关闭动画、表单 aria、Toast role="status"。
成果： 上线可用的个人接单官网，PC/移动端体验一致，首屏即传达「Vue B 端 · 稳定交付 · 可远程」的核心卖点。
评论