E

index.html

@@ -7,22 +7,22 @@
     <style>
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background-color: #333; /* slightly lighter */
+            background-color: #333; 
             color: #ddd;
-            margin: 0; /* Remove default margin */
-            overflow-x: hidden; /* Hide horizontal scrollbar */
+            margin: 0; 
+            overflow-x: hidden; 
             position: relative; /* Needed for the background animation */
         }
 
 
         .container {
             width: 50%;
-            height: 145vh; /* Set height to 100% of viewport height */
+            height: 145vh; 
             margin: 0 auto;
             padding: 20px;
             border: 2px solid #00ffff;
             border-radius: 10px;
-            background-color: rgba(0, 0, 0, 0.7); /* slightly lighter */
+            background-color: rgba(0, 0, 0, 0.7); 
         }
 
 
@@ -52,23 +52,22 @@
             padding: 15px;
             border: 2px solid #00ffff;
             border-radius: 10px;
-            background-color: rgba(0, 0, 0, 0.5); /* slightly lighter */
+            background-color: rgba(0, 0, 0, 0.5); 
             transition: transform 0.3s ease-in-out, opacity 0.5s ease;
         }
 
         .project-box:hover {
             transform: scale(1.05);
         }
 
-        /* Background Animation */
         .background-animation {
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            z-index: -1; /* Put it behind other content */
-            overflow: hidden; /* Hide overflowing elements */
+            z-index: -1; 
+            overflow: hidden; 
         }
 
         .watermelon-grid {
@@ -78,7 +77,7 @@
             top: -100%;
             left: -100%;
             background-image: url('https://img.freepik.com/premium-vector/watermelon-with-black-seeds-seamless-pattern-red-abstract-sweet-background-vector-illustration_342166-336.jpg'); /* Watermelon grid image */
-            animation: animateBackground 140s linear infinite; /* Adjust animation duration as needed */
+            animation: animateBackground 140s linear infinite; 
         }
 
         @keyframes animateBackground {
@@ -156,7 +155,7 @@ <h2>Contact Me</h2>
             function fadeIn(elements) {
                 elements.forEach(function(element) {
                     if (isVisible(element)) {
-                        element.style.transition = "opacity 3s"; // Adjust the duration here (e.g., 1.5s for 1.5 seconds)
+                        element.style.transition = "opacity 3s"; 
                         element.style.opacity = 1;
                     }
                 });