2024-04-18 18:14:43 +00:00
5 changed files with 116 additions and 82 deletions
--- a/app.vue
+++ b/app.vue
@ -1,96 +1,97 @@
 <template>
  <header>
-    <img class="logo" src="/logo-no-bg.png" alt="KPTL">
+    <img ref="logoEl" class="logo" src="/logo-no-bg.png" alt="KPTL">
  </header>

  <div class="grid">
-    <div class="card">
+    <div v-for="card in cards" ref="cardsELS" :key="card.title" class="card">
      <p class="card__title">
-        TeamSpeak 3
+        {{ card.title }}
      </p>

-      <img src="/ts.png" alt="TeamSpeak" class="card__image">
+      <img :src="card.img" alt="TeamSpeak" class="card__image">

-      <a class="button card__action" href="https://invite.teamspeak.com/koptilnya.xyz/">
-        Подключиться
-      </a>
-    </div>
-
-    <div class="card">
-      <p class="card__title">
-        Dota 2
-      </p>
-
-      <img src="/dota.png" alt="Dota 2" class="card__image">
-
-      <a class="button card__action" href="steam://run/570">
-        Запустить
-      </a>
-    </div>
-
-    <div class="card">
-      <p class="card__title">
-        Gitea
-      </p>
-
-      <img src="/gitea.svg" alt="Gitea" class="card__image">
-
-      <a class="button card__action" href="https://git.koptilnya.xyz">
-        Перейти
-      </a>
-    </div>
-
-    <div class="card">
-      <p class="card__title">
-        Github
-      </p>
-
-      <img src="/github-mark-white.png" alt="Github" class="card__image">
-
-      <a class="button card__action" href="https://github.com/koptilnya">
-        Перейти
-      </a>
-    </div>
-
-    <div class="card">
-      <p class="card__title">
-        Owncast
-      </p>
-
-      <img src="/obs.png" alt="Open Broadcaster Software" class="card__image">
-
-      <a class="button card__action" href="https://live.koptilnya.xyz">
-        Перейти
-      </a>
-    </div>
-
-    <div class="card">
-      <p class="card__title">
-        YouTube
-      </p>
-
-      <img src="/youtube.png" alt="YouTube" class="card__image">
-
-      <a class="button card__action" href="https://www.youtube.com/@kptl-team">
-        Перейти
-      </a>
-    </div>
-
-    <div class="card">
-      <p class="card__title">
-        База знаний
-      </p>
-
-      <img src="/bookStack.png" alt="BookStack" class="card__image">
-
-      <a class="button card__action" href="https://baza.koptilnya.xyz">
-        Перейти
+      <a class="button card__action" :href="card.href">
+        {{ card.action }}
      </a>
    </div>
  </div>
 </template>

-<script setup lang="ts">
+<script setup>
+import { onMounted, ref } from 'vue'
+import { gsap } from 'gsap'
+
+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 cardsELS = ref([])
+const logoEl = ref()
+
+const DURATION = 0.5
+const OVERLAP = 0.15
+const CARD_OPTIONS = {
+  duration: DURATION,
+  ease: 'power1.out',
+  scale: 1.025,
+  yoyo: true,
+  repeat: 1,
+}
+
+onMounted(() => {
+  const cards = cardsELS.value
+  const groupsCount = Math.ceil((cards.length - 1) / 2)
+
+  const t = gsap.timeline()
+
+  if (cards[0])
+    t.to(cards[0], CARD_OPTIONS)
+
+  for (let i = 0; i < groupsCount; i++) {
+    if (cards[i * 2 + 1])
+      t.to(cards[i * 2 + 1], CARD_OPTIONS, `<${OVERLAP}`)
+
+    if (cards[i * 2 + 2])
+      t.to(cards[i * 2 + 2], CARD_OPTIONS, `<<${OVERLAP}`)
+  }
+
+  t.fromTo(
+    logoEl.value,
+    { opacity: 0, y: 100 },
+    { opacity: 1, y: 0, ease: 'power1.out', duration: DURATION },
+    `<`,
+  )
+})
 </script>

 <style lang="scss">
@ -108,12 +109,14 @@ header {

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

 .grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
+  overflow: hidden;

  @include mobile {
    grid-template-columns: 1fr;
--- a/package.json
+++ b/package.json
@ -10,6 +10,7 @@
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
+    "gsap": "^3.12.5",
    "nuxt": "^3.10.3",
    "vue": "^3.4.19",
    "vue-router": "^4.3.0"
--- a/public/github-mark-white.png
+++ b/public/github-mark-white.png
--- a/public/obs.png
+++ b/public/obs.png
--- a/yarn.lock
+++ b/yarn.lock
@ -3570,6 +3570,11 @@ graphemer@^1.4.0:
  resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
  integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==

+gsap@^3.12.5:
+  version "3.12.5"
+  resolved "https://registry.yarnpkg.com/gsap/-/gsap-3.12.5.tgz#136c02dad4c673b441bdb1ca00104bfcb4eae7f4"
+  integrity sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ==
+
 gzip-size@^7.0.0:
  version "7.0.0"
  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-7.0.0.tgz#9f9644251f15bc78460fccef4055ae5a5562ac60"
@ -5975,7 +5980,16 @@ streamx@^2.15.0:
  optionalDependencies:
    bare-events "^2.2.0"

-"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
  version "4.2.3"
  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@ -6007,7 +6021,14 @@ string_decoder@~1.1.1:
  dependencies:
    safe-buffer "~5.1.0"

-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
  version "6.0.1"
  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@ -6693,7 +6714,16 @@ wide-align@^1.1.2:
  dependencies:
    string-width "^1.0.2 || 2 || 3 || 4"

-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^7.0.0:
  version "7.0.0"
  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==