-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
500 lines (497 loc) · 27.6 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SQ</title>
<meta property="og:title" content="孙强的简历" />
<meta property="og:locale" content="en_US" />
<link rel="canonical" href="https://marvelsq.github.io/" />
<meta property="og:url" content="https://marvelsq.github.io/" />
<meta property="og:site_name" content="marvelsq.github.io" />
<link href="css/commons-26aa8e019819693720ae.css" rel="stylesheet"><link href="css/index-ce577a3603ba90f7229c.css" rel="stylesheet"></head>
<body>
<!-- <div id="logpad"></div> -->
<header class="header">
<nav id="menu" class="fixed menu">
<div class="wrapper">
<div class="menu-title">
<a href="#title">
<h1>MarvelSQ</h1>
</a>
</div>
<div class="menu-btn">Menu</div>
<ul class="menu-items">
<li>
<a href="#mine">
<div class="item">Looking for Job</div>
</a>
</li>
<li>
<a href="#skill">
<div class="item">Skill</div>
</a>
</li>
<li>
<a href="#edu">
<div class="item">Education</div>
</a>
</li>
<li>
<a href="#work">
<div class="item">Work Exp</div>
</a>
</li>
<li>
<a href="#proj">
<div class="item">Projects</div>
</a>
</li>
<li>
<a href="#f2e">
<div class="item">Front-End</div>
</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="main">
<section class="section" id="title">
<div class="section-title">
<div id="title-menu" class="title-block">
<h1>MarvelSQ</h1>
<ul class="menu-items">
<li>
<a href="#mine">
<div class="item">Looking for Job</div>
</a>
</li>
<li>
<a href="#skill">
<div class="item">Skill</div>
</a>
</li>
<li>
<a href="#edu">
<div class="item">Education</div>
</a>
</li>
<li>
<a href="#work">
<div class="item">Work Exp</div>
</a>
</li>
<li>
<a href="#proj">
<div class="item">Projects</div>
</a>
</li>
<li>
<a href="#f2e">
<div class="item">Front-End</div>
</a>
</li>
</ul>
</div>
</div>
</section>
<section class="section shrink-anim" id="mine">
<div class="wrapper">
<h1>Looking for Job</h1>
<div style="text-align:center">
<h1 class="giant-size">web前端工程师</h1>
<p style="font-size:20px;">location:
<b>Shanghai</b>
</p>
<p style="font-size:20px;margin-bottom:15px;">[email protected]</p>
<a href="mailto:[email protected]">
<button class="btn btn-big mail-btn">Send E-mail</button>
</a>
</div>
</div>
</section>
<section class="section" id="skill">
<div class="wrapper">
<h1>Skill</h1>
<div class="tabbar">
<div class="shrink-anim">
<div class="tab">
<h2 class="cell-title">Language</h2>
<div class="skill-block js">
<h1>JavaScript</h1>
<div class="es-wrapper"><div class="es">
<h1>ECMAScript 6</h1>
</div>
</div>
<div class="arrow"></div>
<div class="arrow option"></div>
</div>
</div>
</div>
<div class="shrink-anim">
<div class="tab">
<h2 class="cell-title">Framework</h2>
<div class="skill-block fw">
<section class="span-5">
<img src="../assets/vue.png">
<b>VUE</b>
</section>
<section class="span-2"></section>
<section class="span-5">
<b>React</b>
<embed src="../assets/react.svg" type="">
</section>
</div>
</div>
</div>
<div class="shrink-anim">
<div class="tab">
<h2 class="cell-title">Tool</h2>
<div class="cell-content">
<section class="span-4">
<b>Babel</b>
<br>
<embed style="height:32px;" src="../assets/babel.svg" type="">
</section>
<section class="span-4">
<b>Webpack</b>
<br>
<embed style="height:32px;" src="../assets/webpack.svg" type="">
</section>
<section class="span-4">
<b>NPM</b>
<br>
<svg style="height:32px;" viewBox="0 0 18 7">
<path fill="#CB3837" d="M0,0v6h5v1h4v-1h9v-6"></path>
<path fill="#FFF" d="M1,1v4h2v-3h1v3h1v-4h1v5h2v-4h1v2h-1v1h2v-4h1v4h2v-3h1v3h1v-3h1v3h1v-4"></path>
</svg>
</section>
</div>
</div>
</div>
<div class="shrink-anim">
<div class="tab">
<h2 class="cell-title">Env</h2>
<div class="skill-block env">
<h3>macOS</h3>
<div class="browser">
<h4>Browser</h4>
<div>Chrome
<img style="height:32px;" src="../assets/chrome.png" srcset="../assets/[email protected] 2x">
</div>
<div>Safari
<img style="height:32px;" src="../assets/safari.png" srcset="../assets/[email protected] 2x">
</div>
</div>
<div class="dev">
<h4>Develop</h4>
<div>Nodejs
<embed style="height:32px;" src="../assets/nodejs.svg" type="">
</div>
</div>
</div>
</div>
</div>
<div class="shrink-anim">
<div class="tab">
<h2 class="cell-title">Editor</h2>
<div class="cell-content">
<section class="span-4">
Atom
<br>
<img style="height:40px;" src="../assets/atom.png" srcset="../assets/[email protected] 2x">
</section>
<section class="span-4">
VSCode
<br>
<img style="height:40px;" src="../assets/vscode.png" srcset="../assets/[email protected] 2x">
</section>
<section class="span-4">
Webstorm
<br>
<img style="height:40px;" src="../assets/webstorm.png" srcset="../assets/[email protected] 2x">
</section>
</div>
</div>
</div>
<div class="shrink-anim">
<div class="tab">
<h2 class="cell-title">VCS</h2>
<div class="skill-block vcs">
<img style="height:40px" src="../assets/[email protected]">
<b style="font-size:24px;padding:10px">X</b>
<svg style="height:40px" aria-hidden="true" class="octicon octicon-mark-github" height="32" version="1.1" viewBox="0 0 16 16"
width="32">
<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
</svg>
<a>
<h4>https://github.com/marvelsq</h4>
</a>
</div>
</div>
</div>
<div class="shrink-anim">
<div class="tab">
<h2 class="cell-title">Server</h2>
<div class="cell-content server">
<section class="span-6">
<b>Nodejs</b>
<embed src="../assets/nodejs.svg" type="">
</section>
<section class="span-6">
<b>Nginx</b>
<img src="../assets/nginx.png">
</section>
</div>
</div>
</div>
</div>
<h2 class="cell-title">Other</h2>
<p class="skill-block">
有UI设计经验，熟练使用sketch，制作icon，制定设计规范， 熟悉前端模块化，熟悉DOM操作，响应式设计，css动画， 有java开发经验，开发过Android项目
</p>
</div>
</section>
<section class="section shrink-anim" id="edu">
<div class="wrapper">
<h1>Education</h1>
<div class="edu-block">
<section class="span-3">
<h3 style="font-weight:300">2012.09 ~ 2016.06</h3>
</section>
<section class="span-3">
<h3>上海理工大学</h3>
</section>
<section class="span-3">
<h3 style="font-weight:300">生物医学工程信息方向</h3>
</section>
<section class="span-3">
<h3>本科学士学位</h3>
</section>
</div>
</div>
</section>
<section class="section shrink-anim" id="work">
<div class="wrapper">
<h1>Work Experience</h1>
<div class="edu-block">
<div class="row">
<section class="span-4">
<h3 style="font-weight:300">2015.06 ~ 2016.06</h3>
</section>
<section class="span-4">
<h3>上海生医信息科技有限公司</h3>
</section>
<section class="span-4">
<h3 style="font-weight:300">实习</h3>
</section>
</div>
<div class="row">
<section class="span-4" style="height:10px;"></section>
<section class="span-8">
<h3>原型设计及Android开发，主要以UI设计，制作规范</h3>
</section>
</div>
<div class="row">
<section class="span-4">
<h3 style="font-weight:300">2016.06 ~ 2017.06</h3>
</section>
<section class="span-4">
<h3>上海生医信息科技有限公司</h3>
</section>
<section class="span-4">
<h3 style="font-weight:300">技术工程师</h3>
</section>
</div>
<div class="row">
<section class="span-4" style="height:10px;"></section>
<section class="span-8">
<h3>UI设计及web开发，偶尔支援Android开发 公司技术为php加RN组合方式</h3>
</section>
</div>
<div class="row">
<section class="span-4">
<h3 style="font-weight:300">2016.06 ~ 2017.06</h3>
</section>
<section class="span-4">
<h3>上海宏路数据技术股份有限公司</h3>
</section>
<section class="span-4">
<h3 style="font-weight:300">前端工程师</h3>
</section>
</div>
<div class="row">
<section class="span-4" style="height:10px;"></section>
<section class="span-8">
<h3>辅助维护广告投放平台前端，其他项目的前端开发</h3>
</section>
</div>
</div>
</div>
</section>
<section class="section shrink-anim" id="proj">
<div class="wrapper">
<h1>Projects</h1>
<div class="repo-block">
<div class="repo">
<div class="repo-head nobg">
<div class="repo-info">
<h2>数据可视化项目</h2>
<h4>前端开发</h4>
<p>2018.01 - 现在</p>
</div>
</div>
<div class="repo-description">
汽车公司数据可视化漏斗项目 · 暂未上线 图标使用echarts，框架为react、redux，pc端为多页应用，移动端为单页应用（未使用router）
</div>
</div>
<div class="repo">
<div class="repo-head nobg">
<div class="repo-info">
<h2>MPS</h2>
<h4>前端开发</h4>
<p>2017.12 - 现在</p>
</div>
</div>
<div class="repo-description">
针对客户公司制定的标签管理项目 · 暂未上线 使用<a target="_blank" href="https://github.com/rsuite/create-rsuite-app">create-rsuite-app</a>搭建，框架为react、redux，pc端为多页应用
</div>
</div>
<div class="repo">
<div class="repo-head nobg">
<div class="repo-info">
<h2>广告投放管理平台</h2>
<h4>前端开发维护</h4>
<p>2017.11 - 现在</p>
</div>
</div>
<div class="repo-description">
广告投放管理平台 · <a target="_blank" href="https://adserving.hypers.com.cn">https://adserving.hypers.com.cn</a> 基于<a target="_blank" href="https://rsuitejs.com">Rsuite</a>组件库
</div>
</div>
<div class="repo">
<div class="repo-head" style="background-image:url('../assets/sqedtonreact.png');">
<div class="repo-info pull-left">
<h2>react-edt</h2>
<h4>个人项目</h4>
<p>2017.10 - 暂停</p>
</div>
</div>
<div class="repo-description">
基于react框架的编辑器 · https://marvelsq.github.io/SQEdtonReact 实现拖拽添加模版，拖拽和粘贴文字
</div>
</div>
<div class="repo">
<div class="repo-head" style="background-image:url('../assets/accountbook.png');">
<div class="repo-info pull-left">
<h2>AccountBook</h2>
<h4>个人项目</h4>
<p>2017.09 - 暂停</p>
</div>
</div>
<div class="repo-description">
使用vue+elementui框架的记账本，单页应用 使用vue渲染页面，vuex管理登陆，账户增减变化的状态。router管理跳转。 使用localstorage存储登陆信息本地列表，
</div>
</div>
<div class="repo">
<div class="repo-head" style="background-image:url('../assets/sqedt.png');">
<div class="repo-info pull-left">
<h2>SQEdt</h2>
<h4>个人项目</h4>
<p>2017.09 - 暂停</p>
</div>
</div>
<div class="repo-description">
一款基于contentEditable的html编辑器 · https://marvelsq.github.io/Sqedt 使用 ES6语法，API及模块化，dom原生操作。目前正在扩展添加Drag&Drop
</div>
</div>
<div class="repo">
<div class="repo-head nobg">
<div class="repo-info">
<h2>优康云</h2>
<h4>移动端及PC管理后台开发</h4>
<p>2017.05 - 2017.06</p>
</div>
</div>
<div class="repo-description">
基于微信健康管理平台。用户在线下设备上使用微信绑定，体检完成后在公众号查看体检报告 移动端使用vue+bootstrap，管理后台使用vue+elementui，网络请求使用axios 移动端主要是各类健康设备的入口，点击项目进入查看报告列表，查看个人信息，修改密码
管理后台展示用户数据和体检数据，各类体检数据使用命名路由复用组件
</div>
</div>
<div class="repo">
<div class="repo-head nobg">
<div class="repo-info">
<h2>ART超市后台项目管理</h2>
<h4>页面制作</h4>
<p>2017.04 - 2017.05</p>
</div>
</div>
<div class="repo-description">
与NTT-data合作的超市后台项目管理系统，管理新产品上架，方便项目经理跟进 filelist：展示所有项目书，预览进度状态，列表页 roadmap：展示单个项目书的进度，分为7个步骤(step)，下有多个任务(task)，由指定的负责人完成
overview：个人项目的统计展示，使用条形图展示，使用年份作为过滤条件 难点： overview中，数据显示比例是按照每列最大项为100%；先查出最大项，再计算其他项目的比例 roadmap中，task的按钮有三种状态，且与上下文互相关联，每次操作需对上下文进行检查。
</div>
</div>
<div class="repo">
<div class="repo-head nobg">
<div class="repo-info">
<h2>Nutreat</h2>
<h4>UI设计及web开发</h4>
<p>2016.07 - 2017.03</p>
</div>
</div>
<div class="repo-description">
nutreat是由台湾营养师为癌症患者设计专属营养食谱的平台。 提供音视频服务及营养品销售 我负责营养师端及后续用户端设计，管理后台和营养师工具开发。页面开发使用了jquery和bootstrap。 管理后台： 主页：查看用户，营养师信息 资讯页：使用Editor.md
发布，编辑，排序，删除营养资讯 数据：管理食品类别，工作强度，癌症疾病信息 商城管理：商品上下架，查看订单信息，筛选进度，发货 管理员管理：添加管理员，修改密码，删除普通管理员 营养师工具：
展示营养师的所属患者，查看患者信息（忌口，疾病，工作情况…） 使用食谱编辑工具设计食谱 上传表格文件到服务器，转化为html页面预览编辑。 营养师端：Android视频聊天集成
</div>
</div>
</div>
</div>
</section>
<section class="section shrink-anim" id="f2e">
<div class="wrapper">
<h1>Front-end</h1>
<p>
做前端之前，我曾想去做Android开发，但是在公司中却成了一名UI设计。虽然我也喜欢设计，但更想要自己动手编写界面。之后由于缺少前端工程师，我就作为web开发取编写简单的页面，做了几个项目后，越来越熟悉web的界面，因此，开始向前端。 一开始都是用bootstrap+jquery的制作页面，后来接触vue后，开始用模版写界面，最近又学习了React，用class+jsx写界面，样式主要用css，动画，transition，flex等，模块化的写法使开发变得更加清晰。npm等工具可以解决造轮子的问题，工程化的处理解决了许多麻烦。babel，webpack，eslint等等
在node中我也很喜欢用js写服务器的感觉，交互逻辑，网络，http协议，restful api等等 我可能更倾向于中后台吧。制作一些工具组件。
</p>
</div>
</section>
</div>
<footer class="footer">
<div class="section">
<div class="wrapper">
<section class="span-6">
<h2>My Repo</h2>
<ul>
<li>
<a href="https://marvelsq.github.io/SQEdtonReact" target="_blank">SQEdtonReact</a>
</li>
<li>
<a href="https://marvelsq.github.io/AccountBook" target="_blank">AccountBook</a>
</li>
<li>
<a href="https://marvelsq.github.io/Sqedt" target="_blank">SQEdt</a>
</li>
</ul>
</section>
<section class="span-6">
<h2>Location</h2>
Shanghai China
<h2>E-mail</h2>
<a href="mailto:[email protected]">[email protected]</a>
<h2>Github</h2>
<a href="https://github.com/marvelsq">
<svg style="height:20px" aria-hidden="true" class="octicon octicon-mark-github" height="32" version="1.1" viewBox="0 0 16 16"
width="32">
<path fill="#fff" fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
</svg>MarvelSQ</a>
</section>
<div style="clear:both;padding-top:20px;">This page was created by MarvelSQ, based on GitHub Pages.</div>
</div>
</div>
</footer>
<script type="text/javascript" src="js/common-e7dab7893a9d5972ea87.js"></script><script type="text/javascript" src="js/index-ce577a3603ba90f7229c.js"></script></body>
</html>