feat: add transition

Author: mustafamengutay

dist/output.css

@@ -575,6 +575,10 @@ video {
   width: 100vw;
 }
 
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 @keyframes fade {
   0% {
     opacity: 0;
@@ -691,6 +695,24 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 .animate-once {
   animation-iteration-count: 1;
 }
@@ -703,11 +725,23 @@ html {
   font-size: 62.5%;
 }
 
+.hover\:scale-105:hover {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .hover\:text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.active\:scale-100:active {
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 @media (min-width: 431px) {
   .sm\:absolute {
     position: absolute;

index.html

@@ -19,19 +19,19 @@
         <ul
           class="text-[#636363] text-base sm:flex sm:gap-[2.4rem] justify-end hidden"
         >
-          <li class="hover:text-white">
+          <li class="hover:text-white transition">
             <a
               href="https://www.linkedin.com/in/mustafamengutay/"
               target="_blank"
               >Linkedin</a
             >
           </li>
-          <li class="hover:text-white">
+          <li class="hover:text-white transition">
             <a href="https://github.com/mustafamengutay" target="_blank"
               >Github</a
             >
           </li>
-          <li class="hover:text-white">
+          <li class="hover:text-white transition">
             <a href="https://dribbble.com/mustafamengutay" target="_blank"
               >Dribbble</a
             >
@@ -61,7 +61,11 @@
               principles.</span
             ><br />
             Currently working on
-            <span class="text-white">Depremzede</span>
+            <span class="text-white"
+              ><a href="https://github.com/mustafamengutay/depremzede"
+                >Depremzede</a
+              ></span
+            >
             ⚡️
           </p>
         </div>
@@ -84,7 +88,7 @@
         <a
           href="mailto:[email protected]"
           class="bg-white text-black w-[35rem] sm:w-[15.3rem] h-[6.5rem] sm:h-[4rem] sm:py-[1.1rem] sm:px-[4.5rem] rounded-full
-          flex justify-center items-center whitespace-nowrap text-[2.4rem] sm:text-base"
+          flex justify-center items-center whitespace-nowrap text-[2.4rem] sm:text-base transition-transform transform duration-250 ease-in-out hover:scale-105 active:scale-100"
           >Say Hello</a
         >
       </div>