Add bloom

css/styles.css

@@ -13,7 +13,7 @@ header {
   background-size: cover;
   background-position: bottom;
   color: #fff;
-  padding: 100px;
+  padding: 130px;
   text-align: center;
 }
 
@@ -51,4 +51,16 @@ footer {
 
 .show {
   opacity: 1;
-}
+}
+
+.cursor {
+  position: absolute;
+  width: 70%;
+  height: 70%;
+  opacity: 0.05;
+  border-radius: 100%;
+  background: radial-gradient(circle, #fff, transparent 50%);
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+  transition: width 0.15s, height 0.15s, opacity 0.15s;
+}

index.html

@@ -23,6 +23,7 @@ <h3>Luca Jost</h3>
       </section>
     </header>
     <main class="container-fluid">
+      <div class="cursor"></div>
       <!-- First Project -->
       <section class="hidden">
         <div class="row justify-content-center">

main.js

@@ -12,3 +12,21 @@ const observer = new IntersectionObserver(entries => {
 
 const hiddenElements = document.querySelectorAll('.hidden')
 hiddenElements.forEach(element => observer.observe(element))
+
+document.addEventListener('mousemove', (e) => {
+  // Update the cursor position to follow the mouse
+  cursor.style.left = e.pageX + 'px'
+  cursor.style.top = e.pageY + 'px'
+})
+
+document.addEventListener('mouseenter', () => {
+  // Show the cursor when it enters the document
+  cursor.style.opacity = 0.05
+})
+
+document.addEventListener('mouseleave', () => {
+  // Hide the cursor when it leaves the document
+  cursor.style.opacity = 0
+})
+
+const cursor = document.querySelector('.cursor')