custom.css

/* elements fade in custom animation */



@layer utilities{
  
  /* animation utilities for typing animation */
  .typing-container {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    border-right: 2px solid;
  }
  .typing-text {
    display: inline-block;
    width: 0;
    animation: typing 4.7s steps(30) forwards infinite, blink 0.6s step-end infinite;
  }

  /* animation utilities for reaveal animation */
  .animate-reveal {
    animation: reveal linear both;
  }
  .timeline-view {
    animation-timeline: view(block);
  }
  .range-cover {
    animation-range: cover 30% cover 40%;
  }

  
  /* projects scaling animation */ 
  .image-scaling {
    transform: scale(1) translateY(0);
    transition: transform 0.5s ease-in-out;
  }
  .images-parent:hover .image-scaling {
    transform: scale(1.3) translateY(25px);
  }
  .images-parent:hover .div-blur {
    filter: blur(5px);
    transition: filter 0.8s ease-in-out;
  }
  .image-scaling {
    filter: none;
  }


/* filter for unfinished projects */
.blur-card-unfinished-project{
  filter: blur(5px);
}

/* animation section for the underline animation on the socials */
.on-hover-underline {
  text-decoration: none; 
  position:relative;
  display: inline-block;
}
.on-hover-underline::before{
  content: "";
  position: absolute;
  left: 0; 
  bottom: 0; /* used to make the line come bellow */
  width: 0%;
  height: 2px;
  background-color: black;
  transition: width 0.3s ease-in-out;
}
.on-hover-underline:hover::before{
  width: 100%;
}


.mobileAnimation {
  animation: phoneAnimation 6s linear infinite;
}

.mobileAnimationReverse {
  animation: phoneAnimationrev 6s linear infinite;
  animation-delay: 4s; /* Starts after the first animation completes */
}


 
}/* end of utility class */



@keyframes phoneAnimation {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    
  }
}

/* Growing animation for the second image */
@keyframes phoneAnimationrev {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    
  }
}




/* keyframe for the reveal animation */
@keyframes reveal {
  from {
    
    transform: translateY(10px);
  }
  to {
    
    transform: translateY(0);
  }
}

/* keyframes for the typing animation */    
@keyframes typing{
    0% {
        width: 0%;
    }
    50% {
        width: 100%;
    }
    70% {
        width: 100%; /* Simulating backspace */
    }
    100% {
        width: 0%;
    }
}
/* keyframe for the blinking of cursor animation */
@keyframes blink {
    50%{
        border-color: transparent;
    }
}

/* filter for the grainy texture  */
/* body::before {
  content: '';
  position: fixed; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; 
  background: #000000;
  filter: url(#grainyTexture);
  opacity: 30%;
  pointer-events: none; 
  z-index: 9999; 
  mix-blend-mode: multiply; 
}

 */