Modern Portfolio website codes

/*CUSTOM ARROW ICON BUTTON*/

/*----SLIDE TOP RIGHT----*/

.hover--slide-top-right:hover path {
  animation: slide-top-right-out 0.2s, slide-top-right-in 0.2s 0.2s;   
}

@keyframes slide-top-right-out{
  to {transform: translate(100%, -100%) }  
}
@keyframes slide-top-right-in{
  from{ transform: translate(-100%, 100%)}
  to{transform: translate(0, 0) }
}




/*----SLIDE DOWN---*/

.hover--slide-down:hover path {
  animation: slide-down-out 0.2s forwards, slide-down-in 0.2s forwards 0.2s   
}

@keyframes slide-down-out{
  to { transform: translate(0, 100%) }  
}
@keyframes slide-down-in{
  from { transform: translate(0, -100%) }
  to {transform: translate(0, 0) }
}




/* CSS for menu item rollover effect */

.hover--rollover-menu li {
position: relative;
  overflow: hidden;
}
.hover--rollover-menu li a{
    transition: 0.3s !important
}

@media (min-width: 800px) {
.hover--rollover-menu li a::before {
    content: attr(data-title);  	
    position: absolute;
    top: 100%; 
}

.hover--rollover-menu li:hover a{
    transform: translateY(-100%);    
}

}



// Javascript code for menu items rollover effect

const menuItems = document.querySelectorAll('.hover--rollover-menu li')


menuItems.forEach(menuItem => {
    if(menuItem){
    const menuLink = menuItem.querySelector('a')
	const menuItemAttr = menuLink.innerText
	menuLink.setAttribute("data-title", menuItemAttr)
    }

})