A lot of people see there are good-looking things inside the habitual point to come in and see, but also point and think – good-looking RESUME I see many, you can see where to go. I think so:

where


Since I have been preparing my resume recently, I used to look for a ready-made resume template. The result is all paid, ugly charge 5 yuan, a little more elegant almost 10 yuan, which makes a young man from an ordinary family how to afford. This led to the idea of writing a resume template, which led to this lightweight resume artifact.

vue-resume

Address: luosijie. Making. IO/vue – resume /…

Source: github.com/luosijie/vu…

Method of use

Resume template operation can be said to be very simple, basically grasp these principles

  1. What do you want to change
  2. Right click delete
  3. Plus increase

Application scenarios

Resume can be downloaded as a picture

  1. Resume directly attached to the job site
  2. Print it out: The actual effect is a little fuzzy, but within acceptable limits

Deficiency in

The idea behind this was to create a handy resume template, but I think that’s a long way off. There are still the following defects

  1. A template style cannot be selected
  2. Multi-page resumes are not supported
  3. Conversion to PDF is not supported

Function implementation

This is a VUe-based project, and from the final implementation point of view, there are no technical difficulties. However, consider actual user needs and application scenarios, and then balance these with your skill level and willingness to invest time.

Logo design

Logo design has nothing to do with technology, but NO matter the size of the project, I feel that a Logo is complete. However, most people don’t understand Logo design, and I have summed up a rule: as long as you design a Logo that people don’t understand at a glance, you are almost halfway there. As if you could see that the Logo below is a combination of the letters “V” and “R”.

Logo

Here is the Logo design process

Logo_process

Functional analysis

The most basic unit of this project is pictures and words, and then compose various list components, including About me, Skill, Education, Working Experience, etc.

Picture text component

Images and text should only be editable.

The text

<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>Copy the code

The picture

edit-image.vue

Basically, you upload a local image and convert it to Base64 format

<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>Copy the code

The List component

context-list.vue

The List – item component

The List component implements the common functions of the About Me, Skill, Education, and Working Experience components. That is:

  1. The title
  2. content
  3. Add entries
<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"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: {//type: String,
        default: 'Title'
      },
      icon: {
        type: String,
        default: ' '
      }
    },
    data: function () {
      return {
        arry: []
      }
    },
    methods: {
      showAdd: function () {
        this.add = true}, // implement item add function add:function () {
        this.arry.push(1)
      }
    }
  }
</script>
<style>
  ...
</style>Copy the code

The List – item component

list-item.vue

The List – item component

The list-item component is used to delete each item, and then items of different types are defined on the basis of the list-item component

<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: {function () {
        this.listControl = true}, // cancelControl:function () {
        this.listControl = false}, // deleteControl deleteControl:function () {
        this.listItem = false
      }
    }
  }
</script>Copy the code

That’s it. Welcome star