feat: desktop animation and ring

isd-sgcu · Jan 29, 2024 · 5a6587a · 5a6587a
1 parent db5c7aa
commit 5a6587a
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 12 deletions.
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -21,34 +21,37 @@ const orgMembers = await fetchOrgMembers();
 
 <Layout title="Home" description="Main page">
   <section
-    class="flex h-screen w-screen -translate-y-12 flex-col items-center justify-center bg-gradient-to-b from-black to-indigo-950 text-4xl font-bold text-white md:text-6xl lg:-translate-y-32"
+    class="flex h-screen w-screen -translate-y-12 flex-col items-center justify-center overflow-hidden bg-gradient-to-b from-black to-indigo-950 text-4xl font-bold text-white md:text-6xl lg:-translate-y-32"
   >
+    <!-- pink -->
     <div
-      class="invisible absolute left-64 top-44 h-24 w-24 rounded-full bg-pink-600 sm:visible lg:h-36 lg:w-36"
+      class="absolute left-32 top-44 aspect-square w-24 animate-sliding-left rounded-full bg-pink-600 duration-100"
     >
     </div>
     <div
-      class="invisible absolute right-0 top-32 h-[600px] w-[300px] rounded-bl-full border-l-[45px] border-blue-700 sm:visible lg:h-[221px] lg:w-[260px]"
+      class="duration-50 absolute -right-32 bottom-0 aspect-square w-64 animate-sliding-right rounded-full bg-pink-600"
     >
     </div>
-    <span class="grid place-content-center"> </span>
-    <p class="z-10 leading-[120px] tracking-wide">Information System</p><p
-      class="z-10"
-    >
-      Development
-    </p>
+    <!-- blue -->
     <div
-      class="invisible absolute bottom-0 right-0 h-72 w-36 rounded-l-full bg-pink-600 sm:visible"
+      class="absolute -right-80 -top-80 aspect-square h-[600px] animate-sliding-right rounded-full ring-[64px] ring-indigo-800"
     >
     </div>
     <div
-      class="invisible absolute bottom-0 left-0 h-80 w-48 rounded-tr-full border-r-[35px] border-indigo-800 sm:visible md:w-60 lg:w-80"
+      class="absolute -bottom-16 -left-24 aspect-square w-64 animate-sliding-left rounded-full ring-[32px] ring-indigo-800 sm:visible"
     >
     </div>
     <div
-      class="invisible absolute bottom-0 right-1/4 h-36 w-72 rounded-t-full border-t-[22px] border-blue-700 sm:visible"
+      class="absolute -bottom-32 right-1/4 aspect-square w-48 animate-sliding-up rounded-full ring-[28px] ring-blue-700"
     >
     </div>
+    <!-- text -->
+    <span class="grid place-content-center"> </span>
+    <p class="z-10 leading-[120px] tracking-wide">Information System</p><p
+      class="z-10"
+    >
+      Development
+    </p>
   </section>
   <section
     class="flex h-screen w-screen -translate-y-12 flex-col items-center justify-center bg-black lg:-translate-y-32"

diff --git a/tailwind.config.mjs b/tailwind.config.mjs
@@ -17,10 +17,16 @@ export default {
           "70%": { transform: "translateX(-2%)" },
           "100%": { transform: "translateX(0)" },
         },
+        slideUp: {
+          "0%": { transform: "translateY(100%)" },
+          "70%": { transform: "translateY(-2%)" },
+          "100%": { transform: "translateY(0)" },
+        },
       },
       animation: {
         "sliding-left": "slideLeft 1.5s",
         "sliding-right": "slideRight 1.5s",
+        "sliding-up": "slideUp 1.5s",
       },
     },
   },