王文博

前端开发工程师

安徽师范大学-软件工程/本科

南京市栖霞区马群

Arvin

个人简介

四年前端开发经验，三年地图相关功能开发（高德地图API、Cesium、Openlayers、Leaflet、Arcgis API for JavaScript等）经验，对动画相关有很多了解，对 Vue 以及周边生态系统有比较深入的了解，拥有丰富的实战经验，对前端开发领域拥有极大的热情与兴趣。

工作经历

中国科学院软件研究所 - 智能软件研究中心
南京

2024/10 - 至今（试用期6个月）

前端开发工程师

考试业务系统和其官网开发
    负责重构考试系统
  1. 1. 流水线搭建，CI/CD，代码规范，代码扫描，脚手架规范
  2. 2. 系统功能重构 ，优化代码结构，使用 Pinia 状态管理，使用 Vue Router 路由，使用 VueUse 等一系列最新周边生态工具。
  3. 3. 系统缺陷修复
    官网开发使用 Nuxt3
  1. 1. 使用 @nuxt/content 3.0.0 渲染文档（sqlite），
  2. 2. 使用 view-transition-api 给主题切换添加特殊动画。
  3. 3. 使用 Three.js 和 GLSL 给系统首页添加图片位移变形动画效果。
  4. 4. 使用 Hono.js 和 Drizzle ORM 开发简单接口。
  5. 5. 使用 Fuse.js 给全部文章添加检索。
  6. 6. 开发多种文档渲染组件样式，比如 ProseCode 、 ProseImg 和一些自定义组件。

南京莱斯信息技术有限公司
南京

2021/09 - 至今

前端开发工程师

消防一体化指挥平台 - 消防相关功能(https://njxfxcx.nj119.com.cn:8081/screen/)
    负责系统 Web 端架构设计以及开发工作：
  1. 1. 使用 Typescript 作为开发框架和语言。
  2. 2. 使用 Pinia，Vue Router 以及 VueUse 等一系列最新周边生态工具。
  3. 3. 使用 Element Plus UI 、Shadcn Vue UI、 UnoCSS 作为组件库以及样式解决方案。
  4. 4. 使用 高德地图 API 和 Cesium 作为二维地图和三维地图加载框架。
  5. 5. 使用 SVG、Anime.js 、GSAP、Vueuse motion 、帧动画开发页面交互效果。
  6. 6. 使用 Dexie.js 作为 IndexDB 框架。
    使用如下技术攻克一系列技术难题：
  1. 1. 二次封装 Cesium 工具类，统一管理加载要素类型及常用方法。主类定义要素常用操作，包装统一方法入口。子类继承实现操作，抹平不同要素可能使用的方法是不同的问题，提升开发效率。
  2. 2. 使用 Promise 开发复盘功能逻辑。一条复盘主线，有多个节点单线程运行，每个节点环节多个行为并行运行，同时每个行为下有子行为单线运行。实现思路：主线 Promise.all ，里面多个次线行为同时运行。次线行为 new Map() 存储，await 单线运行。当 Promise.all 运行成果，说明当前主线程的单个节点运行完毕，开始下个节点的动作。
  3. 3. 根据多个场景封装高德地图和三维地图初始化地图及上要素逻辑，更易复用。
  4. 4. 使用 Web components 开发地图要素弹窗组件，使用 Vue ce 和 Lit 。曾经用 createApp(component).mount。
  5. 5. 使用 帧动画 和 JS 动画（document.documentElement.animate、getAnimations、transitionend）开发动画交互效果。
  6. 6. 使用 BroadcastChannel 和 Draggable 和 动态组件开发自定义首页布局功能。
    负责辅助一体化系统的小程序、H5 和 Web 端系统的开发工作：
  1. 1. 使用 UniAPP 、Vue3、Typescript 作为开发框架。
  2. 2. 使用 Vant UI 作为组件库开发 H5 和微信小程序。
  3. 3. Web 端的信息采集系统作为一个二、三维地图管理系统，根据建筑类型增加增删改查功能。

中创软件工程股份有限公司
济南

2020/06 - 2021/03

研发工程师

开发管理系统模块功能
  1. 1. 使用 Vue2 以及 Element UI 作为开发框架和组件库。
  2. 2. 使用开源轮子开发管理系统模块功能。
  3. 3. 使用 HTML5 Draggable 属性自定义拖拽布局及保存使用，和拖拽碰撞排序。

专业技能

JavaScript
TypeScript
Vue/Nuxt
Pinia/Vuex
ElementPlus/NaiveUI/Headless UI/Shadcn UI
VueUse/Vue Router
Vitest/Vitepress
Vite
TailwindCSS/UnoCSS
GSAP/Anime.js/SVG 动画
ESLint/Prettier

个人项目

个人网站-Arvin

个人网站，在 Netlify 上部署

Vue3
TypeScript
Vite

超椭圆生成-Superellipse

超椭圆在线生成，可直接下载 SVG 或直接作为 `background-image` 或者 `mask` CSS属性使用

Side Project
TypeScript
Vue
超椭圆生成器

SVG格式工具-EncodeSVG

SVG encode 工具，复刻 `https://yoksel.github.io/url-encoder/` 工具

Side Project

粒子动画-Html2particle

canvas 粒子动画。可以使用 html2canvas 将 HTML 转为粒子动画，也可以不使用，使用直接固定的粒子。

Side Project
canvas
Html2canvas

拖拽工具-Dragblock

在业务开发中，总结出的开发工具。拖拽缩放移动和吸附线，以及边缘控制。

Side Project
Vue3
小工具

文章

除了放在个人网站的 /blog 模块外，还放在了掘金上

掘金
笔记