-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
124 lines (119 loc) · 5.15 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
<!DOCTYPE html>
<html>
<head>
<title>吴延彬简历</title>
<!-- 移动端：布局视口 理想视口 视觉视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<!-- swiper css -->
<link rel="stylesheet" type="text/css" href="./css/swiper-4.1.6.min.css">
<link rel="stylesheet" type="text/css" href="./css/animate.min.css">
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<!-- swiper js -->
<script type="text/javascript" src="./js/swiper-4.1.6.min.js"></script>
<script type="text/javascript" src="./js/swiper.animate1.0.3.min.js"></script>
<body>
<!-- Swiper -->
<div class="swiper-container swiper-container-father">
<div class="swiper-wrapper">
<!-- 个人信息 -->
<div class="swiper-slide">
<!-- 头像 -->
<div class="avatar ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
<img src="images/avatar2.jpeg" >
</div>
<!-- 姓名 -->
<div class="ani userName" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.0s">
吴延彬
</div>
<!-- 个人信息 -->
<div class="ani" swiper-animate-effect="rollIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.0s">
<div>
心有猛虎，细嗅蔷薇
</div>
<div>
高级前端开发工程师
</div>
<div>
</div>
</div>
</div>
<!-- 工作经历 -->
<div class="swiper-slide">
<h1 class="ani" swiper-animate-effect="rubberBand" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">教育及工作经历</h1>
<div class="work">
<div class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.6s">
<p>2013.09-2017.6</p>
<p>哈尔滨商业大学 本科 软件工程</p>
</div>
<div class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.9s">
<p>2017.06-2018.07</p>
<p>霍尔果斯万殊融资租赁 前端开发</p>
</div>
<div class="ani" swiper-animate-effect="fadeInTop" swiper-animate-duration="0.5s" swiper-animate-delay="0.9s">
<p>2018.07-至今</p>
<p>杭州大搜车汽车服务 前端开发</p>
</div>
</div>
</div>
<!-- 我的技能 -->
<div class="swiper-slide">
<h1 class="ani" swiper-animate-effect="rubberBand" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">擅长技术</h1>
<div class="skill">
<p class="skill-group ani" swiper-animate-effect="zoomInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.6s">
<span class="skill-item skill-skilled">HTML</span>
</p>
<p class="skill-group ani" swiper-animate-effect="zoomInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.9s">
<span class="skill-item skill-skilled">css</span>
<span class="skill-item skill-grasp">scss</span>
</p>
<p class="skill-group ani" swiper-animate-effect="zoomInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1.2s">
<span class="skill-item skill-grasp">JS</span>
<span class="skill-item skill-grasp">Vue</span>
<span class="skill-item skill-understand">React</span>
<span class="skill-item skill-grasp">RN</span>
<span class="skill-item skill-grasp">Jquery</span>
</p>
<p class="skill-group ani" swiper-animate-effect="zoomInRight" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s">
<span class="skill-item skill-understand">微信小程序</span>
<span class="skill-item skill-understand">webapp</span>
</p>
</div>
</div>
<!-- 我的作品 -->
<div class="swiper-slide">
<h1 class="ani" swiper-animate-effect="rubberBand" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我的作品</h1>
<div class="swiper-container swiper-container-son ani" swiper-animate-effect="lightSpeedIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.6s">
<div class="swiper-wrapper" >
<a href="./queryMedia.html">
<div class="swiper-slide" style="background-image:url(./images/1.jpeg)"></div>
</a>
<div class="swiper-slide" style="background-image:url(./images/2.jpeg)"></div>
<div class="swiper-slide" style="background-image:url(./images/3.jpeg)"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination-son"></div>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination-father"></div>
</div>
<!-- 获取用户视图，根据不同视图的宽度确定相应的rem -->
<script type="text/javascript">
// 获取视图的宽度
let htmlWidth = document.documentElement.clientWidth
|| document.body.clientWidth;
let htmlDom = document.getElementsByTagName('html')[0];
// 如果视图的宽度大于750，则rem为定值
let fontSize = 37.5
fontSize = htmlWidth >= 750 ? fontSize : htmlWidth/20
htmlDom.style.fontSize = fontSize + 'px';
</script>
<!-- init swiper -->
<script type="text/javascript" src="./js/index.js"></script>
</body>
</body>
</html>