porta - José Alberto xyz

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)),url(https://josealberto.online/wp-content/uploads/2022/02/josealberto.xyz_.png)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:url("https://josealberto.online/wp-content/uploads/2022/03/jose-alberto-desarrollador-wordpress-en-cuernavaca-morelos-mexico.png")center no-repeat;
	background-size:cover;
	background-clip:content-box;
	border:.5rem dotted #08d665;
	margin-left:-10rem;
}
.circle-2{
	background:url("https://josealberto.online/wp-content/uploads/2022/03/jose-alberto-programador-web-seo-mexico.png")center no-repeat;
	background-size:cover;
	background-clip:content-box;
	border:.5rem dotted #08d665;
	margin-right:-10rem;
}
.circle-3{
	background:url("https://josealberto.online/wp-content/uploads/2022/03/jose-alberto-desarrollador-wordpress-css-html-js-php-en-mexico-morelos-cuernavaca.png")center no-repeat;
	background-size:cover;
	background-clip:content-box;
	border:.5rem dotted #08d665;
	
}
.circle-4{
	background:url("https://josealberto.online/wp-content/uploads/2022/03/jose-alberto-desarrollador-de-sistemas-web-en-cuernavaca-morelos-mexico.png")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 class="container">
		<div class="page-bg">	</div>
		
					<section class="section-1 center">
					<a href="" class="logo programador-morelos">
					<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">	
					</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="https://josealberto.online/wp-content/uploads/2022/02/jose-alberto-xyz-programador-.png" alt="jose alberto programador web en morelos ">
						</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="https://josealberto.mx/wp-content/uploads/2022/10/jose-alberto-desarrollador-web-maxcazino-mexico-programador-web-morelos.jpg" alt="proyecto maxcazino">
				</div>
				
						<div class="project">
					<img src="https://josealberto.mx/wp-content/uploads/2022/10/jose-alberto-programador-web-en-247-apuestas-mexico-morelos-cuernavaca-.png" alt="proyecto maxcazino">
				</div>
				
						<div class="project">
					<img src="https://josealberto.mx/wp-content/uploads/2022/10/jose-alberto-desarrollador-web-en-mexico-cuernavaca-morelos.png" alt="proyecto maxcazino">
				</div>
						<div class="project">
					<img src="https://josealberto.mx/wp-content/uploads/2022/10/jose-alberto-programador-apuestas-247-en-mexico-.png" alt="proyecto maxcazino">
				</div>
				
					<div class="project">
					<img src="https://josealberto.mx/wp-content/uploads/2022/10/jose-alberto-programador-apuestas-247-en-mexico-.png" alt="proyecto maxcazino">
				</div>
				
					<div class="project">
					<img src="https://josealberto.mx/wp-content/uploads/2022/10/jose-alberto-programador-apuestas-247-en-mexico-.png" alt="proyecto maxcazino">
				</div>
				
					<div class="project">
					<img src="https://josealberto.mx/wp-content/uploads/2022/10/jose-alberto-programador-apuestas-247-en-mexico-.png" alt="proyecto maxcazino">
				</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