popskip/components/ProjectCard.vue

<template>
    <div class="card project-card">
        <div class="card-image">
          <img :src="require('~/assets/projects/'+codename+'/1.png')"></img>
        </div>
        <div class="card-content">
          <div class="card-title">
              <h1><nuxt-link :to="'/projects/'+codename">{{name}}</nuxt-link></h1>
          </div>
          <div class="card-content my-4">
              <p>{{description}}</p>
          </div>
          <div class="card-footer">
          </div>
        </div>
    </div>
</template>

<script>
export default {
    props: [ 'name', 'description', 'codename', 'noimage' ],
}
</script>

<style>
.project-card {
    @apply w-full flex flex-col;
    min-height: 12rem;
}
@screen md {
    .project-card {
        @apply flex-row;
    }
}
.card-image {
    @apply w-full px-2 py-2;
}
@screen md {
    .card-image {
        @apply w-1/4;
    }
}
.card-content {
    @apply w-full px-2;
}
@screen md {
    .card-content {
        @apply w-3/4;
    }
}
</style>