NICE

index.html

@@ -18,6 +18,8 @@
         </ul>
       </div>
     </nav>
+    <div id="blob"></div>
+    <div id="blur"></div>
     <nav id="hamburger-nav">
       <div class="logo">LogolicusZ</div>
       <div class="hamburger-menu">
@@ -79,7 +81,7 @@
                 class="icon"
               />
               <h3>Education</h3>
-              <p>B.Sc. Bachelors Degree<br />M.Sc. Masters Degree</p>
+              <p><br />M.Sc. Masters Degree</p>
             </div>
           </div>
           <div class="text-container">

script.js

@@ -4,3 +4,14 @@ function toggleMenu() {
   menu.classList.toggle("open");
   icon.classList.toggle("open");
 }
+
+const blob = document.getElementById("blob");
+
+window.onpointermove = event => { 
+  const { clientX, clientY } = event;
+  
+  blob.animate({
+    left: `${clientX}px`,
+    top: `${clientY}px`
+  }, { duration: 3000, fill: "forwards" });
+}

style.css

@@ -19,7 +19,7 @@ html {
 }
 
 p {
-  color: rgb(85, 85, 85);
+  color: white;
 }
 
 /* TRANSITION */
@@ -27,6 +27,7 @@ p {
 a,
 .btn {
   transition: all 300ms ease;
+
 }
 
 /* DESKTOP NAV */
@@ -34,12 +35,14 @@ a,
 nav,
 .nav-links {
   display: flex;
+
 }
 
 nav {
   justify-content: space-around;
   align-items: center;
   height: 17vh;
+  color: white;
 }
 
 .nav-links {
@@ -49,7 +52,7 @@ nav {
 }
 
 a {
-  color: black;
+  color: white;
   text-decoration: none;
   text-decoration-color: white;
 }
@@ -58,7 +61,7 @@ a:hover {
   color: grey;
   text-decoration: underline;
   text-underline-offset: 1rem;
-  text-decoration-color: rgb(181, 181, 181);
+  text-decoration-color: #ccd5ae;
 }
 
 .logo {
@@ -244,7 +247,7 @@ section {
 
 .btn-color-1,
 .btn-color-2:hover {
-  background: rgb(53, 53, 53);
+  background: #ccd5ae;
   color: white;
 }
 
@@ -433,3 +436,43 @@ footer {
 footer p {
   text-align: center;
 }
+
+
+@keyframes rotate {
+  from {
+    rotate: 0deg;
+  }
+  
+  50% {
+    scale: 1 1.5;
+  }
+  
+  to {
+    rotate: 360deg;
+  }
+}
+
+#blob {
+  background-color: white;
+  height: 24vmax;
+  aspect-ratio: 1;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  translate: -50% -50%;
+  border-radius: 50%;
+  background: linear-gradient(to right, #FFFFFF, #6541A5);
+  animation: rotate 20s infinite;
+  opacity: 0.8;
+  z-index: -2;
+}
+
+#blur {
+  top: 0;
+  left: 0;
+  height: 100vw;
+  width: 100vw;
+  position: absolute;
+  backdrop-filter: blur(5vmax);  
+  z-index: -1;
+}