<commit_before><template>
  <div id="home">
    <section id="hero">
      <div class="title">
        <NAME>
      </div>
      <div class="subtitle">
        <span>Lead web developer at HackUCI.</span>
        <span>Former intern and incoming UI Engineer at LinkedIn.</span>
        <span>Computer Science undergrad at UC Irvine.</span>
      </div>
      <div class="hero-links">
        <a href="https://www.github.com/chriswongtv" target="_blank" class="link-underline">GitHub</a>
        <a href="https://www.linkedin.com/in/chriswongtv" target="_blank" class="link-underline">LinkedIn</a>
        <a href="https://resume.chriswong.tv" target="_blank" class="link-underline">Resume</a>
      </div>
    </section>
    <section id="card">
      <Card title="HackUCI" imageUri="hackuci" description="Organized Orange County's largest intercollegiate hackathon" link="https://www.hackuci.com"></Card>
      <Card title="LinkedIn" imageUri="linkedin" description="UI Engineer Intern at LinkedIn Jobs" link="https://www.linkedin.com"></Card>
      <Card title="Coolection" imageUri="coolection" description="Intelligent link library" link="https://www.coolection.co"></Card>
      <Card title="Clow" imageUri="clow" description="Awarded Best Big Data Hack at TreeHacks 2016" link="http://blog.chriswong.tv/treehacks"></Card>
      <Card title="JoyFeed" imageUri="joyfeed" description="Winner of HP sponsor prize at AngelHack SF 2016" link="http://blog.chriswong.tv/joyfeed"></Card>
      <Card title="Cogifire" imageUri="cogifire" description="Web development agency" link="http://www.cogifire.com"></Card>
    </section>
  </div>
</template>

<script>
import Card from '@/components/Card'

export default {
  name: 'Home',
  data () {
    return {

    }
  },
  components: {
    Card
  }
}
</script>

<style scoped lang="scss">
$max-tablet-width: 768px;

#home {
  margin-top: 9rem;

  @media screen and (max-width: $max-tablet-width) {
    margin-top: 12.5vh;
  }

  #hero {
    .title {
      font-family: 'Montserrat';
      font-weight: 700;
      font-size: 5rem;
      line-height: 1em;
      // background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
      background: linear-gradient(45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
      // background: linear-gradient(-45deg, #EE7752, #E73C7E, #FF0066, #D41872);
      // background: linear-gradient(45deg, #EE7752, #E73C7E, #7579ff, #b224ef);
      // background: linear-gradient(45deg, #EE7752, #E73C7E, #b224ef, #6713d2);
      background-size: 400% 400%;
      -webkit-animation: Gradient 15s ease infinite;
      -moz-animation: Gradient 15s ease infinite;
      animation: Gradient 15s ease infinite;
      -webkit-background-clip: text;
      color: transparent;
      animation: fadein .5s both;
		  animation-delay: .2s;

      @media screen and (max-width: $max-tablet-width) {
        font-size: 3.5rem;
      }
    }

    .subtitle {
      font-weight: 300;
      font-size: 1.75rem;
      margin: 2.5rem 0 2.75rem;
      animation: fadein .5s both;
		  animation-delay: .4s;

      span {
        display: block;

        @media screen and (max-width: $max-tablet-width) {
          &+span {
            padding-top: .75rem;
          }
        }
      }

      @media screen and (max-width: $max-tablet-width) {
        font-size: 1.45rem;
      }
    }

    .hero-links {
      animation: fadein .5s both;
      animation-delay: .65s;

      a {
        text-decoration: none;
		    color: #57606f;
        font-size: 1.19rem;
        text-transform: lowercase;

        &+a {
          margin-left: 1.5rem;
        }
      }
    }
  }

  #card {
    display: flex;
    margin: 9.25rem -.75rem;
    flex-direction: row;
    flex-wrap: wrap;
    animation: fadein .5s both;
    animation-delay: .9s;

    @media screen and (max-width: $max-tablet-width) {
      margin-bottom: 4.5rem;
    }
  }
}
</style>
<commit_msg>[v10] Restored title animation<commit_after><template>
  <div id="home">
    <section id="hero">
      <div class="title">
        <NAME>
      </div>
      <div class="subtitle">
        <span>Lead web developer at HackUCI.</span>
        <span>Former intern and incoming UI Engineer at LinkedIn.</span>
        <span>Computer Science undergrad at UC Irvine.</span>
      </div>
      <div class="hero-links">
        <a href="https://www.github.com/chriswongtv" target="_blank" class="link-underline">GitHub</a>
        <a href="https://www.linkedin.com/in/chriswongtv" target="_blank" class="link-underline">LinkedIn</a>
        <a href="https://resume.chriswong.tv" target="_blank" class="link-underline">Resume</a>
      </div>
    </section>
    <section id="card">
      <Card title="HackUCI" imageUri="hackuci" description="Organized Orange County's largest intercollegiate hackathon" link="https://www.hackuci.com"></Card>
      <Card title="LinkedIn" imageUri="linkedin" description="UI Engineer Intern at LinkedIn Jobs" link="https://www.linkedin.com"></Card>
      <Card title="Coolection" imageUri="coolection" description="Intelligent link library" link="https://www.coolection.co"></Card>
      <Card title="Clow" imageUri="clow" description="Awarded Best Big Data Hack at TreeHacks 2016" link="http://blog.chriswong.tv/treehacks"></Card>
      <Card title="JoyFeed" imageUri="joyfeed" description="Winner of HP sponsor prize at AngelHack SF 2016" link="http://blog.chriswong.tv/joyfeed"></Card>
      <Card title="Cogifire" imageUri="cogifire" description="Web development agency" link="http://www.cogifire.com"></Card>
    </section>
  </div>
</template>

<script>
import Card from '@/components/Card'

export default {
  name: 'Home',
  data () {
    return {

    }
  },
  components: {
    Card
  }
}
</script>

<style scoped lang="scss">
$max-tablet-width: 768px;

#home {
  margin-top: 9rem;

  @media screen and (max-width: $max-tablet-width) {
    margin-top: 12.5vh;
  }

  #hero {
    .title {
      font-family: 'Montserrat';
      font-weight: 700;
      font-size: 5rem;
      line-height: 1em;
      // background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
      background: linear-gradient(45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
      // background: linear-gradient(-45deg, #EE7752, #E73C7E, #FF0066, #D41872);
      // background: linear-gradient(45deg, #EE7752, #E73C7E, #7579ff, #b224ef);
      // background: linear-gradient(45deg, #EE7752, #E73C7E, #b224ef, #6713d2);
      background-size: 400% 400%;
      -webkit-animation: fadein .5s both, Gradient 15s ease infinite;
      -moz-animation: fadein .5s both, Gradient 15s ease infinite;
      animation: fadein .5s both, Gradient 15s ease infinite;
		  animation-delay: .2s;
      -webkit-background-clip: text;
      color: transparent;

      @media screen and (max-width: $max-tablet-width) {
        font-size: 3.5rem;
      }
    }

    .subtitle {
      font-weight: 300;
      font-size: 1.75rem;
      margin: 2.5rem 0 2.75rem;
      animation: fadein .5s both;
		  animation-delay: .4s;

      span {
        display: block;

        @media screen and (max-width: $max-tablet-width) {
          &+span {
            padding-top: .75rem;
          }
        }
      }

      @media screen and (max-width: $max-tablet-width) {
        font-size: 1.45rem;
      }
    }

    .hero-links {
      animation: fadein .5s both;
      animation-delay: .65s;

      a {
        text-decoration: none;
		    color: #57606f;
        font-size: 1.19rem;
        text-transform: lowercase;

        &+a {
          margin-left: 1.5rem;
        }
      }
    }
  }

  #card {
    display: flex;
    margin: 9.25rem -.75rem;
    flex-direction: row;
    flex-wrap: wrap;
    animation: fadein .5s both;
    animation-delay: .9s;

    @media screen and (max-width: $max-tablet-width) {
      margin-bottom: 4.5rem;
    }
  }
}
</style>

{'fraction_non_alphanumeric': 0.1535814427733877, 'fraction_numerical': 0.0412949273515167, 'mean_word_length': 2.6412993039443156, 'pattern_counts': {'":': 0, '<': 89, '<?xml version=': 0, '>': 89, 'https://': 12, 'lorem ipsum': 0, 'www.': 12, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6239167', 'n_tokens_mistral': 2981, 'n_tokens_neox': 2704, 'n_words': 590}