个人作品集:https://fengpupu.cn

github:https://github.com/fengpupu

微信: mingming__yue

专业技能

• 熟练掌握 HTML5 ，CSS3 ，Less ，ES6,可快速搭建前端界面。
• 熟悉 Vue 技术栈(Vue2 ，Vue3 ，Vue-Router ，Vuex ，Axios)，熟悉其原理，并拥有实际开发经验。
• 熟悉 React(Redux Toolkit ，React Router)。
• 熟悉 React Native 跨端框架( https://github.com/fengpupu/react-native-fengpu-demo)。
• 熟悉前端可视化。熟练掌握 Echarts ，能灵活运用 Echarts 。
• 熟悉 Canvas ，曾运用 Canvas 实现动画、截图工具、手写板等。熟悉 ThreeJS ，并曾经在项目中实践过 3D 交互地图，3D 柱状图。了解 WebGL 。
• 熟悉 Webpack ，了解 Vite 。熟悉浏览器工作原理，浏览器安全。了解 HTTP 、HTTPS

项目经验

盐城公积金大屏 2023.04 - 2023.06

前端开发 (Vue2 ，Vuex ，Vue-Router ，Axios ，Echarts)

项目描述:

这是一个大屏展示项目，需要对原有的大屏进行升级。包括整体风格、图表样式、大屏内容的调整、 添加动画效果以及适配新设备分辨率(从 1920x1080 到 11520x1920)。

责任描述:

• 负责大屏整体风格升级、图表样式升级、动画添加和大屏内容调整的前端开发工作。
• 设计并实现大屏适配方案，适配方案要求开发时间短并保证大屏在新旧设备都正常显示。

项目成果:

• 完成大屏升级。包括整体风格升级、Eacharts 图表样式升级和大屏内容调整。
• 设计并实现了动画的添加。添加 CSS 动画:切屏时，元素从屏幕边缘平滑移动渐现;JS 动画: 利用定时让图表进行进行自动切换，实现 Echarts 地图的弹框动画;Canvas 动画: 利用三次贝塞尔曲线实现小球按曲线轨迹流动、增加粒子运动动画。增强了大屏的视觉效果。
• 设计并提供了最省时的大屏适配方案。

移动平台产品

前端开发 (Vue2 ，Vuex ，Vue-Router ，Axios ，Vant)

项目描述:

此项目是服务于银行柜员、住房公积金中心柜员的移动业务办理和方便中心领导处理审批的系统。为 了满足不同角色不同场景的需求，分别开发了 PC 端与移动端。

责任描述:

• 设计适配方案，实现手机端和 PAD 端的页面适配。
• 设计并开发自动适配手机端和 PAD 端设备的复杂用户界面和组件，提高页面开发效率。
• 设计并实现权限管理。
• 将原来在 PC 端的数字看板大屏嵌入移动平台，并新增可编辑且能存储至相册的截图功能。
• 在 PC 端开发设备位置跟踪可视化的功能。

项目成果:

• 设计并实现了适配方案，可以使页面在 PC 端、PAD 端和手机端自由切换。
• 编写复杂的经办界面和组件，并实现了自动适配手机端和 PAD 端设备。因自适应组件的实现，提高了页面编写效率。
• 设计并实现了产品的权限系统。在权限系统的作用下，用户可以根据角色的划分，对应到不同的页面权限限，有不同的菜单目录。
• 成功将数字看板大屏嵌入移动平台，并提供可编辑、能存储至相册的截图功能。
• 利用百度地图实现了设备位置跟踪的可视化。

重庆 3D 大屏

项目描述:

本项目旨在提供数据治理和数据共享的统计数据可视化展示。并为了提升用户体验，采用了丰富的动画效果。为更好地展现地理位置相关数据，实现了针对重庆和四川的 3D 地图，并将两地数据交互体现于地图上。

责任描述:

• 负责 3D 技术选型、负责 3D 地图的开发，并使地图能支持数据交互。
• 图表会相对复杂，要求灵活运用 Echarts 展示数据。
• 在适当的地方添加动画，增强大屏的视觉吸引力和互动性。

项目成果:

• 用 ThreeJS 实现重庆和四川的 3D 地图，并支持数据交互。
• 灵活运用 Echarts 实现了复杂图表，并在适当的地方添加了动画，比如排名变换动画等。
• 保证了页面的质量和稳定性。解决了 ThreeJS 内存泄露问题，保证了项目的顺利运行。

react-native-fengpu-demo

前端开发(React Native ，React ，react-navigation...) 项目地址

项目描述:

基于 React Native 实现的各种小组件集合。

项目成果:

• 计时器:提供启动、停止、记录时间段和重置的功能。实践组件拆分、状态管理。
• 移动卡片: 实现拖拽功能、布局动画和元素层次动态管理。对于 PanResponder 有深入实践，熟悉其生命周期。并且因其复杂的状态系统，使用 useState 和 useRef 进行了多种状态管理的实践。在实践中深刻理解了函数组件中状态管理的动态性和对组件行为的控制能力。应用 LayoutAnimation 来平滑地过渡卡片位置的调整，增强用户体验。
• 虚拟列表: 支持动态数据加载、下拉刷新、加载更多以及自定义滚动动画。在实现虚拟列表时，存在多手势冲突问题，研究了手势冲突的解决方案。在实践过程中，遇见事件未传递问题，在深入学习 RN 事件响应者模型之后，得以解决。
• 天气:通过使用 swiper 组件展示不同城市或地区的天气情况，并支持用户通过滑动切换。

教育经历

西南石油大学(双一流) 本科 计算机科学与技术 2015.09 - 2019.06

工作经历

四川久远银海软件股份有限公司

前端工程师 住房金融行业部-创新产品部 2021.06 - 2023.09

• 遵循公司前端开发规范，完成前端开发及调试工作，并能保障代码质量。
• 负责复杂页面开发，如可视化大屏，3D 页面等;参与前端技术选型与规范制定。
• 负责抽取，封装前端公共组件。

西瓜创客

Python 助教 2020.06 - 2020.10

• 解答用户课程疑问、批改用户作业。
• 审核新上线的产品内容是否有误。与用户或者客户沟通，收集用户或客户对于产品的反馈。

个人评价

在工作上，我认真负责，积极沟通，并且愿意接受挑战，完成了很多个部门第一次。比如由我负责并开 发的 3D 大屏是我们部门的第一个 3D 大屏;由我寻找适配方案的移动端产品也是我们部门的第一个移动端产 品。这些经历让我扩宽了我的前端视野，并学会如何在压力下调整我的心态，积极沟通和解决问题。 在生活中，我积极乐观，相信自己，并不断努力成为一个更好的自己。 我喜欢思考和尝试新事物，在 2022 云原生编程挑战赛 1:服务网格数据面应用服务访问 QPS 和延时的优化 的比赛中获得了季军的好成绩。https://tianchi.aliyun.com/competition/entrance/531983/rankingList ( 噗噗噗战队)