-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
174 lines (173 loc) · 7.63 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>任勇军的简历</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="imgs/iconfont/iconfont.css">
</head>
<body>
<div class="loading">
<div class="pic">
<span></span>
<b>0%</b>
</div>
</div>
<div class="container">
<div class="nav" id="nav">
<ul>
<li>
<input type="radio" name="select" value="index" checked>
<a href="#banner" title="Home">首页</a>
<span class="nav-tooltip">Home</span>
</li>
<li>
<input type="radio" name="select" value="About Me">
<a href="#about" title="About Me">About Me</a>
<span class="nav-tooltip">About</span>
</li>
<li>
<input type="radio" name="select" value="Education">
<a href="#education" title="Education">Education</a>
<span class="nav-tooltip">Education</span>
</li>
<li>
<input type="radio" name="select" value="Skills">
<a href="#skills" title="Skills">Skills</a>
<span class="nav-tooltip">Skills</span>
</li>
<li>
<input type="radio" name="select" value="Portfolio">
<a href="#portfolio" title="Portfolio">Portfolio</a>
<span class="nav-tooltip">Portfolio</span>
</li>
</ul>
</div>
<div class="content" id="content">
<section class="scroll banner" id="banner">
<div class="banner-cont">
<h1>WEB FRONT-END DEVELOPER</h1>
<p>If I have seen farther than others, it is because I was standing on the shoulders of giants.</p>
</div>
<i class="iconfont icon-more more"></i>
</section>
<section class="scroll about" id="about">
<h2>ABOUT ME</h2>
<div class="information">
<div class="info-left left">
<div class="photo"></div>
<div class="links">
<a href="https://github.com/materialcoder" title="github" class="iconfont icon-github" target="_blank"></a>
<a href="http://blog.csdn.net/github_39673115" title="blog" class="iconfont icon-logo_csdn" target="_blank"></a>
</div>
</div>
<div class="info-right right">
<p class="left">姓 名 : 任勇军</p>
<p class="right">出生年月 : 1992.01.18</p>
<p class="left">学 历 : 硕士</p>
<p class="right">联系电话 : 18502942280</p>
<p>邮 箱 : <a href="mailto:[email protected]">[email protected]</a></p>
</div>
</div>
</section>
<section class="scroll education" id="education">
<div class="education-cont">
<div class="left">
<h2>Education</h2>
</div>
<div class="right">
<div class="education-item">
<h3 class="name">西安交通大学</h3>
<span class="degree"><i class="iconfont icon-ziyuan"></i> 硕士</span> /
<span class="time"><i class="iconfont icon-rili"></i> 2015.09 - 至今</span>
<p class="rate"><i class="iconfont icon-paiming"></i> 15%</p>
<p class="desc">在这里仍然学习的是焊接专业，研一期间课程较少，也还没有进实验室。一次偶然的机会（就是帮别人做一个网页），接触到了前端，在此之前，除了本科时考了计算机二级，就再也没有接触过编程相关的事情。最初的前端在我眼里就是“实现一个网页”，但后来越学越多，发现前端开发是一件非常有趣，并且很能带来成就感的事情。充满着好奇和激情，踏上了前端之路，一去不返。</p>
</div>
<div class="education-item">
<h3 class="name">武汉大学</h3>
<span class="degree"><i class="iconfont icon-ziyuan"></i> 本科</span> /
<span class="time"><i class="iconfont icon-rili"></i> 2011.09 - 2015.07</span>
<p class="rate"><i class="iconfont icon-paiming"></i> 20%</p>
<p class="desc">刚刚高中毕业的我，拿着一本厚厚的“专业指南”，看了整整一周，然后“慎重”地选择了武汉大学动力与机械学院“材料类”专业。材料专业，就是研发新材料嘛，开拓创新，为祖国的发展舔砖加瓦，嗯，当时的我是这样想的。然而，好像并不是这样。实际情况是学习了四年的锻（造）、铸（造）、焊（接），但我并没有讨厌我的专业，而是认真学习，积极参加各种活动，并最终考上了在材料专业方面更好的西安交通大学研究生。</p>
</div>
</div>
</div>
</section>
<section class="scroll skills" id="skills">
<h2>Skills</h2>
<div class="skills-cont">
<div class="desc left">
<p> - 熟练掌握HTML(5)、CSS(3)及JavaScript等前端开发技术，能够高效还原设计稿，像素级页面制作能力，并具有一定的项目开发经验</p>
<p> - 熟悉jQuery、Ajax、Bootstrap等</p>
<p> - 熟悉PHP后台开发语言，能够独立完成前后台交互</p>
<p> - 了解MySQL数据库</p>
</div>
<div class="bars right">
<div class="bar-item">
<p class="bar-item_label">HTML/HTML5</p>
<div class="bar-item_bar" data-value="95"></div>
<p class="bar-item_tooltip"></p>
</div>
<div class="bar-item">
<p class="bar-item_label">CSS/CSS3</p>
<div class="bar-item_bar" data-value="90"></div>
<p class="bar-item_tooltip"></p>
</div>
<div class="bar-item">
<p class="bar-item_label">JavaScript</p>
<div class="bar-item_bar" data-value="90"></div>
<p class="bar-item_tooltip"></p>
</div>
<div class="bar-item">
<p class="bar-item_label">PHP</p>
<div class="bar-item_bar" data-value="70"></div>
<p class="bar-item_tooltip"></p>
</div>
<div class="bar-item">
<p class="bar-item_label">MySQL</p>
<div class="bar-item_bar" data-value="60"></div>
<p class="bar-item_tooltip"></p>
</div>
</div>
</div>
</section>
<section class="scroll portfolio" id="portfolio">
<h2>Portfolio</h2>
<div class="portfolio-cont">
<div class="portfolio-cont_item_wrapper">
<div class="portfolio-cont_item">
<img src="imgs/1.jpg" alt="">
<div class="cover"><a href="http://chinesetea.center" target="_blank">A tea website<i>HTML, CSS, JavaScript, jQuery, Ajax, PHP</i></a></div>
</div>
<div class="portfolio-cont_item">
<img src="imgs/2.jpg" alt="">
<div class="cover"><a href="http://datechat.left" target="_blank">An online dating website<i>HTML 5, CSS 3, JavaScript, Ajax, PHP</i></a></div>
</div>
<div class="portfolio-cont_item">
<img src="imgs/3.jpg" alt="">
<div class="cover"><a href="http://materialcoder.me/Chart-Component/index.html" target="_blank">A H5 Web APP<i>HTML 5, CSS 3, jQuery, fullpagejs</i></a></div>
</div>
<div class="portfolio-cont_item">
<img src="imgs/4.jpg" alt="">
<div class="cover">
<a href="http://materialcoder.me/BaiduIFE2017/HTML-CSS/task7/index.html" target="_blank">A common technology product homepage<i>HTML 5, CSS 3</i></a>
</div>
</div>
<div class="portfolio-cont_item">
<img src="imgs/5.jpg" alt="">
<div class="cover"><a href="http://materialcoder.me/BaiduIFE2017/5%20%E9%9F%B3%E4%B9%90%E6%92%AD%E6%94%BE%E5%99%A8/index.html" target="_blank">A simple online music player<i>HTML 5, CSS 3, JavaScript</i></a></div>
</div>
<div class="portfolio-cont_item">
<img src="imgs/6.jpg" alt="">
<div class="cover"><a href="http://materialcoder.me/BaiduIFE2017" target="_blank">Some more small demos</a></div>
</div>
</div>
</div>
</section>
</div>
</div>
<script src="js/loading.js"></script>
<script src="js/main.js"></script>
</body>
</html>