From f7234238fd2fa3b279a580cf41476eb97c013c84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Lobo?=
 <30907944+joaodiaslobo@users.noreply.github.com>
Date: Tue, 20 Feb 2024 13:51:45 +0000
Subject: [PATCH] feat: squiggly animation (#21)

---
 astro.config.mjs                       |  4 +-
 src/components/splash.astro            |  4 +-
 src/components/squigglyAnimation.astro | 61 ++++++++++++++++++++++++++
 src/data/faqs.json                     | 21 +++------
 tailwind.config.cjs                    | 12 +++++
 5 files changed, 85 insertions(+), 17 deletions(-)
 create mode 100644 src/components/squigglyAnimation.astro

diff --git a/astro.config.mjs b/astro.config.mjs
index 382ef00a..c93de96a 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -7,5 +7,5 @@ import react from "@astrojs/react";
 // https://astro.build/config
 export default defineConfig({
   site: "https://astro-moon-landing.netlify.app/",
-  integrations: [tailwind(), icon(), react()]
-});
\ No newline at end of file
+  integrations: [tailwind(), icon(), react()],
+});
diff --git a/src/components/splash.astro b/src/components/splash.astro
index 589caf6f..fbe3d5e6 100644
--- a/src/components/splash.astro
+++ b/src/components/splash.astro
@@ -3,6 +3,7 @@ import { Image } from "astro:assets";
 import { Icon } from "astro-icon/components";
 import gubImage from "~/assets/Bicho.svg";
 import background from "/public/background.jpg";
+import SquigglyAnimation from "~/components/squigglyAnimation.astro";
 ---
 
 <section class="relative h-full bg-black overflow-y-hidden select-none">
@@ -32,7 +33,7 @@ import background from "/public/background.jpg";
     >
       <div class="tracking-tighter text-5xl sm:text-7xl text-center">
         <h2 class="text-left text-4xl tracking-wider">HACKATHON</h2>
-        <h1 class="tracking-wide">BUGSBYTE</h1>
+        <h1 class="tracking-wide animate-squiggle">BUGSBYTE</h1>
         <p class="text-left tracking-wide text-3xl">5 - 7 APRIL</p>
       </div>
       <div class="flex flex-row sm:hidden">
@@ -41,6 +42,7 @@ import background from "/public/background.jpg";
     </div>
   </div>
 </section>
+<SquigglyAnimation />
 
 <noscript>
   <style>
diff --git a/src/components/squigglyAnimation.astro b/src/components/squigglyAnimation.astro
new file mode 100644
index 00000000..ff5f66d8
--- /dev/null
+++ b/src/components/squigglyAnimation.astro
@@ -0,0 +1,61 @@
+<div class="hidden">
+  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+    <defs>
+      <filter id="squiggly-0">
+        <feTurbulence
+          id="turbulence"
+          baseFrequency="0.01"
+          numOctaves="3"
+          result="noise"
+          seed="0"></feTurbulence>
+        <feDisplacementMap
+          id="displacement"
+          in="SourceGraphic"
+          in2="noise"
+          scale="6"></feDisplacementMap>
+      </filter>
+      <filter id="squiggly-1">
+        <feTurbulence
+          id="turbulence"
+          baseFrequency="0.01"
+          numOctaves="3"
+          result="noise"
+          seed="1"></feTurbulence>
+        <feDisplacementMap in="SourceGraphic" in2="noise" scale="8"
+        ></feDisplacementMap>
+      </filter>
+
+      <filter id="squiggly-2">
+        <feTurbulence
+          id="turbulence"
+          baseFrequency="0.01"
+          numOctaves="3"
+          result="noise"
+          seed="2"></feTurbulence>
+        <feDisplacementMap in="SourceGraphic" in2="noise" scale="6"
+        ></feDisplacementMap>
+      </filter>
+      <filter id="squiggly-3">
+        <feTurbulence
+          id="turbulence"
+          baseFrequency="0.01"
+          numOctaves="3"
+          result="noise"
+          seed="3"></feTurbulence>
+        <feDisplacementMap in="SourceGraphic" in2="noise" scale="8"
+        ></feDisplacementMap>
+      </filter>
+
+      <filter id="squiggly-4">
+        <feTurbulence
+          id="turbulence"
+          baseFrequency="0.01"
+          numOctaves="3"
+          result="noise"
+          seed="4"></feTurbulence>
+        <feDisplacementMap in="SourceGraphic" in2="noise" scale="6"
+        ></feDisplacementMap>
+      </filter>
+    </defs>
+  </svg>
+</div>
diff --git a/src/data/faqs.json b/src/data/faqs.json
index d98b6fc4..845611f8 100644
--- a/src/data/faqs.json
+++ b/src/data/faqs.json
@@ -1,9 +1,7 @@
 [
   {
-    "question":
-      "I'm not a student from Universidade do Minho, can I still participate in the event?",
-    "answer":
-      "Yes, all higher education students over 18 can participate in the event."
+    "question": "I'm not a student from Universidade do Minho, can I still participate in the event?",
+    "answer": "Yes, all higher education students over 18 can participate in the event."
   },
   {
     "question": "Is it free to participate in the BugsByte Hackathon?",
@@ -11,13 +9,11 @@
   },
   {
     "question": "Do I need to register to be able to participate in the event?",
-    "answer":
-      "Yes, it is necessary to register to be able to participate in the event. Very soon we'll make a link available on our website to do so."
+    "answer": "Yes, it is necessary to register to be able to participate in the event. Very soon we'll make a link available on our website to do so."
   },
   {
     "question": "Do I need to register as a team?",
-    "answer":
-      "No, only individual registration is required. Once registered, you can form a team with other participants at your convenience."
+    "answer": "No, only individual registration is required. Once registered, you can form a team with other participants at your convenience."
   },
   {
     "question": "How many people can a team contain?",
@@ -25,18 +21,15 @@
   },
   {
     "question": "Can I leave the space of the event during the weekend?",
-    "answer":
-      "Yes, you're completely free to enter and exit the premisses of the event during the weekend."
+    "answer": "Yes, you're completely free to enter and exit the premisses of the event during the weekend."
   },
   {
     "question": "Which technology/tools are we gonna work with?",
-    "answer":
-      "You're going to be totally free to choose the stack you'll work on."
+    "answer": "You're going to be totally free to choose the stack you'll work on."
   },
   {
     "question": "Where am I going to sleep?",
-    "answer":
-      "If you intend to sleep during the event, we will have a dedicated place for you to rest. Only bring what you find essential such as pillows, sleeping bags, blankets, etc."
+    "answer": "If you intend to sleep during the event, we will have a dedicated place for you to rest. Only bring what you find essential such as pillows, sleeping bags, blankets, etc."
   },
   {
     "question": "What am I going to eat during the event?",
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index c1fd6e1b..21da9058 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -22,6 +22,18 @@ module.exports = {
       borderColor: {
         default: "var(--color-border)",
       },
+      keyframes: {
+        squiggle: {
+          "0%": { filter: "url('#squiggly-0')" },
+          "25%": { filter: "url('#squiggly-1')" },
+          "50%": { filter: "url('#squiggly-2')" },
+          "75%": { filter: "url('#squiggly-3')" },
+          "100%": { filter: "url('#squiggly-4')" },
+        },
+      },
+      animation: {
+        squiggle: "squiggle 0.45s ease-in-out infinite",
+      },
     },
   },
   corePlugins: {