Net Your Problem - Projects section template

projects.vue

<template>
  <section class="projects">
    <div class="content">
      <div class="mdl-typography--text-center section-title">
        <h4>Projects</h4>
      </div>
      <div class="cards-wrapper">
        <div class="cards-container">
          <card v-for="(project, index) in projects" :key="index">
            <div slot="title">
              {{project.text}}
              <div class="cover-photo">
                <img :src="project.cover" style="width: 100%"/>
              </div>
            </div>
            <span slot="actions">
              <button class="mdl-button mdl-js-button mdl-typography--text-uppercase" @click="showProjectDetails(project.detailedInformationFileName)"
                ga-on="click"
                ga-event-category="ReadMoreProjects" :ga-event-action="project.text">
                Read More
                <i class="material-icons">chevron_right</i>
              </button>
            </span>
          </card>
        </div>
      </div>
    </div>

    <scroll-down-to-section v-if="nextSectionHref" 
    :scrollToHref="nextSectionHref" 
    iconColor="#333"
    @scrollToElement="scrollToElement" />

    <modal v-if="showModal" @close="showModal=false;" :title="projectTitle">
      <vue-markdown slot="body" :source="markdownSource" :anchorAttributes="{target: '_blank'}"></vue-markdown>
    </modal>
  </section>
</template>