koptilnya.xyz/app.vue

<template>
  <header>
    <img ref="logoEl" class="logo" src="/logo-no-bg.png" alt="KPTL">
  </header>

  <div class="grid">
    <AppCard v-for="card in cards" ref="cardEls" :key="card.title" v-bind="card" />
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { gsap } from 'gsap'
import AppCard from '~/components/app-card.vue'

const cards = ref([
  {
    title: 'TeamSpeak',
    action: 'Попиздеть',
    img: '/ts.png',
    href: 'https://invite.teamspeak.com/koptilnya.xyz/',
  },
  {
    title: 'Dota 2',
    action: 'Поиграть',
    img: '/dota.png',
    href: 'steam://run/570',
  },
  {
    title: 'Gitea',
    action: 'Поработать',
    img: '/gitea.svg',
    href: 'https://git.koptilnya.xyz',
  },
  {
    title: 'YouTube',
    action: 'Посмотреть',
    img: '/youtube.png',
    href: 'https://www.youtube.com/@kptl-team',
  },
  {
    title: 'База знаний',
    action: 'Почитать',
    img: '/bookStack.png',
    href: 'https://baza.koptilnya.xyz',
  },
])

const cardEls = ref([])
const logoEl = ref()

const DURATION = 0.3
const OVERLAP = 0.15
const CARD_OPTIONS = {
  duration: DURATION,
  ease: 'power1.out',
  scale: 1.025,
  yoyo: true,
  repeat: 1,
  opacity: 1,
}

onMounted(() => {
  const groupsCount = Math.ceil((cardEls.value.length - 1) / 2)

  const t = gsap.timeline()

  if (cardEls.value[0])
    t.to(cardEls.value[0].$el, CARD_OPTIONS)

  for (let i = 0; i < groupsCount; i++) {
    if (cardEls.value[i * 2 + 1])
      t.to(cardEls.value[i * 2 + 1].$el, CARD_OPTIONS, `<${OVERLAP}`)

    if (cardEls.value[i * 2 + 2])
      t.to(cardEls.value[i * 2 + 2].$el, CARD_OPTIONS, `<<${OVERLAP}`)
  }

  t.fromTo(
    logoEl.value,
    { opacity: 0, y: 50 },
    { opacity: 1, y: 0, ease: 'power1.out', duration: DURATION },
    `<`,
  )
})
</script>

<style lang="scss">
@mixin mobile {
  @media (max-width: 600px) {
    @content;
  }
}

header {
  text-align: center;
  padding-block: 16px;
  margin-bottom: 16px;
}

.logo {
  width: 64px;
  opacity: 0;
}

.grid {
  width: 800px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;

  @include mobile {
    width: 100%;
    grid-template-columns: 1fr;
  }
}
</style>