构建我的个人技能地图系统 SkillMap

在成为全栈开发者的过程中，我逐渐意识到自己需要一套结构化系统来管理和展示我的技能树。这不只是为了记录我会什么，更是为了明确哪些技能服务于哪些职业目标、哪些值得持续投入、哪些可以停止维护。于是我开始动手构建 SkillMap —— 一款面向终身学习者的技能管理工具。

💡 初衷：像 API 一样暴露能力

在 AI 加速发展的时代，我们每个人都在逐步 API 化。 我相信未来的知识工作者，需要像组件一样被调用、协作、组合。因此，我希望我的技能系统不仅仅是自我管理工具，更是对外展示的接口规范。

我希望我的技能系统具备以下特性：

• 结构化：每项技能都有标签、熟练度、目标关联
• 可复用：未来可发展为多用户的 SaaS 工具
• 可视化：在博客中图形化展示，清晰易读
• 可维护：随时间演进，持续记录成长轨迹

这不仅是一个「我会什么」的展示页，更是一个可调用的能力 API。

🔭 我的职业目标 SkillMap

我将未来想发展的职业路径拆成几个方向，每个方向都对应所需技能：

• 🛒 电商研发专家：Vue、React、Shopify、GraphQL、Node、Tailwind ...
• 🎮 前端游戏开发者：Phaser、WebGL、Canvas、PixiJS、GoDot、Cocos ...
• 🎨 独立设计师：Figma、Auto Layout、UI Kit、Photoshop 、 交互逻辑 ...

每个目标我会评估自己的掌握度，用雷达图或进度条展示当前差距。

🧱 技能标签体系

为了标记技能的优先级和生命周期，我设计了以下标签：

技能支持多标签绑定，也可关联多个职业目标。

🔨 技术实现：作为博客模块接入

我的博客是基于 Next.js 构建的，因此 SkillMap 初版作为一个子模块 /skill-map 嵌入其中：

• 技能数据使用本地 JSON / MDX 维护
• 使用 Tailwind CSS 渲染卡片式技能列表，支持筛选、排序
• 每个技能点可跳转到详情页，展示相关项目与目标关联
• CareerMap 页面展示我当前在各条职业路径上的匹配程度

未来计划通过 Supabase + 多用户身份系统将其产品化。

🔭 未来展望

SkillMap 最初是为我个人服务的，但我希望它能成为独立开发者、设计师、每个人都能用上的知识管理产品。像展示项目组合一样，展示自己的能力组合；像 API 文档一样，清晰暴露每项能力的状态。

我将在这个博客系列中持续记录从概念设计 → 技术实现 → 上线优化 → 多用户版本的完整过程。

📫 如果你也想打造属于自己的 SkillMap，欢迎留言交流或关注我的 GitHub / 博客后续更新。