我的个人简历线上版

2019年9月14日 103次阅读 来源: simon_woo

我的个人简历线上版

背景

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

产品

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

  1. 产品面向的用户是谁？
    既然是找工作，那么这份简历如果真能被看到应该是HR和国内的一些同行。

  2. 产品的入口是什么？
    对于HR，看到我这份线上简历肯定是通过我的PDF版简历，如果只是在上面附上一个链接，想象着HR手动输入你的链接去看一下那简直是太天真了，时间对于他们是很宝贵的，所以最好的形式应该是一个二维码，拿出手机扫一扫，直接浏览。对于一些同行，可能是上班的时候，看到社区中我的一些宣传，点击链接的形式打开。所以线上版本应该同时对移动端和PC端友好。

  3. 信息架构？
    简历应该主要包括以下内容：个人信息，教育背景，工作经历，技能。简历的最终呈现形式应该是简洁的，突出重点，尤其是在移动端，由于屏幕的限制，应该只显示关键内容。对于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-width: $screen-phone) {
  html {
    font-size: 16px;
  }
}

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

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

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

业务逻辑

使用fullpage.js。

自动化工作流

开发时，使用gulp browser-sync作为本地的静态服务器，这样当你有所改动时，页面会实时刷新，另一个好处，你可以同时在移动设备进行测试。

使用bower作为包管理器，搭配gulp的wiredep工具，引入的外部js文件时会自动引入到页面中。搭配其他一些工具对html/css/js等进行压缩合并等。

talk is easy, show me the code, 具体请参考项目的gulpfile.js文件。

测试

Responsive测试

使用responsive design工具对各尺寸屏幕进行测试，在各种尺寸下显示良好:
《我的个人简历线上版》

性能测试

速度测试方面使用chrome network throttling对各种网络环境下进行测试, 即使是在GPRS环境下，也能在2s左右打开页面:
《我的个人简历线上版》

  1. 在实体机上进行测试，测试机型为iphone 5/6/6+还有我的13 MBP。

发布

对于一个程序员，github应该是你最好的托管中心。对于静态页面github提供了两种方式: gh-pages分支和master分支的docs目录。我采用了第二种方式，gulp构建流程的最后一步就是将线上使用到的文件拷入到docs目录。

总结

感兴趣的话你就扫一扫吧:
《我的个人简历线上版》

这个小项目耗时2天，线上版本为CV线上版。写这篇博客的目的一方面是为了对这个项目进行一些总结，如果你对源代码感兴趣请访问项目地址。另一方面也希望业内的一些朋友能够关注到我给我提供一些工作的机会，先谢谢各位大佬。如果你想更多的了解我，请访问我的个人主页。

写完这篇文章之后，突然间听到一个噩耗，国内好像不能访问github。此刻我的心情：
《我的个人简历线上版》

    原文作者：simon_woo
    原文地址: https://segmentfault.com/a/1190000007399804
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞