From f2d0fc6aed94a0b742f394f88e7ae0ade1e646d8 Mon Sep 17 00:00:00 2001 From: Gab Date: Tue, 19 Dec 2023 11:42:25 +0100 Subject: [PATCH] animation added --- src/components/ThemeToggle.astro | 95 -------------------------------- src/pages/about.astro | 47 +++++++--------- 2 files changed, 20 insertions(+), 122 deletions(-) delete mode 100644 src/components/ThemeToggle.astro diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro deleted file mode 100644 index 88f7bf6..0000000 --- a/src/components/ThemeToggle.astro +++ /dev/null @@ -1,95 +0,0 @@ ---- -import Icon from './Icon.astro'; ---- - - - - - - - - diff --git a/src/pages/about.astro b/src/pages/about.astro index 8a81130..1eb4bc9 100644 --- a/src/pages/about.astro +++ b/src/pages/about.astro @@ -92,7 +92,7 @@ const projects = (await getCollection("work"))

Skills

-

+

  • @@ -105,7 +105,7 @@ const projects = (await getCollection("work")) -

    +
  • @@ -126,31 +126,24 @@ const projects = (await getCollection("work")) translateY: [250, 0], // -> '250px' }); - anime({ - targets: ".function-based-values-demo .el", - translateX: function (el) { - return el.getAttribute("data-x"); - }, - translateY: function (el, i) { - return 50 + -50 * i; - }, - scale: function (el, i, l) { - return l - i + 0.25; - }, - rotate: function () { - return anime.random(-360, 360); - }, - borderRadius: function () { - return ["50%", anime.random(10, 35) + "%"]; - }, - duration: function () { - return anime.random(1200, 1800); - }, - delay: function () { - return anime.random(0, 400); - }, - direction: "alternate", - loop: true, + const li_skills = document.querySelectorAll(".skill_img svg"); + li_skills?.forEach((element) => { + element.addEventListener("mouseover", () => { + anime({ + targets: element, + scale: 1.5, + duration: 100, + easing: "easeInOutSine", + }); + }); + element.addEventListener("mouseout", () => { + anime({ + targets: element, + scale: 1, + duration: 100, + easing: "easeInOutSine", + }); + }); });