124 lines
2.4 KiB
Vue
124 lines
2.4 KiB
Vue
<template>
|
|
<header>
|
|
<img ref="logoEl" class="logo" src="/logo-no-bg.png" alt="KPTL" draggable="false">
|
|
</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',
|
|
},
|
|
{
|
|
title: 'Задачник',
|
|
action: 'Позадачить',
|
|
img: '/plankaLogo.png',
|
|
href: 'https://planka.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: 0,
|
|
}
|
|
|
|
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>
|