Merge pull request #17 from ktp-dev/ronith

change home page blurs

Author: ronithgan

src/home.js

@@ -17,20 +17,28 @@ function Home() {
 
   return (
     <div className='homepage-grid'>
-      <div className='glowing-circle z-2'></div>
-      <div className='glowing-circle-2 z-1'></div>
+      {/* <div className='glowing-circle z-2'></div>
+      <div className='glowing-circle-2 z-1'></div> */}
 
       <Header></Header>
       <ScrollToTop />
 
       {/* Main content */}
       <div className='flex flex-row justify-between mb-12 md:mb-20 lg:mb-42'>
+        <div className="absolute inset-0 blob-c z-0 hidden lg:block">
+            <div className="shape-blob ten"></div>
+            <div className="shape-blob eleven"></div>
+        </div>
         <div className='flex-1 flex flex-col items-end'>
           <img src={`${process.env.PUBLIC_URL}/melgrace.jpg`} className='hidden lg:block' style={{ width: '175px', transform: 'rotate(10deg)', borderRadius: '25px' }} />
           <img src={`${process.env.PUBLIC_URL}/rock.JPEG`} className='hidden lg:block' style={{ width: '200px', transform: 'rotate(-19deg)', borderRadius: '25px' }} />
         </div>
 
         <div className='flex flex-col flex-none p-4'>
+          <div className="absolute inset-0 blob-c z-0 block md:hidden">
+              <div className="shape-blob twelve"></div>
+              <div className="shape-blob thirteen"></div>
+          </div>
           <div className='flex flex-col items-center justify-center z-10'>
             <div className="font-black text-center w-[375px] sm:w-[450px] md:w-[550px] lg:w-[750px] text-3xl sm:text-3xl md:text-4xl lg:text-5xl mt-24 md:mt-36" style={{ fontFamily: 'Inter, sans-serif', letterSpacing: '-0.02em' }}>
               We’re the University of Michigan’s premier technology fraternity

src/index.css

@@ -48,11 +48,11 @@ html {
 }
 
 .blob-c {
-	min-height: 100vh;
-	overflow: hidden;
-	position:absolute;
-	width: 100%;
-	filter: blur(40px);
+  min-height: 100vh;
+  overflow: hidden;
+  position: absolute;
+  width: 100%;
+  filter: blur(70px);
 }
 
 .blob-rush-vid {
@@ -148,7 +148,7 @@ html {
 
 .shape-blob.eight {
   background: #a8d4ff;
-  height: 100px;
+  height: 175px;
   width: 250px;
   left: calc(40% - 215px);
   top: 10%;
@@ -158,16 +158,47 @@ html {
 
 .shape-blob.nine {
   background: #9ceb9c;
-  height: 100px;
+  height: 175px;
   width: 250px;
   left: calc(70% - 215px);
   top: 10%;
   transform: rotate(-180deg);
   animation: blob-movement-two 15s ease-in-out infinite both;
 }
 
+.shape-blob.ten {
+  background: #9ceb9c;
+  animation: blob-movement-one 10s ease-in-out infinite both;
+}
+
+.shape-blob.eleven {
+  background: #a8d4ff;
+  animation: blob-movement-two 15s ease-in-out infinite both;
+}
+
+.shape-blob.twelve {
+  background: #a8d4ff;
+  height: 175px;
+  width: 250px;
+  left: 10%;
+  overflow: hidden;
+  transform: rotate(-180deg);
+  animation: blob-movement-one 10s ease-in-out infinite both;
+}
+
+.shape-blob.thirteen {
+  background: #9ceb9c;
+  height: 175px;
+  width: 150px;
+  top: 2%;
+  overflow: hidden;
+  transform: rotate(-180deg);
+  animation: blob-movement-two 15s ease-in-out infinite both;
+}
+
 /* Larger screens */
-@media (min-width: 640px) {
+@media (min-width: 1100px) {
+
   .shape-blob.eight {
     height: 200px;
     width: 280px;
@@ -177,6 +208,19 @@ html {
     height: 200px;
     width: 280px;
   }
+
+  .shape-blob.ten {
+    height: 450px;
+    width: 600px;
+    top: 200px
+  }
+
+  .shape-blob.eleven {
+    height: 450px;
+    width: 600px;
+    left: 200px;
+    top: 200px;
+  }
 }
 
 @media (min-width: 768px) {