Employee Profile Generator

by khamer

HTML

<main>
  <div id="app" v-if="show">
    <header>
      <div>
        <h1>First Lastername</h1>
        <h2>very employee</h2>
        <pick class="title quote" :values="quotes"></pick>
      </div>
      <img :src="portrait()" alt="" class="portrait">
    </header>
    <p>
      <pick class="title" :values="workI"></pick>
      <pick :values="workIVerb"></pick> <pick :values="workUs"></pick>
      <pick :values="workVerb"></pick> <pick :values="workAdj" :max=2></pick> <pick :values="workNoun"></pick>
      that <pick :values="workResultVerb"></pick>
      <pick :values="workAdj" :max=2></pick> <pick :values="workResultNoun"></pick>.

      I love <pick :values="thingsILove" :max=4 and></pick>.

      <pick class="title" :values="when"></pick>, <pick :values="me"></pick>
      <pick :values="verbs"></pick> <pick :values="nouns"></pick> <pick :values="where"></pick>,
      <pick :values="verbs"></pick> <pick :values="nouns"></pick> <pick :values="where"></pick>, or
      <pick :values="verbs"></pick> <pick :values="nouns"></pick> <pick :values="where"></pick>.

      <pick class="title" :values="joiner"></pick>, <pick :values="me"></pick>
      <pick :values="verbs"></pick> <pick :values="nouns"></pick>
      <pick :values="where"></pick>. <pick class="title" :values="flavorPhrase" :max=2></pick>!
    </p>
    
    <p>
        I have <pick :values="workTime"></pick> <pick :values="workAdj"></pick> experience
        <pick :values="working"></pick> <pick :values="workAdj" :max=2></pick> <pick :values="workNoun"></pick>
        with <pick :values="workUs"></pick>, that <pick :values="workResultVerb"></pick>
        <pick :values="workAdj" :max=2></pick> <pick :values="workResultNoun"></pick>.
    </p>

    <div class="actions">
      <button @click="refresh">write another</button>
    </div>
  </div>
</main>

SCSS

@import url('https://fonts.googleapis.com/css?family=Hind:400,700|Lato:400i&display=swap');

* {
  box-sizing: border-box;
}

h1, h2 {
  font-family: Hind;
  font-weight: 700;
}
h1 {
  margin: 0;
  font-size: 3.25rem;
}
h2 {
  margin: 0;
  font-size: 2.75rem;
}

body {
  color: #2c3739;
  font-family: Hind, arial, sans;
  font-weight: 400;
  font-size: 18px;
  background-color: #fff;
  background-image: radial-gradient(#ddd 1px, transparent 2px),
    radial-gradient(#ddd 1px, transparent 2px);
  background-size: 12px 6px;
  background-position: 0 0, 6px 3px;
  padding: 0 2rem;
}

main {
  max-width: 760px;
  margin: 0 auto;
}

.title {
  display: inline-block;
}
.title::first-letter {
  text-transform: uppercase;
}

header {
  display: flex;
  align-items: center;
  
  div {
    flex-grow: 1;
  }
}

.portrait {
  flex-basis: 320px;
  height: 320px;
  width: 320px;
  flex-shrink: 0;
  margin-left: 2rem;
}

.quote {
  font-size: 16px;
  line-height: 1.5;
  font-family: Lato;
  font-style: italic;
  color: #828282;

  &::before {
    content: '"';
  }
  &::after {
    content: '"';
  }
}


.actions {
  display: flex;
  justify-content: center;
}

button {
  padding: 1rem 1.25rem;
  background: #ff675b;
  border: .25rem solid #fff;
  border-radius: .25rem;
  color: #fff;
  font-family: Hind;
  font-weight: 700;
  font-size: 1.25rem;
}

Vue

Vue.component('pick', {
  template: `<span v-text="value"/>`,
  props: {
    values: Array,
    min: {type: Number, default: 1},
    max: {type: Number, default: 1},
    and: Boolean,
  },
  data: () => ({
    value: null,
  }),
  mounted() {
    let values = [];
    if (this.min > this.max) {
      this.max = this.min;
    }
    const numValues = this.min + Math.floor((this.max - this.min + 1) * Math.random());
    for (let i = 0; i < numValues; i++) {
      let newVal = this.values[Math.floor(this.values.length * Math.random())];
      if (this.values.includes(newVal)) {
        newVal = this.values[Math.floor(this.values.length * Math.random())];
      }
      values.push(newVal);
    }
    if (this.and && values.length > 1) {
      this.value = values.slice(0,-1).join(', ') + ' and ' + values.slice(-1)[0]
    } else {
      this.value = values.join(', ')
    }
  },
})
new Vue({
  el: '#app',
  methods: {
    refresh() {
      this.show = false;
      requestAnimationFrame(() => this.show = true);
    },
    portrait() {
      return 'https://randomuser.me/api/portraits/'
      	+ (Math.random() > 0.5 ? 'men' : 'women') + '/'
        + Math.floor(100 *Math.random()) + '.jpg';
    },
  },
  data: {
    show: true,
    seed: null,
    workTime: [
    	"years of", "lots of", "tons of", "seasoned,", "tested,", "qualified,",
    ],
    working: [
    	"creating", "designing", "building", "architecting", "implementing", "producing",
        "coding", "crafting",
    ],
    workI: [
      "I", "I help", "I help Imarc", "I love to", "I'm always happy to", "I live to",
      "I'm trying to", "I'm working to",
    ],
    workIVerb: [
      "lead", "direct", "engage", "guide", "use my experience with",
      "use my talents with", "communicate with", "manage", "plan with", "encourage",
      "work with",
    ],
    workUs: [
      "our team", "our clients", "real people", "our projects", "every project"
    ],
    workVerb: [
      "to visualize", "to create", "to...