├── README.md ├── html ├── contact.html ├── portfolio.html └── skill.html ├── index.html ├── index_v2.html ├── javascript └── index.js ├── logo ├── icon.png ├── immutable.png ├── logo-jquery.png ├── logo-react.png ├── mongo.png ├── node.png ├── react-router.png ├── redux.png ├── saga.png └── webpack.png └── stylesheets ├── font.css ├── index.css ├── resume.css └── resume_v2.css /README.md: -------------------------------------------------------------------------------- 1 | # 廖文浩的个人简历 2 | 3 | > 前端于我而言，是理性与感性的完美结合，逻辑的精密搭配设计的笃定，诠释一名优秀工程师的必备品质。 4 | 5 | ![](http://om8hmotom.bkt.clouddn.com/2017-06-08-github_avatar-1.png) 6 | 7 | ## 基本信息 8 | - 姓名：廖文浩 9 | - 年龄：25 10 | - 所在地：深圳 11 | 12 | 13 | ## 教育背景 14 | - **2017 应届** Stevens Institute Of Teachnology **计算机科学 & 硕士** 15 | - 深圳大学 电子信息工程 & 学士 16 | 17 | ## 意向职位 18 | - **前端开发** 并对接触**后端**有较强兴趣。 19 | 20 | ## 关于我 21 | - **思维灵活发散**，**强大的自我驱动能力** 22 | 23 | - 在独立项目开发过程中体现出优秀的新技术学习、问题分析解决能力。 24 | 25 | - 寻找**技术驱动**，**成长空间良好**的团队，投入实践迅速提升自身技术素养的同时， 26 | 为团队贡献可观的力量，成为**中流砥柱**，便是我的追求。 27 | 28 | ## 技能 29 | - 熟练掌握HTML(5)和常用CSS(3)，具有 **像素级** 还原设计稿的能力。具有 **平均水准之上** 的审美，追求设计的优雅。 30 | 31 | - 熟练掌握原生Javascript，掌握重要概念如： **原型**， **闭包**， **作用域链**， **面向对象**， **异步流程控制**等。能够根据面向对象思想利用JS/jQuery **封装** 常用插件。 熟练使用 **ES6及ES7** 部分新特性。 32 | 33 | - 熟悉React框架及相关流行库的使用，**理解重要概念**如：生命周期，异步更新，性能优化，虚拟DOM（DCG），Immutable data等。了解Redux Store最佳设计实践，并有 **相关项目踩坑（发现问题）脱坑（解决问题）**的经验。 34 | 35 | - 熟悉**HTTP**协议及浏览器渲染原理，了解前端 **性能优化策略**。 36 | 37 | - 熟悉**Yarn & Npm & Git** ，能够使用Node.js搭配Express进行基本后台开发。 38 | 39 | - 熟悉**CMD&AMD**机制，熟悉**Webpack**打包，优化手段。 40 | 41 | - **英语能力优秀**（曾任托福阅读助教），能够流畅阅读英文材料，常阅读Medium，SitePoint等平台文章。 面向**Google**及**Stack Overflow**编程 :)。 拥有认真总结，书写技术博客的习惯。 42 | 43 | - 追求**风格优雅**，**整洁**的代码。 **无分号，空格缩进**拥护者。 44 | 45 | 46 | ## 个人项目 47 | 48 | ### CoderPad-写作+新闻+音乐集成应用 49 | 50 | ![](http://om8hmotom.bkt.clouddn.com/2017-06-08-coderpad%E5%89%AF%E6%9C%AC-1.jpg) 51 | 52 | - [在线预览](http://coderpad.leanapp.cn) 53 | 54 | - [Github源码](https://github.com/kylewh/Coderpad) 55 | 56 | - CoderPad是一个在线集成 markdown文本编辑器 + 技术社区新闻阅读 + 音乐(由于时间原因，未完成) 的综合应用. 应用了更多的React生态流行库，以应对复杂交互，异步流程控制，性能优化等场景。 57 | 58 | - 部署： LeanCloud + Node + Express 59 | 60 | - 技术栈： React + Redux + React Router V4 + Redux Saga + Immutable + Reselect + Material UI + Styled Components + Webpack 61 | 62 | - **这次项目作为深入实践，遇到不少问题，细节分析请移步： [链接CoderPad](https://kylewh.github.io/2017/06/07/%F0%9F%93%9DCoderPad-%E5%9F%BA%E4%BA%8EReact%E5%85%A8%E5%AE%B6%E6%A1%B6%E5%86%99%E4%BD%9C-%E6%96%B0%E9%97%BB%E4%B8%80%E4%BD%93%E7%BB%BC%E5%90%88%E5%BA%94%E7%94%A8%E7%9A%84%E5%AE%9E%E8%B7%B5%E6%80%BB%E7%BB%93/)** 63 | 64 | - 后台请求转发API有限制，由于部署的是免费开发版，超过最大限制后会强制停止服务器，如果遇到提示超过限制，请谅解，我会重新部署。 65 | 66 | --- 67 | 68 | ### Byemess-单页在线Todo应用 69 | 70 | ![](http://om8hmotom.bkt.clouddn.com/2017-06-08-byemessIntro.jpg) 71 | 72 | - [在线预览](http://byemess.leanapp.cn) 73 | 74 | - [Github源码](https://github.com/kylewh/NoMess) 75 | 76 | - Byemess是一个轻量级单页在线待办事项管理应用，支持注册，支持增删改查，云同步，视图切换，日期分组等功能。采用最新技术生态，ES6/ES7语法，追求最佳实践。 77 | 78 | - 部署： LeanCloud + Node + Express 79 | 80 | - 技术栈： React + Redux + React Router V4 + Styled Components + Material UI + Webpack 81 | 82 | - **项目更多介绍+问题+解决方案请移步：** [链接Byemess](https://kylewh.github.io/2017/05/03/Byemess-%E5%9F%BA%E4%BA%8EReact-redux%E7%9A%84%E5%9C%A8%E7%BA%BFTodo%E5%BA%94%E7%94%A8/) 83 | 84 | - **上手react过程中做了这几件事**： 85 | - [用心的DEMO们](https://github.com/kylewh/Dive_Into_React_Redux) 86 | - [我的Redux入门小书](https://kylewh.github.io/2017/04/21/%E6%88%91%E7%9A%84%E7%AC%AC%E4%B8%80%E6%9C%ACredux%E5%B0%8F%E4%B9%A6/) 87 | - [总结Redux思维导图](https://kylewh.github.io/2017/04/21/Redux%E5%B0%8F%E4%B9%A6%E7%B3%BB%E5%88%97-Redux%E6%80%9D%E7%BB%B4%E5%AF%BC%E5%9B%BE/) 88 | 89 | --- 90 | 91 | ### 组件化商业首页 92 | 93 | ![](http://om8hmotom.bkt.clouddn.com/2017-06-08-webpackDemo.jpg) 94 | 95 | - [在线预览](https://kylewh.github.io/IntoFrontEnd/demo%26%E5%B0%81%E8%A3%85/requireJS%26webpack%E5%8D%95%E9%A1%B5%E6%89%93%E5%8C%85sample/webpack_sample/index.html) 96 | 97 | - [Github源码](https://github.com/kylewh/IntoFrontEnd/tree/master/demo%26%E5%B0%81%E8%A3%85/requireJS%26webpack%E5%8D%95%E9%A1%B5%E6%89%93%E5%8C%85sample) 98 | 99 | - 这个项目是对组件封装以及代码打包的实践. 100 | - 主要组件包括：轮播、Tab跟踪、AJAX封装、JSONP封装、无限加载、懒加载、回到顶部。对于新闻无限加载部分使用过自己封装的瀑布流插件，由于会产生白边，放弃使用。由于涉及较多dom操作，选择使用jQuery提高开发效率。 101 | - 整体页面使用webpack打包，也使用了requireJS作为对比，理解CMD&AMD差异。 102 | - **查看更多封装组件和demo：** [我是链接](https://github.com/kylewh/IntoFrontEnd/tree/master/demo%26%E5%B0%81%E8%A3%85) 103 | 104 | --- 105 | 106 | ### Node音乐推荐应用 107 | 108 | ![](http://om8hmotom.bkt.clouddn.com/2017-06-08-104625.jpg) 109 | 110 | - [Github源码](https://github.com/kylewh/Music_Recommendation_CS546_2016) 111 | 112 | - 简单介绍： 它是一个随机推荐音乐的平台，支持登录，搜索，点赞，点赞记录与历史播放记录。 113 | 114 | - 这个应用是我的启蒙项目，时值第一次接触前端，这是学校的web programming课上的Final Project. 临危受命，被组员们强行抱了一把大腿，从零开始，花了大概5天，做出了第一个Node应用。 115 | 116 | - **期间接触学习了: XSS防御，密码传输salt，bcrypt处理，Promise异步控制，ES6语法，NoSQL，Accessibility等概念.** 117 | 118 | - 最后这个project评定为**TOP3**，**总结复盘：经验欠缺，一些细节场景并没有考虑的周全，比如表单验证，AJAX防止多次触发等。** 119 | 120 | - 之后便带着这些脑海里挥之不去的疑惑和遗憾，投入前端学习的生涯。 121 | 122 | - 技术栈： Node + Express + Mongoose + ejs + passport + Semantic-UI 123 | 124 | ## 联系我 125 | - 微信：注明-工作 126 | 127 | ![](http://om8hmotom.bkt.clouddn.com/2017-06-08-204819.jpg) 128 | 129 | - 邮箱 130 | - QQ： ***369058464@qq.com*** 131 | - Gmail: ***kylevanho@gmail.com*** 132 | 133 | - 手机： 13827460426 -------------------------------------------------------------------------------- /html/contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 廖文浩Kyle 13 | 14 | 15 | 16 |
17 | 46 | 47 | 48 |
49 |
50 |
    51 |
  • 52 |
    53 | kylevanho@gmail.com 54 |
    • 55 |
  • 56 |
    57 | 369058464@qq.com 58 |
    • 59 |
  • 60 |
    61 | 13827460426 62 |
    • 63 |
  • 64 |
    65 | hspectacular 66 |
    • 67 |
68 |
69 |
70 | 71 | 72 |
73 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /html/portfolio.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 廖文浩Kyle 12 | 13 | 14 | 15 |
16 | 53 |
54 |
55 |

Portfolio

56 |
57 |
58 |
    59 |
  • 60 |
    61 |

    CoderPad-写作+新闻+音乐集成应用

    62 | 63 | 64 |
      65 |
    • 66 | CoderPad是一个在线集成 markdown文本编辑器 + 技术社区新闻阅读 + 音乐(由于时间原因，未完成) 的综合应用. 应用了更多的React生态流行库，以应对复杂交互，异步流程控制，性能优化等场景。 67 |
      • 68 |
    • 69 | 部署： LeanCloud + Node + Express 70 |
      • 71 |
    • 72 | 技术栈： React + Redux + React Router V4 + Redux Saga + Immutable + Reselect + Material UI + Styled Components + Webpack 73 |
      • 74 |
    • 75 | 这次项目作为深入实践，遇到不少问题，细节分析请移步： 链接CoderPad 76 |
      • 77 |
    • 78 | 后台请求转发API有限制，由于部署的是免费开发版，超过最大限制后会强制停止服务器，如果遇到提示超过限制，请谅解，我会重新部署。 79 |
      • 80 |
    • 81 | JS 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | Try it 101 | Github 102 |
      • 103 |
    104 |
    105 |
    106 |

    Byemess-单页在线Todo应用

    107 | 108 | 109 | 153 |
    154 |
    155 |

    组件化商业首页

    156 | 157 | 158 |
      159 |
    • 160 | 这个项目是对组件封装以及代码打包的实践. 161 |
      • 162 |
    • 163 | 主要组件包括：轮播、Tab跟踪、AJAX封装、JSONP封装、无限加载、懒加载、回到顶部。对于新闻无限加载部分使用过自己封装的瀑布流插件，由于会产生白边，放弃使用。由于涉及较多dom操作，选择使用jQuery提高开发效率。整体页面使用webpack打包，也使用了requireJS作为对比，理解CMD&AMD差异。 164 |
      • 165 |
    • 166 | 更多组件和demo： 167 | 168 | 我是链接 169 | 170 |
      • 171 |
    • 172 | JS 173 | 174 | 175 | 176 | 177 | 178 | Try it 179 | 180 | 181 | 182 | 183 | Github 184 | 185 | 186 |
      • 187 |
    188 |
    189 |
    190 |

    Node音乐推荐应用

    191 | 192 | 193 |
      194 |
    • 195 | 这个应用是我的启蒙项目，时值第一次接触前端，这是学校的web programming课上的Final Project. 临危受命，被组员们强行抱了一把大腿，从零开始，花了大概5天，做出了第一个Node应用。 196 |
      • 197 |
    • 期间接触学习了: XSS防御，密码传输salt，bcrypt处理，Promise异步控制，ES6语法，NoSQL，Accessibility等概念.
      • 198 |
    • 199 | 最后这个project评定为TOP3，总结复盘：经验欠缺，一些细节场景并没有考虑的周全，比如表单验证，AJAX防止多次触发等。之后便带着这些脑海里挥之不去的疑惑和遗憾，投入前端学习的生涯。 200 |
      • 201 |
    • 202 | 简单介绍： 它是一个随机推荐音乐的平台，支持登录，搜索，点赞，点赞记录与历史播放记录。 203 |
      • 204 |
    • 205 | 技术栈： Node + Express + Mongoose + ejs + passport + Semantic-UI 206 |
      • 207 |
    • 208 | JS 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | Github 218 | 219 | 220 |
      • 221 |
    222 |
    223 |
    • 224 |
225 |
226 |
227 |
228 | 235 | 236 | 237 | -------------------------------------------------------------------------------- /html/skill.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 廖文浩Kyle 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 59 | 60 |
61 |
62 |

Skill

63 | 64 | 65 |
66 |
    67 |
  • 68 | 熟练掌握HTML(5)和常用CSS(3)，具有 69 | 像素级 还原设计稿的能力。具有 70 | 平均水准之上 的审美，追求设计的优雅。 71 |
    • 72 |
  • 73 | 熟练掌握原生Javascript，掌握重要概念如： 74 | 原型， 75 | 闭包， 76 | 作用域链， 77 | 面向对象， 78 | 异步流程控制等。能够根据面向对象思想利用JS/jQuery 79 | 封装 常用插件。 熟练使用 80 | ES6及ES7 部分新特性。 81 |
    • 82 |
  • 83 | 熟悉React框架及相关流行库的使用，理解重要概念如：生命周期，异步更新，性能优化，虚拟DOM（DCG），Immutable data等。了解Redux 84 | Store最佳设计实践，并有 85 | 相关项目踩坑（发现问题）脱坑（解决问题）的经验。 86 |
    • 87 |
88 | 89 |
    90 | 91 |
  • 92 | 熟悉HTTP协议及浏览器渲染原理，了解前端 93 | 性能优化策略。 94 |
    • 95 |
  • 96 | 熟悉Yarn & Npm & Git ，能够使用Node.js搭配Express进行基本后台开发。 97 |
    • 98 |
  • 99 | 熟悉CMD&AMD机制，熟悉Webpack打包，优化手段。 100 |
    • 101 |
  • 102 | 英语能力优秀（曾任托福阅读助教），能够流畅阅读英文材料，常阅读Medium，SitePoint等平台文章。 面向Google及Stack Overflow编程 103 | :)。 拥有认真总结，书写技术博客的习惯。 104 |
    • 105 |
  • 106 | 追求风格优雅，整洁的代码。 无分号，空格缩进拥护者。 107 |
    • 108 |
109 |
110 | 111 | 112 | 113 |
114 |
115 |
HTML5
116 |
CSS3
117 |
SASS&LESS
118 |
JavaScript
119 |
120 |
121 |
React
122 |
jQuery
123 |
Material UI
124 |
Bootstrap
125 |
126 |
127 |
AJAX
128 |
HTTP
129 |
Node
130 |
Express
131 |
132 |
133 |
PhotoShop
134 |
135 |
136 | 137 |
138 |
139 | 140 |
141 | 148 | 149 | 150 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 廖文浩Kyle 13 | 14 | 15 | 16 |
17 | 46 | 47 | 48 |
49 |
50 |
51 | 52 |

廖文浩

53 |

前端于我而言，是理性与感性的完美结合，逻辑的精密搭配设计的笃定， 54 |
诠释一名优秀工程师的必备品质。 55 |

56 |

57 | 教育背景 2017 58 | 应届 Stevens Institute Of Technology 59 | 计算机科学 & 60 | 硕士       61 |
深圳大学 电子信息工程 & 学士 62 |

63 |

64 | 意向职位 65 | 前端开发 并对接触后端有较强兴趣 66 |

67 |

思维灵活发散，强大的自我驱动能力 68 |
在独立项目开发过程中体现出优秀的新技术学习、问题分析解决能力。 69 |

70 |

寻找技术驱动，成长空间用激情与成果证明快速成为团队中流砥柱，is not impossible. 71 |

72 |
73 |
74 |
75 | 76 |
77 |
78 | 79 | 80 | 81 |
82 |
83 |

Portfolio

84 |
85 |
86 |
    87 |
  • 88 |
    89 |

    CoderPad-写作+新闻+音乐集成应用

    90 | 91 | 92 |
      93 |
    • 94 | CoderPad是一个在线集成 markdown文本编辑器 + 技术社区新闻阅读 + 音乐(由于时间原因，未完成) 的综合应用. 应用了更多的React生态流行库，以应对复杂交互，异步流程控制，性能优化等场景。 95 |
      • 96 |
    • 97 | 部署： LeanCloud + Node + Express 98 |
      • 99 |
    • 100 | 技术栈： React + Redux + React Router V4 + Redux Saga + Immutable + Reselect + Material UI + Styled Components + Webpack 101 |
      • 102 |
    • 103 | 这次项目作为深入实践，遇到不少问题，细节分析请移步： 链接CoderPad 104 |
      • 105 |
    • 106 | 后台请求转发API有限制，由于部署的是免费开发版，超过最大限制后会强制停止服务器，如果遇到提示超过限制，请谅解，我会重新部署。 107 |
      • 108 |
    • 109 | JS 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | Try it 129 | Github 130 |
      • 131 |
    132 |
    133 |
    134 |

    Byemess-单页在线Todo应用

    135 | 136 | 137 | 184 |
    185 |
    186 |

    组件化商业首页

    187 | 188 | 189 |
      190 |
    • 191 | 这个项目是对组件封装以及代码打包的实践. 192 |
      • 193 |
    • 194 | 主要组件包括：轮播、Tab跟踪、AJAX封装、JSONP封装、无限加载、懒加载、回到顶部。对于新闻无限加载部分使用过自己封装的瀑布流插件，由于会产生白边，放弃使用。由于涉及较多dom操作，选择使用jQuery提高开发效率。整体页面使用webpack打包，也使用了requireJS作为对比，理解CMD&AMD差异。 195 |
      • 196 |
    • 197 | 更多组件和demo： 198 | 199 | 我是链接 200 | 201 |
      • 202 |
    • 203 | JS 204 | 205 | 206 | 207 | 208 | 209 | Try it 210 | 211 | 212 | 213 | 214 | Github 215 | 216 | 217 |
      • 218 |
    219 |
    220 |
    221 |

    Node音乐推荐应用

    222 | 223 | 224 |
      225 |
    • 226 | 简单介绍： 它是一个随机推荐音乐的平台，支持登录，搜索，点赞，点赞记录与历史播放记录。 227 |
      • 228 |
    • 229 | 这个应用是我的启蒙项目，时值第一次接触前端，这是学校的web programming课上的Final Project. 临危受命，被组员们强行抱了一把大腿，从零开始，花了大概5天，做出了第一个Node应用。 230 |
      • 231 |
    • 期间接触学习了: XSS防御，密码传输salt，bcrypt处理，Promise异步控制，ES6语法，NoSQL，Accessibility等概念.
      • 232 |
    • 233 | 最后这个project评定为TOP3，总结复盘：经验欠缺，一些细节场景并没有考虑的周全，比如表单验证，AJAX防止多次触发等。之后便带着这些脑海里挥之不去的疑惑和遗憾，投入前端学习的生涯。 234 |
      • 235 | 236 |
    • 237 | 技术栈： Node + Express + Mongoose + ejs + passport + Semantic-UI 238 |
      • 239 |
    • 240 | JS 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | Github 250 | 251 | 252 |
      • 253 |
    254 |
    255 |
    • 256 |
257 |
258 |
259 | 260 | 261 | 262 |
263 |
264 |

Skill

265 | 266 | 267 |
268 |
    269 |
  • 270 | 熟练掌握HTML(5)和常用CSS(3)，具有 271 | 像素级 还原设计稿的能力。具有 272 | 平均水准之上 的审美，追求设计的优雅。 273 |
    • 274 |
  • 275 | 熟练掌握原生Javascript，掌握重要概念如： 276 | 原型， 277 | 闭包， 278 | 作用域链， 279 | 面向对象， 280 | 异步流程控制等。能够根据面向对象思想利用JS/jQuery 281 | 封装 常用插件。 熟练使用 282 | ES6及ES7 部分新特性。 283 |
    • 284 |
  • 285 | 熟悉React框架及相关流行库的使用，理解重要概念如：生命周期，异步更新，性能优化，虚拟DOM（DCG），Immutable data等。了解Redux 286 | Store最佳设计实践，并有 287 | 相关项目踩坑（发现问题）脱坑（解决问题）的经验。 288 |
    • 289 |
290 | 291 |
    292 | 293 |
  • 294 | 熟悉HTTP协议及浏览器渲染原理，了解前端 295 | 性能优化策略。 296 |
    • 297 |
  • 298 | 熟悉Yarn & Npm & Git ，能够使用Node.js搭配Express进行基本后台开发。 299 |
    • 300 |
  • 301 | 熟悉CMD&AMD机制，熟悉Webpack打包，优化手段。 302 |
    • 303 |
  • 304 | 英语能力优秀（曾任托福阅读助教），能够流畅阅读英文材料，常阅读Medium，SitePoint等平台文章。 面向Google及Stack Overflow编程 305 | :)。 拥有总结书写技术博客(点击进入)的习惯。 306 |
    • 307 |
  • 308 | 追求风格优雅，整洁的代码。 无分号，空格缩进拥护者。 309 |
    • 310 |
311 |
312 | 313 | 314 | 315 |
316 |
317 |
HTML5
318 |
CSS3
319 |
SASS&LESS
320 |
JavaScript
321 |
322 |
323 |
React
324 |
jQuery
325 |
Material UI
326 |
Bootstrap
327 |
328 |
329 |
AJAX
330 |
HTTP
331 |
Node
332 |
Express
333 |
334 |
335 |
PhotoShop
336 |
337 |
338 | 339 |
340 |
341 | 342 | 343 | 344 |
345 |
346 |
    347 |
  • 348 |
    349 | kylevanho@gmail.com 350 |
    • 351 |
  • 352 |
    353 | 369058464@qq.com 354 |
    • 355 |
  • 356 |
    357 | 13827460426 358 |
    • 359 |
  • 360 |
    361 | 362 |
    • 363 |
364 |
365 |
366 | 367 | 368 | 369 |
370 | 371 | 372 | 373 | -------------------------------------------------------------------------------- /index_v2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 廖文浩Kyle 13 | 14 | 15 | 16 |
17 | 18 | 19 |
20 |
21 |
22 |
23 | 24 |
25 | 26 |

廖文浩

27 |

28 | 前端于我而言，是理性与感性的完美结合，逻辑的精密搭配设计的笃定，诠释一名优秀工程师的必备品质。 29 |

30 |
31 |
32 |
33 |
    34 |
  • 35 | 教育背景 2017 36 | 应届 Stevens Institute Of Technology 37 | 计算机科学 & 38 | 硕士       39 |
    深圳大学 电子信息工程 & 学士 40 |
    • 41 |
  • 42 | 意向职位 43 | 前端开发 并对接触后端有较强兴趣，成为全栈拯救世界。 44 |
    • 45 |
  • 思维灵活发散，强大的自我驱动能力 46 |
    • 47 |
  • 在独立项目开发过程中体现出优秀的新技术学习、问题分析解决能力。
    • 48 |
  • 寻找技术驱动，成长空间良好的团队，投入实践迅速提升自身技术素养的同时， 49 |
    为团队贡献可观的力量，成为中流砥柱，便是我的追求。 50 |
    • 51 |
52 | 53 |
54 |
55 | 56 | 57 | 58 |
59 |
60 |

Skill

61 | 62 | 63 |
64 |
    65 |
  • 66 | 熟练掌握HTML(5)和常用CSS(3)，具有 67 | 像素级 还原设计稿的能力。具有 68 | 平均水准之上 的审美，追求设计的优雅。 69 |
    • 70 |
  • 71 | 熟练掌握原生Javascript，掌握重要概念如： 72 | 原型， 73 | 闭包， 74 | 作用域链， 75 | 面向对象， 76 | 异步流程控制等。能够根据面向对象思想利用JS/jQuery 77 | 封装 常用插件。 熟练使用 78 | ES6及ES7 部分新特性。 79 |
    • 80 |
  • 81 | 熟悉React框架及相关流行库的使用，理解重要概念如：生命周期，异步更新，性能优化，虚拟DOM（DCG），Immutable data等。了解Redux 82 | Store最佳设计实践，并有 83 | 相关项目踩坑（发现问题）脱坑（解决问题）的经验。 84 |
    • 85 |
86 | 87 |
    88 | 89 |
  • 90 | 熟悉HTTP协议及浏览器渲染原理，了解前端 91 | 性能优化策略。 92 |
    • 93 |
  • 94 | 熟悉Yarn & Npm & Git ，能够使用Node.js搭配Express进行基本后台开发。 95 |
    • 96 |
  • 97 | 熟悉CMD&AMD机制，熟悉Webpack打包，优化手段。 98 |
    • 99 |
  • 100 | 英语能力优秀（曾任托福阅读助教），能够流畅阅读英文材料，常阅读Medium，SitePoint等平台文章。 面向Google及Stack Overflow编程 101 | :)。 拥有总结书写技术博客(点击进入)的习惯。 102 |
    • 103 |
  • 104 | 追求风格优雅，整洁的代码。 无分号，空格缩进拥护者。 105 |
    • 106 |
107 |
108 | 109 | 110 | 111 |
112 |
113 |
HTML5
114 |
CSS3
115 |
SASS&LESS
116 |
JavaScript
117 |
118 |
119 |
React
120 |
jQuery
121 |
Material UI
122 |
Bootstrap
123 |
124 |
125 |
AJAX
126 |
HTTP
127 |
Node
128 |
Express
129 |
130 |
131 |
PhotoShop
132 |
133 |
134 | 135 |
136 |
137 | 138 | 139 | 140 |
141 |
142 |

Portfolio

143 |
144 |
145 |
    146 |
  • 147 |
    148 |

    CoderPad-写作+新闻+音乐集成应用

    149 | 150 | 151 |
      152 |
    • 153 | CoderPad是一个在线集成 markdown文本编辑器 + 技术社区新闻阅读 + 音乐(由于时间原因，未完成) 的综合应用. 应用了更多的React生态流行库，以应对复杂交互，异步流程控制，性能优化等场景。 154 |
      • 155 |
    • 156 | 部署： LeanCloud + Node + Express 157 |
      • 158 |
    • 159 | 技术栈： React + Redux + React Router V4 + Redux Saga + Immutable + Reselect + Material UI + Styled Components + Webpack 160 |
      • 161 |
    • 162 | 这次项目作为深入实践，遇到不少问题，细节分析请移步： 链接CoderPad 163 |
      • 164 |
    • 165 | 后台请求转发API有限制，由于部署的是免费开发版，超过最大限制后会强制停止服务器，如果遇到提示超过限制，请谅解，我会重新部署。 166 |
      • 167 |
    • 168 | JS 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | Try it 188 | Github 189 |
      • 190 |
    191 |
    192 |
    193 |

    Byemess-单页在线Todo应用

    194 | 195 | 196 | 240 |
    241 |
    242 |

    组件化商业首页

    243 | 244 | 245 |
      246 |
    • 247 | 这个项目是对组件封装以及代码打包的实践. 248 |
      • 249 |
    • 250 | 主要组件包括：轮播、Tab跟踪、AJAX封装、JSONP封装、无限加载、懒加载、回到顶部。对于新闻无限加载部分使用过自己封装的瀑布流插件，由于会产生白边，放弃使用。由于涉及较多dom操作，选择使用jQuery提高开发效率。整体页面使用webpack打包，也使用了requireJS作为对比，理解CMD&AMD差异。 251 |
      • 252 |
    • 253 | 更多组件和demo： 254 | 255 | 我是链接 256 | 257 |
      • 258 |
    • 259 | JS 260 | 261 | 262 | 263 | 264 | 265 | Try it 266 | 267 | 268 | 269 | 270 | Github 271 | 272 | 273 |
      • 274 |
    275 |
    276 |
    277 |

    Node音乐推荐应用

    278 | 279 | 280 |
      281 |
    • 282 | 简单介绍： 它是一个随机推荐音乐的平台，支持登录，搜索，点赞，点赞记录与历史播放记录。 283 |
      • 284 |
    • 285 | 这个应用是我的启蒙项目，时值第一次接触前端，这是学校的web programming课上的Final Project. 临危受命，被组员们强行抱了一把大腿，从零开始，花了大概5天，做出了第一个Node应用。 286 |
      • 287 |
    • 期间接触学习了: XSS防御，密码传输salt，bcrypt处理，Promise异步控制，ES6语法，NoSQL，Accessibility等概念.
      • 288 |
    • 289 | 最后这个project评定为TOP3，总结复盘：经验欠缺，一些细节场景并没有考虑的周全，比如表单验证，AJAX防止多次触发等。之后便带着这些脑海里挥之不去的疑惑和遗憾，投入前端学习的生涯。 290 |
      • 291 | 292 |
    • 293 | 技术栈： Node + Express + Mongoose + ejs + passport + Semantic-UI 294 |
      • 295 |
    • 296 | JS 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | Github 306 | 307 | 308 |
      • 309 |
    310 |
    311 |
    • 312 |
313 |
314 |
315 | 316 | 317 | 318 |
319 |
320 |
321 |

Contact

322 |
323 |
    324 |
  • 325 |
    326 | kylevanho@gmail.com 327 |
    • 328 |
  • 329 |
    330 | 369058464@qq.com 331 |
    • 332 |
  • 333 |
    334 | 13827460426 335 |
    • 336 |
  • 337 |
    338 | 339 |
    • 340 |
341 |
342 |
343 | 344 |
345 | 346 | 347 | 348 | -------------------------------------------------------------------------------- /javascript/index.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | const menu = document.getElementsByClassName('menu')[0] 3 | const footer = document.getElementsByTagName('footer')[0] 4 | const aside = document.getElementsByTagName('aside')[0] 5 | const nav = document.getElementsByClassName('nav')[0] 6 | const oA = document.getElementsByClassName('nav-item') 7 | const oContent = document.getElementsByClassName('content') 8 | const contentSize = oContent.length 9 | 10 | menu.addEventListener('click', () => { 11 | aside.classList.toggle('active') 12 | }) 13 | 14 | footer.addEventListener('click', () => { 15 | aside.classList.contains('active') && aside.classList.toggle('active') 16 | }) 17 | 18 | nav.addEventListener('click', e => { 19 | let target 20 | 21 | e.preventDefault() 22 | 23 | if (e.target.classList.contains('nav-item')) { 24 | target = e.target 25 | } else if (e.target.parentNode.classList.contains('nav-item')) { 26 | target = e.target.parentNode 27 | } 28 | 29 | const idx = Array.prototype.indexOf.call(nav.children, target.parentNode) 30 | 31 | if (idx + 1 > contentSize) { 32 | return 33 | } 34 | 35 | Array.prototype.forEach.call(oA, node => { 36 | node.classList.remove('selected') 37 | }) 38 | 39 | Array.prototype.forEach.call(oContent, (node, index) => { 40 | if (idx !== index) { 41 | node.classList.remove('visible') 42 | } else { 43 | oContent[index].classList.add('visible') 44 | } 45 | }) 46 | 47 | target.classList.add('selected') 48 | }) 49 | })() 50 | -------------------------------------------------------------------------------- /logo/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kylewh/Resume/a4d24e8786c4d06cde11d9e3cc24c8836420a3a4/logo/icon.png -------------------------------------------------------------------------------- /logo/immutable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kylewh/Resume/a4d24e8786c4d06cde11d9e3cc24c8836420a3a4/logo/immutable.png -------------------------------------------------------------------------------- /logo/logo-jquery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kylewh/Resume/a4d24e8786c4d06cde11d9e3cc24c8836420a3a4/logo/logo-jquery.png -------------------------------------------------------------------------------- /logo/logo-react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kylewh/Resume/a4d24e8786c4d06cde11d9e3cc24c8836420a3a4/logo/logo-react.png -------------------------------------------------------------------------------- /logo/mongo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kylewh/Resume/a4d24e8786c4d06cde11d9e3cc24c8836420a3a4/logo/mongo.png -------------------------------------------------------------------------------- /logo/node.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kylewh/Resume/a4d24e8786c4d06cde11d9e3cc24c8836420a3a4/logo/node.png -------------------------------------------------------------------------------- /logo/react-router.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kylewh/Resume/a4d24e8786c4d06cde11d9e3cc24c8836420a3a4/logo/react-router.png -------------------------------------------------------------------------------- /logo/redux.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kylewh/Resume/a4d24e8786c4d06cde11d9e3cc24c8836420a3a4/logo/redux.png -------------------------------------------------------------------------------- /logo/saga.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kylewh/Resume/a4d24e8786c4d06cde11d9e3cc24c8836420a3a4/logo/saga.png -------------------------------------------------------------------------------- /logo/webpack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kylewh/Resume/a4d24e8786c4d06cde11d9e3cc24c8836420a3a4/logo/webpack.png -------------------------------------------------------------------------------- /stylesheets/font.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "r-icon"; 3 | src: url('//at.alicdn.com/t/font_1468920013_3111575.eot'); /* IE9*/ 4 | src: url('//at.alicdn.com/t/font_1468920013_3111575.eot?#iefix') 5 | format('embedded-opentype'), 6 | url('data:application/x-font-woff;charset=utf-8;base64,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') 7 | format('woff'), 8 | url('//at.alicdn.com/t/font_1468920013_3111575.ttf') format('truetype'), 9 | url('//at.alicdn.com/t/font_1468920013_3111575.svg#r-icon') 10 | format('svg'); /* iOS 4.1- */ 11 | src: url('//at.alicdn.com/t/font_1468920013_3111575.eot')\0; /* ie8 fix */ 12 | } 13 | 14 | .r-icon { 15 | font-family: "r-icon" !important; 16 | font-size: 16px; 17 | font-style: normal; 18 | -webkit-font-smoothing: antialiased; 19 | -webkit-text-stroke-width: 0.2px; 20 | -moz-osx-font-smoothing: grayscale; 21 | } 22 | /*.r-youxiang:before { content: "\e604"; }*/ 23 | .r-weibo:before { 24 | content: "\e608"; 25 | } 26 | .r-z:before { 27 | content: "\e603"; 28 | } 29 | .r-shu:before { 30 | content: "\e609"; 31 | } 32 | .r-jian:before { 33 | content: "\e600"; 34 | } 35 | .r-fly:before { 36 | content: "\e605"; 37 | } 38 | .r-github:before { 39 | content: "\e601"; 40 | } 41 | .r-jianshu:before { 42 | content: "\e606"; 43 | } 44 | .r-mail:before { 45 | content: "\e602"; 46 | } 47 | -------------------------------------------------------------------------------- /stylesheets/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | border: 0; 5 | outline: 0; 6 | font-size: 100%; 7 | vertical-align: bottom; 8 | background: transparent; 9 | -webkit-font-smoothing: antialiased; 10 | } 11 | 12 | .clear-fix:after { 13 | content: ''; 14 | display: block; 15 | clear: both; 16 | } 17 | 18 | a { 19 | -webkit-transition: all 150ms ease-in; 20 | transition: all 150ms ease-in; 21 | text-decoration: none; 22 | } 23 | 24 | body, html { 25 | background-color: #FAFAFA; 26 | font-family: -apple-system, 27 | BlinkMacSystemFont, 28 | "Helvetica Neue", 29 | Arial, 30 | "PingFang SC", 31 | "Hiragino Sans GB", 32 | STHeiti, 33 | "Microsoft YaHei", 34 | "Microsoft JhengHei", 35 | "Source Han Sans SC", 36 | "Noto Sans CJK SC", 37 | "Source Han Sans CN", 38 | "Noto Sans SC", 39 | "Source Han Sans TC", 40 | "Noto Sans CJK TC", 41 | "WenQuanYi Micro Hei", 42 | SimSun, 43 | sans-serif; 44 | } 45 | 46 | .page-wrapper { 47 | height: 100%; 48 | } 49 | 50 | aside { 51 | position: fixed; 52 | z-index: 100; 53 | background: #202021; 54 | background: -webkit-linear-gradient(315deg, #607D8B 0, #212121 100%); 55 | background: linear-gradient(135deg, #607D8B 0, #212121 100%); 56 | top: 0; 57 | bottom: 0; 58 | left: 0; 59 | width: 250px; 60 | text-align: left; 61 | } 62 | 63 | @media screen and (max-width: 768px) { 64 | aside { 65 | bottom: auto; 66 | right: 0; 67 | width: 100%; 68 | height: 50px; 69 | } 70 | } 71 | 72 | .page-wrapper aside .myname { 73 | display: block; 74 | margin: 35px 5px; 75 | color: #FAFAFA; 76 | font-size: 30px; 77 | text-align: center; 78 | font-weight: 200; 79 | } 80 | 81 | aside .nav li { 82 | display: block; 83 | font-size: 18px; 84 | background-image: -webkit-linear-gradient( 85 | left, 86 | transparent 50%, 87 | rgba(233, 30, 99, 0.69) 50% 88 | ); 89 | background-image: linear-gradient( 90 | to right, 91 | transparent 50%, 92 | rgba(233, 30, 99, 0.69) 50% 93 | ); 94 | background-size: 200%; 95 | -webkit-transition: all 0.6s; 96 | transition: all 0.6s; 97 | } 98 | 99 | aside .nav li:hover { 100 | background-position: -100%; 101 | } 102 | 103 | aside .nav li a { 104 | font-size: inherit; 105 | display: block; 106 | color: #fff; 107 | font-weight: 400; 108 | margin: 10px 0 10px 30px; 109 | padding: 10px; 110 | } 111 | 112 | aside .nav li a.selected { 113 | color: #f9c427; 114 | } 115 | 116 | aside .nav li a:hover { 117 | color: #4dd0e1; 118 | } 119 | 120 | aside .nav li a .eng-small { 121 | font-size: 12px; 122 | font-weight: 300; 123 | vertical-align: middle; 124 | } 125 | 126 | @media screen and (min-width: 768px) { 127 | .nav li:before { 128 | float: left; 129 | color: #999; 130 | font-size: 14px; 131 | margin: 2px 5px 0 0; 132 | } 133 | } 134 | 135 | #footer { 136 | position: absolute; 137 | padding-left: 30px; 138 | margin-left: 10px; 139 | bottom: 0; 140 | } 141 | 142 | footer .logo { 143 | margin-bottom: 10px; 144 | } 145 | 146 | footer .logo a { 147 | display: inline-block; 148 | width: 40px; 149 | height: 40px; 150 | border-radius: 20px; 151 | background: #414141; 152 | color: #d9d9d9; 153 | font-size: 24px; 154 | text-align: center; 155 | line-height: 40px; 156 | } 157 | 158 | footer .logo .r-mail { 159 | background-color: rgb(0, 171, 108); 160 | color: #fff; 161 | opacity: 0.5; 162 | } 163 | 164 | footer .logo .r-shu { 165 | background-color: rgb(88, 70, 19); 166 | color: #fff; 167 | opacity: 0.5; 168 | } 169 | 170 | footer .logo .r-github { 171 | background-color: #fff; 172 | color: #000; 173 | opacity: 0.5; 174 | } 175 | 176 | footer .logo .r-weibo { 177 | background-color: rgb(150, 14, 14); 178 | color: #fff; 179 | opacity: 0.5; 180 | } 181 | 182 | footer .logo a:hover { 183 | -webkit-animation: 0.8s ease-in rubberBand; 184 | animation: 0.8s ease-in rubberBand; 185 | opacity: 1; 186 | } 187 | 188 | footer .source { 189 | font-size: 10px; 190 | color: #999; 191 | margin-bottom: 10px; 192 | } 193 | 194 | footer .source span.right { 195 | color: #999; 196 | } 197 | 198 | footer .source a { 199 | font-size: 12px; 200 | color: #999; 201 | margin-left: 10px; 202 | } 203 | 204 | @media screen and (max-width: 768px) { 205 | .page-wrapper aside .myname { 206 | display: inline-block; 207 | font-size: 24px; 208 | line-height: 50px; 209 | padding: 0; 210 | margin: 0 0 0 20px; 211 | } 212 | aside .menu { 213 | float: right; 214 | position: relative; 215 | z-index: 1; 216 | padding: 13px 30px; 217 | display: inline-block; 218 | cursor: pointer; 219 | vertical-align: middle; 220 | transition-property: opacity, -webkit-filter; 221 | -webkit-transition-property: opacity, -webkit-filter; 222 | transition-property: opacity, filter; 223 | transition-property: opacity, filter, -webkit-filter; 224 | -webkit-transition-duration: .15s; 225 | transition-duration: .15s; 226 | -webkit-transition-timing-function: linear; 227 | transition-timing-function: linear; 228 | } 229 | 230 | .menu .menubox { 231 | width: 30px; 232 | height: 24px; 233 | position: relative; 234 | } 235 | 236 | .menubox .menuinner { 237 | -webkit-transition-duration: .3s; 238 | transition-duration: .3s; 239 | -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 240 | transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 241 | top: 50%; 242 | margin-top: -2px; 243 | } 244 | 245 | .menuinner, .menuinner::before, .menuinner::after { 246 | width: 30px; 247 | height: 3px; 248 | background-color: #fff; 249 | border-radius: 3px; 250 | position: absolute; 251 | transition-property: -webkit-transform; 252 | -webkit-transition-property: -webkit-transform; 253 | transition-property: transform; 254 | transition-property: transform, -webkit-transform; 255 | -webkit-transition-duration: .15s; 256 | transition-duration: .15s; 257 | -webkit-transition-timing-function: ease; 258 | transition-timing-function: ease; 259 | } 260 | 261 | .menuinner::before { 262 | top: -8px; 263 | -webkit-transition: top .1s .34s ease-in, opacity .1s ease-in; 264 | transition: top .1s .34s ease-in, opacity .1s ease-in; 265 | } 266 | 267 | .menuinner::after { 268 | transition: bottom .1s .34s ease-in, 269 | -webkit-transform .3s cubic-bezier(0.55, 0.055, 0.675, 0.19); 270 | -webkit-transition: bottom .1s .34s ease-in, 271 | -webkit-transform .3s cubic-bezier(0.55, 0.055, 0.675, 0.19); 272 | transition: bottom .1s .34s ease-in, 273 | transform .3s cubic-bezier(0.55, 0.055, 0.675, 0.19); 274 | transition: bottom .1s .34s ease-in, 275 | transform .3s cubic-bezier(0.55, 0.055, 0.675, 0.19), 276 | -webkit-transform .3s cubic-bezier(0.55, 0.055, 0.675, 0.19); 277 | bottom: -8px; 278 | } 279 | 280 | .menuinner::before, .menuinner::after { 281 | content: ""; 282 | display: block; 283 | } 284 | 285 | .active .menubox .menuinner { 286 | -webkit-transform: rotate(225deg); 287 | transform: rotate(225deg); 288 | -webkit-transition-delay: .14s; 289 | transition-delay: .14s; 290 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 291 | transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 292 | } 293 | 294 | .active .menuinner::before { 295 | top: 0; 296 | opacity: 0; 297 | -webkit-transition: top .1s ease-out, opacity .1s .14s ease-out; 298 | transition: top .1s ease-out, opacity .1s .14s ease-out; 299 | } 300 | 301 | .active .menuinner::after { 302 | bottom: 0; 303 | -webkit-transform: rotate(-90deg); 304 | transform: rotate(-90deg); 305 | transition: bottom .1s ease-out, 306 | -webkit-transform .3s .14s cubic-bezier(0.215, 0.61, 0.355, 1); 307 | -webkit-transition: bottom .1s ease-out, 308 | -webkit-transform .3s .14s cubic-bezier(0.215, 0.61, 0.355, 1); 309 | transition: bottom .1s ease-out, 310 | transform .3s .14s cubic-bezier(0.215, 0.61, 0.355, 1); 311 | transition: bottom .1s ease-out, 312 | transform .3s .14s cubic-bezier(0.215, 0.61, 0.355, 1), 313 | -webkit-transform .3s .14s cubic-bezier(0.215, 0.61, 0.355, 1); 314 | } 315 | 316 | footer { 317 | position: fixed; 318 | top: 50px; 319 | right: 0; 320 | bottom: 0; 321 | left: 0; 322 | background: rgba(0, 0, 0, 0.9); 323 | opacity: 0; 324 | visibility: hidden; 325 | -webkit-transition: all 150ms ease-in; 326 | transition: all 150ms ease-in; 327 | } 328 | 329 | .active footer { 330 | opacity: 1; 331 | visibility: visible; 332 | } 333 | } 334 | 335 | @-webkit-keyframes rubberBand { 336 | from { 337 | -webkit-transform: scale3d(1, 1, 1); 338 | transform: scale3d(1, 1, 1); 339 | } 340 | 341 | 30% { 342 | -webkit-transform: scale3d(1.25, 0.75, 1); 343 | transform: scale3d(1.25, 0.75, 1); 344 | } 345 | 346 | 40% { 347 | -webkit-transform: scale3d(0.75, 1.25, 1); 348 | transform: scale3d(0.75, 1.25, 1); 349 | } 350 | 351 | 50% { 352 | -webkit-transform: scale3d(1.15, 0.85, 1); 353 | transform: scale3d(1.15, 0.85, 1); 354 | } 355 | 356 | 65% { 357 | -webkit-transform: scale3d(.95, 1.05, 1); 358 | transform: scale3d(.95, 1.05, 1); 359 | } 360 | 361 | 75% { 362 | -webkit-transform: scale3d(1.05, .95, 1); 363 | transform: scale3d(1.05, .95, 1); 364 | } 365 | 366 | to { 367 | -webkit-transform: scale3d(1, 1, 1); 368 | transform: scale3d(1, 1, 1); 369 | } 370 | } 371 | 372 | @keyframes rubberBand { 373 | from { 374 | -webkit-transform: scale3d(1, 1, 1); 375 | transform: scale3d(1, 1, 1); 376 | } 377 | 378 | 30% { 379 | -webkit-transform: scale3d(1.25, 0.75, 1); 380 | transform: scale3d(1.25, 0.75, 1); 381 | } 382 | 383 | 40% { 384 | -webkit-transform: scale3d(0.75, 1.25, 1); 385 | transform: scale3d(0.75, 1.25, 1); 386 | } 387 | 388 | 50% { 389 | -webkit-transform: scale3d(1.15, 0.85, 1); 390 | transform: scale3d(1.15, 0.85, 1); 391 | } 392 | 393 | 65% { 394 | -webkit-transform: scale3d(.95, 1.05, 1); 395 | transform: scale3d(.95, 1.05, 1); 396 | } 397 | 398 | 75% { 399 | -webkit-transform: scale3d(1.05, .95, 1); 400 | transform: scale3d(1.05, .95, 1); 401 | } 402 | 403 | to { 404 | -webkit-transform: scale3d(1, 1, 1); 405 | transform: scale3d(1, 1, 1); 406 | } 407 | } 408 | -------------------------------------------------------------------------------- /stylesheets/resume.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 90%; 3 | color: #585858; 4 | } 5 | 6 | body { 7 | background: #fafafa; 8 | } 9 | 10 | *, *:after, *:before { 11 | box-sizing: border-box; 12 | } 13 | 14 | * { 15 | list-style: none; 16 | box-sizing: border-box; 17 | } 18 | 19 | .content:not(.visible) { 20 | display: none; 21 | } 22 | 23 | .content { 24 | padding-left: 250px; 25 | } 26 | 27 | #contact .main { 28 | display: flex; 29 | justify-content: center; 30 | align-items: center; 31 | height: 100vh; 32 | } 33 | 34 | .main .contact-card { 35 | display: flex; 36 | margin: 30px 0; 37 | font-size: 40px; 38 | align-items: center; 39 | } 40 | 41 | .contact-card .icon { 42 | display: flex; 43 | width: 60px; 44 | 45 | align-items: center; 46 | } 47 | 48 | .contact-card i { 49 | font-size: 40px; 50 | } 51 | 52 | .contact-card span { 53 | transition: all 0.3s ease-in; 54 | font-size: 30px; 55 | font-weight: 300; 56 | } 57 | 58 | .contact-card.wechat img { 59 | width: 200px; 60 | } 61 | 62 | .contact-card span:hover { 63 | color: #E91E63; 64 | } 65 | 66 | .container { 67 | text-align: center; 68 | } 69 | 70 | .container > header { 71 | width: 90%; 72 | max-width: 69em; 73 | margin: 0 auto; 74 | padding: 0 1.375em; 75 | margin-bottom: 100px; 76 | } 77 | 78 | .container .title { 79 | font-size: 50px; 80 | font-weight: 200; 81 | color: #252728; 82 | margin-top: 0; 83 | margin-bottom: 55px; 84 | line-height: 1; 85 | letter-spacing: 0.1em; 86 | padding-top: 50px; 87 | } 88 | 89 | .container .description { 90 | display: -webkit-box; 91 | display: -ms-flexbox; 92 | display: flex; 93 | -ms-flex-pack: distribute; 94 | justify-content: space-around; 95 | } 96 | 97 | .description .des-chunk { 98 | margin: 0 50px; 99 | -ms-flex-preferred-size: calc(100% - 200px); 100 | flex-basis: calc(100% - 200px); 101 | text-align: left; 102 | padding: 0 1rem; 103 | } 104 | .des-chunk li { 105 | list-style: circle; 106 | margin: 1rem 0; 107 | line-height: 2rem; 108 | font-size: 1.1rem; 109 | } 110 | 111 | header { 112 | background: #232526; /* fallback for old browsers */ 113 | background: -webkit-linear-gradient( 114 | to left, 115 | #232526, 116 | #414345 117 | ); /* Chrome 10-25, Safari 5.1-6 */ 118 | background: -webkit-linear-gradient(right, #232526, #414345); 119 | background: linear-gradient( 120 | to left, 121 | #232526, 122 | #414345 123 | ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 124 | 125 | text-align: center; 126 | height: 110px; 127 | min-width: 100%; 128 | padding: 2em 0px !important; 129 | position: relative; 130 | border-bottom: 1px solid #edeeee; 131 | } 132 | 133 | header h1 { 134 | font-size: 35px; 135 | color: #252728; 136 | font-weight: 100; 137 | margin-top: 20px; 138 | margin-bottom: 10px; 139 | line-height: 1; 140 | letter-spacing: 0.1em; 141 | } 142 | 143 | header h1.title { 144 | margin-top: 0; 145 | color: #fafafa; 146 | } 147 | 148 | header p { 149 | text-align: center; 150 | color: #252728; 151 | font-size: 16px; 152 | line-height: 1.6em; 153 | letter-spacing: 1px; 154 | font-weight: 300; 155 | margin: 1.7em; 156 | } 157 | 158 | .highlight { 159 | font-weight: 400; 160 | background: #EEEEEE; 161 | margin: 1em; 162 | border: 1px solid #cfd8dc; 163 | border-radius: 3px; 164 | margin: 0; 165 | } 166 | 167 | .highlight.emphasize { 168 | color: #2196f3; 169 | } 170 | 171 | .highlight.important { 172 | color: #E91E63; 173 | } 174 | 175 | header img { 176 | width: 175px; 177 | } 178 | 179 | .cbp_tmtimeline { 180 | padding: 0; 181 | list-style: none; 182 | position: relative; 183 | max-width: 600px; 184 | margin: 0 auto; 185 | } 186 | 187 | .cbp_tmtimeline > li { 188 | position: relative; 189 | box-sizing: border-box; 190 | display: inline-block; 191 | vertical-align: top; 192 | width: 100%; 193 | } 194 | 195 | /* The date/time */ 196 | .cbp_tmlabel time { 197 | font-size: 1.0em; 198 | position: absolute; 199 | top: 0px; 200 | line-height: 64px; 201 | right: 5px; 202 | margin-right: 1em; 203 | color: #a5a7aa; 204 | } 205 | 206 | /* The card */ 207 | .cbp_tmtimeline > li .cbp_tmlabel { 208 | background: white; 209 | color: rgb(78, 78, 78); 210 | position: relative; 211 | border-radius: 3px; 212 | border: 1px solid #edeeee; 213 | margin: 0 0 30px 0; 214 | font-weight: 400; 215 | font-size: 95%; 216 | -webkit-transition: all 0.5s ease-in-out; 217 | transition: all 0.5s ease-in-out; 218 | box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 30px, 219 | rgba(0, 0, 0, 0.23) 0px 6px 10px; 220 | } 221 | 222 | .cbp_tmtimeline > li .cbp_tmlabel .stack { 223 | vertical-align: baseline; 224 | background: rgba(225, 245, 254, 0.29); 225 | color: #2196F3; 226 | border: 1px solid #2196F3; 227 | border-radius: 3px; 228 | padding: 1px; 229 | margin-right: 5px; 230 | line-height: 2; 231 | } 232 | 233 | .cbp_tmtimeline > li .cbp_tmlabel .intro-highlight { 234 | color: #37474F; 235 | font-weight: 600; 236 | text-decoration: underline; 237 | } 238 | 239 | .cbp_tmtimeline > li .cbp_tmlabel h2 { 240 | font-weight: bold; 241 | font-size: 15px; 242 | padding: 14px 20px; 243 | margin: 0; 244 | height: 64px; 245 | line-height: 36px; 246 | } 247 | 248 | .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after { 249 | border-right-color: #FFFFFF; 250 | display: no; 251 | } 252 | 253 | /** Venders Logo **/ 254 | .i-jquery:before { 255 | content: ""; 256 | display: block; 257 | width: 40px; 258 | height: 40px; 259 | background: url("../logo/logo-jquery.png") 50% 50% no-repeat; 260 | background-size: 20px; 261 | } 262 | 263 | .i-react:before { 264 | content: ""; 265 | display: block; 266 | width: 40px; 267 | height: 40px; 268 | background: url("../logo/logo-react.png") 50% 50% no-repeat; 269 | background-size: 22px; 270 | } 271 | 272 | .i-redux:before { 273 | content: ""; 274 | display: block; 275 | width: 40px; 276 | height: 40px; 277 | background: url("../logo/redux.png") 50% 50% no-repeat; 278 | background-size: 22px; 279 | } 280 | 281 | .i-react-router:before { 282 | content: ""; 283 | display: block; 284 | width: 40px; 285 | height: 40px; 286 | background: url("../logo/react-router.png") 50% 50% no-repeat; 287 | background-size: 22px; 288 | } 289 | 290 | .i-immutable:before { 291 | content: ""; 292 | display: block; 293 | width: 40px; 294 | height: 40px; 295 | background: url("../logo/immutable.png") 50% 50% no-repeat; 296 | background-size: 22px; 297 | } 298 | 299 | .i-saga:before { 300 | content: ""; 301 | display: block; 302 | width: 40px; 303 | height: 40px; 304 | background: url("../logo/saga.png") 50% 50% no-repeat; 305 | background-size: 22px; 306 | } 307 | 308 | .i-webpack:before { 309 | content: ""; 310 | display: block; 311 | width: 40px; 312 | height: 40px; 313 | background: url("../logo/webpack.png") 50% 50% no-repeat; 314 | background-size: 22px; 315 | } 316 | 317 | .i-node:before { 318 | content: ""; 319 | display: block; 320 | width: 40px; 321 | height: 40px; 322 | background: url("../logo/node.png") 50% 50% no-repeat; 323 | background-size: 22px; 324 | } 325 | 326 | .i-mongo:before { 327 | content: ""; 328 | display: block; 329 | width: 40px; 330 | height: 40px; 331 | background: url("../logo/mongo.png") 50% 50% no-repeat; 332 | background-size: 22px; 333 | } 334 | 335 | .cbp_tmlabel img { 336 | width: 100%; 337 | margin-bottom: 1em; 338 | border-top: 1px solid #eeefef; 339 | border-bottom: 1px solid #eeefef; 340 | } 341 | 342 | .cbp_tmlabel p { 343 | padding: 1em 0; 344 | margin: 0 1.5em; 345 | border-top: 1px solid rgba(255, 255, 255, 0.4); 346 | } 347 | 348 | .cbp_tmlabel ul { 349 | padding: 0em 0; 350 | margin: 0 1.5em; 351 | list-style: none; 352 | } 353 | 354 | .cbp_tmlabel ul li { 355 | padding: 0.5em 0; 356 | } 357 | 358 | .cbp_tmlabel ul li.skill { 359 | overflow: auto; 360 | margin-top: 9px; 361 | border-top: 1px solid #eeefef; 362 | } 363 | 364 | .cbp_tmlabel ul li.skill > span, .cbp_tmlabel ul li.skill > a { 365 | display: block; 366 | float: left; 367 | font-size: 1.3rem; 368 | width: 40px; 369 | height: 40px; 370 | text-align: center; 371 | line-height: 40px; 372 | margin-right: 8px; 373 | color: #a5a7aa; 374 | -webkit-transition: all 0.3s ease; 375 | transition: all 0.3s ease; 376 | cursor: pointer; 377 | } 378 | 379 | .cbp_tmlabel ul li .intro-link { 380 | vertical-align: baseline; 381 | } 382 | 383 | .cbp_tmlabel ul li .intro-link:hover { 384 | color: orange; 385 | } 386 | 387 | .cbp_tmlabel ul li a:not(.intro-link):hover { 388 | background: rgba(0, 0, 0, 0.05); 389 | border-radius: 50%; 390 | } 391 | 392 | .cbp_tmlabel ul li.skill > span:nth-child(1) { 393 | margin-left: -7px; 394 | } 395 | 396 | .cbp_tmlabel ul li.skill span:before { 397 | line-height: 40px; 398 | } 399 | 400 | .cbp_tmlabel ul li.skill span.link { 401 | float: right; 402 | font-size: 0.8em; 403 | line-height: 30px; 404 | width: auto; 405 | padding: 0 11px; 406 | min-width: 70px; 407 | box-sizing: border-box; 408 | height: 32px; 409 | border-radius: 3px; 410 | background: white; 411 | border: 1px solid #D5D6D8; 412 | margin: 4px 0px 4px 5px; 413 | } 414 | 415 | .cbp_tmlabel ul li.skill span.link:hover, 416 | .cbp_tmlabel ul li.skill span.link:active { 417 | background: #eee; 418 | } 419 | 420 | .cbp_tmlabel ul li.skill span.link a { 421 | color: #a5a7aa; 422 | display: block; 423 | width: 100%; 424 | height: 100%; 425 | font-size: 14px; 426 | font-weight: bold; 427 | /*reset before*/ 428 | background: none !important; 429 | text-decoration: none; 430 | } 431 | 432 | @media screen and (max-width: 400px) { 433 | .main { 434 | width: 100%; 435 | padding-bottom: 0px; 436 | } 437 | html { 438 | font-size: 90%; 439 | } 440 | header p { 441 | font-size: 1.05em; 442 | letter-spacing: 0px; 443 | margin: 1.5em; 444 | } 445 | .cbp_tmlabel ul li.skill > span, .cbp_tmlabel ul li.skill > a { 446 | margin-right: 2px; 447 | } 448 | } 449 | 450 | .pp-tableCell { 451 | vertical-align: middle; 452 | margin-top: 50px; 453 | } 454 | 455 | .pp-tableCell h1 { 456 | font-size: 50px; 457 | color: #252728; 458 | font-weight: 100; 459 | margin-top: 0; 460 | margin-bottom: 55px; 461 | line-height: 1; 462 | letter-spacing: 0.1em; 463 | padding-top: 50px; 464 | } 465 | 466 | .pp-tableCell .tag-panel { 467 | margin: 15px auto; 468 | } 469 | 470 | .tag-panel .tag { 471 | font-size: 1.2rem; 472 | background-color: #607d8b; 473 | color: #FAFAFA; 474 | border-radius: 3px; 475 | display: inline-block; 476 | padding: 2px 8px; 477 | margin-right: 3px; 478 | margin-bottom: 3px; 479 | box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 10px, 480 | rgba(0, 0, 0, 0.23) 0px 3px 10px; 481 | } 482 | 483 | .tag-panel .tag.familiar { 484 | opacity: 0.5; 485 | } 486 | 487 | @media screen and (max-width: 414px) { 488 | .cbp_tmtimeline > li .cbp_tmlabel { 489 | box-shadow: none; 490 | } 491 | #contact .main { 492 | height: calc(100vh - 50px); 493 | } 494 | .contact-card .icon { 495 | font-size: 30px; 496 | } 497 | .contact-card span { 498 | font-size: 20px; 499 | } 500 | } 501 | 502 | @media screen and (max-width: 768px) { 503 | .content { 504 | padding-left: 0; 505 | padding-top: 50px; 506 | } 507 | .description .des-chunk { 508 | margin: 0 20px; 509 | text-align: left; 510 | padding: 0 1rem; 511 | } 512 | } 513 | 514 | @media screen and (max-width: 1024px) { 515 | .container .description { 516 | -webkit-box-orient: vertical; 517 | -webkit-box-direction: normal; 518 | -ms-flex-direction: column; 519 | flex-direction: column; 520 | } 521 | .description .des-chunk { 522 | flex-basis: auto; 523 | } 524 | } 525 | -------------------------------------------------------------------------------- /stylesheets/resume_v2.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 90%; 3 | color: #585858; 4 | } 5 | 6 | body { 7 | background: #fafafa; 8 | } 9 | 10 | *, *:after, *:before { 11 | box-sizing: border-box; 12 | } 13 | 14 | * { 15 | list-style: none; 16 | box-sizing: border-box; 17 | } 18 | 19 | /*.content:not(.visible) { 20 | display: none; 21 | }*/ 22 | 23 | /*.content { 24 | border-bottom: 1px solid #eee; 25 | }*/ 26 | 27 | .content#resume-index { 28 | margin-bottom: 50px; 29 | } 30 | .container { 31 | text-align: center; 32 | } 33 | 34 | .container > header { 35 | width: 90%; 36 | max-width: 69em; 37 | margin: 0 auto; 38 | } 39 | 40 | .main { 41 | display: flex; 42 | flex-direction: column; 43 | align-items: center; 44 | } 45 | 46 | #contact .main { 47 | display: flex; 48 | justify-content: center; 49 | align-items: center; 50 | height: 100vh; 51 | } 52 | 53 | #contact .container .title { 54 | margin-bottom: 45px; 55 | } 56 | .main .contact-card { 57 | display: flex; 58 | margin: 30px 0; 59 | font-size: 40px; 60 | align-items: center; 61 | } 62 | 63 | .contact-card .icon { 64 | display: flex; 65 | width: 60px; 66 | 67 | align-items: center; 68 | } 69 | 70 | .contact-card i { 71 | font-size: 40px; 72 | } 73 | 74 | .contact-card span { 75 | transition: all 0.3s ease-in; 76 | cursor: pointer; 77 | font-size: 30px; 78 | font-weight: 300; 79 | } 80 | 81 | .contact-card.wechat img { 82 | width: 200px; 83 | } 84 | 85 | .contact-card span:hover{ 86 | color: #E91E63; 87 | } 88 | 89 | .main .intro li { 90 | text-align: left !important; 91 | } 92 | 93 | .container .title { 94 | font-size: 50px; 95 | font-weight: 200; 96 | color: #252728; 97 | margin-top: 0; 98 | margin-bottom: 55px; 99 | line-height: 1; 100 | letter-spacing: 0.1em; 101 | padding-top: 50px; 102 | } 103 | 104 | #resume-portfolio .title { 105 | padding-top: 80px; 106 | } 107 | .description { 108 | display: -webkit-box; 109 | display: -ms-flexbox; 110 | display: flex; 111 | -ms-flex-pack: distribute; 112 | justify-content: space-around; 113 | } 114 | 115 | .description .des-chunk { 116 | margin: 0 50px; 117 | -ms-flex-preferred-size: calc(100% - 200px); 118 | flex-basis: calc(100% - 200px); 119 | text-align: left; 120 | padding: 0 1rem; 121 | } 122 | .des-chunk li { 123 | list-style: circle; 124 | margin: 1rem 0; 125 | line-height: 2rem; 126 | font-size: 1.1rem; 127 | } 128 | 129 | header { 130 | text-align: center; 131 | min-width: 100%; 132 | position: relative; 133 | /*border-bottom: 1px solid #edeeee;*/ 134 | } 135 | 136 | header .back-bar { 137 | z-index: 1; 138 | width: 100%; 139 | background: #232526; /* fallback for old browsers */ 140 | background: -webkit-linear-gradient( 141 | to left, 142 | #232526, 143 | #414345 144 | ); /* Chrome 10-25, Safari 5.1-6 */ 145 | background: -webkit-linear-gradient(right, #232526, #414345); 146 | background: linear-gradient( 147 | to left, 148 | #232526, 149 | #414345 150 | ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 151 | height: 110px; 152 | position: absolute; 153 | top: 0; 154 | } 155 | 156 | header h1 { 157 | font-size: 40px; 158 | color: #252728; 159 | font-weight: 100; 160 | margin-top: 20px; 161 | margin-bottom: 10px; 162 | line-height: 1; 163 | letter-spacing: 0.1em; 164 | } 165 | 166 | header img { 167 | position: relative; 168 | z-index: 100; 169 | width: 175px; 170 | margin-top: 20px; 171 | } 172 | 173 | header h1.title { 174 | margin-top: 0; 175 | color: #fafafa; 176 | } 177 | 178 | header p, .main .intro li { 179 | text-align: center; 180 | color: #252728; 181 | font-size: 16px; 182 | line-height: 1.6em; 183 | letter-spacing: 1px; 184 | font-weight: 300; 185 | margin: 1.7em; 186 | } 187 | 188 | .highlight { 189 | font-weight: 400; 190 | background: #EEEEEE; 191 | margin: 1em; 192 | border: 1px solid #cfd8dc; 193 | border-radius: 3px; 194 | margin: 0; 195 | } 196 | 197 | .highlight.emphasize { 198 | color: #2196f3; 199 | } 200 | 201 | .highlight.important { 202 | color: #E91E63; 203 | } 204 | 205 | .cbp_tmtimeline { 206 | padding: 0; 207 | list-style: none; 208 | position: relative; 209 | } 210 | 211 | .cbp_tmtimeline > li { 212 | position: relative; 213 | box-sizing: border-box; 214 | display: inline-block; 215 | vertical-align: top; 216 | width: 100%; 217 | display: flex; 218 | flex-wrap: wrap; 219 | justify-content: space-around; 220 | } 221 | 222 | /* The date/time */ 223 | .cbp_tmlabel time { 224 | font-size: 1.0em; 225 | position: absolute; 226 | top: 0px; 227 | line-height: 64px; 228 | right: 5px; 229 | margin-right: 1em; 230 | color: #a5a7aa; 231 | } 232 | 233 | /* The card */ 234 | .cbp_tmtimeline > li .cbp_tmlabel { 235 | flex-basis: 600px; 236 | background: white; 237 | color: rgb(78, 78, 78); 238 | position: relative; 239 | border-radius: 3px; 240 | border: 1px solid #edeeee; 241 | margin: 30px; 242 | margin-top: 0; 243 | font-weight: 400; 244 | font-size: 95%; 245 | -webkit-transition: all 0.5s ease-in-out; 246 | transition: all 0.5s ease-in-out; 247 | } 248 | 249 | .cbp_tmtimeline > li .cbp_tmlabel:hover { 250 | box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 30px, 251 | rgba(0, 0, 0, 0.23) 0px 6px 10px; 252 | } 253 | .cbp_tmtimeline > li .cbp_tmlabel .stack { 254 | vertical-align: baseline; 255 | background: rgba(225, 245, 254, 0.29); 256 | color: #2196F3; 257 | border: 1px solid #2196F3; 258 | border-radius: 3px; 259 | padding: 1px; 260 | margin-right: 5px; 261 | line-height: 2; 262 | } 263 | 264 | .cbp_tmtimeline > li .cbp_tmlabel .intro-highlight { 265 | color: #37474F; 266 | font-weight: 600; 267 | text-decoration: underline; 268 | } 269 | 270 | .cbp_tmtimeline > li .cbp_tmlabel h2 { 271 | font-weight: bold; 272 | font-size: 15px; 273 | padding: 14px 20px; 274 | margin: 0; 275 | height: 64px; 276 | line-height: 36px; 277 | } 278 | 279 | .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after { 280 | border-right-color: #FFFFFF; 281 | display: no; 282 | } 283 | 284 | /** Venders Logo **/ 285 | .i-jquery:before { 286 | content: ""; 287 | display: block; 288 | width: 40px; 289 | height: 40px; 290 | background: url("../logo/logo-jquery.png") 50% 50% no-repeat; 291 | background-size: 20px; 292 | } 293 | 294 | .i-react:before { 295 | content: ""; 296 | display: block; 297 | width: 40px; 298 | height: 40px; 299 | background: url("../logo/logo-react.png") 50% 50% no-repeat; 300 | background-size: 22px; 301 | } 302 | 303 | .i-redux:before { 304 | content: ""; 305 | display: block; 306 | width: 40px; 307 | height: 40px; 308 | background: url("../logo/redux.png") 50% 50% no-repeat; 309 | background-size: 22px; 310 | } 311 | 312 | .i-react-router:before { 313 | content: ""; 314 | display: block; 315 | width: 40px; 316 | height: 40px; 317 | background: url("../logo/react-router.png") 50% 50% no-repeat; 318 | background-size: 22px; 319 | } 320 | 321 | .i-immutable:before { 322 | content: ""; 323 | display: block; 324 | width: 40px; 325 | height: 40px; 326 | background: url("../logo/immutable.png") 50% 50% no-repeat; 327 | background-size: 22px; 328 | } 329 | 330 | .i-saga:before { 331 | content: ""; 332 | display: block; 333 | width: 40px; 334 | height: 40px; 335 | background: url("../logo/saga.png") 50% 50% no-repeat; 336 | background-size: 22px; 337 | } 338 | 339 | .i-webpack:before { 340 | content: ""; 341 | display: block; 342 | width: 40px; 343 | height: 40px; 344 | background: url("../logo/webpack.png") 50% 50% no-repeat; 345 | background-size: 22px; 346 | } 347 | 348 | .i-node:before { 349 | content: ""; 350 | display: block; 351 | width: 40px; 352 | height: 40px; 353 | background: url("../logo/node.png") 50% 50% no-repeat; 354 | background-size: 22px; 355 | } 356 | 357 | .i-mongo:before { 358 | content: ""; 359 | display: block; 360 | width: 40px; 361 | height: 40px; 362 | background: url("../logo/mongo.png") 50% 50% no-repeat; 363 | background-size: 22px; 364 | } 365 | 366 | .cbp_tmlabel img { 367 | width: 100%; 368 | margin-bottom: 1em; 369 | border-top: 1px solid #eeefef; 370 | border-bottom: 1px solid #eeefef; 371 | } 372 | 373 | .cbp_tmlabel p { 374 | padding: 1em 0; 375 | margin: 0 1.5em; 376 | border-top: 1px solid rgba(255, 255, 255, 0.4); 377 | } 378 | 379 | .cbp_tmlabel ul { 380 | padding: 0em 0; 381 | margin: 0 1.5em; 382 | list-style: none; 383 | } 384 | 385 | .cbp_tmlabel ul li { 386 | padding: 0.5em 0; 387 | } 388 | 389 | .cbp_tmlabel ul li.skill { 390 | overflow: auto; 391 | margin-top: 9px; 392 | border-top: 1px solid #eeefef; 393 | } 394 | 395 | .cbp_tmlabel ul li.skill > span, .cbp_tmlabel ul li.skill > a { 396 | display: block; 397 | float: left; 398 | font-size: 1.3rem; 399 | width: 40px; 400 | height: 40px; 401 | text-align: center; 402 | line-height: 40px; 403 | margin-right: 8px; 404 | color: #a5a7aa; 405 | -webkit-transition: all 0.3s ease; 406 | transition: all 0.3s ease; 407 | cursor: pointer; 408 | } 409 | 410 | .cbp_tmlabel ul li .intro-link { 411 | vertical-align: baseline; 412 | } 413 | 414 | .cbp_tmlabel ul li .intro-link:hover { 415 | color: orange; 416 | } 417 | 418 | .cbp_tmlabel ul li a:not(.intro-link):hover { 419 | background: rgba(0, 0, 0, 0.05); 420 | border-radius: 50%; 421 | } 422 | 423 | .cbp_tmlabel ul li.skill > span:nth-child(1) { 424 | margin-left: -7px; 425 | } 426 | 427 | .cbp_tmlabel ul li.skill span:before { 428 | line-height: 40px; 429 | } 430 | 431 | .cbp_tmlabel ul li.skill span.link { 432 | float: right; 433 | font-size: 0.8em; 434 | line-height: 30px; 435 | width: auto; 436 | padding: 0 11px; 437 | min-width: 70px; 438 | box-sizing: border-box; 439 | height: 32px; 440 | border-radius: 3px; 441 | background: white; 442 | border: 1px solid #D5D6D8; 443 | margin: 4px 0px 4px 5px; 444 | } 445 | 446 | .cbp_tmlabel ul li.skill span.link:hover, 447 | .cbp_tmlabel ul li.skill span.link:active { 448 | background: #eee; 449 | } 450 | 451 | .cbp_tmlabel ul li.skill span.link a { 452 | color: #a5a7aa; 453 | display: block; 454 | width: 100%; 455 | height: 100%; 456 | font-size: 14px; 457 | font-weight: bold; 458 | /*reset before*/ 459 | background: none !important; 460 | text-decoration: none; 461 | } 462 | 463 | @media screen and (max-width: 400px) { 464 | .main { 465 | width: 100%; 466 | padding-bottom: 0px; 467 | } 468 | html { 469 | font-size: 90%; 470 | } 471 | header p { 472 | font-size: 1.05em; 473 | letter-spacing: 0px; 474 | margin: 1.5em; 475 | } 476 | .cbp_tmlabel ul li.skill > span, .cbp_tmlabel ul li.skill > a { 477 | margin-right: 2px; 478 | } 479 | } 480 | 481 | .pp-tableCell { 482 | vertical-align: middle; 483 | margin-top: 50px; 484 | } 485 | 486 | .pp-tableCell h1 { 487 | font-size: 50px; 488 | color: #252728; 489 | font-weight: 100; 490 | margin-top: 0; 491 | margin-bottom: 55px; 492 | line-height: 1; 493 | letter-spacing: 0.1em; 494 | padding-top: 50px; 495 | } 496 | 497 | .pp-tableCell .tag-panel { 498 | margin: 15px auto; 499 | } 500 | 501 | .tag-panel .tag { 502 | font-size: 1.2rem; 503 | background-color: #607d8b; 504 | color: #FAFAFA; 505 | border-radius: 3px; 506 | display: inline-block; 507 | padding: 2px 8px; 508 | margin-right: 3px; 509 | margin-bottom: 3px; 510 | box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 10px, 511 | rgba(0, 0, 0, 0.23) 0px 3px 10px; 512 | } 513 | 514 | .tag-panel .tag.familiar { 515 | opacity: 0.5; 516 | } 517 | 518 | 519 | 520 | @media screen and (max-width: 414px) { 521 | .cbp_tmtimeline > li .cbp_tmlabel { 522 | box-shadow: none; 523 | } 524 | .contact-card .icon { 525 | font-size: 30px; 526 | } 527 | .contact-card span { 528 | font-size: 20px; 529 | } 530 | } 531 | 532 | @media screen and (max-width: 768px) { 533 | .description .des-chunk { 534 | margin: 0 20px; 535 | text-align: left; 536 | padding: 0 1rem; 537 | } 538 | } 539 | 540 | @media screen and (max-width: 1024px) { 541 | .container .description { 542 | -webkit-box-orient: vertical; 543 | -webkit-box-direction: normal; 544 | -ms-flex-direction: column; 545 | flex-direction: column; 546 | } 547 | .description .des-chunk { 548 | flex-basis: auto; 549 | } 550 | } 551 | --------------------------------------------------------------------------------