Merge pull request #52 from 1337kid/main

landing animation
Excel2024Web · Nov 27, 2024 · 77693bc · 77693bc
2 parents 68516be + 4b2637b
commit 77693bc
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 6 deletions.
diff --git a/src/components/About/About.jsx b/src/components/About/About.jsx
@@ -10,7 +10,7 @@ import circle3 from "../../assets/backgrounds/about/circle3.png";
 
 const About = () => {
   return (
-    <div className="relative overflow-hidden">
+    <div className="relative">
       <div className="absolute bg-gradient-to-b from-[#0a0a0a] from-10% to-transparent z-50 bg-no-repeat right-0 left-0 top-0 min-h-32" />
       <div id="about" className="about-container pt-[80px]">
         <Image className="top-left" src={top_left} />

diff --git a/src/components/BlobAnimation.jsx b/src/components/BlobAnimation.jsx
@@ -47,9 +47,9 @@ const BlobAnimation = () => {
           src={right}
           alt="bot-right"
         />
-        <Image className="lcircle1 max-lg:hidden" src={circle1} />
-        <Image className="lcircle2 max-md:hidden" src={circle2} />
-        <Image className="lcircle3 max-md:hidden" src={circle3} />
+        <Image className="lcircle1" src={circle1} />
+        <Image className="lcircle2" src={circle2} />
+        <Image className="lcircle3" src={circle3} />
         <div
           className="container max-w-full md:max-w-[70%] relative m-auto flex flex-col min-h-screen text-our_white justify-center gap-[20px] z-0"
           data-aos="fade-up"

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -95,19 +95,106 @@ body {
   z-index: 0;
 }
 
-
 .lcircle3 {
   position: absolute;
   top: -67px;
   height: 448px;
   width: auto;
-  right:95px;
+  right: 95px;
   width: auto;
   animation: rotate 25s linear infinite;
   z-index: 0;
 }
 
+@media (max-width: 1700px) {
+  .lcircle1 {
+    top: -239.6px;
+    height: 745px;
+    width: auto;
+    right: -84.3px;
+  }
+
+  .lcircle2 {
+    top: -167px;
+    height: 600px;
+    width: auto;
+    right: -29.5px;
+  }
+
+  .lcircle3 {
+    top: -56.5px;
+    height: 378px;
+    right: 80.15px;
+  }
+}
+
+@media (max-width: 1400px) {
+  .lcircle1 {
+    top: -199.7px;
+    height: 621px;
+    width: auto;
+    right: -70.2px;
+  }
+
+  .lcircle2 {
+    top: -139.2px;
+    height: 500px;
+    width: auto;
+    right: -24.5px;
+  }
+
+  .lcircle3 {
+    top: -47px;
+    height: 315px;
+    right: 66.79px;
+  }
+}
 
+@media (max-width: 900px) {
+  .lcircle1 {
+    top: -139.8px;
+    height: 434.7px;
+    width: auto;
+    right: -49.14px;
+  }
+
+  .lcircle2 {
+    top: -97.44px;
+    height: 350px;
+    width: auto;
+    right: -17.15px;
+  }
+
+  .lcircle3 {
+    top: -32.9px;
+    width: auto;
+    height: 220.5px;
+    right: 46.76px;
+  }
+}
+
+@media (max-width: 530px) {
+  .lcircle1 {
+    top: -80px;
+    height: 248.4px;
+    width: auto;
+    right: -28px;
+  }
+
+  .lcircle2 {
+    top: -55.68px;
+    height: 200px;
+    width: auto;
+    right: -9.8px;
+  }
+
+  .lcircle3 {
+    top: -18.88px;
+    width: auto;
+    height: 126.6px;
+    right: 26.84px;
+  }
+}
 
 .skeleton {
   background-image: linear-gradient(