Update index.html

index.html

@@ -55,61 +55,65 @@ <h2 id="modal-title"></h2>
             document.getElementById(sectionName).classList.add("active");
             evt.currentTarget.classList.add("active");
         }
-
+    
         function spawnBubble() {
             const bubble = document.createElement('div');
             bubble.classList.add('bubble');
             bubble.textContent = "Project";  // You can customize this text or randomize it.
             bubble.dataset.projectTitle = "Project Title"; // Set a title for the project
             bubble.dataset.projectDescription = "Project description goes here."; // Set a description for the project
-
+    
             // Randomize the x position for bubble spawn
             const xPosition = Math.random() * (window.innerWidth - 100);  // 100 is the bubble width
             bubble.style.left = `${xPosition}px`;
             bubble.style.transform = 'translateY(0)'; // Reset position before animation
             document.getElementById('about-me-section').appendChild(bubble);
-
+    
             // Trigger the animation
             setTimeout(() => {
                 bubble.style.animation = 'floatUp 5s forwards';  // Start the floating animation
             }, 10);
-
+    
             bubble.addEventListener('click', function() {
+                // Stop the bubble from floating
+                bubble.style.animation = 'none'; // Stop the animation
+
+                // Open the modal with project details
                 openModal(this.dataset.projectTitle, this.dataset.projectDescription);
             });
-
+    
             bubble.addEventListener('animationend', function() {
                 this.classList.add('burst');  // Trigger burst effect
                 setTimeout(() => {
                     this.remove();  // Remove bubble from the DOM after bursting
                 }, 500);  // After burst effect
             });
         }
-
+    
         // Open modal
         function openModal(title, description) {
             document.getElementById('modal-title').textContent = title;
             document.getElementById('modal-description').textContent = description;
             document.getElementById('project-modal').style.display = "block";
         }
-
+    
         // Close modal
         function closeModal() {
             document.getElementById('project-modal').style.display = "none";
         }
-
+    
         // Spawn a bubble every 2 seconds
         setInterval(spawnBubble, 2000);
-
+    
         // Load articles dynamically (dummy data for now)
         const articles = [
             { title: "Article 1", tags: ["neural networks", "AI"], content: "Content of article 1..." },
             { title: "Article 2", tags: ["AI", "learning"], content: "Content of article 2..." },
             { title: "Article 3", tags: ["neural networks", "data"], content: "Content of article 3..." }
         ];
-
+    
         const blogContainer = document.getElementById('blog-things');
-
+    
         articles.forEach(article => {
             const articleDiv = document.createElement('div');
             articleDiv.innerHTML = `<h3>${article.title}</h3><p>${article.content}</p>`;