ProjectCard.svelte

<script>
  import { lazyLoadFullImg } from "../scripts/lazy-load-full-img.js";

  export let project;
</script>

<style>
  .header-row {
    display: flex;
    align-items: center;
  }

  .project-body p {
    font-size: 1rem;
    margin-bottom: 0;
  }

  .project-body {
    border-top: 3px solid var(--dark-color);
  }

  .feature-item {
    display: flex;
    align-items: center;
  }

  .project-group {
    width: 100%;
    margin-bottom: 1rem;
  }

  .aligned-right {
    margin-left: auto;
  }

  .rounded-top {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  @media only screen and (min-width: 1408px) {
    .project-summary {
      min-height: 100px;
    }
  }
</style>

<div class="card mb-sm">
  <div class="card-image">
    <figure class="image is-2by1">
      <img
        class="rounded-top"
        src={`img/portfolio/${project.imgSlug}-thumb.jpg`}
        alt={`${project.client} website screenshot`}
        use:lazyLoadFullImg={{ path: `/img/portfolio/${project.imgSlug}`, type: 'jpg' }} />
    </figure>
  </div>
  <div class="project-body">
    <div class="project-details px-sm pt-sm">
      <div class="project-group">
        <div class="header-row">
          <div>
            <div class="gray-label">Project</div>
            <h2 class="is-size-4 has-text-weight-bold">{project.client}</h2>
          </div>
          <a
            href={project.url}
            target="_blank"
            rel="noopener"
            class="button is-secondary aligned-right">
            <span class="mr-xs">
              Visit
              <span class="is-hidden-mobile">Site</span>
            </span>
            <img
              src="icons/external-link.svg"
              alt="plus icon"
              class="image is-16x16" />
          </a>
        </div>
      </div>
      <div class="project-group">
        <div class="gray-label mb-xs">Summary</div>
        <p class="project-summary">{project.summary}</p>
      </div>
    </div>
    <div class="project-features">
      <div class="px-sm pb-sm">
        <h3 class="has-text-weight-bold mb-xs is-size-5">Features</h3>
        <ul>
          {#each project.features as feature, i}
            <li class="feature-item mb-xs">
              <img
                style={`transform: rotate(${360 * Math.random()}deg); transition: 2s;`}
                height="25px"
                width="25px"
                src="icons/circle-star.svg"
                alt="arrow icon for bullet point" />
              <span class="ml-xs">{feature}</span>
            </li>
          {/each}
        </ul>
      </div>
    </div>
  </div>
</div>