porta - José Alberto xyz

.welcome__wrap1{--wpr-bg-4e5fc6fd-99ca-48af-972d-142b1d85b202: url('https://josealberto.xyz/assets/img/bg/wlc-bg1.jpg');}.welcome__wrap2{--wpr-bg-34803f89-8952-47ab-9695-89d3a5f68bb4: url('https://josealberto.xyz/assets/img/bg/Header.png');}.about-shape:after{--wpr-bg-9fa14f73-2339-450c-935d-e241465c7c0a: url('https://josealberto.xyz/assets/img/about/about-bg-shape.png');}.about-area-primery .about-shape:after{--wpr-bg-fa07eaf8-643e-4517-97d2-bf0a5ff521ee: url('https://josealberto.xyz/assets/img/about/about-bg-shape2.png');}.about-shape:before{--wpr-bg-4b18784a-5c25-4fb2-8e2b-c3a298633500: url('https://josealberto.xyz/assets/img/about/about-shape.svg');}.about-area-primery .about-shape:before{--wpr-bg-6c960b46-e8e1-41f6-8d13-90691ee659ee: url('https://josealberto.xyz/assets/img/about/about-shape2.svg');}.about-area-primery:after{--wpr-bg-424510fc-dce1-48cd-9c45-6627d15e1c0b: url('https://josealberto.xyz/assets/img/bg/about-bg.svg');}.primery-skill:after{--wpr-bg-0b3732b4-5b9a-4cdc-b708-0e3c9ebec03e: url('https://josealberto.xyz/assets/img/bg/skill-bg1.svg');}.service-primery:after{--wpr-bg-dfd954ce-af11-42ba-977d-4b4721d86afe: url('https://josealberto.xyz/assets/img/bg/service-bg.svg');}.project-area{--wpr-bg-efb95d13-5ec1-4eca-9f15-0efe7b6abc0a: url('https://josealberto.xyz/assets/img/bg/project-bg.jpg');}.project-area-primery:after{--wpr-bg-36a6aabe-67e4-4987-9bae-c0dc3b31c7b1: url('https://josealberto.xyz/assets/img/bg/portfolio-bg.svg');}.testimonials-area1{--wpr-bg-82ce7139-2193-4bd9-ac30-7e6023252ca5: url('https://josealberto.xyz/assets/img/bg/testimonials-bg.png');}.about-area1{--wpr-bg-320191fb-fda1-4f94-bfc9-1a08de4cc4d2: url('https://josealberto.xyz/assets/css/assets/img/bg/about-bg.png');}.about-img-section1{--wpr-bg-e25e5fa2-7ec2-4caa-8f7e-6656cd8882c4: url('https://josealberto.xyz/assets/img/about/about1.png');}.pricing-area1{--wpr-bg-9cad19bf-8fda-4629-8dca-2b2044bce6bc: url('https://josealberto.xyz/assets/img/bg/about-bg.png');}.cta-area1{--wpr-bg-89dfb1e5-e675-43b2-b7e4-0ea69a3a4039: url('https://josealberto.xyz/assets/img/bg/map.png');}.footer-area1{--wpr-bg-8395cc4f-bcad-49b7-bd26-cb168767d0d4: url('https://josealberto.xyz/assets/img/bg/footer-bg.png');}.portfolio-bg-1{--wpr-bg-df0ceec0-391d-4ff6-8a41-b710e28f59de: url('https://josealberto.xyz/assets/img/project/portfolio1.jpg');}.portfolio-bg-2{--wpr-bg-ac072320-f94f-4e7d-b535-ccf45ed645d8: url('https://josealberto.xyz/assets/img/project/portfolio2.jpg');}.portfolio-bg-3{--wpr-bg-8f011e75-22ba-4022-a8a4-8789a69b2153: url('https://josealberto.xyz/assets/img/project/portfolio3.jpg');}.portfolio-bg-4{--wpr-bg-88ef4ed5-637f-4316-83e6-1a5a88f23dc4: url('https://josealberto.xyz/assets/img/project/portfolio4.jpg');}.portfolio-bg-5{--wpr-bg-30b6a2a2-9b78-4e5b-b322-e3a5f18ca3ff: url('https://josealberto.xyz/assets/img/project/portfolio5.jpg');}.portfolio-bg-6{--wpr-bg-a72eff24-a29c-43c2-968e-52d282942669: url('https://josealberto.xyz/assets/img/project/portfolio6.jpg');}.portfolio-bg-7{--wpr-bg-52ecb78c-c466-4049-81e8-817705711c15: url('https://josealberto.xyz/assets/img/project/01.jpg');}.portfolio-bg-8{--wpr-bg-3f23f954-c370-4fcf-accd-9f08386a7c69: url('https://josealberto.xyz/assets/img/project/02.jpg');}.portfolio-bg-9{--wpr-bg-93e45fe2-4aa9-4f0d-9205-63614719d9d6: url('https://josealberto.xyz/assets/img/project/03.jpg');}.page-bg{--wpr-bg-5887b918-b922-493a-a378-cf3d89af7ff9: url('https://josealberto.online/wp-content/uploads/2022/02/josealberto.xyz_.png');}.circle-1{--wpr-bg-cbaed4d1-b949-4309-9ee0-408aa04b247d: url('https://josealberto.online/wp-content/uploads/2022/03/jose-alberto-desarrollador-wordpress-en-cuernavaca-morelos-mexico.png');}.circle-2{--wpr-bg-5e6006bc-e904-4196-ae40-af7a2ec9ce99: url('https://josealberto.online/wp-content/uploads/2022/03/jose-alberto-programador-web-seo-mexico.png');}.circle-3{--wpr-bg-94c97cc6-38f1-419b-9d07-437ad4bee48b: url('https://josealberto.online/wp-content/uploads/2022/03/jose-alberto-desarrollador-wordpress-css-html-js-php-en-mexico-morelos-cuernavaca.png');}.circle-4{--wpr-bg-ed56ec6e-b68e-4553-8d24-b09652523526: url('https://josealberto.online/wp-content/uploads/2022/03/jose-alberto-desarrollador-de-sistemas-web-en-cuernavaca-morelos-mexico.png');}

Redes sociales

HTML JS Y CSS

.page-bg{
	position:fixed;
	width:100%;
	height:100vh;
	background:linear-gradient(rgba(0,0,.7),rgba(0,0,0,.7)),var(--wpr-bg-5887b918-b922-493a-a378-cf3d89af7ff9)center no-repeat;
	background-size:cover;
}

.mouse-circle{
	width:6rem;
	height:6rem;
	border:0.1rem solid #c7a622;
	border-radius:50%;
	position:fixed;
	z-index:300;
	transform:translate(-50%,-50%);
	animation:mouuseCircleAnim 10s infinite linear;
		pointer-events:none;
		opacity:0;
}
@keyframes mouuseCircleAnim{
  	0%{
		width:6rem;
		height:6rem;
	}
		25%{
		width:8rem;
		height:8rem;
	}
		35%{
		width:4rem;
		height:4rem;
	}
		70%{
		width:8rem;
		height:8rem;
	}
		100%{
		width:6rem;
		height:6rem;
	}
	
}

.mouse-dot{
	width:0.5rem;
	height:0.5rem;
	background-color:#9b0e0e;
		border-radius:50%;
	position:fixed;
	z-index:300;
	animation:mousedot 10s infinite linear;
	opacity:0;
	pointer-events:none;
}

@keyframes mousedot{
	
  	0%{
		width:0.5rem;
		height:0.5rem;
	}
		55%{
		width:1.5rem;
		height:1.5rem;
	}
		100%{
		width:0.5rem;
		height:0.5rem;
	}

}

.section-1{
	position:relative;
	width:100%;
	height:100vh;

}

.logo{
	position:absolute;
	top:2rem;
	left:5rem;
	font-size:2rem;
	text-transform:uppercase;
	color:#fff;
}
.circles{
	position:absolute;
	top:0;
	left:0;
	width: 100%;
	height:100%;
	display:grid;
	grid-template-columns:repeat(2,1fr);
		grid-template-rows:repeat(2,1fr);
}
.circle{
	width:22rem;
	height:22rem;
	border-radius:50%;
	background-color:red;
	justify-self:center;
	align-self:center;
	position:relative;
	top:0;
	left:0;
	transition:left 2s,top 2s;
}
.circle-1{
	background:var(--wpr-bg-cbaed4d1-b949-4309-9ee0-408aa04b247d)center no-repeat;
	background-size:cover;
	background-clip:content-box;
	border:.5rem dotted #08d665;
	margin-left:-10rem;
}
.circle-2{
	background:var(--wpr-bg-5e6006bc-e904-4196-ae40-af7a2ec9ce99)center no-repeat;
	background-size:cover;
	background-clip:content-box;
	border:.5rem dotted #08d665;
	margin-right:-10rem;
}
.circle-3{
	background:var(--wpr-bg-94c97cc6-38f1-419b-9d07-437ad4bee48b)center no-repeat;
	background-size:cover;
	background-clip:content-box;
	border:.5rem dotted #08d665;
	
}
.circle-4{
	background:var(--wpr-bg-ed56ec6e-b68e-4553-8d24-b09652523526)center no-repeat;
	background-size:cover;
	background-clip:content-box;
	border:.5rem dotted #08d665;
	
}
.main-circle{
	width:35rem;
	height:35rem;
	position:absolute;
	overflow:hidden;
	border-radius:50%;
	transition: width .2s, height .2s ;
}
.main-circle:hover{
	width:50rem;
	height:50rem;
}

.main-circle img{
	border-radius:50%;
	/*
	mix-blend-mode:color-dodge;
	
	*/
	position:relative;
			transition:left 2s,top 2s;
	top:0;
	left:0;
}

.featured-text{
	font-size:2rem;
	color:#FFF;
	text-transform:uppercase;
	word-wrap:break-word;
	width:0;
	line-height:1;
	position:sticky;
	top:0;
}
.featured-text-1{
	margin:0 auto 0 10rem;
}
.featured-text-2{
	margin:0 10rem 0 auto;
}
.main-btn{
	position:absolute;
	bottom:3rem;
	width:13rem;
	height:13rem;
	background-color:#08d665;
	border-radius:50%;
	border:0.2rem border dotted black;
	overflow:hidden;
}
.main-btn:hover .main-btn-content{
	transform:rotate(60deg);
	border:0.2rem dotted black;
		transition:transform 0.2s 0.5s ,border 0.2.s ;
	color:black;
}
.main-btn-content{
	width:100%;
	height:100%;
	border:0.2 dotted black;
	border-radius:50%;
	transform:rotate(40deg);
	transition:transform 0.2s 0.5s ,border 0.2s;
}
.main-btn-line{
	position:absolute;
	top:4rem;
	width:3rem;
	height:0.5rem;
	border:0.1rem solid black;
	
}

.main-btn-line:nth-child(1){
	transform:rotateZ(-45deg)translateX(-0.65rem);
	transform-origin:left center;
	border-right:none;
}
.main-btn-line:nth-child(2){
		transform:rotateZ(45deg)translateX(0.65rem);

transform-origin:right center;
	border-left:none;
}
.main-btn-line:nth-child(3){
	transform:rotateZ(90deg)
	
}

.main-btn span{
	position:absolute;
	bottom:3rem;
	color:#fff;
	font-size:1.1rem;
	font-weight:600;
	text-transform:uppercase;
}

.ripple{
	position:absolute;
	width:0;
	height:0;
	background-color:white;
	border-radius:50%;
	transform:translate(-50%,-50%);
	animation:rippleAnim 0.5s forwards;
}

@keyframes rippleAnim{
	0%{
		width:0;
		height:0;
	}
	100%{
		width:210%;
		height:210%;
	}
}
.section-2{
	position:relative;
	padding:10rem 10rem 15rem 10rem;
}

.about-me-text{
	width:80%;
	margin:auto;
}
.section-2-heading{
	font-size:3rem;
	font-weight:300;
	color:#fff;
	text-transform:uppercase;
	position:absolute;
	top:50%;
	left:10rem;
	transform:translateY(-50%);
	width:0;
	word-break:break-all;
}
.section-2 .main-btn{
	left:50%;
	bottom:-5rem;
	transform:translateX(-50%);
}
.about-me-text span{
	font-family:"poppins",sans-serif;
	font-size:10rem;
	font-weight:bold;
	color:#aaa;
	line-height:.9;
	letter-spacing:.5rem;
	text-shadow:0 0 1rem #08d665;
	position:relative;
	mix-blend-mode:color-dodge;
}

@keyframes aboutMeTextAnim{
	0%{
		color:#aaa;
		top:0;
	}
	10%,
	90%{
		color:#fff;
		top:2rem;
		
	}
	100%{
			color:#aaa;
		top:0;
	}
}

.section-3{
	width:100%;
	height:100%;
	padding:10rem 0 ;
	margin-top:10rem;
	position:relative;
	
}
.projects{
	flex-wrap:wrap;	
}
.project{
	width:40rem;
	height:45rem;
	overflow:hidden;
	margin:3rem;
	background-color:black;
	display:flex;
	justify-content:center;
	position:relative;
	border:.2rem dotted #08d665;
	border-radius:.5rem;
	cursor:pointer;
		perspective:20rem;
}
.project img{
	width:90%;
	object-fit:cover;
	position:absolute;
	top:2rem;
opacity:.5;
	transition:top 4s 0.2s,opacity 0.2s;

}
	.project:nth-child(odd):hover img{
		animation:oddImageAnim 4s 0.2s;
		opacity:1;
	}

@keyframes oddImageAnim{
	0%{
		transform:rotateY(0);	
	}
	25%{
		transform:rotateY(-2deg)rotateX(2deg);
	}
	50%{
	transform:rotateY(2deg)rotateX(2deg);

}
	100%{
		transform:rotateY(0);
	}
}

.project:nth-child(even):hover img{
		animation:evenImageAnim 4s 0.2s;
		opacity:1;
	}

@keyframes evenImageAnim{
	0%{
		transform:rotateY(0);	
	}
	25%{
		transform:rotateY(2deg)rotateX(-2deg);
	}
	50%{
	transform:rotateY(-2deg)rotateX(2deg);

}
	100%{
		transform:rotateY(0);
	}
}

.project-img-wrapper{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:0;
	background-color:rgba(0,0,0,0.9);
	animation:imgWrapperAnim 2s forwards;
}
@keyframes imgWrapperAnim{
	0%{
		height:0;
	}
}
100%{
	height:100%;
	
}

.project-img{
	width:100%;
	border-radius:.5rem;
	padding:7rem 20rem;
	opacity:.9;
}

/* image project*/
		
		.project-img-wrapper{
			position:fixed;
			top:0;
			left:0;
			width:100%;
			height:100%;
			background-color:rgba(0,0,0,0.9);
			overflow:hidden scroll;
		animation:imgWrapperAnim 1s forwards;
		}
		
		@keyframes imgWrapperAnim{
			0%{ height:0;}
			100%{ height:100%;}
		}
		
		.project-img{
			width:100%;
			border-radius:0.5rem;
				padding:7rem 20rem;
			opacity:0.9;
			animation:imgAnim 1s 1s;
			transform-origin:top center;
		}
		
		@keyframes imgAnim{
			0%{
				transform:scale(0);
			}
			100%{
				transform:scale(1);
			}
		}
		
		.project-hide-btn{
			position:fixed;
			top:5rem;
			right:5rem;
			background-color:transparent;
			border:none;
			color:#fff;
			font-size:2rem;
			cursor:pointer;
			z-index:10;
	
			transform:scale(0);
			visibility:hidden;
		
			
				
		}
		.change.project-hide-btn{
			transform:scale(1);
			visibility:visible;
			transition:transform 0.5s;
		}
		
		.projects-btn{
			left:50%;
			transform:translatex(-50%);
		}
		
	</style>
	
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>

<div class="mouse-circle progrador-mexico"></div>
	<div class="mouse-dot"></div>
	
	<div data-rocket-location-hash="68e122c6b23b4519e49c5a2a57b5f054" class="container">
		<div class="page-bg">	</div>
		
					<section class="section-1 center">
					<a href="" class="logo programador-morelos">
					<img width="150px" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20150%200'%3E%3C/svg%3E" alt="jose alberto programador desarrollador web en mexico" data-lazy-src="https://www.josealberto.mx/wp-content/uploads/2022/04/cropped-josealbertoxyz-08-1.png"><noscript><img width="150px" src="https://www.josealberto.mx/wp-content/uploads/2022/04/cropped-josealbertoxyz-08-1.png" alt="jose alberto programador desarrollador web en mexico"></noscript>	
					</a>
						
					<div class="circles">
						<div class="circle circle-1"></div>
						<div class="circle circle-2"></div>
						<div class="circle circle-3"></div>
						<div class="circle circle-4"></div>
					</div>
						
						<div class="main-circle center">
							<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="jose alberto programador web en morelos " data-lazy-src="https://josealberto.online/wp-content/uploads/2022/02/jose-alberto-xyz-programador-.png"><noscript><img src="https://josealberto.online/wp-content/uploads/2022/02/jose-alberto-xyz-programador-.png" alt="jose alberto programador web en morelos "></noscript>
						</div>
						
						
						<h4 class="featured-text featured-text-1"> Desarrollador Web </h4>
						<h4 class="featured-text featured-text-2"> Programador  </h4>
					
						<a href="#" class="main-btn">
							<div class="main-btn-content center">
								<div class="main-btn-line"></div>
									<div class="main-btn-line"></div>
								<div class="main-btn-line"></div>
							<span class="projects">Proyectos</span>
							</div>
						</a>
						
					</section>
		
		<section class="section-2">
				<h2 class="section-2-heading">Acerca</h2>
			<p class="about-me-text"></p>
				<a href="#" class="main-btn">
							<div class="main-btn-content center">
								<div class="main-btn-line"></div>
									<div class="main-btn-line"></div>
								<div class="main-btn-line"></div>
							<span class="projects">Proyectos</span>
							</div>
						</a>
						
		</section>
		
		<section class="section-3 ">
			
			<h1 class="section-3-heading"></h1>
		
			<div class="projects center">
				
				<div class="project">
					<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="proyecto maxcazino" data-lazy-src="https://josealberto.mx/wp-content/uploads/2022/10/jose-alberto-desarrollador-web-maxcazino-mexico-programador-web-morelos.jpg"><noscript><img src="https://josealberto.mx/wp-content/uploads/2022/10/jose-alberto-desarrollador-web-maxcazino-mexico-programador-web-morelos.jpg" alt="proyecto maxcazino"></noscript>
				</div>
				
						<div class="project">
					<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="proyecto maxcazino" data-lazy-src="https://josealberto.mx/wp-content/uploads/2022/10/jose-alberto-programador-web-en-247-apuestas-mexico-morelos-cuernavaca-.png"><noscript><img src="https://josealberto.mx/wp-content/uploads/2022/10/jose-alberto-programador-web-en-247-apuestas-mexico-morelos-cuernavaca-.png" alt="proyecto maxcazino"></noscript>
				</div>
				
						<div class="project">
					<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="proyecto maxcazino" data-lazy-src="https://josealberto.mx/wp-content/uploads/2022/10/jose-alberto-desarrollador-web-en-mexico-cuernavaca-morelos.png"><noscript><img src="https://josealberto.mx/wp-content/uploads/2022/10/jose-alberto-desarrollador-web-en-mexico-cuernavaca-morelos.png" alt="proyecto maxcazino"></noscript>
				</div>
						<div class="project">
					<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="proyecto maxcazino" data-lazy-src="https://josealberto.mx/wp-content/uploads/2022/10/jose-alberto-programador-apuestas-247-en-mexico-.png"><noscript><img src="https://josealberto.mx/wp-content/uploads/2022/10/jose-alberto-programador-apuestas-247-en-mexico-.png" alt="proyecto maxcazino"></noscript>
				</div>
				
					<div class="project">
					<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="proyecto maxcazino" data-lazy-src="https://josealberto.mx/wp-content/uploads/2022/10/jose-alberto-programador-apuestas-247-en-mexico-.png"><noscript><img src="https://josealberto.mx/wp-content/uploads/2022/10/jose-alberto-programador-apuestas-247-en-mexico-.png" alt="proyecto maxcazino"></noscript>
				</div>
				
					<div class="project">
					<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="proyecto maxcazino" data-lazy-src="https://josealberto.mx/wp-content/uploads/2022/10/jose-alberto-programador-apuestas-247-en-mexico-.png"><noscript><img src="https://josealberto.mx/wp-content/uploads/2022/10/jose-alberto-programador-apuestas-247-en-mexico-.png" alt="proyecto maxcazino"></noscript>
				</div>
				
					<div class="project">
					<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="proyecto maxcazino" data-lazy-src="https://josealberto.mx/wp-content/uploads/2022/10/jose-alberto-programador-apuestas-247-en-mexico-.png"><noscript><img src="https://josealberto.mx/wp-content/uploads/2022/10/jose-alberto-programador-apuestas-247-en-mexico-.png" alt="proyecto maxcazino"></noscript>
				</div>
				
				
			</div>
			
	<button class="project-hide-btn">«Close</button>
			
				<a href="#" class="main-btn projects-btn">
							<div class="main-btn-content center">
								<div class="main-btn-line"></div>
									<div class="main-btn-line"></div>
								<div class="main-btn-line"></div>
							<span class="projects">Mostrar Más</span>
							</div>
						</a>
			
		</section>
		
		</div>

const mouseCircleFn =(x,y)=>{
mouseCircle.style.cssText = `top: ${y}px; left: ${x}px;opacity:1`;
mouseDot.style.cssText = `top: ${y}px; left: ${x}px;opacity:1`;
}

const circles = document.querySelectorAll('.circle');
const mainImg = document.querySelector('.main-circle img');
let mX = 0;
let mY = 0;
const z = 100;

const animateCircles = (e,x,y) => {

if(x < mX ){
	  	circles.forEach(circle => {
			circle.style.left ="100px";
		});
		
		mainImg.style.left ="100px";
	}else if(x > mX){
		 	circles.forEach(circle => {
			circle.style.left ="-100px";
		});
		
		mainImg.style.left ="-100px";
		
	}

if(y < mY ){
			circles.forEach(circle => {
			circle.style.top ="100px";
		});
		
		mainImg.style.top ="100px";
	}else if(y >mY){
			circles.forEach(circle => {
			circle.style.top ="-100px";
		});
		
		mainImg.style.top ="-100px";
	}
		mX = e.clientX;
	mY = e.clientY;

}

document.body.addEventListener('mousemove',(e) => {

let x = e.clientX;     // Get the horizontal coordinate
let y = e.clientY;     // Get the vertical coordinate

mouseCircleFn(x,y);
animateCircles(e,x,y);
});

document.body.addEventListener("mouseleave",()=>{
	  mouseCircle.style.opacity = "0";
		mouseDot.style.opacity = "0"
});

console.log("move upwards");

const aboutMeText = document.querySelector(".about-me-text");
const aboutMeTextContent = "José Alberto desarrollador web en Cuernavaca - México";

Array.from(aboutMeTextContent).forEach(char =>{
const span = document.createElement("span");
span.textContent = char;
aboutMeText.appendChild(span);
	span.addEventListener("mouseenter",(e)=>{
	e.target.style.animation ="aboutMeTextAnim 7s infinite"
	});
});
const container = document.querySelector(".container");
const projects = document.querySelectorAll('.project');
const projectHideBtn = document.querySelectorAll('.project-hide-btn');

projects.forEach((project) => {
	project.addEventListener('mouseenter',()=>{
		project.firstElementChild.style.top =
			`-${project.firstElementChild.offsetHeight - project.offsetHeight+20}px`; 
		});
	
		project.addEventListener("mouseleave",()=>{
			project.firstElementChild.style.top ="2rem";
		});

project.addEventListener("click",()=>{
			const bigImgWrapper = document.createElement("div");
		  bigImgWrapper.className="project-img-wrapper";
		  container.appendChild(bigImgWrapper);
		
			 const bigImg = document.createElement("img");
	    bigImg.className = "project-img";
			const imgPath = project.firstElementChild.getAttribute("src");
			bigImg.setAttribute("src",`${imgPath}`);
		bigImgWrapper.appendChild(bigImg);		
		
		document.body.style.overflowY = "hidden";
		
		projectHideBtn.classList.add('change');
		/*
		projectHideBtn.classList.add("change");
    */
		projectHideBtn.onclick = () =>{
			projectHideBtn.classList.remove("change");
			bigImgWrapper.remove();
			document.body.style.overflowY = "scroll";
		}
	
	});

});

</script>

HTML JS Y CSS

RESULTADO