├── favicon.ico ├── resume.jpg ├── resume.pdf ├── src ├── avator.png └── iconfont.ttf ├── .gitignore ├── toadresume-intro.jpg ├── package.json ├── gulpfile.js ├── README.md ├── index.html ├── scss └── style.scss └── css └── style.css /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ToadWoo/resume/HEAD/favicon.ico -------------------------------------------------------------------------------- /resume.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ToadWoo/resume/HEAD/resume.jpg -------------------------------------------------------------------------------- /resume.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ToadWoo/resume/HEAD/resume.pdf -------------------------------------------------------------------------------- /src/avator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ToadWoo/resume/HEAD/src/avator.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache 2 | node_modules 3 | .idea 4 | .DS_Store 5 | *.log 6 | 7 | -------------------------------------------------------------------------------- /src/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ToadWoo/resume/HEAD/src/iconfont.ttf -------------------------------------------------------------------------------- /toadresume-intro.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ToadWoo/resume/HEAD/toadresume-intro.jpg -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "toad-resume", 3 | "version": "0.1.0", 4 | "devDependencies": { 5 | "gulp": "^3.9.1", 6 | "gulp-compass": "^2.1.0" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | 3 | var compass = require('gulp-compass'); 4 | 5 | gulp.task('compass', function() { 6 | gulp.src('./scss/**') 7 | .pipe(compass({ 8 | comments: false, 9 | css: 'css', 10 | sass: 'scss', 11 | image: 'img' 12 | })) 13 | .pipe(gulp.dest('./css')); 14 | }); 15 | 16 | gulp.task('default', function() { 17 | gulp.run('compass'); 18 | 19 | gulp.watch('./scss/**', function(event) { 20 | gulp.run('compass'); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | ## 简历（响应式web版、psd版） 3 | - 网页版简历 http://resume.toadw.cn 4 | 5 | 该项目的项目源自[@ Cong Min](https://congm.in) 的简历的启发 6 | 7 | 于是就根据之前自己设计的简历动手开发了`响应式Web版简历` 8 | 9 | 这样在我们下次修改的时候我只需要简单的修改`html`里面的内容即可了 10 | 11 | 该项目使用了`gulp` 、`sass`、 `compass`进行项目的构建，使用`Flexbox`做响应式布局 12 | 13 | - Fork或者借鉴请注明出处[@ Toad](http://toadw.cn) 14 | 15 | ![imgview](toadresume-intro.jpg) 16 | 17 | 18 | #### 打印方法 19 | 20 | > chrome浏览器 - "打印" - 设置无边距 - 即可导出 21 | 22 | 23 | #### 修改方法 24 | 1. 编辑`index.html` 25 | 2. 如需修改技能状态条，可在`scss/style.scss`里面编辑 26 | ``` 27 | //例如html状态条比例(使用flex布局中的比例) 28 | .i-html { 29 | .in {flex: 8;}//.in为绿色部分比例 30 | .out {flex: 2;}//.out为灰色部分比例 31 | } 32 | ``` 33 | 3. 修改完浏览器预览-打印 34 | 35 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 简历 | 吴根龙 - Genlong Wu 11 | 12 | 13 | 14 | 15 | PDF简历 16 |

最后更新时间：2017年03月

17 |
18 |
19 |
20 | 21 |
22 |
23 | 24 |

实践经历

25 |
26 |
27 |
28 |
29 | 2017.07 ~ 30 | 工作 31 |

美团点评

32 |
33 |
34 |

35 | 36 | 毕业去向_< 37 |

38 |
39 |
40 | 41 |
42 |
43 | 2016.07 ~ 2016.10 44 | 实习 45 |

四三九九(厦门)网络股份有限公司

46 |
47 |
48 |

49 | 社区平台部-UED-前端 50 | 负责4399儿歌、动漫业务PC端及移动端的多个活动页面的前端开发，原有网站的前端界面更新及维护，使其达到更好的视觉体验和用户体验。同时参与了 51 | 4399表情站 53 | 整站的前端开发，并兼容至IE6，上线后不断的维护与优化。 54 |

55 |
56 |
57 | 58 |
59 |
60 | 2015.10 ~ 至今 61 | 工作室 62 |

集美大学·智弧信息科技工作室

63 |
64 |
65 |

联合创始人前端负责人 66 | 负责与客户对接开发需求、制作原型及UI，并参与项目的研发及维护，此外还负责项目的前端工作分配，参与各创业比赛及路演， 67 | 以智弧工作室为项目参加福建省“创青春”创新创业大赛获得创业之星称号。 68 |

69 |
70 |
71 |
72 |
73 | 74 |
75 |
76 | 77 |

项目经验

78 | 79 |
80 |
81 |
82 |
83 | 2017.02 84 | Link 85 |

图书盒子Pro·微信小程序 86 |

87 |
88 |
89 |

产品设计界面设计前端开发 90 | 该项目基于微信小程序MINA框架的WXML、WXSS，视图层采用Flex弹性布局，逻辑层采用模块化的开发，项目使用了开放的图书馆数据接口，后端采用 91 | LeanCloud后端云进行云端数据存储，极大方便了同学查询馆藏图书及借阅情况，上线 2周用户近 1000人，Github获得近 92 | 50个Star。 93 |

94 |
95 |
96 |
97 |
98 | 2016.12 99 | Link 100 |

思客拓客·创业想法交流平台

101 |
102 |
103 |

104 | 界面设计前端开发 105 | 该项目为移动端产品，利用了HTML5、CSS3、Sass、Iconfont、rem自适应等技术来丰富展示前端界面， 106 | 使用BaiduTemplate做为模板引擎进行数据逻辑处理，通过Ajax与后端进行数据交互，实现了大量的前后端分离，以及复杂的业务逻辑。 107 |

108 |
109 |
110 |
111 |
112 | 2016.09 113 | Link 114 |

有空·时间售卖与技能交易平台

115 |
116 |
117 |

界面设计前端开发 118 | 该平台是基于微信公众号的移动端Web应用，采用了Vue.js做为MVVM框架，实现了部分数据的前后端分离。产品上线后不断的维护与重构，优化用户体验及性能。 119 |

120 |
121 |
122 |
123 |
124 | 2016.04 125 | Link 126 |

百度前端技术学院任务 · 前端练习

127 |
128 |
129 |

130 | 通过百度前端技术学院的任务制度，较为系统的学习了Web前端相关的基础知识，通过任务实践，制作demo，并将代码托管在Github上，使用Github 131 | Pages进行demo展示。 132 |

133 |
134 |
135 |
136 |
137 | 138 |
139 |
140 | 141 |

专业技能

142 | 143 |
144 |
145 |
    146 |

  • 熟悉使用HTML5、CSS3、Sass，能准确还原设计稿。

    • 147 |

  • 会点设计，有点审美能力，重视用户体验

    • 148 |

  • 了解 MVVM框架 Vue、微信小程序

    • 149 |

  • 熟练使用Git进行版本控制和代码托管、Markdown进行文档编写，并以MacOS X、WebStorm作为日常开发环境进行工作，了解项目开发流程及开发调试工具的使用。

    • 150 |
151 |
152 |
153 | 154 |
155 |
156 | 157 |

奖项证书

158 | 159 |
160 |
161 |
162 |
163 | 2013-2017 164 | 校级 165 |

集美大学专业二等奖学金·多次获得

166 |
167 |
168 |
169 |
170 | 2015.05 171 | 校级 172 |

集美大学首届数学建模大赛·二等奖

173 |
174 |
175 |
176 |
177 | 2016.09 178 | 省级 179 |

福建省“创青春”创新创业大赛·创业之星

180 |
181 |
182 |
183 |
184 |
185 |
186 | 187 |
188 | 189 |
190 |

吴根龙

191 |
192 |

Web前端开发工程师

193 |
194 | 195 |
196 |

男 / 1994.07

197 |

集美大学 · 光电信息科学与工程

198 |

本科 / 2017年毕业

199 |
200 | 201 |
202 |

HTML

203 |
204 | 205 |
206 |

CSS

207 |
208 | 209 |
210 |

JavaScript

211 |
212 | 213 |
214 |

Sass

215 |
216 | 217 |
218 |

PhotoShop

219 |
220 | 221 |
222 |
223 | 224 |
225 | 253 |
254 |
255 | 256 |
257 | 260 |
261 | 263 | 264 | 265 | 266 | 278 | -------------------------------------------------------------------------------- /scss/style.scss: -------------------------------------------------------------------------------- 1 | @import "compass/reset"; 2 | @import "compass/css3"; 3 | 4 | $color-gray: #d1d1d1; 5 | $color-gray3: #d7d7d7; 6 | $color-gray2: #eee; 7 | $color-green: #00b38a; 8 | $font-family: 'Helvetica Neue', Helvetica, Arial, "Microsoft YaHei", sans-serif; 9 | 10 | 11 | //iconfont 12 | @font-face { 13 | font-family: "iconfont"; 14 | src: url('../src/iconfont.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 15 | } 16 | 17 | .iconfont { 18 | color: $color-green; 19 | font-family:"iconfont" !important; 20 | font-size:18px; 21 | font-style:normal; 22 | -webkit-font-smoothing: antialiased; 23 | -moz-osx-font-smoothing: grayscale; 24 | } 25 | 26 | .icon-phone:before { content: "\e622"; } 27 | 28 | .icon-github:before { content: "\e69f"; } 29 | 30 | .icon-link:before { content: "\e609"; } 31 | 32 | .icon-homepage:before { content: "\e615"; } 33 | 34 | .icon-email:before { content: "\e63b"; } 35 | 36 | .icon-dot:before { content: "\e600"; } 37 | 38 | 39 | .kill-ie { 40 | margin: 0; 41 | padding: .5em 0; 42 | color: #333; 43 | text-align: center; 44 | background: #fff8e2; 45 | } 46 | * { 47 | @include box-sizing(border-box); 48 | } 49 | body { 50 | color: #333; 51 | font-size: 14px; 52 | line-height: 1.5; 53 | font-family: $font-family; 54 | -webkit-font-smoothing: antialiased; 55 | -webkit-text-size-adjust: none; 56 | background-color: #eee; 57 | overflow: auto; 58 | padding-top: 5px; 59 | @media screen and (max-width: 1024px) { 60 | padding-top: 0; 61 | } 62 | } 63 | a { 64 | text-decoration: none; 65 | @include transition(all .2s ease-in-out); 66 | } 67 | .last-modified{ 68 | position: absolute; 69 | top: 30px; 70 | left: 50%; 71 | width: 1000px; 72 | color: #bbb; 73 | margin-left: -500px; 74 | font-size: 12px; 75 | text-align: right; 76 | @media screen and (max-width: 1024px) { 77 | display: none; 78 | } 79 | } 80 | .content { 81 | position: relative; 82 | width: 1024px; 83 | margin: 50px auto; 84 | @include border-radius(5px); 85 | @include box-shadow(0 0 15px #c0c0c0); 86 | background-color: #fff; 87 | overflow: hidden; 88 | @media screen and (max-width: 1024px) { 89 | width: 100%; 90 | margin: 0; 91 | @include border-radius(0); 92 | } 93 | } 94 | .content-hd { 95 | width: 100%; 96 | height: inherit; 97 | color: #fff; 98 | background-color: $color-gray2; 99 | overflow: hidden; 100 | @media screen and (max-width: 720px) { 101 | padding: 25px 30px; 102 | } 103 | .title { 104 | width: 100%; 105 | font-size: 52px; 106 | font-weight: 300; 107 | overflow: hidden; 108 | padding-bottom: 5px; 109 | padding-top: 40px; 110 | @media screen and (max-width: 720px){ 111 | padding-top: 20px; 112 | } 113 | } 114 | .name, 115 | .job, 116 | .info, 117 | .contact { 118 | 119 | @media screen and (max-width: 1024px) { 120 | width: 100%; 121 | text-align: center; 122 | } 123 | } 124 | .avator{ 125 | display: block; 126 | width: 200px; 127 | height: 200px; 128 | margin: 0 auto; 129 | @media screen and(max-width: 720px){ 130 | width: 150px; 131 | height: 150px; 132 | } 133 | } 134 | .name { 135 | text-align: center; 136 | color: $color-green; 137 | h1 { 138 | margin-top: 10px; 139 | font-family: "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3", $font-family; 140 | font-weight: 500; 141 | letter-spacing: 5px; 142 | @media screen and (max-width: 720px) { 143 | letter-spacing: 0; 144 | line-height: 1.25; 145 | 146 | } 147 | 148 | } 149 | small { 150 | font-weight: 400; 151 | letter-spacing: 0; 152 | font-size: 24px; 153 | padding-left: 10px; 154 | @media screen and (max-width: 720px) { 155 | display: block; 156 | padding-left: 0; 157 | font-size: 20px; 158 | line-height: 1; 159 | } 160 | } 161 | } 162 | .job { 163 | text-align: center; 164 | color: $color-green; 165 | font-size: 24px; 166 | @media screen and (max-width: 720px) { 167 | margin: 0 auto 0; 168 | padding: 10px; 169 | } 170 | 171 | } 172 | 173 | .skill-level{ 174 | padding-top: 80px; 175 | h3{ 176 | color: #999; 177 | margin-left: 5px; 178 | } 179 | .item{ 180 | display: flex; 181 | width: 260px; 182 | height: 12px; 183 | border-radius: 6px; 184 | margin-bottom: 15px; 185 | background: $color-gray3; 186 | .in{ 187 | background: $color-green; 188 | height: 12px; 189 | width: 12px; 190 | } 191 | .out{ 192 | background: $color-gray3; 193 | height: 12px; 194 | width: 12px; 195 | } 196 | .in:first-child{ 197 | border-radius: 6px 0 0 6px; 198 | } 199 | .out:last-child{ 200 | border-radius: 0 6px 6px 0; 201 | } 202 | } 203 | 204 | .i-html { 205 | .in { 206 | flex: 8; 207 | } 208 | .out { 209 | flex: 2; 210 | } 211 | } 212 | 213 | .i-css { 214 | .in { 215 | flex: 7; 216 | } 217 | .out { 218 | flex: 3; 219 | } 220 | } 221 | .i-js { 222 | .in { 223 | flex: 6.5; 224 | } 225 | .out { 226 | flex: 3.5; 227 | } 228 | } 229 | .i-sass { 230 | .in { 231 | flex: 6; 232 | } 233 | .out { 234 | flex: 4; 235 | } 236 | } 237 | .i-ps { 238 | .in { 239 | flex: 7.5; 240 | } 241 | .out { 242 | flex: 2.5; 243 | } 244 | } 245 | 246 | @media screen and (max-width: 1024px){ 247 | display: none; 248 | } 249 | 250 | } 251 | 252 | .info { 253 | color: #555; 254 | line-height: 30px; 255 | h2 { 256 | margin: 30px 0 4px; 257 | font-size: 18px; 258 | } 259 | h3 { 260 | font-size: 16px; 261 | margin-top: 10px; 262 | } 263 | @media screen and (max-width: 720px){ 264 | h2{ 265 | margin-top: 4px; 266 | } 267 | } 268 | } 269 | .contact { 270 | padding-top: 100px; 271 | @media screen and (max-width: 1024px){ 272 | padding-top: 0; 273 | 274 | } 275 | ul { 276 | margin: 8px 0 4px; 277 | @media screen and (max-width: 1024px) { 278 | text-align: center; 279 | margin: 16px 0 0; 280 | } 281 | &>li { 282 | height: 22px; 283 | margin-top: 10px; 284 | @media screen and (max-width: 1024px) { 285 | display: inline-block; 286 | margin: 0; 287 | } 288 | &>a { 289 | 290 | color: #555; 291 | font-family: "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3", $font-family; 292 | font-size: 16px; 293 | line-height: 22px; 294 | &:hover { 295 | color: #999; 296 | } 297 | .contact-link { 298 | @media screen and (max-width: 1024px) { 299 | display: none; 300 | } 301 | } 302 | .iconfont { 303 | margin-left: 5px; 304 | @media screen and (max-width: 1024px) { 305 | font-size: 20px; 306 | } 307 | } 308 | } 309 | } 310 | } 311 | } 312 | } 313 | .content-bd { 314 | display: flex; 315 | min-height: 200px; 316 | flex-flow: row wrap; 317 | overflow: hidden; 318 | 319 | .content-left { 320 | flex: 6.5; 321 | padding: 20px 30px 50px ; 322 | @media screen and (max-width: 1024px) { 323 | flex: 1 100%; 324 | order: 2; 325 | padding: 20px 10px 50px ; 326 | } 327 | } 328 | .content-right { 329 | box-sizing: border-box; 330 | padding: 20px 30px 50px ; 331 | flex: 3.5; 332 | background: #eeeeee; 333 | @media screen and (max-width: 1024px) { 334 | flex: 1 100%; 335 | order: 1; 336 | padding-bottom: 20px; 337 | } 338 | } 339 | 340 | section { 341 | overflow: hidden; 342 | padding: 10px 15px; 343 | } 344 | .section-hd { 345 | position: relative; 346 | height: 32px; 347 | margin: 10px auto 5px; 348 | overflow: hidden; 349 | } 350 | .section-bd { 351 | overflow: hidden; 352 | } 353 | .section-title-l, 354 | .section-title-r { 355 | position: absolute; 356 | top: 50%; 357 | display: inline-block; 358 | width: 35%; 359 | height: 0; 360 | vertical-align: middle; 361 | border-top: 1px solid #ededed; 362 | } 363 | .section-title-l { 364 | left: 0; 365 | } 366 | .section-title-r { 367 | right: 0; 368 | } 369 | .section-title { 370 | position: relative; 371 | z-index: 1; 372 | width: 24%; 373 | min-width: 100px; 374 | margin: 0 auto; 375 | padding: 4px 10px; 376 | @include border-radius(32px); 377 | font-size: 16px; 378 | text-align: center; 379 | background-color: #eee; 380 | } 381 | .section-list { 382 | padding: 10px 0 5px; 383 | } 384 | .item-hd { 385 | position: relative; 386 | padding: 10px 0 5px; 387 | line-height: 20px; 388 | overflow: hidden; 389 | font-weight: 500; 390 | .iconfont { 391 | color: $color-green; 392 | } 393 | .item-time { 394 | display: inline-block; 395 | float: left; 396 | width: 25%; 397 | @media screen and (max-width: 720px) { 398 | width: 100%; 399 | margin-bottom: 5px; 400 | } 401 | } 402 | .item-more { 403 | float: right; 404 | margin-left: 5px; 405 | @media screen and (max-width: 720px) { 406 | position: absolute; 407 | top: 10px; 408 | right: 0; 409 | margin-top: 1px; 410 | } 411 | } 412 | .item-name { 413 | display: inline-block; 414 | float: left; 415 | } 416 | } 417 | .item-bd { 418 | margin-bottom: 5px; 419 | } 420 | .section-content { 421 | text-align: justify; 422 | word-break: break-all; 423 | line-height: 22px; 424 | .iconfont { 425 | color: $color-green; 426 | } 427 | em { 428 | display: inline-block; 429 | font-family: Menlo, $font-family; 430 | font-size: 12px; 431 | line-height: 14px; 432 | border: 1px solid $color-gray; 433 | @include border-radius(3px); 434 | margin: 2px; 435 | padding: 0 3px; 436 | background-color: #f7f7f7; 437 | } 438 | strong { 439 | font-family: $font-family; 440 | font-size: 12px; 441 | line-height: 14px; 442 | border: 1px solid #f3f3f3; 443 | @include border-radius(3px); 444 | font-weight: 500; 445 | color: #444; 446 | margin: 2px; 447 | padding: 0 3px; 448 | background-color: #f6f6f6; 449 | } 450 | } 451 | .skill { 452 | .section-content { 453 | margin-bottom: 5px; 454 | line-height: 24px; 455 | } 456 | strong { 457 | display: inline; 458 | line-height: 18px; 459 | } 460 | } 461 | .practice { 462 | .item-time { 463 | width: 32%; 464 | @media screen and (max-width: 720px) { 465 | width: 100%; 466 | } 467 | } 468 | } 469 | .prize { 470 | .item-hd { 471 | padding: 12px 0 0; 472 | } 473 | .item-time { 474 | width: 15%; 475 | @media screen and (max-width: 720px) { 476 | width: 100%; 477 | } 478 | } 479 | } 480 | } 481 | .btn { 482 | display: inline-block; 483 | padding: 0 5px; 484 | border: 1px solid $color-green; 485 | border-radius: 3px; 486 | color: $color-green; 487 | font-family: Menlo, $font-family; 488 | font-size: 14px; 489 | line-height: 18px; 490 | text-align: center; 491 | &:hover { 492 | color: #fff; 493 | background-color: $color-green; 494 | } 495 | } 496 | .pdf { 497 | display: inline-block; 498 | position: fixed; 499 | z-index: 10; 500 | bottom: 6px; 501 | left: 50%; 502 | margin-left: 520px; 503 | padding: 0 8px; 504 | border-radius: 3px; 505 | color: #fff; 506 | font-size: 16px; 507 | line-height: 26px; 508 | background-color: $color-green; 509 | @media screen and (max-width: 1246px) { 510 | left: auto; 511 | right: 8px; 512 | margin-left: 0; 513 | } 514 | } 515 | footer { 516 | text-align: center; 517 | .footer-link { 518 | display: inline-block; 519 | color: $color-gray; 520 | margin-bottom: 25px; 521 | @media screen and (max-width: 1024px) { 522 | margin-top: 25px; 523 | } 524 | .icon-link{ 525 | color: $color-gray; 526 | font-size: 16px; 527 | } 528 | } 529 | &.print-footer{ 530 | display: none; 531 | } 532 | } 533 | 534 | ::-webkit-scrollbar { 535 | background-color: #f1f1f1; 536 | overflow: visible; 537 | width: 3px; 538 | height: 3px; 539 | } 540 | ::-webkit-scrollbar-thumb { 541 | background-color: rgba(0, 0, 0, .2); 542 | background-clip: padding-box; 543 | min-height: 15px; 544 | box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07); 545 | } 546 | ::-webkit-scrollbar-thumb:vertical:hover { 547 | background-color: rgba(0, 0, 0, .3); 548 | } 549 | ::-webkit-scrollbar-thumb:vertical:active { 550 | background-color: rgba(0, 0, 0, .5); 551 | } 552 | ::-webkit-scrollbar-button { 553 | height: 0; 554 | width: 0; 555 | } 556 | ::-webkit-scrollbar-track { 557 | background-clip: padding-box; 558 | border: solid transparent; 559 | border-width: 0 0 0 4px; 560 | } 561 | ::-webkit-scrollbar-corner { 562 | background: transparent; 563 | } 564 | 565 | ::selection { 566 | background: $color-green; 567 | color: #fff; 568 | } 569 | ::-moz-selection { 570 | background: $color-green; 571 | color: #fff; 572 | } 573 | 574 | // 打印样式 575 | @media print { 576 | @page { 577 | margin: 0; 578 | } 579 | .content { 580 | width: 970px; 581 | height: 1365px; 582 | margin: 0 auto; 583 | -moz-border-radius: 0; 584 | -webkit-border-radius: 0; 585 | border-radius: 0; 586 | padding: 0; 587 | } 588 | .content .content-hd { 589 | height: 1365px; 590 | } 591 | .content .print-hidden{ 592 | display: none; 593 | } 594 | .pdf { 595 | display: none; 596 | } 597 | footer.github-footer{ 598 | display: none; 599 | } 600 | footer.print-footer{ 601 | display: block; 602 | } 603 | footer.print-footer .footer-link { 604 | position: absolute; 605 | left: 45px; 606 | bottom: 25px; 607 | color: #c0c0c0; 608 | display: inline-block; 609 | } 610 | } -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | html, body, div, span, applet, object, iframe, 2 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 3 | a, abbr, acronym, address, big, cite, code, 4 | del, dfn, em, img, ins, kbd, q, s, samp, 5 | small, strike, strong, sub, sup, tt, var, 6 | b, u, i, center, 7 | dl, dt, dd, ol, ul, li, 8 | fieldset, form, label, legend, 9 | table, caption, tbody, tfoot, thead, tr, th, td, 10 | article, aside, canvas, details, embed, 11 | figure, figcaption, footer, header, hgroup, 12 | menu, nav, output, ruby, section, summary, 13 | time, mark, audio, video { 14 | margin: 0; 15 | padding: 0; 16 | border: 0; 17 | font: inherit; 18 | font-size: 100%; 19 | vertical-align: baseline; 20 | } 21 | 22 | html { 23 | line-height: 1; 24 | } 25 | 26 | ol, ul { 27 | list-style: none; 28 | } 29 | 30 | table { 31 | border-collapse: collapse; 32 | border-spacing: 0; 33 | } 34 | 35 | caption, th, td { 36 | text-align: left; 37 | font-weight: normal; 38 | vertical-align: middle; 39 | } 40 | 41 | q, blockquote { 42 | quotes: none; 43 | } 44 | q:before, q:after, blockquote:before, blockquote:after { 45 | content: ""; 46 | content: none; 47 | } 48 | 49 | a img { 50 | border: none; 51 | } 52 | 53 | article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { 54 | display: block; 55 | } 56 | 57 | @font-face { 58 | font-family: "iconfont"; 59 | src: url("../src/iconfont.ttf") format("truetype"); 60 | /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 61 | } 62 | .iconfont { 63 | color: #00b38a; 64 | font-family: "iconfont" !important; 65 | font-size: 18px; 66 | font-style: normal; 67 | -webkit-font-smoothing: antialiased; 68 | -moz-osx-font-smoothing: grayscale; 69 | } 70 | 71 | .icon-phone:before { 72 | content: "\e622"; 73 | } 74 | 75 | .icon-github:before { 76 | content: "\e69f"; 77 | } 78 | 79 | .icon-link:before { 80 | content: "\e609"; 81 | } 82 | 83 | .icon-homepage:before { 84 | content: "\e615"; 85 | } 86 | 87 | .icon-email:before { 88 | content: "\e63b"; 89 | } 90 | 91 | .icon-dot:before { 92 | content: "\e600"; 93 | } 94 | 95 | .kill-ie { 96 | margin: 0; 97 | padding: .5em 0; 98 | color: #333; 99 | text-align: center; 100 | background: #fff8e2; 101 | } 102 | 103 | * { 104 | -moz-box-sizing: border-box; 105 | -webkit-box-sizing: border-box; 106 | box-sizing: border-box; 107 | } 108 | 109 | body { 110 | color: #333; 111 | font-size: 14px; 112 | line-height: 1.5; 113 | font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft YaHei", sans-serif; 114 | -webkit-font-smoothing: antialiased; 115 | -webkit-text-size-adjust: none; 116 | background-color: #eee; 117 | overflow: auto; 118 | padding-top: 5px; 119 | } 120 | @media screen and (max-width: 1024px) { 121 | body { 122 | padding-top: 0; 123 | } 124 | } 125 | 126 | a { 127 | text-decoration: none; 128 | -moz-transition: all 0.2s ease-in-out; 129 | -o-transition: all 0.2s ease-in-out; 130 | -webkit-transition: all 0.2s ease-in-out; 131 | transition: all 0.2s ease-in-out; 132 | } 133 | 134 | .last-modified { 135 | position: absolute; 136 | top: 30px; 137 | left: 50%; 138 | width: 1000px; 139 | color: #bbb; 140 | margin-left: -500px; 141 | font-size: 12px; 142 | text-align: right; 143 | } 144 | @media screen and (max-width: 1024px) { 145 | .last-modified { 146 | display: none; 147 | } 148 | } 149 | 150 | .content { 151 | position: relative; 152 | width: 1024px; 153 | margin: 50px auto; 154 | -moz-border-radius: 5px; 155 | -webkit-border-radius: 5px; 156 | border-radius: 5px; 157 | -moz-box-shadow: 0 0 15px #c0c0c0; 158 | -webkit-box-shadow: 0 0 15px #c0c0c0; 159 | box-shadow: 0 0 15px #c0c0c0; 160 | background-color: #fff; 161 | overflow: hidden; 162 | } 163 | @media screen and (max-width: 1024px) { 164 | .content { 165 | width: 100%; 166 | margin: 0; 167 | -moz-border-radius: 0; 168 | -webkit-border-radius: 0; 169 | border-radius: 0; 170 | } 171 | } 172 | 173 | .content-hd { 174 | width: 100%; 175 | height: inherit; 176 | color: #fff; 177 | background-color: #eee; 178 | overflow: hidden; 179 | } 180 | @media screen and (max-width: 720px) { 181 | .content-hd { 182 | padding: 25px 30px; 183 | } 184 | } 185 | .content-hd .title { 186 | width: 100%; 187 | font-size: 52px; 188 | font-weight: 300; 189 | overflow: hidden; 190 | padding-bottom: 5px; 191 | padding-top: 40px; 192 | } 193 | @media screen and (max-width: 720px) { 194 | .content-hd .title { 195 | padding-top: 20px; 196 | } 197 | } 198 | @media screen and (max-width: 1024px) { 199 | .content-hd .name, 200 | .content-hd .job, 201 | .content-hd .info, 202 | .content-hd .contact { 203 | width: 100%; 204 | text-align: center; 205 | } 206 | } 207 | .content-hd .avator { 208 | display: block; 209 | width: 200px; 210 | height: 200px; 211 | margin: 0 auto; 212 | } 213 | @media screen and (max-width: 720px) { 214 | .content-hd .avator { 215 | width: 150px; 216 | height: 150px; 217 | } 218 | } 219 | .content-hd .name { 220 | text-align: center; 221 | color: #00b38a; 222 | } 223 | .content-hd .name h1 { 224 | margin-top: 10px; 225 | font-family: "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3", "Helvetica Neue", Helvetica, Arial, "Microsoft YaHei", sans-serif; 226 | font-weight: 500; 227 | letter-spacing: 5px; 228 | } 229 | @media screen and (max-width: 720px) { 230 | .content-hd .name h1 { 231 | letter-spacing: 0; 232 | line-height: 1.25; 233 | } 234 | } 235 | .content-hd .name small { 236 | font-weight: 400; 237 | letter-spacing: 0; 238 | font-size: 24px; 239 | padding-left: 10px; 240 | } 241 | @media screen and (max-width: 720px) { 242 | .content-hd .name small { 243 | display: block; 244 | padding-left: 0; 245 | font-size: 20px; 246 | line-height: 1; 247 | } 248 | } 249 | .content-hd .job { 250 | text-align: center; 251 | color: #00b38a; 252 | font-size: 24px; 253 | } 254 | @media screen and (max-width: 720px) { 255 | .content-hd .job { 256 | margin: 0 auto 0; 257 | padding: 10px; 258 | } 259 | } 260 | .content-hd .skill-level { 261 | padding-top: 80px; 262 | } 263 | .content-hd .skill-level h3 { 264 | color: #999; 265 | margin-left: 5px; 266 | } 267 | .content-hd .skill-level .item { 268 | display: flex; 269 | width: 260px; 270 | height: 12px; 271 | border-radius: 6px; 272 | margin-bottom: 15px; 273 | background: #d7d7d7; 274 | } 275 | .content-hd .skill-level .item .in { 276 | background: #00b38a; 277 | height: 12px; 278 | width: 12px; 279 | } 280 | .content-hd .skill-level .item .out { 281 | background: #d7d7d7; 282 | height: 12px; 283 | width: 12px; 284 | } 285 | .content-hd .skill-level .item .in:first-child { 286 | border-radius: 6px 0 0 6px; 287 | } 288 | .content-hd .skill-level .item .out:last-child { 289 | border-radius: 0 6px 6px 0; 290 | } 291 | .content-hd .skill-level .i-html .in { 292 | flex: 8; 293 | } 294 | .content-hd .skill-level .i-html .out { 295 | flex: 2; 296 | } 297 | .content-hd .skill-level .i-css .in { 298 | flex: 7; 299 | } 300 | .content-hd .skill-level .i-css .out { 301 | flex: 3; 302 | } 303 | .content-hd .skill-level .i-js .in { 304 | flex: 6.5; 305 | } 306 | .content-hd .skill-level .i-js .out { 307 | flex: 3.5; 308 | } 309 | .content-hd .skill-level .i-sass .in { 310 | flex: 6; 311 | } 312 | .content-hd .skill-level .i-sass .out { 313 | flex: 4; 314 | } 315 | .content-hd .skill-level .i-ps .in { 316 | flex: 7.5; 317 | } 318 | .content-hd .skill-level .i-ps .out { 319 | flex: 2.5; 320 | } 321 | @media screen and (max-width: 1024px) { 322 | .content-hd .skill-level { 323 | display: none; 324 | } 325 | } 326 | .content-hd .info { 327 | color: #555; 328 | line-height: 30px; 329 | } 330 | .content-hd .info h2 { 331 | margin: 30px 0 4px; 332 | font-size: 18px; 333 | } 334 | .content-hd .info h3 { 335 | font-size: 16px; 336 | margin-top: 10px; 337 | } 338 | @media screen and (max-width: 720px) { 339 | .content-hd .info h2 { 340 | margin-top: 4px; 341 | } 342 | } 343 | .content-hd .contact { 344 | padding-top: 100px; 345 | } 346 | @media screen and (max-width: 1024px) { 347 | .content-hd .contact { 348 | padding-top: 0; 349 | } 350 | } 351 | .content-hd .contact ul { 352 | margin: 8px 0 4px; 353 | } 354 | @media screen and (max-width: 1024px) { 355 | .content-hd .contact ul { 356 | text-align: center; 357 | margin: 16px 0 0; 358 | } 359 | } 360 | .content-hd .contact ul > li { 361 | height: 22px; 362 | margin-top: 10px; 363 | } 364 | @media screen and (max-width: 1024px) { 365 | .content-hd .contact ul > li { 366 | display: inline-block; 367 | margin: 0; 368 | } 369 | } 370 | .content-hd .contact ul > li > a { 371 | color: #555; 372 | font-family: "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3", "Helvetica Neue", Helvetica, Arial, "Microsoft YaHei", sans-serif; 373 | font-size: 16px; 374 | line-height: 22px; 375 | } 376 | .content-hd .contact ul > li > a:hover { 377 | color: #999; 378 | } 379 | @media screen and (max-width: 1024px) { 380 | .content-hd .contact ul > li > a .contact-link { 381 | display: none; 382 | } 383 | } 384 | .content-hd .contact ul > li > a .iconfont { 385 | margin-left: 5px; 386 | } 387 | @media screen and (max-width: 1024px) { 388 | .content-hd .contact ul > li > a .iconfont { 389 | font-size: 20px; 390 | } 391 | } 392 | 393 | .content-bd { 394 | display: flex; 395 | min-height: 200px; 396 | flex-flow: row wrap; 397 | overflow: hidden; 398 | } 399 | .content-bd .content-left { 400 | flex: 6.5; 401 | padding: 20px 30px 50px; 402 | } 403 | @media screen and (max-width: 1024px) { 404 | .content-bd .content-left { 405 | flex: 1 100%; 406 | order: 2; 407 | padding: 20px 10px 50px; 408 | } 409 | } 410 | .content-bd .content-right { 411 | box-sizing: border-box; 412 | padding: 20px 30px 50px; 413 | flex: 3.5; 414 | background: #eeeeee; 415 | } 416 | @media screen and (max-width: 1024px) { 417 | .content-bd .content-right { 418 | flex: 1 100%; 419 | order: 1; 420 | padding-bottom: 20px; 421 | } 422 | } 423 | .content-bd section { 424 | overflow: hidden; 425 | padding: 10px 15px; 426 | } 427 | .content-bd .section-hd { 428 | position: relative; 429 | height: 32px; 430 | margin: 10px auto 5px; 431 | overflow: hidden; 432 | } 433 | .content-bd .section-bd { 434 | overflow: hidden; 435 | } 436 | .content-bd .section-title-l, 437 | .content-bd .section-title-r { 438 | position: absolute; 439 | top: 50%; 440 | display: inline-block; 441 | width: 35%; 442 | height: 0; 443 | vertical-align: middle; 444 | border-top: 1px solid #ededed; 445 | } 446 | .content-bd .section-title-l { 447 | left: 0; 448 | } 449 | .content-bd .section-title-r { 450 | right: 0; 451 | } 452 | .content-bd .section-title { 453 | position: relative; 454 | z-index: 1; 455 | width: 24%; 456 | min-width: 100px; 457 | margin: 0 auto; 458 | padding: 4px 10px; 459 | -moz-border-radius: 32px; 460 | -webkit-border-radius: 32px; 461 | border-radius: 32px; 462 | font-size: 16px; 463 | text-align: center; 464 | background-color: #eee; 465 | } 466 | .content-bd .section-list { 467 | padding: 10px 0 5px; 468 | } 469 | .content-bd .item-hd { 470 | position: relative; 471 | padding: 10px 0 5px; 472 | line-height: 20px; 473 | overflow: hidden; 474 | font-weight: 500; 475 | } 476 | .content-bd .item-hd .iconfont { 477 | color: #00b38a; 478 | } 479 | .content-bd .item-hd .item-time { 480 | display: inline-block; 481 | float: left; 482 | width: 25%; 483 | } 484 | @media screen and (max-width: 720px) { 485 | .content-bd .item-hd .item-time { 486 | width: 100%; 487 | margin-bottom: 5px; 488 | } 489 | } 490 | .content-bd .item-hd .item-more { 491 | float: right; 492 | margin-left: 5px; 493 | } 494 | @media screen and (max-width: 720px) { 495 | .content-bd .item-hd .item-more { 496 | position: absolute; 497 | top: 10px; 498 | right: 0; 499 | margin-top: 1px; 500 | } 501 | } 502 | .content-bd .item-hd .item-name { 503 | display: inline-block; 504 | float: left; 505 | } 506 | .content-bd .item-bd { 507 | margin-bottom: 5px; 508 | } 509 | .content-bd .section-content { 510 | text-align: justify; 511 | word-break: break-all; 512 | line-height: 22px; 513 | } 514 | .content-bd .section-content .iconfont { 515 | color: #00b38a; 516 | } 517 | .content-bd .section-content em { 518 | display: inline-block; 519 | font-family: Menlo, "Helvetica Neue", Helvetica, Arial, "Microsoft YaHei", sans-serif; 520 | font-size: 12px; 521 | line-height: 14px; 522 | border: 1px solid #d1d1d1; 523 | -moz-border-radius: 3px; 524 | -webkit-border-radius: 3px; 525 | border-radius: 3px; 526 | margin: 2px; 527 | padding: 0 3px; 528 | background-color: #f7f7f7; 529 | } 530 | .content-bd .section-content strong { 531 | font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft YaHei", sans-serif; 532 | font-size: 12px; 533 | line-height: 14px; 534 | border: 1px solid #f3f3f3; 535 | -moz-border-radius: 3px; 536 | -webkit-border-radius: 3px; 537 | border-radius: 3px; 538 | font-weight: 500; 539 | color: #444; 540 | margin: 2px; 541 | padding: 0 3px; 542 | background-color: #f6f6f6; 543 | } 544 | .content-bd .skill .section-content { 545 | margin-bottom: 5px; 546 | line-height: 24px; 547 | } 548 | .content-bd .skill strong { 549 | display: inline; 550 | line-height: 18px; 551 | } 552 | .content-bd .practice .item-time { 553 | width: 32%; 554 | } 555 | @media screen and (max-width: 720px) { 556 | .content-bd .practice .item-time { 557 | width: 100%; 558 | } 559 | } 560 | .content-bd .prize .item-hd { 561 | padding: 12px 0 0; 562 | } 563 | .content-bd .prize .item-time { 564 | width: 15%; 565 | } 566 | @media screen and (max-width: 720px) { 567 | .content-bd .prize .item-time { 568 | width: 100%; 569 | } 570 | } 571 | 572 | .btn { 573 | display: inline-block; 574 | padding: 0 5px; 575 | border: 1px solid #00b38a; 576 | border-radius: 3px; 577 | color: #00b38a; 578 | font-family: Menlo, "Helvetica Neue", Helvetica, Arial, "Microsoft YaHei", sans-serif; 579 | font-size: 14px; 580 | line-height: 18px; 581 | text-align: center; 582 | } 583 | .btn:hover { 584 | color: #fff; 585 | background-color: #00b38a; 586 | } 587 | 588 | .pdf { 589 | display: inline-block; 590 | position: fixed; 591 | z-index: 10; 592 | bottom: 6px; 593 | left: 50%; 594 | margin-left: 520px; 595 | padding: 0 8px; 596 | border-radius: 3px; 597 | color: #fff; 598 | font-size: 16px; 599 | line-height: 26px; 600 | background-color: #00b38a; 601 | } 602 | @media screen and (max-width: 1246px) { 603 | .pdf { 604 | left: auto; 605 | right: 8px; 606 | margin-left: 0; 607 | } 608 | } 609 | 610 | footer { 611 | text-align: center; 612 | } 613 | footer .footer-link { 614 | display: inline-block; 615 | color: #d1d1d1; 616 | margin-bottom: 25px; 617 | } 618 | @media screen and (max-width: 1024px) { 619 | footer .footer-link { 620 | margin-top: 25px; 621 | } 622 | } 623 | footer .footer-link .icon-link { 624 | color: #d1d1d1; 625 | font-size: 16px; 626 | } 627 | footer.print-footer { 628 | display: none; 629 | } 630 | 631 | ::-webkit-scrollbar { 632 | background-color: #f1f1f1; 633 | overflow: visible; 634 | width: 3px; 635 | height: 3px; 636 | } 637 | 638 | ::-webkit-scrollbar-thumb { 639 | background-color: rgba(0, 0, 0, 0.2); 640 | background-clip: padding-box; 641 | min-height: 15px; 642 | box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07); 643 | } 644 | 645 | ::-webkit-scrollbar-thumb:vertical:hover { 646 | background-color: rgba(0, 0, 0, 0.3); 647 | } 648 | 649 | ::-webkit-scrollbar-thumb:vertical:active { 650 | background-color: rgba(0, 0, 0, 0.5); 651 | } 652 | 653 | ::-webkit-scrollbar-button { 654 | height: 0; 655 | width: 0; 656 | } 657 | 658 | ::-webkit-scrollbar-track { 659 | background-clip: padding-box; 660 | border: solid transparent; 661 | border-width: 0 0 0 4px; 662 | } 663 | 664 | ::-webkit-scrollbar-corner { 665 | background: transparent; 666 | } 667 | 668 | ::selection { 669 | background: #00b38a; 670 | color: #fff; 671 | } 672 | 673 | ::-moz-selection { 674 | background: #00b38a; 675 | color: #fff; 676 | } 677 | 678 | @media print { 679 | @page { 680 | margin: 0; 681 | } 682 | .content { 683 | width: 970px; 684 | height: 1365px; 685 | margin: 0 auto; 686 | -moz-border-radius: 0; 687 | -webkit-border-radius: 0; 688 | border-radius: 0; 689 | padding: 0; 690 | } 691 | 692 | .content .content-hd { 693 | height: 1365px; 694 | } 695 | 696 | .content .print-hidden { 697 | display: none; 698 | } 699 | 700 | .pdf { 701 | display: none; 702 | } 703 | 704 | footer.github-footer { 705 | display: none; 706 | } 707 | 708 | footer.print-footer { 709 | display: block; 710 | } 711 | 712 | footer.print-footer .footer-link { 713 | position: absolute; 714 | left: 45px; 715 | bottom: 25px; 716 | color: #c0c0c0; 717 | display: inline-block; 718 | } 719 | } 720 | --------------------------------------------------------------------------------