-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
465 lines (439 loc) · 26.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>刘相君-个人博客</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/fontAwesome.css">
<link rel="stylesheet" href="css/light-box.css">
<link rel="stylesheet" href="css/templatemo-main.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
<style>
.container-last p{
margin: 10px auto;
font-size: 30px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: cyan;
}
.logo p{
font-size: 30px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: cyan;
}
</style>
</head>
<body>
<div class="sequence">
<div class="seq-preloader">
<svg width="39" height="16" viewBox="0 0 39 16" xmlns="http://www.w3.org/2000/svg" class="seq-preload-indicator"><g fill="#F96D38"><path class="seq-preload-circle seq-preload-circle-1" d="M3.999 12.012c2.209 0 3.999-1.791 3.999-3.999s-1.79-3.999-3.999-3.999-3.999 1.791-3.999 3.999 1.79 3.999 3.999 3.999z"/><path class="seq-preload-circle seq-preload-circle-2" d="M15.996 13.468c3.018 0 5.465-2.447 5.465-5.466 0-3.018-2.447-5.465-5.465-5.465-3.019 0-5.466 2.447-5.466 5.465 0 3.019 2.447 5.466 5.466 5.466z"/><path class="seq-preload-circle seq-preload-circle-3" d="M31.322 15.334c4.049 0 7.332-3.282 7.332-7.332 0-4.049-3.282-7.332-7.332-7.332s-7.332 3.283-7.332 7.332c0 4.05 3.283 7.332 7.332 7.332z"/></g></svg>
</div>
</div>
<nav>
<div class="logo">
<p>PICK ME UP</p>
</div>
<div class="mini-logo">
</div>
<ul>
<li><a href="#1"><i class="fa fa-home"></i> <em>首页</em></a></li>
<li><a href="#2"><i class="fa fa-user"></i> <em>关于我</em></a></li>
<li><a href="#3"><i class="fa fa-pencil"></i> <em>项目经验</em></a></li>
<li><a href="#4"><i class="fa fa-image"></i> <em>学习笔记</em></a></li>
<li><a href="#5"><i class="fa fa-envelope"></i> <em>联系我</em></a></li>
</ul>
</nav>
<div class="slides">
<div class="slide" id="1">
<div class="content first-content">
<div class="container-fluid">
<div class="col-md-3">
<div class="author-image"><img src="img/author.jpg"></div>
</div>
<div class="col-md-9">
<h1>刘相君</h1>
<p><em>行动</em>是治愈恐惧的良药，而犹豫拖延将不断<em>滋养</em>恐惧。</p>
<p>给予我一次机会，我必将<em>全力以赴</em></p>
<div class="main-btn"><a href="#2">了解更多</a></div>
<div class="fb-btn"><a href="#/" target="_blank">首页</a></div>
</div>
</div>
</div>
</div>
<div class="slide" id="2">
<div class="content second-content">
<div class="container-fluid">
<div class="col-md-6">
<div class="left-content">
<h2>关于我</h2>
<p>熟练掌握前端性能优化，元素塌陷问题，元素居中问题，元素外边距合并问题，清除浮动的方法，CSS选择器的权重值，重绘重排的影响。</p>
<p>熟练掌握js的值类型和引用类型，js的事件循环，事件模型和事件的绑定和解绑，js作用域链和作用域，原型和原型链，js继承，事件委托。</p>
<p>熟练掌握移动端适配技巧。使用媒体查询和meta标签实现响应式布局,使用rem,zepto,touch实现手机端的适配，熟练bootstrap，mui等 UI 框架。</p>
<p>熟悉ES6解构赋值，let和const，扩展运算符，Promise，箭头函数等ES6新特性。</p>
<p>熟练使用 sass 对 css 进行预处理</p>
<p>熟悉HTML5新特性，使用canvas制作简单的动画，图片懒加载</p>
<p>熟悉掌握 Ajax 工作原理，能运用Ajax与后台进行数据交互处理，有 Ajax 开发经验。</p>
<p>熟练使用 vue，可以使用 vue 进行前端 MVVM 的设计与实现，熟悉组件式开发的思想和流程，使用 vue-cli 框架。 熟练使用 vue-router，vuex，axios 等依赖，并熟悉vue双向绑定原理。</p>
<p>AntDesign：熟悉antd各种组件的属性和样式以及其所具有的api，能够利用antd与react开发完整的后台系统</p>
<p>git：熟悉掌握git的各种命令行，能够熟练的完成代码的提交，拉取，更新，合并等操作</p>
<p>webpack：掌握webpack，能完成webpack的基本配置以及完成项目的打包</p>
<p>react：了解react以及create-react-app，完成网站，h5及后台系统等项目的开发，熟悉redux。 能独立开发前端组件，根据需求完成功能的开发。</p>
<div class="main-btn"><a href="#3">Read More</a></div>
</div>
</div>
<div class="col-md-6">
<div class="right-image">
<img src="img/about_image.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="slide" id="3">
<div class="content third-content">
<div class="container-fluid">
<div class="col-md-12">
<div class="row">
<div class="first-section">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="left-content">
<h2>PopAPP</h2>
<p>PopAPP(个人项目，已完成) https://lxjjjjjj.github.io/PopApp/
此项目是借助于Vue框架及相关工具制作的类似移动端APP页面的开发，项目中调用API接口完成数据读取，
利用vue-cli搭建项目vue-router在单页面应用中将路径和组件映射，vuex进行状态管理，样式设计上利用rem. js
实现在移动端的适配问题，功能上实现了对电影信息、音乐信息、智能聊天界面的展示，根据所需也完成了对影片详细信息的查看，在线听音乐及对智能聊天的完成。</p>
<div class="main-btn"><a href="#4">Continue Reading</a></div>
</div>
</div>
<div class="col-md-6">
<div class="right-image">
<img src="img/first_service.png" alt="first service">
</div>
</div>
</div>
</div>
</div>
<div class="second-section">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="left-image">
<img src="img/second_service.png" alt="second service">
</div>
</div>
<div class="col-md-6">
<div class="right-content">
<h2>OA-项目管理</h2>
<p>OA-项目管理（团队项目，正在进行中）
React项目，利用AntDesign实现框架的快速搭建开发，完成项目管理人的项目管理，
熟练运用父子组件之间的传值，以及兄弟组件之间的传值，主要负责项目管理部分，
负责开发组件，负责实现项目类别的添加修改和删除操作，项目技术栈的添加和修改。</p>
<div class="main-btn"><a href="#4">Continue Reading</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tlinks"></div>
<div class="slide" id="4">
<div class="content fourth-content">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="item">
<div class="thumb">
<div class="hover-effect">
<div class="hover-content">
<h2>HTML5 CSS3</h2>
<p>行级元素：不能设置宽高宽高是内容的高度,可以设置padding，只能设置左右的外边距，不能设置上下外边距
块元素:不设置高，靠内容充起来,宽度不设置的情况下是充满父级元素的可以设置宽高，外边距，内边距</p>
</div>
</div>
<div class="image">
<img src="img/html-css.jpg" style="width:294;height:154">
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="item">
<div class="thumb">
<div class="hover-effect">
<div class="hover-content">
<h2>vue中引入bootstrap</h2>
<p>在入口文件main.js中加入：jquery.js和bootstrap.js，在webpack.config.js文件配置：
plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "windows.jQuery": "jquery" }) ]
module.exports = { resolve: { alias: { jquery: "jquery/src/jquery", } } }
</p>
</div>
</div>
<div class="image">
<img src="img/Bootstrap.jpg" style="width:294;height:154">
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="item">
<div class="thumb">
<div class="hover-effect">
<div class="hover-content">
<h2>箭头函数this指向规则</h2>
<p>箭头函数无prototype原型，所以箭头函数本身无this，箭头函数的this继承自外层第一个普通函数的this，被继承的普通函数的this指向改变，箭头函数的this指向也改变</p>
</div>
</div>
<div class="image">
<img src="img/ES6.jpg" style="width:294;height:154">
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="item">
<div class="thumb">
<div class="hover-effect">
<div class="hover-content">
<h2>jQuery链式操作原理</h2>
<p>var $ = new fucntion jQuery(){}假设里面有个方法是绑定元素的，叫做init，我们首先要在prototype绑定这个方法。
jQuery.prototype.init = function(){}</p>
</div>
</div>
<div class="image">
<img src="img/jQuery.jpg" style="width:294;height:154">
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="item">
<div class="thumb">
<div class="hover-effect">
<div class="hover-content">
<h2>Vue</h2>
<p>数据监听器Observer，能够对数据对象的所有属性进行监听;Watcher将数据监听器和指令解析器连接起来，数据的属性变动时，就需要告诉订阅者Watcher看是否需要更新。指令解析器Compile， 对每个节点元素进行扫描和解析，将相关指令对应初始化成一个订阅者Watcher 订阅者是有很多个。</p>
</div>
</div></a>
<div class="image">
<img src="img/vue.jpg" style="width:294;height:154">
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="item">
<div class="thumb">
<div class="hover-effect">
<div class="hover-content">
<h2>React生命周期</h2>
<p>componentWillMount()全局只调用一次。componentDidMount() 可以在这里使用refs，获取真实dom元素。componentWillReceiveProps props即将变化之前
props发生变化以及父组件重新渲染时都会触发该生命周期</p>
</div>
</div>
<div class="image">
<img src="img/React.jpg" style="width:294;height:154">
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="item">
<div class="thumb">
<div class="hover-effect">
<div class="hover-content">
<h2>AntDesign</h2>
<p>AntDesign获取表单的值传入事件e，e.target.value获取表单值，通过rules的配置实现表单的简单校验，比如rules下的required和message</p>
</div>
</div>
<div class="image">
<img src="img/AntDesign.jpg" style="width:294;height:154">
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="item">
<div class="thumb">
<div class="hover-effect">
<div class="hover-content">
<h2>微信小程序</h2>
<p>小程序开发框架:Labrador,wepy,wxapp-devFrame,实用库：wxParse小程序富文本解析自定义组件，wechat-weapp-redux微信小程序Redux绑定
</p>
</div>
</div>
<div class="image">
<img src="img/webpack.jpg" style="width:294;height:154">
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="item">
<div class="thumb">
<div class="hover-effect">
<div class="hover-content">
<h2>Sass</h2>
<p>定义变量:$color:red !default(表示默认),计算功能：margin:(14px/2)选择器嵌套：ul{li{padding：11px 15px}}属性嵌套
</p>
</div>
</div>
<div class="image">
<img src="img/sass.jpg" style="width:294;height:154">
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="item">
<div class="thumb">
<div class="hover-effect">
<div class="hover-content">
<h2>创建webpack热服务</h2>
<p>安装webpack-dev-server，在webpack.config.js文件中配置
devServer:{
hot:true//实时局部刷新
}
plugins[
new webpack.HotModuleReplacementPlugin()
创建热更新最后要引入插件在webpack.config.js文件中配置
]
3.packjson文件中配置
"scripts":{
'build':'webpack',
'dev':'webpack-dev-server'
}
</p>
</div>
</div>
<div class="image">
<img src="img/weixin.jpg" style="width:294;height:154">
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="item">
<div class="thumb">
<div class="hover-effect">
<div class="hover-content">
<h2>快速排序</h2>
<p>function quickSort(array, left, right) {
if (left < right) {
var x = array[right], i = left - 1, temp;
for (var j = left; j <= right; j++) {
if (array[j] <= x) {
i++;
temp = array[i];
array[i] = array[j];
array[j] = temp;
}
}
quickSort(array, left, i - 1);
quickSort(array, i + 1, right);
}
return array;
}
</p>
</div>
</div>
<div class="image">
<img src="img/acm.jpg" style="width:294;height:154">
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="item">
<div class="thumb">
<div class="hover-effect">
<div class="hover-content">
<h2>数据结构</h2>
<p>广度遍历，层级遍历，先序遍历，中序遍历，后序遍历</p>
</div>
</div>
<div class="image">
<img src="img/data.jpg" style="width:294;height:154">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="slide" id="5">
<div class="content fifth-content">
<div class="container-last container-fluid">
<p>生日:<em>1998.01.26</em></p>
<p>电话:<em>18846087938</em></p>
<p>邮箱:<em>[email protected]</em></p>
<p>Github:<em>lxjjjjjj</em></p>
<p>求职:<em>前端开发实习生</em></p>
<p>政治面貌:<em>中共党员</em></p>
<p>基本认证:<em>CET6</em></p>
<p>在校经历:<em>2017-2018团委科创部副部长</em><em>校级社会实践一等奖</em><em>2016-2017,2017-2018国家励志奖学金</em></p>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="content">
<p>刘相君-个人博客</p>
</div>
</div>
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<script src='js/jq-1.10.1.js'></script>
<script src="js/jq-1.11.1.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/datepicker.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// navigation click actions
$('.scroll-link').on('click', function(event){
event.preventDefault();
var sectionID = $(this).attr("data-id");
scrollToID('#' + sectionID, 750);
});
// scroll to top action
$('.scroll-top').on('click', function(event) {
event.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
// mobile nav toggle
$('#nav-toggle').on('click', function (event) {
event.preventDefault();
$('#main-nav').toggleClass("open");
});
});
// scroll function
function scrollToID(id, speed){
var offSet = 0;
var targetOffset = $(id).offset().top - offSet;
var mainNav = $('#main-nav');
$('html,body').animate({scrollTop:targetOffset}, speed);
if (mainNav.hasClass("open")) {
mainNav.css("height", "1px").removeClass("in").addClass("collapse");
mainNav.removeClass("open");
}
}
if (typeof console === "undefined") {
console = {
log: function() { }
};
}
</script>
</body>
</html>