你好

我是游乐

一个喜欢设计的前端开发者

关于我

Do you want to know me?

Who am I?

通过在学校的项目开发实践中,我学习巩固了HTML&CSS的基础知识,对jQuery和原生JS的运用也基本掌握,具备了基本的前端开发者素养。

而在前面两年的前端开发工作中,深入对UI库(如Bootstrap/WeUI等)的使用,模板(如doT)和框架(如Vue)的运用,并逐渐有了组件化的意识,使我对开发整体有了更清晰的概念,

让我具备了基础业务开发的能力,包括有着与后端(JAVA/Go/NodeJS)调试交互的基本素养。

中间两年的工作中,工作中的项目均采用 Vue、React 开发,加深了我对 MVVM 框架的运用理解,形成了自己的一套开发基础模板;同时业务的特殊性对 Websocket 及 Canvas 等方面也有所涉猎。

后面两年的工作中,从单兵作战到团队协作,无论是 code review 还是组内定期分享,让我对技术有一个不同的视角切换,也接触了更多流行的技术框架,上下游协作也规范且体系化。

MY SKILLS

编程技能

Vue
掌握
React
熟练
NextJS
熟练
TypeScript
熟练

设计技能

Photoshop
熟练
Lightroom
熟练
Premiere
了解
Axure
了解

Sass 项目

(电商售前、售后 ToB / ToC 环节)





B端侧(商家管理后台)

项目概述
  • 搭建 BFF 层进行数据整合,采用 Koa + Graphql
  • Jest 测试保证项目 95% 以上的覆盖率
  • 基于 HookForm 校验库,封装一套 Polaris UI 的表单控件
  • 封装高阶组件,颗粒度地对具体组件进行权限控制,涵盖按钮、选择框、页面级别,对不允许使用的功能禁用其点击操作、增加遮罩样式覆盖、增加升级文案提示等
  • 使用 monorepo 抽取公用组件作为 sdk 给多个业务使用,作为提供方,需要考虑业务方的使用场景,对于经常做业务场景有一定的视角切换

开发的具体业务包括 Affiliate (会员营销)、Dropshipping (一件代发)、Postmen (自动打物流单)、Returns (退换货),深度参与电商各个环节的平台开发,对电商业务有较好了解;对 Shopify 平台的开发有一定认知,熟悉 Shopify UI 交互流程。








C端侧(主 Shopify 平台)

项目概述
  • 结合 Shopify 提供的 proxy 特性,将 Next.js 框架的服务端渲染项目,内嵌于 Shopify 商家店铺主题中,给到用户一致性的体验。
  • 以 Script tag 的形式,在 Shopify 页面嵌入 shadowDOM 应用作业务特性的插件开发,如在换货流程中,用户可在 returns 平台和商家 Shopify 店铺中无缝切换进行交互。考虑插件的轻量化,使用 SolidJS 开发。
  • 接入 JWT token 流程,前端提前拦截 token 过期及无 token 的无效请求。
  • 接入 Recaptch 校验、Stripe 支付等流行的第三方服务。

另外参与官网增长的开发,结合 storyblok 的 CMS 系统进行官网组件开发和数据存储及获取。

交易所项目

(由于项目关闭,在此做图片展示)





Vue-BIGU

项目概述
  • PC端FormItem、Tab、Message等UI基础组件库的开发,移动端使用Vant库。
  • 交易信息在运用Websocket的基础上,以Tradingview作为框架开发k线,以原生Canvas形式展示深度图。
  • 二次封装axios,拦截重复请求、异常统一处理,使逻辑适合项目的业务场景。
  • 封装公用工具库,如计算层面的数据精度,交互层面的加载流程。
  • 提供国际化的多语言支持。

数字资产交易平台,主要由币币交易、出入金交易、个人中心等业务组成








React-Benlty

项目概述
  • 使用antd作为UI库,用Less进行样式编写
  • 状态管理采用Redux及其中间件Redux-saga开发
  • 国际化的多语言支持
  • 后台系统采用Typescript规范代码行为

数字资产交易平台,主要由合约交易、期权交易、后台管理等业务组成

H5项目

姐妹战疫安心行动

项目概述
  • 使用Swiper完成H5丰富的动画效果
  • 使用Canvas相关工具实现照片与贴图的合成
  • 使用“字蛛”爬取文本生成字体文件,作为网页展示艺术字体的方案

这是一个志愿者项目,
关注着在抗疫过程中被人忽略的前线女性团体,
女性的生理用品一度不被列为必需物资,
主题展示了一期为女性医护人员输送安心裤、卫生巾等的阶段性成果,
H5增加了贴图合照的趣味互动,
同时宣传了拒绝月经羞耻的理念。

展会项目

(由于需在微信打开及部分展会登记通道已关闭,在此做图片展示)





展会观众预登记系统

项目概述
  • 由于是在微信端进行的操作,选用了微信官方的 WeUI 库进行风格统一。
  • 登记流程通过模板化的配置,可以快捷进行栏目调整,如是否进行手机验证,先进行信息填写抑或先进行问卷填写,信息填写包含的信息项等。

观众通过在手机上进行预登记,并在展会当天出示手机条码进行验证进场。








展会展商端自助系统(移动端)

项目概述
  • 实现为 Vue + Mint / iView
  • 功能包括但不限于展商人员登记,展位申请,车证申请,邀请函制作等。
  • 通过路由懒加载、打包依赖转为CDN引入等方式,提升页面渲染速度。

展商通过自助系统查看数据,方便管理展位等情况








后台管理系统(PC端)

项目概述
  • 前期版本为 jQuery + Bootstarp 实现
  • 后期重构为 Vue + Element
  • 因为功能愈来愈多,包括但不限于基础CRUD、可视化流程配置、对外开放的服务台操作等,
  • 因此通过重构解放DOM的繁杂操作,提高开发效率,
  • 同时也方便组件化的开发,进行了搜索栏、工具条、表格、表单等数十种的组件抽离。
  • Vue的双向绑定也使可视化配置得到快捷实现。

客户通过后台查看及操作数据,也可进行观众端/展商端的可视化项目配置

作品集

Do you want to know me?

项目经验

基于响应式的高校网站建设

项目概述
  • 蓝色为主,辅以绿色的UI设计
  • 利用Bootstrap框架实现多分辨率的响应式布局
  • 考虑到高校的办公系统,兼容至IE6

作为主要负责人,前期组织进行资料的调研,对比国内外高校网站的现状,后期全程参与了页面的设计及负责代码编写。

项目链接 /hs/index.html
关键词

高校,网站,响应式

  • All
  • 网页实现
  • 网页设计
  • 界面设计
  • 海报设计

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to book.There are many variations of passages of Lorem Ipsum available, by injected humour.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to book.There are many variations of passages of Lorem Ipsum available, by injected humour.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to book.There are many variations of passages of Lorem Ipsum available, by injected humour.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to book.There are many variations of passages of Lorem Ipsum available, by injected humour.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to book.There are many variations of passages of Lorem Ipsum available, by injected humour.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to book.There are many variations of passages of Lorem Ipsum available, by injected humour.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to book.There are many variations of passages of Lorem Ipsum available, by injected humour.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to book.There are many variations of passages of Lorem Ipsum available, by injected humour.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to book.There are many variations of passages of Lorem Ipsum available, by injected humour.

  • “如果自己就是潮水的一部分,怎么能看见潮流的方向呢?你只能永远保持质疑。”

    @黑客与画家
  • “我们真正应该在意的是开明和好奇的态度,而非判断。”

    @作家访谈录
  • “容器虽‘空’,但正是‘空’的,才能收藏东西。这样就其拥有的可能性来说,非常丰富。”

    @设计中的设计

联系我

-->