Merge pull request #88 from riyarane46/main

Updated the annimation of about me section

script.js

@@ -190,3 +190,21 @@ function editOrder() {
 }
 displayOrder();
 
+
+//function for annimation on about us
+document.addEventListener('DOMContentLoaded', function() {
+    const aboutSection = document.querySelector('.about');
+
+    function checkScroll() {
+        const triggerBottom = window.innerHeight / 5 * 4;
+        const aboutTop = aboutSection.getBoundingClientRect().top;
+
+        if (aboutTop < triggerBottom) {
+            aboutSection.classList.add('animate');
+        }
+    }
+
+    window.addEventListener('scroll', checkScroll);
+    checkScroll(); 
+});
+

style.css

@@ -53,6 +53,8 @@ section {
     color: #fff;
     background: var(--main-color);
     cursor: pointer;
+    border-radius: 0.5rem;
+    transition: transform 0.3s ease;
 }
 
 button {
@@ -63,14 +65,16 @@ button {
     color: #fff;
     background: var(--main-color);
     cursor: pointer;
+    border-radius: 0.5rem;
+    transition: transform 0.3s ease;
 }
 
 .btn:hover {
-    letter-spacing: .2rem;
+    transform: scale(1.05);
 }
 
 button:hover {
-    letter-spacing: .2rem;
+    transform: scale(1.05);
 }
 
 .animated-button {
@@ -778,4 +782,24 @@ button:hover,
     letter-spacing: .2rem;
 }
 
-/* ... rest of the existing code ... */
+/* ... rest of the existing code ... */
+
+/* Animation for about us */
+.about .row .image {
+    opacity: 0;
+    transform: translateX(-100px);
+    transition: opacity 0.8s ease, transform 0.8s ease;
+}
+
+.about .row .content {
+    opacity: 0;
+    transform: translateX(-100px);
+    transition: opacity 0.8s ease, transform 0.8s ease;
+    transition-delay: 0.4s;
+}
+
+.about.animate .row .image,
+.about.animate .row .content {
+    opacity: 1;
+    transform: translateX(0);
+}