Trading CV - 一种不同且互动的方式来分享你的技能.
发布: (2026年1月31日 GMT+8 01:04)
3 min read
原文: Dev.to
Source: Dev.to
概览
此作品是为 Google AI 主办的 新年新你作品集挑战 所创作。它展示了一个使用股票市场仪表盘（Bloomberg Terminal、TradingView）视觉语言来呈现职业经历的作品集。用户不再查看静态 PDF，而是与 “资产”（技能）互动，查看 “市场表现”（职业成长），并阅读 “分析师报告”（案例研究）。
关键设计原则
- Google Stack: Antigravity 和 AI Studio
- 主题: 暗色模式，带有赛博朋克/金融美学
- 交互: 实时反馈，脉冲指示器，玻璃拟态
- 数据驱动: 每个 UI 元素都代表超过 9 年经验中的一个数据点
技术栈
| 类别 | 技术 |
|---|---|
| 核心框架 | React 与 TypeScript（Vite） |
| 样式 | Tailwind CSS（实用优先） |
| 动画 | Framer Motion（流畅过渡、模态效果） |
| 数据可视化 | Recharts（职业表现图表） |
| 图标 | Lucide React（轻量图标） |
应用结构
可视化模块
- 可切换面积图 & K 线图 – 可视化职业时间线与 “市场价值”（角色资历/影响）。
- 订单簿式列表 – 显示代表已进入的主要行业的 “股息” 标记。
- 滚动新闻条 / 社交动态 – 突出近期成就和更新。
- 带悬停效果的卡片网格 – 在嵌入式模态视图中打开详细的 “报告”（案例研究）。
数据模块
- 悬停提示 – 显示每个角色的技术栈使用情况和公司徽标（通过 Clearbit API）。
- 技能排名 – 按 “成交量”（经验年限）和 “深度”（熟练程度）对技能进行排名。
- 资产 – SQL、Python、Power BI、RPA 等。
内容模块
- 时间顺序历史 – 角色、公司以及高影响力要点（例如 “+20 % 效率”）。
- 教育、认证、联系链接 – 简洁的专业背景。
- 页脚 – 快速访问 GitHub、LinkedIn 和电子邮件。
交互功能
- 交易界面感受: 整体体验呈现为交易仪表盘，将职业里程碑转化为市场风格信息。
- 嵌入式 Power BI 报告: 可点击的画廊图片直接在应用内打开交互式 Power BI/Fabric 仪表盘。
- 细腻动画: Framer Motion 为整个界面提供平滑、吸引注意的动画效果。