Hi 👋, 我是霍永松
全栈工程师 / 架构师(Web3 & AI 方向)
👨💻 关于我 (About Me)
拥有 8 年以上前端及全栈开发经验,长期参与 AI 数据工程、Web3 多链生态、Chrome/Telegram 跨平台开发 等复杂业务场景。
- 主导或深度参与多个生产级项目与一款 NPM SDK,持续建设 pnpm + Turborepo Monorepo 工程范式。
- 参与落地 AI 大模型数据生产链路(多模态标注 / 浏览器端 OCR / 标注激励),具备从前端交互到服务端协作的工程化经验。
- 在 Web3 方向完成跨多公链、多钱包的产品交付(涵盖硬件冷钱包接入与合约类型化客户端自动生成),持续关注 AI Agent × Web3 链上数据融合方向。
- 日常以 Claude Code / Cursor / Codex 为主要编程辅助工具,在复杂工程场景下辅助提效。
💼 工作经历 (Work Experience)
🏢 华海同创科技有限公司 · Web 前端工程师
2018.06 — 2026.04 · 深圳 · Web3 & DApp 开发
核心成果
- 主导多个生产级项目(涵盖 AI 数据工程、Web3 DApp、Chrome 扩展、NPM SDK、TG 生态),统一 pnpm + Turborepo Monorepo 工程范式。
- 设计多链 Web3 集成层,封装异构公链(EVM / Cosmos / Tron / Avalanche 等)签名差异,对接主流钱包(MetaMask / WalletConnect / Ledger / Privy / Reown AppKit 等)。
- 构建 Chrome MV3 扩展 + Telegram Mini App 双生态:
Popup / Content / Worker 三端解耦 + MutationObserver SPA 注入 + Pixi.js / Konva 富交互渲染,支持多款应用交付。
- 沉淀跨框架工程范式:TypeScript 强类型契约 + Veaury 跨框架桥接 + Deno / grammy 调度体系(多类命令 + HMAC 验签 + i18n),统一前后端边界。
技术栈 Vue 3 React TypeScript ethers.js / viem WalletConnect Deno grammy Chrome MV3 Pixi.js Konva pnpm Monorepo Turborepo Cypress
🏢 三星品高装饰人才库 · Web 前端开发工程师
2017.12 — 2018.04 · 顺德 · 人才招聘公司
核心成果
- 主导家居人才招聘平台 renc.com 从 0 到 1 搭建,覆盖 PC + 移动端响应式适配。
技术栈 Vue 2 Vuex VueRouter Axios Lodash Webpack Node.js
🏢 广州奥梵信息科技有限公司 · Web 前端开发工程师
2016.03 — 2017.05 · 广州 · 外包公司
核心成果
- 主导多个企业站前端交付(文盈财税 / 欧富房地产 / 奥梵科技 / 广汽丰田微信项目等),沉淀 HTML5 + CSS3 + jQuery + Gulp 标准化工程模板。
技术栈 HTML5 CSS3 JavaScript jQuery Gulp PHP SEO
🛠️ 技能栈 (Tech Stack)
💻 前端工程 (Frontend)

- 核心体系: Vue 3 (多个大型项目) / React (18-19) / TypeScript (复杂类型建模与 API Client 自动生成)
- 工程化基建: Webpack / Vite 6 / Turborepo / pnpm workspace + Changesets
- UI 设计系统: Element Plus / Radix UI / Reka UI / UnoCSS / Vant
🌐 Web3 & 区块链 (Blockchain)

- 公链生态: 跨多异构链 (Ethereum, Cosmos, Tron, Avalanche, Arbitrum, BSC 等)
- 核心组件: ethers.js (v5/v6) / viem / CosmJS / TronWeb / Axelar SDK / TypeChain
- 钱包生态集成: WalletConnect / MetaMask / Ledger(USB, BLE, HID) / Privy / Reown AppKit
🤖 AI & 跨端扩展开发 (AI & Cross-Platform)
- 图形学与交互: Konva (高性能 Canvas) / Three.js / Pixi.js / Tesseract.js (私有化浏览器端 OCR) / GSAP
- 跨平台技术: Chrome Extension (Popup/Content/Worker 多端架构) / Telegram Mini App (完整业务闭环)
⚙️ 后端 (Backend)

- 服务端运行层: Node.js (Express) / Deno (Oak, grammy) / GraphQL (Apollo)
- 云原生部署: Docker
🔧 工具 & 开发环境 (Tools)

- AI 辅助编程: Claude Code / Cursor / Codex(日常主力)
- 版本控制 & CI/CD: Git / GitHub Actions / Docker
🏆 核心项目实战 (Core Projects)
1. 🚀 Base 链去中心化代币启动平台
2024.08 — 2026.01 · 领域: Web3 Launchpad / 文化币 & Meme 币 | 形态: pnpm Monorepo 多子应用
基于 Base 网络的去中心化代币启动平台,专注文化币 / Meme 币 / 社区驱动型数字资产的无许可发行与交易,配套 PC + 钱包内 DApp 双端访问。
- 核心贡献:
- 落地代币发现 / CreateToken / TradingToken / MyDataToken / Exit 五大核心路由,PC 端 + 钱包内 DApp 通过 Farcaster MiniApp SDK 自动切换。
- 集成 TradingView 自定义配置 + 实时 WebSocket 行情 + ECharts 双引擎,覆盖 K 线、深度、链上数据可视化。
- Ethers v5 + viem + viem/Privy 双栈合约调用打通 Base 链登录与签名,配合 TypeChain + GenAPI 自动生成类型化合约客户端与 HTTP 客户端。
- 搭建 pnpm monorepo;UI 层混合 Element Plus + Naive UI + Reka UI + UnoCSS,配合 GSAP 强化打新/退出动效。
- 标签: Vue 3 TypeScript Vite 5 Pinia UnoCSS Element Plus Naive UI TradingView ECharts ethers v5 viem Privy Farcaster MiniApp pnpm
2. 🚀 AI 数据众包协作平台 (大型 Monorepo)
2024.08 — 2025.12 · 领域: AI 基础设施 / 数据工程 | 形态: 多子应用多包
面向大模型训练的数据标注核心工作站,支持多模态(文本/图像/音频)并结合 Web3 Token 经济模型激励流动性。
- 核心贡献:
- 基于 Konva 构建底层高频 Canvas 标注引擎,支持复杂骨架点/多边形截取,相较传统 SVG 方案更适合高频交互场景。
- 前置 OCR 解析能力,集成 Tesseract.js 直接在浏览器端完成识别,保护数据隐私并减少云端请求开销。
- 设计高内聚低耦合的 pnpm Monorepo 边界策略,提升跨终端组件复用效率。
- 将 TypeChain 强类型约束注入全栈与智能合约交互,降低 ABI 参数不一致带来的运行时风险。
- 标签: Vue 3 Konva Tesseract.js viem Vite
3. 🔗 跨框架 Web3 认证 SDK 适配层
2025.06 — 2025.12 · 领域: Web3 身份认证 / 开源 NPM 库 | 形态: Vue + React 双端 Turborepo 库
自研跨框架适配层库,解决 Web3 社交/钱包认证服务官方只提供 React SDK 而 Vue 业务方无法直接复用的痛点。
- 核心贡献:
- 用 Veaury 2.6(applyPureReactInVue) 把 React 版 Provider 与 Login 弹窗桥接为 Vue 组件,包裹
@privy-io/react-auth 渲染容器,避免业务方重写认证 UI。
- 设计 Pinia 三层 store 抽象:sdk(原始 wallets / activeWallet)/ controller(userStatus / walletStatus 业务态机)/ inside(providerConfig + localStorage 持久化),与 genapi 自动生成的 OpenAPI 客户端解耦。
- 通过
@funcx/privy-config 进一步封装 @base-org/account + viem + @binance/w3w-ethereum-provider 多钱包检测、默认列表与 Farcaster MiniApp SDK 适配。
- 修复 v1.1.1-2 外部钱包连接与登录回调时序 bug,建立
LOGINED/LOGOUT × DISCONNECTED 状态组合机;monorepo 同步保留 React 端对照 demo 便于回归基线。
- 标签: Vue 3.5 React 19 Veaury 2.6 Pinia 3 Vite 7 @privy-io/react-auth viem Turborepo Changesets
4. 🧩 多链统一连接基建 SDK
2023.06 — 2025.04 · 领域: Web3 核心基建 | 形态: NPM 团队内部级核心开源库
针对 Web3 dApp 连接层碎片化的行业痛点,独立抽离并封装多网络、多钱包接入桥接方案。
- 核心贡献:
- 使用 Turborepo 维护多个原子级模块,串联 Changesets 管理版本发布与 Changelog 维护。
- 产出近千行核心调度类引擎,封装内部跨异构主链(Cosmos、Tron、EVM等)的底层签名调用差异(如
eth_requestAccounts, cosmos_signAmino)。
- 打通浏览器环境下的硬件通信限制,实现对 Ledger 实体设备
USB/BLE/HID 多通信通道协议的覆盖。
- 配套 Cypress 跨钱包全链路 E2E 回归 + VitePress 内部文档站点统一托管,pnpm + Turbo + Changesets 自动化发布流水线。
- 标签: TypeScript pnpm Workspaces Vitest ethers.js
5. 🌐 Web3 链游玩家浏览器扩展
2024.01 — 2025.04 · 领域: Chrome MV3 扩展 / Web3 GameFi | 形态: pnpm + Turborepo Monorepo
面向 Web3 链游玩家的浏览器扩展,把社交平台(Twitter/X)推文互动、链上养成、道具宝箱与项目代币奖励串成一体化 GameFi 体验。
- 核心贡献:
- 落地
popup + content + background + crx 四端解耦的 MV3 架构,通过 chrome.runtime.Port + storage.onChanged 实时向 content 广播状态,三端职责清晰可独立迭代。
- content 端用 MutationObserver 监听 Twitter SPA(#react-root)路由变化并扩展发推入口,结合 OAuth 注入到目标站点完成会话校验。
- 养成/动画面板用 PIXI.js 7 + GSAP 3.12 渲染复杂动效,Element Plus 承接背包/仓库/商店表单交互。
- 搭建 pnpm + Turborepo monorepo,用 @genapi 自动生成多套 HTTP 客户端,ethers 合约 + The Graph GraphQL 双链路查询链上数据。
- 标签: Vue 3 Vite 5 Pinia Element Plus PIXI.js 7 GSAP UnoCSS Turborepo ethers The Graph
6. 📊 社交推文 AI 标注浏览器插件
2024.08 — 2024.11 · 领域: AI 数据工程 / Chrome MV3 扩展 | 形态: pnpm + Turbo Monorepo
面向 AI 训练数据生产的浏览器扩展,注入 Twitter/X 与目标站点,把推文 AI 标注(情感分析 / 主题分类 / 命名实体识别)、XP 积分激励、Web3 钱包提现串成"标注 → 积分 → 链上奖励"AI 数据众包闭环。
- 核心贡献:
- content 端向 X/Twitter 推文注入标注面板,覆盖情感分析 / 主题分类 / 命名实体识别三类打标,配套 mark.js + GSAP 完成文本高亮与动效。
- 设计按 basic 5 / standard 10 / expert 50 XP 难度分级激励,单推文额外 +10 XP、上限 +500 XP,结合 TaskList / XpLevel 实时进度条强化任务驱动感。
- popup 端集成 2FA 安全登录、钱包连接与提现记录视图,通过合约 ABI 抽象 + wallet.ts 实现链上代币奖励结算。
- 搭建 pnpm + Turbo monorepo,三端(content / background service worker / popup)通过共享抽象打通消息与存储 API。
- 标签: Vue 3 TypeScript Vite 5 Pinia Element Plus UnoCSS mark.js GSAP ethers/viem Chrome MV3 Turbo
7. 🚀 跨平台全栈生态 (Telegram Bot + Mini App 矩阵)
2023.08 — 2024.03 · 领域: Telegram Mini App / Bot 生态 | 形态: Telegram Web App (TWA) + 微服务中台
面向 Telegram 开放平台,定制去中心化互动社交系统与游戏生态(例如养成类游戏经济模型)。
- 核心贡献:
- 采用 Deno 搭配 Oak 框架作为 Bot 调度节点,利用内置 TypeScript 安全沙箱和拦截装饰器(
@Logger/@Trycatch)构建中间件处理链路。
- 小程序侧引入 Pixi.js / Konva 组合构建富交互界面(如大型跨端触控操作与游戏农场调度渲染)。
- 通过一套 postcss 配置层适配 Telegram iOS / Android / Windows 客户端内嵌 WebView 布局差异。
- Bot 端用 grammy 编排多类命令 + 私聊/Inline/Callback/Contact 多类消息统一处理,HMAC-SHA256 initData 验签防 WebAppData 伪造,grammy-i18n 完整多语言中间件链。
- 标签: Deno grammy Pixi.js Vue/React
8. 🎰 Web3 预测 DApp 前端
2022.05 — 2023.06 · 领域: Web3 DApp / 链上预测市场 | 形态: pnpm 多构建工具链 Monorepo
覆盖赛事大厅、下单处理、自建事件、Membership NFT、个人中心全链路的 Web3 链上预测 DApp,同一套 common workspace 并行部署到两条公链。
- 核心贡献:
- 落地多业务模块:赛事大厅(多主题入口)/ 单/串/系统盘口 / 链上交易跟踪 / CreateEvent 用户自建预测 / Membership NFT 铸造展示 / Mine 个人中心(History / Resolution / Statistics / Task 任务奖励)。
- 多链并行架构:Vite(主链)+ Vue CLI 5 webpack(多子链)共用 common workspace 复用基础能力。
- 自研 abi-types-generator 脚本一键生成多份合约 TS 类型,ethers v5 + WalletConnect v1 + MetaMask 多钱包接入。
- 视觉层用 PIXI.js v7 老虎机/动画、GSAP Business + Lottie 动效、ECharts + Highcharts 图表;资源层用 SVG sprite + 雪碧图优化;Dockerfile + docker-compose 镜像编排。
- 标签: Vue 3 TypeScript Vite Vue CLI 5 Pinia Element Plus UnoCSS ethers v5 WalletConnect v1 Apollo GraphQL PIXI.js 7 GSAP Lottie ECharts pnpm
🎯 核心技术攻坚 (Core Technical Breakthroughs)
| ⚔️ 难题场景 (Challenges) |
🛡️ 解决方案 (Solutions) |
| ⚡️ 多链签名协议割裂 |
设计统一 Connector 抽象层,以单一 API 封装 eth_requestAccounts / cosmos_signAmino / tron_requestAccounts 等异构公链签名差异,配套 Cypress 全链路 E2E 回归,降低上层业务切链成本。 |
| 🔐 硬件钱包跨通道接入 |
处理浏览器安全沙箱下的硬件通信限制,同时打通 Ledger 的 USB / BLE / HID 三种物理通信协议,覆盖冷钱包常见接入场景。 |
| 🛡️ Telegram WebApp 验签防御 |
基于 HMAC-SHA256 initData 验签拦截伪造 WebAppData 请求;grammy 编排多类命令 + 私聊/Inline/Callback/Contact 多类消息统一处理,grammy-i18n 完整多语言中间件链。 |
| 🧱 跨框架生态割裂 |
通过 Veaury 桥接层在 Vue 3 中直接挂载 React 19 组件树,使 Privy(React 专属 Web3 认证库)无缝运行于 Vue 项目中。 |
| 🏗️ 大型 Monorepo 边界策略 |
维护多个子应用与原子模块的 pnpm + Turborepo 体系,TypeChain + GenAPI 自动生成类型化合约 / HTTP 客户端,沉淀可复用的工程范式。 |
| 🧩 Chrome MV3 SPA 注入 |
popup + content + background 三端解耦 + chrome.runtime.Port 实时状态广播 + MutationObserver 监听 SPA 路由(#react-root)扩展原生发推入口,接入 Web3 业务能力。 |
| 📱 多端布局碎片化 |
仅用一套 postcss-px-to-viewport 配置且无媒体查询,跑通 Telegram iOS / Android / Windows 客户端内嵌 WebView,消除平台差异。 |
🎓 教育经历 (Education)
广东工程职业技术学院
2013 — 2016 · 大专 · 软件工程