app.vue

@@ -1,97 +1,96 @@
 <template>
   <header>
-    <img ref="logoEl" class="logo" src="/logo-no-bg.png" alt="KPTL">
+    <img class="logo" src="/logo-no-bg.png" alt="KPTL">
   </header>
 
   <div class="grid">
-    <div v-for="card in cards" ref="cardsELS" :key="card.title" class="card">
+    <div class="card">
       <p class="card__title">
-        {{ card.title }}
+        TeamSpeak 3
       </p>
 
-      <img :src="card.img" alt="TeamSpeak" class="card__image">
+      <img src="/ts.png" alt="TeamSpeak" class="card__image">
 
-      <a class="button card__action" :href="card.href">
+      <a class="button card__action" href="https://invite.teamspeak.com/koptilnya.xyz/">
-        {{ card.action }}
+        Подключиться
+      </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>
     </div>
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
-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">
@@ -109,14 +108,12 @@ 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;

package.json

@@ -10,7 +10,6 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "gsap": "^3.12.5",
     "nuxt": "^3.10.3",
     "vue": "^3.4.19",
     "vue-router": "^4.3.0"

yarn.lock

@@ -3570,11 +3570,6 @@ 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"
@@ -5980,16 +5975,7 @@ streamx@^2.15.0:
   optionalDependencies:
     bare-events "^2.2.0"
 
-"string-width-cjs@npm:string-width@^4.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:
-  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==
@@ -6021,14 +6007,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.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==
-  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==
@@ -6714,16 +6693,7 @@ 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-cjs@npm:wrap-ansi@^7.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==
-  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==