From 834bf7165bd86f505c22d4d7f6ddb20aab83261e Mon Sep 17 00:00:00 2001
From: LogolicusYZ <adjordbra@gmail.com>
Date: Wed, 6 Sep 2023 14:11:18 +0200
Subject: [PATCH] NICE

---
 index.html |  6 ++++--
 script.js  | 11 +++++++++++
 style.css  | 51 +++++++++++++++++++++++++++++++++++++++++++++++----
 3 files changed, 62 insertions(+), 6 deletions(-)
diff --git a/index.html b/index.html
index 3c8c5ef..81dfb83 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="style.css" />
     <link rel="stylesheet" href="mediaqueries.css" />
   </head>
-  <body>
+  <body >
     <nav id="desktop-nav">
       <div class="logo">LogolicusZ</div>
       <div>
@@ -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">
diff --git a/script.js b/script.js
index 9e776ea..d49817b 100644
--- a/script.js
+++ b/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" });
+}
\ No newline at end of file
diff --git a/style.css b/style.css
index d06155e..b49f62d 100644
--- a/style.css
+++ b/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;
+}
\ No newline at end of file
