From c17a27826ebe4b17c57a3decee2c40082603d751 Mon Sep 17 00:00:00 2001 From: Nashid Shah Date: Fri, 10 Nov 2023 15:52:14 -0500 Subject: [PATCH 1/2] Fixed scroll button jump issue --- assets/css/animations.css | 356 ++++++++++++++------------------------ 1 file changed, 128 insertions(+), 228 deletions(-) diff --git a/assets/css/animations.css b/assets/css/animations.css index 16ebd44..15c74e9 100644 --- a/assets/css/animations.css +++ b/assets/css/animations.css @@ -1,300 +1,200 @@ @-webkit-keyframes fadeInUp { - 0% { - opacity: 0; - -webkit-transform: translateY(5rem); - } 100% { - opacity: 1; - -webkit-transform: translateY(0); - } + 0% { + opacity: 0; + -webkit-transform: translateY(5rem); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + } } @-moz-keyframes fadeInUp { - 0% { - opacity: 0; - -moz-transform: translateY(5rem); - } - - 100% { - opacity: 1; - -moz-transform: translateY(0); - } + 0% { + opacity: 0; + -moz-transform: translateY(5rem); + } + + 100% { + opacity: 1; + -moz-transform: translateY(0); + } } @-o-keyframes fadeInUp { - 0% { - opacity: 0; - -o-transform: translateY(5rem); - } - - 100% { - opacity: 1; - -o-transform: translateY(0); - } + 0% { + opacity: 0; + -o-transform: translateY(5rem); + } + + 100% { + opacity: 1; + -o-transform: translateY(0); + } } @keyframes fadeInUp { - 0% { - opacity: 0; - transform: translateY(5rem); - } - - 100% { - opacity: 1; - transform: translateY(0); - } -} + 0% { + opacity: 0; + transform: translateY(5rem); + } -@-webkit-keyframes bounceInLeft { - 0% { - opacity: 0; - -webkit-transform: translateX(-100%); - } - 60% { - -webkit-transform: translateX(1.25rem); - } - - 80% { - -webkit-transform: translateX(-0.25rem); - } - - 100% { - opacity: 1; - -webkit-transform: translateX(0); - } + 100% { + opacity: 1; + transform: translateY(0); + } } -@-moz-keyframes bounceInLeft { - 0% { - opacity: 0; - -moz-transform: translateX(-100%); - } - - 60% { - -moz-transform: translateX(1.25rem); - } - - 80% { - -moz-transform: translateX(-0.25rem); - } - - 100% { - opacity: 1; - -moz-transform: translateX(0); - } -} +@-webkit-keyframes bounceInLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(-100%); + } -@-o-keyframes bounceInLeft { - 0% { - opacity: 0; - -o-transform: translateX(-100%); - } - - 60% { - opacity: 1; - -o-transform: translateX(1.25rem); - } - - 80% { - -o-transform: translateX(-0.25rem); - } - - 100% { - opacity: 1; - -o-transform: translateX(0); - } -} + 80% { + -webkit-transform: translateX(-0.25rem); + } -@keyframes bounceInLeft { - 0% { - opacity: 0; - transform: translateX(-100%); - } - - 60% { - transform: translateX(1.25rem); - } - - 80% { - transform: translateX(-0.25rem); - } - - 100% { - opacity: 1; - transform: translateX(0); - } -} -@-webkit-keyframes bounceInRight { - 0% { - opacity: 0; - -webkit-transform: translateX(100%); - } - - 60% { - -webkit-transform: translateX(-1.25rem); - } - - 80% { - -webkit-transform: translateX(0.25rem); - } - - 100% { - opacity: 1; - -webkit-transform: translateX(0); - } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + } } -@-moz-keyframes bounceInRight { - 0% { - opacity: 0; - -moz-transform: translateX(100%); - } - - 60% { - -moz-transform: translateX(-1.25rem); - } +@-moz-keyframes bounceInLeft { + 0% { + opacity: 0; + -moz-transform: translateX(-100%); + } - 80% { - -moz-transform: translateX(0.25rem); - } + 80% { + -moz-transform: translateX(-0.25rem); + } - 100% { - opacity: 1; - -moz-transform: translateX(0); - } + 100% { + opacity: 1; + -moz-transform: translateX(0); + } } -@-o-keyframes bounceInRight { - 0% { - opacity: 0; - -o-transform: translateX(100%); - } - - 60% { - -o-transform: translateX(-1.25rem); - } +@-o-keyframes bounceInLeft { + 0% { + opacity: 0; + -o-transform: translateX(-100%); + } - 80% { - -o-transform: translateX(0.25rem); - } + 80% { + -o-transform: translateX(-0.25rem); + } - 100% { - opacity: 1; - -o-transform: translateX(0); - } + 100% { + opacity: 1; + -o-transform: translateX(0); + } } -@keyframes bounceInRight { - 0% { - opacity: 0; - transform: translateX(100%); - } - - 60% { - transform: translateX(-1.25rem); - } +@keyframes bounceInLeft { + 0% { + opacity: 0; + transform: translateX(-100%); + } - 80% { - transform: translateX(0.25rem); - } + 80% { + transform: translateX(-0.25rem); + } - 100% { - opacity: 1; - transform: translateX(0); - } + 100% { + opacity: 1; + transform: translateX(0); + } } @-webkit-keyframes expand { - 0% { + 0% { width: 0; - } 100% { - width: attr('data-percent'); + } + 100% { + width: attr("data-percent"); } } @-moz-keyframes expand { - 0% { - opacity: 0; - -moz-transform: translateY(5rem); - } - - 100% { - opacity: 1; - -moz-transform: translateY(0); - } + 0% { + opacity: 0; + -moz-transform: translateY(5rem); + } + + 100% { + opacity: 1; + -moz-transform: translateY(0); + } } @-o-keyframes expand { - 0% { - opacity: 0; - -o-transform: translateY(5rem); - } - - 100% { - opacity: 1; - -o-transform: translateY(0); - } + 0% { + opacity: 0; + -o-transform: translateY(5rem); + } + + 100% { + opacity: 1; + -o-transform: translateY(0); + } } @keyframes expand { - 0% { + 0% { width: 0; - } + } - 100% { - width: attr('data-percent'); - } + 100% { + width: attr("data-percent"); + } } .animated.fadeInUp { - -webkit-animation-name: fadeInUp; - -moz-animation-name: fadeInUp; - -o-animation-name: fadeInUp; - animation-name: fadeInUp; -} - -.animated.bounceInRight { - -webkit-animation-name: bounceInRight; - -moz-animation-name: bounceInRight; - -o-animation-name: bounceInRight; - animation-name: bounceInRight; + -webkit-animation-name: fadeInUp; + -moz-animation-name: fadeInUp; + -o-animation-name: fadeInUp; + animation-name: fadeInUp; } .animated.bounceInLeft { - -webkit-animation-name: bounceInLeft; - -moz-animation-name: bounceInLeft; - -o-animation-name: bounceInLeft; - animation-name: bounceInLeft; + -webkit-animation-name: bounceInLeft; + -moz-animation-name: bounceInLeft; + -o-animation-name: bounceInLeft; + animation-name: bounceInLeft; } .animated.expand { - -webkit-animation-name: expand; - -moz-animation-name: expand; - -o-animation-name: expand; - animation-name: expand; + -webkit-animation-name: expand; + -moz-animation-name: expand; + -o-animation-name: expand; + animation-name: expand; } .animatable { /* initially hide animatable objects */ visibility: hidden; - + /* initially pause animatable objects their animations */ - -webkit-animation-play-state: paused; - -moz-animation-play-state: paused; + -webkit-animation-play-state: paused; + -moz-animation-play-state: paused; -ms-animation-play-state: paused; - -o-animation-play-state: paused; - animation-play-state: paused; + -o-animation-play-state: paused; + animation-play-state: paused; } /* show objects being animated */ .animated { visibility: visible; - + -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; - + -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; From 74dffd0900f99e2edf511d4d5c95873e5d88335a Mon Sep 17 00:00:00 2001 From: Nashid Shah Date: Fri, 10 Nov 2023 17:04:25 -0500 Subject: [PATCH 2/2] Fixed contact me scrolling issue on mobile --- assets/css/projects.css | 1 + 1 file changed, 1 insertion(+) diff --git a/assets/css/projects.css b/assets/css/projects.css index 35c16da..87cd576 100644 --- a/assets/css/projects.css +++ b/assets/css/projects.css @@ -156,6 +156,7 @@ } @media screen and (max-width: 576px) { + .col picture, .col .bg-img { height: 12.5rem; }