Enhance UI with animations and smooth scrolling effects

css/templatemo-first-portfolio-style.css

@@ -499,6 +499,7 @@ strong {
   position: relative;
   z-index: 22;
   top: 70px;
+  animation: fadeInUp 1s ease-out;
 }
 
 .hero-image-wrap {
@@ -526,6 +527,12 @@ strong {
   right: 67px;
   border-radius: 100%;
   border: 5px solid #FFF;
+  animation: scaleIn 1s ease-out;
+  transition: transform 0.3s ease;
+}
+
+.hero-image:hover {
+  transform: scale(1.05);
 }
 
 .hero svg {
@@ -574,11 +581,18 @@ strong {
 
 .about-image {
   border-radius: var(--border-radius-medium);
+  animation: slideInLeft 1s ease-out;
+  transition: transform 0.3s ease;
+}
+
+.about-image:hover {
+  transform: scale(1.05);
 }
 
 .about-thumb {
   padding-right: 20px;
   padding-left: 20px;
+  animation: slideInRight 1s ease-out;
 }
 
 /*---------------------------------------
@@ -640,6 +654,8 @@ strong {
   margin-bottom: 24px;
   padding: 40px 40px 240px 40px;
   transition: all 0.5s;
+  animation: scaleIn 1s ease-out;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
 .services-thumb-up {
@@ -651,6 +667,7 @@ strong {
 .services-thumb:hover {
   border: 2px solid var(--secondary-color);
   box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
+  transform: translateY(-5px);
 }
 
 .services-thumb:hover .services-icon-wrap {
@@ -675,6 +692,7 @@ strong {
   font-size: 90px;
   position: relative;
   bottom: 15px;
+  animation: float 3s ease-in-out infinite;
 }
 
 .services-thumb:hover .services-price-wrap {
@@ -724,10 +742,14 @@ strong {
   margin-bottom: 24px;
   padding: 40px;
   transition: all ease 0.5s;
+  animation: fadeInUp 1s ease-out;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
 .projects-thumb:hover {
   border-color: var(--secondary-color);
+  transform: translateY(-10px);
+  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
 }
 
 .projects-thumb:hover .projects-image,
@@ -750,6 +772,14 @@ strong {
   transition: all ease 0.5s;
 }
 
+.projects-image {
+  transition: transform 0.3s ease;
+}
+
+.projects-thumb:hover .projects-image {
+  transform: scale(1.05);
+}
+
 .projects-title {
   margin-bottom: 20px;
 }
@@ -775,6 +805,7 @@ strong {
   border-bottom-right-radius: var(--border-radius-small);
   padding: 60px 30px 30px 30px;
   height: 100%;
+  animation: fadeInUp 1s ease-out;
 }
 
 .contact-info-border-start {
@@ -798,6 +829,7 @@ strong {
   padding-top: 13px;
   padding-bottom: 13px;
   outline: none;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
 }
 
 .form-floating > label {
@@ -930,12 +962,14 @@ strong {
   margin-bottom: 10px;
   padding: 6px 14px;
   min-width: 70px;
+  transition: transform 0.3s ease, color 0.3s ease;
 }
 
 .footer-menu-link:hover {
   background: var(--secondary-color);
   border-color: transparent;
   color: var(--white-color);
+  transform: translateY(-3px);
 }
 
 /*---------------------------------------
@@ -964,12 +998,14 @@ strong {
   height: 40px;
   line-height: 40px;
   text-align: center;
+  transition: transform 0.3s ease, color 0.3s ease;
 }
 
 .social-icon-link:hover {
   background: var(--secondary-color);
   border-color: transparent;
   color: var(--white-color);
+  transform: translateY(-3px);
 }
 
 /*---------------------------------------
@@ -1177,3 +1213,176 @@ strong {
     min-width: inherit;
   }
 }
+
+/* Add these animation keyframes at the top of the file */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes slideInLeft {
+    from {
+        opacity: 0;
+        transform: translateX(-50px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes slideInRight {
+    from {
+        opacity: 0;
+        transform: translateX(50px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes scaleIn {
+    from {
+        opacity: 0;
+        transform: scale(0.9);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@keyframes float {
+    0% {
+        transform: translateY(0px);
+    }
+    50% {
+        transform: translateY(-10px);
+    }
+    100% {
+        transform: translateY(0px);
+    }
+}
+
+/* Enhance hero section */
+.hero-text {
+    animation: fadeInUp 1s ease-out;
+}
+
+.hero-image {
+    animation: scaleIn 1s ease-out;
+    transition: transform 0.3s ease;
+}
+
+.hero-image:hover {
+    transform: scale(1.05);
+}
+
+/* Enhance about section */
+.about-thumb {
+    animation: slideInRight 1s ease-out;
+}
+
+.about-image {
+    animation: slideInLeft 1s ease-out;
+    transition: transform 0.3s ease;
+}
+
+.about-image:hover {
+    transform: scale(1.05);
+}
+
+/* Enhance projects section */
+.projects-thumb {
+    animation: fadeInUp 1s ease-out;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.projects-thumb:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+}
+
+.projects-image {
+    transition: transform 0.3s ease;
+}
+
+.projects-thumb:hover .projects-image {
+    transform: scale(1.05);
+}
+
+/* Enhance services section */
+.services-thumb {
+    animation: scaleIn 1s ease-out;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.services-thumb:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+}
+
+.services-icon {
+    animation: float 3s ease-in-out infinite;
+}
+
+/* Enhance contact section */
+.contact-info {
+    animation: fadeInUp 1s ease-out;
+}
+
+.custom-form {
+    animation: slideInRight 1s ease-out;
+}
+
+/* Add smooth scrolling */
+html {
+    scroll-behavior: smooth;
+}
+
+/* Enhance navigation */
+.navbar {
+    transition: background-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.navbar.scrolled {
+    background-color: rgba(255, 255, 255, 0.95);
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+/* Enhance buttons */
+.custom-btn {
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.custom-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+}
+
+/* Add animation to social icons */
+.social-icon-link {
+    transition: transform 0.3s ease, color 0.3s ease;
+}
+
+.social-icon-link:hover {
+    transform: translateY(-3px);
+    color: var(--primary-color);
+}
+
+/* Add animation to form inputs */
+.form-control {
+    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.form-control:focus {
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 0.2rem rgba(83, 93, 161, 0.25);
+}

js/custom.js

@@ -28,4 +28,46 @@
       );
     }
   });
+
+  // Add navbar scroll effect
+  window.addEventListener('scroll', function() {
+    const navbar = document.querySelector('.navbar');
+    if (window.scrollY > 50) {
+      navbar.classList.add('scrolled');
+    } else {
+      navbar.classList.remove('scrolled');
+    }
+  });
+
+  // Add animation on scroll
+  const animateOnScroll = function() {
+    const elements = document.querySelectorAll('.projects-thumb, .services-thumb, .contact-info');
+    
+    elements.forEach(element => {
+      const elementPosition = element.getBoundingClientRect().top;
+      const screenPosition = window.innerHeight;
+      
+      if(elementPosition < screenPosition) {
+        element.style.opacity = '1';
+        element.style.transform = 'translateY(0)';
+      }
+    });
+  }
+
+  window.addEventListener('scroll', animateOnScroll);
+  window.addEventListener('load', animateOnScroll);
+
+  // Add smooth scroll for navigation links
+  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function (e) {
+      e.preventDefault();
+      const target = document.querySelector(this.getAttribute('href'));
+      if (target) {
+        target.scrollIntoView({
+          behavior: 'smooth',
+          block: 'start'
+        });
+      }
+    });
+  });
 })(window.jQuery);