-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
551 lines (518 loc) · 28.6 KB
/
index.html
File metadata and controls
551 lines (518 loc) · 28.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>叶继伟的前端简历</title>
<!-- Stylesheets -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<!--Favicon-->
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="description" content="叶继伟的前端简历 — 前端工程师，擅长 Vue/React/TypeScript，具备 NodeJS 后端经验。作品包括组件库、企业级后台等。">
<meta name="theme-color" content="#ffffff">
<!-- Preload local fonts to improve first render -->
<link rel="preload" href="fonts/fontawesome-webfont.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="fonts/Flaticon.woff" as="font" type="font/woff" crossorigin>
<!--[if lt IE 9]><script src="js/html5shiv.js"></script><![endif]-->
<!--[if lt IE 9]><script src="js/respond.js"></script><![endif]-->
</head>
<body>
<div class="page-wrapper default-version">
<!-- Preloader -->
<div class="preloader"></div>
<div class="page-background">
<div class="image-1"><img src="images/icons/shape/icon-1.png" alt="" loading="lazy" decoding="async"></div>
<div class="image-7"><img src="images/icons/shape/icon-7.png" alt="" loading="lazy" decoding="async"></div>
<canvas id="canvas"></canvas>
</div>
<!-- Mobile menu -->
<div class="mobile-menu">
<div class="container">
<!--Nav Outer-->
<div class="nav-outer clearfix">
<div class="logo"><a href="index.html"><img src="images/logo.png" alt="" loading="eager" fetchpriority="high" decoding="async"></a></div>
<!-- Main Menu -->
<nav class="main-menu">
<div class="navbar-header">
<!-- Toggle Button -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse scroll-nav clearfix">
<ul class="navigation clearfix">
<li class="current"><a href="#home">主页</a></li>
<li><a href="#about">个人信息</a></li>
<li><a href="#tools">擅长技术</a></li>
<li><a href="#resume">工作经历</a></li>
<li><a href="#services">项目经验</a></li>
<li><a href="#work">开源项目</a></li>
<!-- <li><a href="#honor">荣誉证书</a></li> -->
<li><a href="#blog">博客文章</a></li>
</ul>
</div>
</nav>
<!-- Main Menu End-->
</div>
<!--Nav Outer End-->
</div>
</div>
<div class="card-outer">
<div class="scroll-box">
<div class="container" data-animation-in="fadeInLeft" data-animation-out="fadeOutLeft">
<div class="card-wrapper">
<div class="author-info">
<div class="image"><img src="images/resource/user.jpeg" alt="" loading="eager" fetchpriority="high" decoding="async"></div>
<div class="author">
<h3>叶继伟</h3>
<div class="designation">
你好，我是
<div class="typing-title">
<p>一名<strong>web前端工程师。</strong></p>
<p>一名<strong>技术追求者。</strong></p>
<p>一名<strong>运动爱好者。</strong></p>
</div>
<span class="typed-title"></span>
</div>
</div>
<div class="link-btn">
<a href="#" class="theme-btn btn-style-one">下载简历</a>
</div>
<ul class="social-icon-two">
<li><a href="https://github.com/coderyjw"><span class="fa fa-github"></span></a></li>
<li><a href="#"><span class="fa fa-weixin"></span></a></li>
<li><a href="#"><span class="fa fa-envelope-o"></span></a></li>
</ul>
</div>
<div class="card-inner-box">
<header class="header wow fadeInLeft" data-wow-duration="1.5s">
<ul class="main-menu">
<li class="active home"><a class="logo" href="#home"><img src="images/logo.png" alt="" loading="eager" fetchpriority="high" decoding="async"></a></li>
<li><a href="#about"><i class="flaticon-social"></i>个人信息</a></li>
<li><a href="#tools"><i class="flaticon-tools"></i>擅长技术</a></li>
<li><a href="#resume"><i class="flaticon-curriculum"></i>工作经历</a></li>
<li><a href="#services"><i class="flaticon-layers-1"></i>项目经验</a></li>
<li><a href="#work"><i class="fa fa-github"></i>开源项目</a></li>
<!-- <li><a href="#honor"><i class="iconfont icon-rongyu"></i>荣誉证书</a></li> -->
<li><a href="#blog"><i class="flaticon-blog"></i>博客文章</a></li>
</ul>
</header>
<!-- card item -->
<div class="card-home card-item active" id="home">
<div class="card-inner wow fadeInUp" data-wow-duration="2s">
<div class="image"><img src="images/resource/user.jpeg" alt="" loading="lazy" decoding="async"></div>
<div class="author">
<h3>叶继伟</h3>
<div class="designation">
你好，我是
<div class="typing-title">
<p>一名<strong>web前端工程师。</strong></p>
<p>一名<strong>技术追求者。</strong></p>
<p>一名<strong>运动爱好者。</strong></p>
</div>
<span class="typed-title"></span>
</div>
</div>
<div class="text">
主攻前端开发，<strong>5年+</strong> 前端开发经验。 带领前端团队利用最新技术解决业务快速发展过程中的各种业务场景问题。 项目包括 <strong>VUE</strong>
<strong>PC</strong>/<strong>Moblie</strong>/管理后台。 有 <strong>NodeJS</strong>
开发经验。热衷开源，良好英语读写能力，坚持学习和技术分享。
</p>
</div>
<div class="link-btn">
<a href="https://juejin.cn/user/2233839981179358" class="theme-btn btn-style-one">掘金首页</a>
<a href="https://github.com/coderyjw" class="theme-btn btn-style-two">github</a>
</div>
</div>
</div>
<!-- end item -->
<!-- card item -->
<div class="card-about card-item" id="about">
<div class="card-inner">
<h4 class="title">个人信息</h4>
<div class="info-list col-md-12">
<div class="row">
<div class="col-md-6">
<ul class="list-style-one">
<li><strong>姓名:</strong> 叶继伟</li>
<li><strong>微信:</strong> yjw729721503</li>
<li><strong>地址:</strong> 杭州市临平区 </li>
</ul>
</div>
<div class="col-md-6">
<ul class="list-style-one">
<li><strong>邮箱:</strong> yejw6@foxmail.com</li>
<li><strong>github:</strong> <a target='black'
href="https://github.com/coderyjw">https://github.com/coderyjw</a>
</li>
</ul>
</div>
</div>
</div>
<div class="education col-md-12">
<div class="row">
<h4 class="title">教育背景</h4>
<div class="school">
<img class="logo" src="images/school-logo.jpg" alt="" loading="lazy" decoding="async">
<div>
<strong>浙江水利水电学院 ,本科</strong> 软件工程
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end item -->
<!-- card item -->
<div class="card-about card-item" id="tools">
<div class="card-inner">
<h4 class="title">擅长技术</h4>
<div class="col-md-12">
<div></div>
<div class="row">
<!-- About Block -->
<div class="skill-block col-md-3 col-sm-4 col-xs-6">
<div class="inner-box">
<div class="graph-outer">
<input type="text" class="dial" data-fgColor="#9147ff" data-bgColor="#f5f5f5"
data-width="90" data-height="90" data-linecap="normal" value="80">
<div class="inner-text count-box"><span class="count-text" data-stop="80"
data-speed="2000"></span>%</div>
</div>
<h3>前端</h3>
</div>
</div>
<!-- About Block -->
<div class="skill-block col-md-3 col-sm-4 col-xs-6">
<div class="inner-box">
<div class="graph-outer">
<input type="text" class="dial" data-fgColor="#ff5e7e" data-bgColor="#f5f5f5"
data-width="90" data-height="90" data-linecap="normal" value="70">
<div class="inner-text count-box"><span class="count-text" data-stop="70"
data-speed="2000"></span>%</div>
</div>
<h3>构建/工具</h3>
</div>
</div>
<!-- About Block -->
<div class="skill-block col-md-3 col-sm-4 col-xs-6">
<div class="inner-box">
<div class="graph-outer">
<input type="text" class="dial" data-fgColor="#ffc713" data-bgColor="#f5f5f5"
data-width="90" data-height="90" data-linecap="normal" value="50">
<div class="inner-text count-box"><span class="count-text" data-stop="50"
data-speed="2000"></span>%</div>
</div>
<h3>服务端</h3>
</div>
</div>
</div>
<div class="row">
<div class="skill-info">
<h4 class="sub-title">前端:</h4>
<div class="labels">
<span class="label label-info">Vue</span>
<span class="label label-info">React</span>
<span class="label label-info">Typescript</span>
<!-- <span class="label label-info">Uniapp</span> -->
</div>
<h4 class="sub-title">构建/工具:</h4>
<div class="labels">
<span class="label label-info">Webpack</span>
<span class="label label-info">Vite</span>
<span class="label label-info">Git</span>
</div>
<h4 class="sub-title">服务端:</h4>
<div class="labels">
<span class="label label-info">NodeJS</span>
<span class="label label-info">Express</span>
<span class="label label-info">Koa2</span>
<span class="label label-info">MongoDB</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end item -->
<!-- card item -->
<div class="card-resume card-item" id="resume">
<div class="card-inner">
<h4 class="title">工作经历</h4>
<!--Column-->
<div class="timeline-column col-md-12">
<div class="row clearfix">
<div class="inner">
<!--Timeline Block-->
<div class="timeline-block">
<div class="inner-box">
<h4>高级前端工程师</h4>
<div class="date">
<span>2024.06-至今</span> / 杭州时代银通软件股份有限公司
</div>
<div class="text">
负责中银香港外汇交易模块的核心前端开发与技术方案设计，保障高并发场景下的性能与稳定性。主导并参与团队的 Code Review，提升整体代码质量与工程规范度。自主研究并构建
VitePress 文档体系，完善团队内部知识库。搭建并优化前端自动化部署流程，提高发布效率并减少人为操作成本，推动团队工程化能力提升。
</div>
</div>
</div>
<!--Timeline Block-->
<div class="timeline-block">
<div class="inner-box">
<h4>中级前端工程师</h4>
<div class="date">
<span>2021.06-2024.06</span> / 广州亚信科技有限公司
</div>
<div class="text">
独立负责中国移动业务系统的前端研发，涵盖渠道账单、布局地图等关键业务模块。承担 PC
与移动端的界面开发与适配，实现稳定的功能交付。负责基础组件及公共方法的封装与抽离，显著提升团队开发效率与代码复用率。积极与后端及产品协作，推动需求落地并确保上线质量与性能表现。
</div>
</div>
</div>
<!--Timeline Block-->
<div class="timeline-block">
<div class="inner-box">
<h4>初级前端工程师</h4>
<div class="date">
<span>2020.04-2021.05</span> / 浙江启真科技有限公司
</div>
<div class="text">
参与智慧城市及行业智慧化项目的前端开发工作，协助搭建项目基础框架并确保代码质量。负责维护现有系统，进行版本迭代及功能优化。协助团队培训新入职成员，帮助其快速熟悉项目与开发流程，积累团队协作与项目实践经验。
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end item -->
<!-- card item -->
<div class="card-resume card-item" id="services">
<div class="card-inner">
<h4 class="title">项目经验</h4>
<!--Column-->
<div class="timeline-column col-md-12">
<div class="row clearfix">
<div class="inner">
<!--Timeline Block-->
<div class="timeline-block">
<div class="inner-box">
<h4>渠道集中化业务</h4>
<div class="date"> 该项目为亚信集团渠道业务需求汇总，具体业务包含:渠道生意账单、渠道布局、渠道报账、渠道一键学习、 渠道智能摸排、渠道门店活动、渠道附近营业厅等等
</div>
<div class="text">
<div>技术栈:vue3+elementPlus+axios+pinia+vite</div>
<ul>
<li>参与需求讨论，制定开发计划，统一项目开发规范(ESLint+Prettier 统一代码规范、Husky + Commitizen
统一提交规范、目录结构、命名等等)</li>
<li>负责基础组件公共方法的封装抽离，提高开发效率和组件的复用度</li>
<li>带领前端团队高效完成业务模块开发，产品上线后不断的维护与重构，优化用户体验及性能。</li>
</ul>
</div>
</div>
</div>
<div class="timeline-block">
<div class="inner-box">
<h4>商城后台管理系统</h4>
<div class="date"> 项目描述：主要用于管理用户，商品，订单，供应商信息应用。</div>
<div class="text">
<div> 技术栈: vue2+elementUI+axios+vuex+webpack</div>
<ul>
<li>vue+elementUI+webpack构建开发框架，快速开发标准版后台。</li>
<li>实现了用户管理,权限管理(动态路由),用户管理，优惠券管理，订单管理等主要功能。</li>
<li>开发热点图，运费模板等组件。</li>
<li>二次封装图片上传组件，表格组件结合mixin实现搜索翻页功能等，大幅度减少代码量。</li>
</ul>
</div>
</div>
</div>
<div class="timeline-block">
<div class="inner-box">
<h4>nodeJS文章发布系统</h4>
<div class="date">项目描述：CMS文章发布系统，包括前后台开发。</div>
<div class="text">
<div>技术栈: NodeJS+koa2+pm2+vue+elementUI+axios+vuex+webpack</div>
<ul>
<li>后端采用 NodeJS+koa2+开发,vue开发管理后台以及H5页面,pm2发布前后端项目。</li>
<li>NodeJS实现接口身份验证JWT认证登录</li>
<li>管理后台实现了用户模块，分类模块，文章模块，搜索等主要功能。H5实现文章分类及文章详情浏览。</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end item -->
<!-- card item -->
<div class="card-projects card-item" id="work">
<div class="card-inner">
<h4 class="title">开源项目</h4>
<div class="row">
<!-- <div class="services-block col-md-12">
<div class="inner-box">
<div class="icon-box"><span class="icon flaticon-pen-tool"></span></div>
<h4><a href="https://github.com/sunniejs/sol-weapp">jw-cli </a>
</h4>
<div class="text">一个前端项目提效脚手架，包含项目创建、github/gitee 源码下载/运行、项目测试、项目提交等功能。
</div>
</div>
</div> -->
<div class="services-block col-md-12">
<div class="inner-box">
<div class="icon-box"><span class="icon flaticon-folder"></span></div>
<h4><a href="https://coderyjw.gitee.io/jw-ui-website/">jw-ui <img
src="https://img.shields.io/github/stars/coderyjw/jw-ui.svg?style=social&label=Stars" loading="lazy" decoding="async" /></a>
</h4>
<div class="text">一个 Vue3 的组件库。目前拥有 20+组件，包含通用、数据录入、反馈、导航四大模块类型组件。</div>
</div>
</div>
<div class="services-block col-md-12">
<div class="inner-box">
<div class="icon-box"><span class="icon flaticon-folder"></span></div>
<h4><a href="coderyjw.github.io/jw-ui-react-website">jw-ui-react </a>
</h4>
<div class="text">一个 React 的组件库，目前拥有 10+ 组。</div>
</div>
</div>
</div>
</div>
</div>
<!-- end item -->
<!-- card item -->
<!-- <div class="card-honor card-item" id="honor" >
<div class="card-inner">
<h4 class="title">证书</h4>
<div class="col-md-12">
<ul class="list-style-two">
<li><span class="iconfont icon-rongyu"></span>托福 <span class="level">98分</span></li>
<li><span class="iconfont icon-rongyu"></span>信息系统项目管理师 <span class="level">通过</span></li>
<li><span class="iconfont icon-rongyu"></span>全国计算机 Python 二级证书 <span class="level">优秀</span></li>
</ul>
</div>
<h4 class="title">荣誉</h4>
<div class="col-md-12">
<ul class="list-style-two">
<li><span class="iconfont icon-rongyu"></span>一等奖学金 <span class="level">校级</span></li>
<li><span class="iconfont icon-rongyu"></span>英语演讲比赛三等奖 <span
class="level">校级</span></li>
<li><span class="iconfont icon-rongyu"></span>优秀毕业生 <span
class="level">院级</span></li>
</ul>
</div>
</div>
</div> -->
<!-- end item -->
<!-- card item -->
<div class="card-blog card-item" id="blog">
<div class="card-inner">
<h4 class="title">优秀博文</h4>
<div class="news-block">
<div class="inner-box">
<div class="image"><img src="images/resource/blog-1.webp" alt="" loading="lazy" decoding="async">
<div class="overlay"><a target="blank" class="link-btn"
href="https://juejin.cn/post/7052717075168493598"><i class="fa fa-link"></i></a>
</div>
</div>
<div class="lower-content">
<h4><a target="blank" href="https://juejin.cn/post/7052717075168493598">一、用 Vue3.2 + Vite2.7 从 0
快速打造一个 UI 组件库</a>
</h4>
<div class="tags">组件库</div>
</div>
</div>
</div>
<div class="news-block">
<div class="inner-box">
<div class="image"><img src="images/resource/blog-2.webp" alt="" loading="lazy" decoding="async">
<div class="overlay"><a target="blank" class="link-btn"
href="https://juejin.cn/post/7187827491824730171"><i class="fa fa-link"></i></a>
</div>
</div>
<div class="lower-content">
<h4><a target="blank" href="https://juejin.cn/post/7187827491824730171">
二、vue3 源码学习，实现一个 mini-vue（十二）：diff 算法核心实现</a></h4>
<div class="tags">Vue 源码</div>
</div>
</div>
</div>
<div class="news-block">
<div class="inner-box">
<div class="image"><img src="images/resource/blog-3.webp" alt="" loading="lazy" decoding="async">
<div class="overlay"><a target="blank" class="link-btn"
href="https://juejin.cn/post/7208445726905303101"><i class="fa fa-link"></i></a>
</div>
</div>
<div class="lower-content">
<h4><a target="blank" href="https://juejin.cn/post/7208445726905303101">
三、Echarts 在 Vue 中的最佳实践</a></h4>
<div class="tags">Echarts</div>
</div>
</div>
</div>
<div class="news-block">
<div class="inner-box">
<div class="image"><img src="images/resource/blog-4.png" alt="" loading="lazy" decoding="async">
<div class="overlay"><a target="blank" class="link-btn"
href="https://juejin.cn/post/7180391305296478263"><i class="fa fa-link"></i></a>
</div>
</div>
<div class="lower-content">
<h4><a target="blank" href="https://juejin.cn/post/7180391305296478263">
四、大屏适配方案汇总</a></h4>
<div class="tags">大屏</div>
</div>
</div>
</div>
<div class="news-block">
<div class="inner-box">
<div class="image"><img src="images/resource/blog-5.png" alt="" loading="lazy" decoding="async">
<div class="overlay"><a target="blank" class="link-btn"
href="https://juejin.cn/post/7181487704025071671"><i class="fa fa-link"></i></a>
</div>
</div>
<div class="lower-content">
<h4><a target="blank" href="https://juejin.cn/post/7181487704025071671">
五、从 0 搭建配置 React+TS 项目</a></h4>
<div class="tags">React</div>
</div>
</div>
</div>
</div>
</div>
<!-- end item -->
</div>
</div>
</div>
</div>
</div>
</div>
<!--End pagewrapper-->
<script src="js/jquery.js" defer></script>
<script src="js/bootstrap.min.js" defer></script>
<script src="js/jquery.mCustomScrollbar.concat.min.js" defer></script>
<script src="js/owl.js" defer></script>
<script src="js/wow.js" defer></script>
<script src="js/appear.js" defer></script>
<script src="js/jquery.fancybox.js" defer></script>
<script src="js/element-in-view.js" defer></script>
<script src="js/knob.js" defer></script>
<script src="js/validate.js" defer></script>
<script src="js/mousemoveparallax.js" defer></script>
<script src="js/pagenav.js" defer></script>
<script src="js/jquery-type.js" defer></script>
<script src="js/jquery.nicescroll.min.js" defer></script>
<script src="js/particle-alone.js" defer></script>
<script src="js/script.js" defer></script>
</body>
</html>