forked from lixiaochichn/resume
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
148 lines (127 loc) · 7.61 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
<!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>李晓驰的作品集</title>
<link rel="shortcut icon" href="images/icon3.jpg">
<link rel="stylesheet" href="css/app.css">
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<header class="nav-menu">
<img src="images/icon3.jpg" alt="icon" class="resume-icon">
<ul class="nav-items hidden">
<li class="nav-item"><i class="fa fa-bars" aria-hidden="true"></i></a>
</li>
<a href="#" class="nav-item nav-line real-item home-item"><span class="real-item home-item">Home</span></a>
<a href="#collections" class="nav-item nav-line real-item"><span class="real-item">作品</span></a>
<a href="#ability" class="nav-item nav-line real-item about-item"><span class="real-item about-item">技能</span></a>
<a href="#" class="nav-item nav-line real-item"><span class="real-item">联系我</span></a>
<!-- <li class="nav-item"><a href="#"><i class="fa fa-bars" aria-hidden="true"></i></a></li>
<li class="nav-item nav-line real-item"><a href="#" class="real-item">Home</a></li>
<li class="nav-item nav-line real-item"><a href="#collections" class="real-item">Collections</a></li>
<li class="nav-item nav-line real-item"><a href="#" class="real-item">Ask Me Anything</a></li>
<li class="nav-item nav-line real-item about-item"><a href="#ability" class="real-item about-item">About</a></li> -->
</ul>
</header>
<div class="resume-container">
<div class="resume-header">
<img src="images/faceimg.jpg" alt="faceimg" class="faceimg">
<div class="myEngname">Chopper Lee</div>
<div class="myChnname">李晓驰</div>
<div class="myintro">前端开发工程师，熟练掌握多种Web前端技术 / 框架。</div>
<div class="centered">
<a href="http://www.jianshu.com/u/8a47f146110d"><i class="fa fa-pencil" aria-hidden="true"></i>Writings</a>
<a href="https://github.com/lixiaochichn"><i class="fa fa-github" aria-hidden="true"></i>GitHub</a>
<a href=""><i class="fa fa-weixin" aria-hidden="true"></i>WeChat</a>
</div>
</div>
</div>
<div class="ability hide" id="ability">
<h1 class="ability-title">前端技能</h1>
<div class="ability-container">
<ul class="ability-list">
<li class="ability-item">1. 热爱前端，喜欢用最扎实的代码技术做出效果上最炫，代码上最合理的页面。</li>
<li class="ability-item">2. 熟悉 HTML / CSS, 能够兼容主流各种浏览器, 比如 IE6-10, Chrome, Firefox, Opera。</li>
<li class="ability-item">3. 熟悉 JS DOM, Event, Ajax, JSON 能够编写基本的js原生代码。</li>
<li class="ability-item">4. 熟悉 jQuery API, 能够编写最基本的动态交互效果。</li>
<li class="ability-item">5. 熟练使用 Git 等版本控制工具。</li>
<li class="ability-item">6. 能够熟练使用 Chrome 调试工作调试代码, 并能够进一步进行优化。</li>
<li class="ability-item">8. 目前正在关注移动端的 HTML5, CSS3, Vue.js等。</li>
<li class="ability-item">9.了解 Sass的运作原理, 并在一定的条件下能熟练运用。</li>
<li class="ability-item">10.熟悉 DOM, Event, Prototype, Constructor 等基础概念。</li>
<li class="ability-item">11.熟悉JS在各个浏览器下的兼容问题。</li>
<li class="ability-item">12.了解 IE6 / 7 / 8 / 9 / 10 / 11之间的差别, 了解CSS盒模型在各个浏览器下的差异。能够熟练的解决各个浏览器下出现的Bug。</li>
</ul>
</div>
<div class="ability-close botton-close"><i class="fa fa-times-circle-o botton-close" aria-hidden="true"></i></div>
</div>
<div class="resume-container">
<div class="collections" id="collections">
<h1 class="coll-title">个人作品</h1>
<div class="coll-container">
<a href="https://lixiaochichn.github.io/qq-music/" class="coll-box">
<div class="coll-innerbox">
<img src="images/coll11-music.jpg" alt="coll001">
<h2 class="box-title">QQ音乐手机版</h2>
<p class="box-describe">音乐搜索，音乐播放，歌词同步滚动</p>
</div>
</a>
<a href="https://lixiaochichn.github.io/weilong/" class="coll-box">
<div class="coll-innerbox">
<img src="images/coll-weilong.jpg" alt="coll001">
<h2 class="box-title">卫龙食品旗舰店</h2>
<p class="box-describe">自适应标题栏、浮动阴影效果</p>
</div>
</a>
<a href="https://lixiaochichn.github.io/onepiece/" class="coll-box">
<div class="coll-innerbox">
<img src="images/coll-onepiece.jpg" alt="coll001">
<h2 class="box-title">海贼王3D轮播</h2>
<p class="box-describe">CSS 3D轮播、背景动画</p>
</div>
</a>
<a href="https://lixiaochichn.github.io/spongebob/" class="coll-box">
<div class="coll-innerbox">
<img src="images/coll-bob.jpg" alt="coll001">
<h2 class="box-title">海绵宝宝3D轮播</h2>
<p class="box-describe">CSS 3D轮播、卡片翻转</p>
</div>
</a>
<!-- </a> -->
<a href="https://lixiaochichn.github.io/octocats/" class="coll-box">
<div class="coll-innerbox">
<img src="images/coll-octocats.jpg" alt="coll001">
<h2 class="box-title">Octocats</h2>
<p class="box-describe">懒加载</p>
</div>
</a>
<a href="https://lixiaochichn.github.io/calculator/" class="coll-box">
<div class="coll-innerbox">
<img src="images/coll-calculator.jpg" alt="coll001">
<h2 class="box-title">Calculator</h2>
<p class="box-describe">计算器</p>
</div>
</a>
<a href="https://lixiaochichn.github.io/findGithubUser/" class="coll-box">
<div class="coll-innerbox">
<img src="images/coll-findgithubuser.jpg" alt="coll001">
<h2 class="box-title">Find Github User</h2>
<p class="box-describe">Github用户信息搜索</p>
</div>
</a>
<a href="https://lixiaochichn.github.io/notepad/" class="coll-box">
<div class="coll-innerbox">
<img src="images/coll-notepad.jpg" alt="coll001">
<h2 class="box-title">NotePad</h2>
<p class="box-describe">记事本</p>
</div>
</a>
</div>
</div>
</div>
<script src="scripts/app.js"></script>
</body>
</html>