For what it's worth, it's never too late, or in my case, too early, to be whoever you want to be. There's no time limit, stop whenever you want. - 本杰明·巴顿奇事
我是
专业切图仔，祖传十年切图，擅长页面还原度，响应式布局。
大龄程序猿，喜欢搬砖，喜欢折腾，喜欢尝试新事物和技术。
技能
努力打怪升级中，解锁点亮新技能
- Typescript
- React
- Less
- Sass
- Tailwind CSS
- Styled-components
- Webpack
- Next.js
- Gatsby
- Cocos Creator
- Miniprogram
- Uni-app
- Chrome Extensions
- Shadcn/ui
- Nestjs
- Ethers
工具
工欲善其事，必先利其器
- Vercel
- Netlify
- Adobe PS
- Adobe XD
- Sketch
- Figma
- Dragonbones
项目
做过的一些有趣的，有挑战性的项目
- React Chrome Extension
- React + Redux + Tailwind css + Webpack5
- 参考 MetaMask/metamask-extension 学习开发 Chrome 插件
- 使用 Tailwind CSS 进行页面布局，提高了页面的开发效率和一致性
- 使用 Webpack 打包静态资源，提高了代码的可维护性和重用性
- 使用 Zxcvbn 检测密码强度，提升了网站的安全性和用户体验
- 使用 Webextension-polyfill 存储数据，实现了欢迎页面状态区分
- 使用 Service Workers 和 events 实现插件和浏览器页面状态同步
- 使用 @metamask/eth-keyring-controller，实现类似于 MetaMask 的钱包功能
- 查看演示
- Bsports
- React + Tailwind css + NextJS + Vercel
- 多语言响应式Web3网站
- 采用 REM + Tailwind CSS 的方式，实现了 iPhone、iPad 和 PC 的响应式布局
- 使用 React Hooks 实现状态管理，提高了代码的可维护性和重用性
- 使用 APNG 和 SVGA 技术还原动画视觉效果，提升了网站的用户体验
- 使用 i18next 和 react-i18next 实现网站多语言功能，满足了不同用户的语言需求
- 使用 Web3-react 和 Ethers 技术实现连接钱包、合约调用和数据查询等功能
- 使用 NextJS 实现 SSR 和 RSC，优化了页面加载速度和 SEO 效果
- 使用 Vercel 托管部署发布项目，提高了项目的稳定性和可靠性
- 查看演示
- Bitgame
- React + Wepback5
- 多语言响应式Web3网站
- 使用 Monorepo 方式划分项目模块，并使用 Lerna 管理代码库
- 利用 Webpack5 Module Federation 新特性，实现微前端应用
- 通过 Commander 和 Inquirer，实现自定义命令行开发工具
- 使用 REM + 媒体查询方式，实现了 iPhone、iPad、PC 响应式布局
- 还原动画视觉效果，通过使用 APNG 和 SVGA 等技术，提升了网站用户体验
- 使用 i18next 和 react-i18next，实现了网站多语言功能
- 使用 Web3-react 和 Ethers，连接钱包并实现了合约调用、数据查询等功能
- 查看演示
- Lucky Bingo
- React + Redux
- 与钱包交互的活动小游戏
- 利用 React-Redux 进行状态管理
- 通过 Web3-react 和 Ethers 实现连接钱包、调用合约以及进行数据查询
- 应用 APNG 和 SVGA 技术，动画效果更精彩、文件体积更小、播放资源占用更优
- 查看演示
- LOEWE
- 微信小程序 + 京东小程序
- LOEWE的绝妙搭配营销活动
- 使用插件方式嵌入 LOEWE 小程序，实现即插即用的便捷体验
- 熟悉微信和京东小程序插件的完整开发和发布流程
- 喵喵乐园
- Cocos Creator
- 独立完成的放置收集类型H5游戏
- 使用 AssetManager 进行游戏分包和资源管理，确保游戏资源的高效加载和使用
- 使用 Websocket 实现客户端和服务器之间的双向数据传输，确保游戏数据实时性和稳定性
- 使用 Web Worker 进行喵咪碰撞、移动、行为等密集型计算，提升游戏性能和流畅度
- 使用 Cocos 构建钩子和 Imagemin，在构建时自动压缩图片，提升游戏性能和减少资源占用
- 查看演示
- 平安好医生步步夺金
- 微信小程序
- 从0到1，带团队完成的微信小程序
- 使用自研游戏框架和组件，迁移至小程序，实现快速开发
- 利用 Behavior 自定义组件，实现可控序列帧动画和音效播放组件
- 弹弹堂
- Layabox
- 从0到1，带团队完成的RPG类型H5游戏
- 基于 React 单向数据流、数据驱动和组件化思想，开发游戏框架，提高开发效率和代码复用性
- 基于 ECS 思想，开发 ECS 框架，将游戏战斗逻辑移入 ECS 系统，提高游戏性能和可维护性
- 使用 Webpack 进行编译打包，自动生成静态资源版号列表，实现游戏文件拆分和封包热更新，提升游戏加载速度和稳定性
- 利用 Web Worker 进行地图瓦片化和擦除、组件通信等密集型计算，解决战斗卡顿问题，提高游戏流畅度
- 查看演示
- 闲来长沙麻将
- Cocos Creator
- 从0到1，带团队完成的棋牌类型客户端游戏
- 使用 RequestAnimationFrame，利用屏幕刷新频率执行任务
- 使用 Redux，实现牌局记录和回放功能
- 使用 JSBridge，完成与 Native 的交互
- 熟悉 IOS 和 Android 的打包发布和上架流程
