我是谁，现在在准备什么
大家好,我是阿菠萝。8 年前端开发,在北京互联网公司做过企业级 Web 应用,现在独立开发,准备下一次社招。
社招里我最头疼的一件事:面试官问"你做过什么",我拿不出一个能当场打开、能点能玩的东西。简历上写的项目都在公司内网里,脱敏讲出来干巴巴,对方根本感受不到技术含量。所以我决定给自己做一个 能长期挂在线上、打开即用、既能当作品集展示、也能当工具用的个人网站 ——这就是 拾光小站(noxkit.cn) 。
我做了个什么,想解决什么问题
它不只是一个"个人主页",而是一个 作品集 + 工具箱 :
- 作品展示 :80+ 个独立页面,覆盖效率工具、教育可视化、3D 与交互实验、经典游戏合集四大板块,面试时可以直接打开演示,不用口头描述
- 技术能力外化 :面试官看一眼就知道你会 Three.js、会 WASM 端侧 AI、会 Node 接口、会做设计系统——比写在简历里的"技能清单"有说服力得多
- 自建开放 API :诗词检索、随机图、随机色等接口对外可调用,证明后端与部署能力
解决的核心问题: 社招面试里"有东西可演示"这件事 。以前面试靠讲,现在面试靠点。
我是怎么用 TRAE 做出来的
坦白说,80 多个页面不是 TRAE 一次生成的,而是我和它 持续协作两个月 的结果。TRAE 在这个项目里扮演的不是"代码生成器",而是 一个能帮我收敛体系、打通链路的工程伙伴 。
第一件 TRAE 帮我做的事:把 80 个散页面收敛成一套系统
一个人做 80 个页面,最大的风险不是写不完,而是"每个页面都长不一样"。我先把配色、间距、圆角、阴影定义成一套设计语言,让 TRAE 按这套规范去统一所有页面的视觉语言。后一个模块就是"照着同一套标准再来一个",这才让单人产出 24 个主页面 + 几十个实验成为可能。
关键提示词(节选) :
“全站统一设计系统:主色 #2d3436,圆角 12px,卡片阴影 0 4px 12px rgba(0,0,0,0.08)。所有页面复用这套 token,不允许出现孤立的 inline 样式。弹窗打开时锁死背景滚动,关闭必须支持 ESC。”
第二件 TRAE 帮我做的事:端侧 AI 图像工具
Pic Workshop 里最硬核的部分是在浏览器里跑 4 个视觉模型。TRAE 帮我把 Transformers.js v4 的模型加载、pipeline 调度、revision 锁定整理成一套统一管线:
- ModNet 人像抠图
- Depth-Anything 深度估计
- DETR-ResNet-50 目标检测
- DETR-Panoptic 全景分割
全部device: 'wasm',推理在用户浏览器本地完成,图片不上传服务器。这部分是我最满意的——面试时直接打开页面,让面试官上传一张图,当场看到模型在跑,比任何简历描述都直接。
第三件 TRAE 帮我做的事:非功能链路
Nginx 反向代理、Node 接口服务的部署、ICP 备案后的域名解析排查,这些过去每项都要临时翻文档,现在边做边验证,把精力真正留给了产品本身。
成果展示
线上地址 : https://noxkit.cn/( 已上线,鲁ICP备2026031709号)
可演示模块 :
-
首页导航 → 24 个主入口一览
-
Pic Workshop → 上传图片,端侧 AI 抠图 / 深度估计当场跑
-
PoemSeek 诗词检索 → 40 万首诗词、1.3 万诗人,中英双语检索
-
Science-learning → 游标卡尺、三角函数可视化、托卡马克粒子模拟
-
经典游戏合集 → 俄罗斯方块 / 2048 / NES 模拟器等 12 款
-
开放 API → /api/random-image 等可直接调用
技术亮点 : -
80+ spa页面，零 CDN、资源全自托管,首屏秒开
-
端侧 AI 推理(Transformers.js + ONNX WASM),算力成本趋近于零
-
自建 Node 接口服务 + Fisher-Yates 洗牌队列实现不重复随机图
最后想说的话
以前我评估一个想法,第一反应是"这要做多久,值不值得"。做完这个项目后,第一反应变成了"先做一个能跑的最小版本出来看看"。TRAE 真正改变的不是我的编码速度,而是 我愿意去尝试的事情的数量。
社招面试的时候,我不再需要靠嘴讲"我会什么"——打开 noxkit.cn,点给他看就行。这大概就是一个开发者能给自己的,最好的简历。