送给大家一个好看的简历神器

79

很多人看到里边有好看的东西就习惯性的点进来看看,还一边点一边想 —— 好看的简历我见多了,你这个又能好看到哪里去。我想差不多可以:

哪里

因为最近有在准备简历,就习惯性的找一找有没有现成的简历模板。结果全是付费的,丑的收5块,稍微讲究一点的就差不多要10块钱了,这让一个普通家庭出身的年轻人怎么负担得起。
于是就产生了写一个简历模板的想法,后来就有了这个轻量的简历神器。

vue-resume

地址: https://luosijie.github.io/vue-resume/#/

源码: https://github.com/luosijie/vue-resume

使用方法

简历模板的操作可以说很简单,基本上把握住这么几个原则

  1. 想改哪里点哪里
  2. 右键删除
  3. 加号增加

应用场景

简历作为图片下载后,可以

  1. 直接作为招聘网站的附件简历
  2. 打印出来:实际效果稍微有点模糊,不过在可接受范围

不足之处

写这个的初衷是做一个便捷好用的简历模板,但我觉得距离实现这个目标还有一段距离。目前还有以下缺陷

  1. 不能选择模板样式
  2. 不支持多页简历
  3. 不支持转换为PDF

功能实现

这是一个基于Vue的项目,从最后实现来看,本身没什么技术难点。不过也要考虑实际用户需求和应用场景,然后将这些和 自己的技术水平愿意投入的时间成本 做一个平衡。

Logo设计

Logo设计无关技术,只不过项目无论大小,我感觉有一个Logo才完整。不过关于Logo设计,大多数人是不太懂的, 我自己总结了一条规律:只要你设计的Logo让人一眼没看懂,基本上就成功了一半了。 就好像你看出下面的Logo是字母 “V”“R” 的结合体吗。

Logo

下面是Logo的设计过程

Logo_process

功能分析

这个项目最基本的单元是 图片文字 然后组成各个 list组件 ,包括 About me, Skill, Education, Working Experience等。

图片文字组件

图片和文字只要实现可编辑功能就可以了。

文字

<p contenteditable="true">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit metus in libero rutrum congue aliquam eu libero. Donec tristique est pharetra fringilla sollicitudin. Etiam eu ipsum vitae nulla tincidunt scelerisque semper id arcu. Phasellus quam tellus, laoreet id felis a, dignissim facilisis orci. Mauris feugiat vulputate quam quis tincidunt. In eleifend augue eu tristique bibendum. Donec gravida, eros sed iaculis iaculis, magna est finibus tortor, ultricies accumsan diam lorem non neque.
</p>

图片

edit-image.vue

基本上就是将本地图片上传并转为base64格式

<template>
  <div class="edit-image" :style="{ width: width + 'px', height: height + 'px'}">
    <img :src="imgSrc" alt="image" :class="{ circle: isCircle }">
    <input type="file" accept="image/gif,image/jpeg,image/jpg,image/png" @change="changeImage">
  </div>
</template>
<script>
  export default {
    name: 'EditImage',
    props: {
     ...
    },
    data: function () {
      return {
        imgSrc: this.src
      }
    },
    methods: {
      changeImage: function (evt) {
        let _this = this
        let reader = new FileReader()
        let file = evt.target.files[0]
        reader.readAsDataURL(file)
        reader.onload = function (evt) {
          _this.imgSrc = evt.target.result
        }
      }
    }
  }
</script>

List组件

context-list.vue

List-item组件

List组件要实现 About me, Skill, Education, Working Experience 这些组件的通用功能。也就是:

  1. 标题
  2. 内容
  3. 增加条目
<template>
  <div class="context-list" :class="{ 'icon-margin-bottom': icon }">
    <div class="list-heading" :class="{ 'icon-class': icon }">
      <div class="title">
        <EditImage v-if="icon" :src="icon" height="36" width="36" class="img"></EditImage>
        <h2 class="title" contenteditable="true">{{title}}</h2>
      </div>
      <button class="add" @click="add" :class="{ 'icon-margin-right': icon }">+</button>
    </div>
    // 实现内容功能
    <ul id="luo">
      <ListItemAbout v-if="title == 'About me'" v-for="item in arry" :key="item.id"></ListItemAbout>
      <ListItemSkill v-if="title == 'Skill'" v-for="item in arry" :key="item.id"></ListItemSkill>
      <ListItemEducation v-if="title == 'Education'" v-for="item in arry" :key="item.id"></ListItemEducation>
      <ListItemExperience v-if="title == 'Working Experience'" v-for="item in arry" :key="item.id"></ListItemExperience>
      <ListItemInfo v-if="icon" v-for="item in arry" :key="item.id"></ListItemInfo>
      <slot name="listItem"></slot>
    </ul>
  </div>
</template>
<script>
  ...
  export default {
    name: 'ContextList',
    components: {
      EditImage,
      ListItemAbout,
      ListItemSkill,
      ListItemEducation,
      ListItemExperience,
      ListItemInfo
    },
    props: {
      // 实现标题功能
      title: {
        type: String,
        default: 'Title'
      },
      icon: {
        type: String,
        default: ''
      }
    },
    data: function () {
      return {
        arry: []
      }
    },
    methods: {
      showAdd: function () {
        this.add = true
      },
      // 实现条目增加功能
      add: function () {
        this.arry.push(1)
      }
    }
  }
</script>
<style>
  ...
</style>

List-item组件

list-item.vue

List-item组件

List-item组件 主要实现每个条目的删除功能, 然后不同类型的条目在 list-Item组件 的基础上定义各自的内容

<template>
  <li class="list-item" @contextmenu.prevent="showControl" v-if="listItem">
    <slot></slot>
    <div v-if="listControl" class="list-control">
      <span @click="deleteControl">delete</span>
      <span @click="cancelControl">cancel</span>
    </div>
  </li>
</template>
<script>
  export default {
    name: 'ListItem',
    data: function () {
      return {
        listControl: false,
        listItem: true
      }
    },
    methods: {
      // 显示控件
      showControl: function () {
        this.listControl = true
      },
      // 取消操作
      cancelControl: function () {
        this.listControl = false
      },
      // 删除控件
      deleteControl: function () {
        this.listItem = false
      }
    }
  }
</script>

先这样了 欢迎star

你可能感兴趣的

32 条评论
ʚBOOMɞ · 2017年08月31日

代码值得学习!

+8 回复

ʚBOOMɞ · 2017年08月31日

虽然手绘logo丑了点,但还在接受范围!but!用代码做简历模板,我真的无法忍受!太厉害了!

+6 回复

天驱 · 2017年08月15日

其实简历样式没那么重要

+5 回复

4

我觉得至少要保证阅读体验

JesseLuo 作者 · 2017年08月15日
天驱 · 2017年08月15日

我直接用的markdown转pdf?

+4 回复

塞尔达真好玩 · 2017年08月15日

logo很帅呀

+4 回复

Normal · 2017年08月16日

厉害了我的哥

+4 回复

九夏 · 2017年09月12日

佩服了,用代码做简历

+4 回复

LiLiKiLL · 2017年08月15日

我觉得是不是有个登录功能会好一点

+3 回复

1

登录功能本身没有意义,除非再再连带 “草稿功能”,“收藏功能”, 或者有,“多模板功能”。这样工作量就有点大了。不过是一个发展的好方向

JesseLuo 作者 · 2017年08月16日
1

@JesseLuo 嗯,主要目的就是想有一个个人可以随时编辑和保存的功能。

LiLiKiLL · 2017年08月16日
徐森林 · 2017年08月15日

你是一个会设计的程序猿,工作中都使用你的github上面的vue后台模板,关注你很久了,设计真的漂亮,膜拜了。

+3 回复

Annie · 2017年08月16日

想法好棒,跑一下先

+3 回复

金松 · 2017年08月17日

这logi越看越舒服

+3 回复

Forturp · 2017年08月17日

不错,赞一个

+3 回复

wangxufire · 2017年08月22日

设计完了 怎么搞成图片

+3 回复

xdd1874 · 2017年08月15日

赞?
感谢分享~

+2 回复

greenWu · 2017年08月16日

logo不错,赶紧去注册

+2 回复

phpnote · 2017年08月17日

不错,

+2 回复

xy7313 · 2017年08月16日

左边social + 那里是有个bug? (其实简历样式对前端和ui职位都会很加分的

+1 回复

1

具体是怎样的bug

JesseLuo 作者 · 2017年08月16日
pingan8787 · 2017年08月16日

支持一个 哈哈

+1 回复

老吴爱挑刺 · 2017年08月21日

历害了

+1 回复

邓伟强 · 2017年08月16日

log设计过程,哈哈,不错

回复

载入中...