我的个人简历线上版

背景

在国外已经生活了将近四年，突然间萌生了想辞掉现在工作回国重新找工作的想法。既然是找工作，那么简历自然是少不了的事情。作为一个前端工程师，如果没有一份线上简历，这将是一件很low逼的事情，于是有了现在这份线上简历。

产品

不懂产品的开发不是一个好的开发。在做这份简历之前我站在产品的角度上进行了很多思考:

产品面向的用户是谁？
既然是找工作，那么这份简历如果真能被看到应该是HR和国内的一些同行。
产品的入口是什么？
对于HR，看到我这份线上简历肯定是通过我的PDF版简历，如果只是在上面附上一个链接，想象着HR手动输入你的链接去看一下那简直是太天真了，时间对于他们是很宝贵的，所以最好的形式应该是一个二维码，拿出手机扫一扫，直接浏览。对于一些同行，可能是上班的时候，看到社区中我的一些宣传，点击链接的形式打开。所以线上版本应该同时对移动端和PC端友好。
信息架构？
简历应该主要包括以下内容：个人信息，教育背景，工作经历，技能。简历的最终呈现形式应该是简洁的，突出重点，尤其是在移动端，由于屏幕的限制，应该只显示关键内容。对于PC端可以适当的增加一些内容。

设计

设计主要包括以下几个部分: 颜色，字体(中文和英文)，图像等。作为一个开发，这对我来说还是有点难度的，对于颜色方面，由于个人的偏好，比较喜欢极简风(又称性冷淡风)，所以色彩方面整体比较淡雅，色彩使用colors进行调配。色调大致如下:
图片描述

字体方面，英文字体就不必说了，系统自带的已经足够了，我选了monospace，个人偏好。中文字体让人非常为难，好看的系统没有，如果引入外部字体，大几千个汉字会造成字体文件非常大，用户的响应时间也会增加，在没有更好的方案之前，最终还是选用系统默认的中文字体 - 微软雅黑和华文细黑。图片方面，页面中引用的图片只有本人的头像和一个微信二维码，所以图片方面没有太大的问题(已考虑到iphone的2x或3x retina高分屏)。

实现概要

实现方面，引用了前端自动化工具gulp。可能有的人会说我装逼，总共几个页面，纯html，css，js两三个小时完全可以做的很好。你要是这么说，我也无言以对，使用gulp是基于以下几个方面考虑:

开发时，我希望页面可以实时刷新，能够立马反馈到我代码方面的更新，使用纯页面开发则需要我手动刷新，作为一个工程师简直无法忍受
相比于css我更喜欢sass/scss，所以要求能够实时编译到css
从长远的角度来看，以后应该会对该项目进行更新，当项目变得庞大时再引入自动化流程为时已晚
线上版本和开发版本是有区别的。如果在本地开发之后，直接推到线上在展示方面没什么问题，但是在性能方面表现的则不太好。一个良好的线上版本应该是压缩合并过后的html/css/js/image等，将文件体积和http请求数减少到最小，这样用户在网络环境并不好的环境下也能在可接受范围内访问到页面。自动化流程中的一些工具可以帮助我们很方面的做到这些。

实现细节

页面重构

由于要同时支持移动页和pc页，所以应为响应式布局。移动方面，参考了阿里的flexible方案，但是在落地实现时我使用了一种更为简单的方案，分别定义了三种尺寸的屏幕：480px(手机)，480 - 768px(平板)，768以上(pc)。每一种屏幕对应于html font-size: 16px, 20px, 24px。其他元素尺寸使用rem。这种方案，元素虽不会等比放大，但是显示效果可接受。

//IOS: 320/480, 320/568 -> 2, 375/667 -> 2, 414/736 -> 3
@media screen and (max- $screen-phone) {
  html {
    font-size: 16px;
  }
}

@media screen and (min- $screen-phone + 1) and (max- $screen-tablet - 1) {
  html {
    font-size: 20px;
  }
}

@media screen and (min- $screen-tablet) {
  html {
    font-size: 24px;
  }
}

内容展示方面，提前做好规划，在什么样尺寸方面展现什么内容如何布局等，然后使用相关的media-query语句。