nuxt-app/app/components/index/WaterfallPortfolioCard.vue

<script setup lang="ts">
const props = defineProps<{
  images: string[]
  title: string
  description: string
  aspectRatio: number
}>()

const loadedCount = ref(0)
const failedSet = reactive(new Set<number>())

function onImgLoad() {
  loadedCount.value++
}

function onImgError(idx: number) {
  failedSet.add(idx)
  loadedCount.value++
}

const totalImages = computed(() => props.images.length)
</script>

<template>
  <div class="card" :style="{ aspectRatio }">
    <div class="img-grid">
      <div
        v-for="(img, i) in images"
        :key="i"
        class="grid-cell"
      >
        <div class="cell-placeholder" :class="{ loaded: loadedCount >= totalImages }" />
        <img
          v-if="!failedSet.has(i)"
          :src="img"
          :alt="`${title} ${i + 1}`"
          loading="lazy"
          class="cell-img"
          :class="{ loaded: loadedCount >= totalImages }"
          @load="onImgLoad"
          @error="onImgError(i)"
        >
        <div v-else class="cell-fallback" />
      </div>
    </div>
    <div class="overlay">
      <h3>{{ title }}</h3>
      <p>{{ description }}</p>
    </div>
  </div>
</template>

<style scoped>
.card {
  position: relative;
  border-radius: 12px;
  background: var(--color-surface-card);
  overflow: hidden;
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
}

.card:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 16px 48px rgba(20, 20, 19, 0.12);
}

.img-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
}

.grid-cell {
  position: relative;
  overflow: hidden;
}

.cell-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #e8e0d2 0%, #efe9de 50%, #e8e0d2 100%);
  background-size: 200% 200%;
  animation: shimmer 1.8s ease-in-out infinite;
}

.cell-placeholder.loaded {
  display: none;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.cell-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.cell-img.loaded {
  opacity: 1;
}

.cell-fallback {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e8e0d2 0%, #efe9de 50%, #e8e0d2 100%);
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 18px 20px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(20, 20, 19, 0.5) 50%,
    rgba(20, 20, 19, 0.85) 100%
  );
  z-index: 1;
}

.overlay h3 {
  color: #fff;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.overlay p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
</style>