480 lines
16 KiB
JavaScript
480 lines
16 KiB
JavaScript
// Add animation when social links appear
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const socialLinks = document.querySelectorAll('.social-link');
|
|
const profileImage = document.querySelector('.profile-image img');
|
|
const container = document.querySelector('.container');
|
|
|
|
// Simple key sequences
|
|
const sequences = {
|
|
'wow': {
|
|
message: '🌈 WOW Effect Activated! 🌈',
|
|
effect: () => {
|
|
socialLinks.forEach(link => {
|
|
link.style.transform = 'scale(1.1)';
|
|
setTimeout(() => {
|
|
link.style.transform = 'scale(1)';
|
|
}, 500);
|
|
});
|
|
}
|
|
},
|
|
'fun': {
|
|
message: '🎨 Color Party! 🎨',
|
|
effect: () => {
|
|
document.body.style.animation = 'backgroundParty 3s';
|
|
setTimeout(() => {
|
|
document.body.style.animation = '';
|
|
}, 3000);
|
|
}
|
|
},
|
|
'spin': {
|
|
message: '🌀 Spin Time! 🌀',
|
|
effect: () => {
|
|
socialLinks.forEach((link, i) => {
|
|
setTimeout(() => {
|
|
link.style.transition = 'transform 1s';
|
|
link.style.transform = 'rotate(360deg)';
|
|
setTimeout(() => {
|
|
link.style.transform = 'none';
|
|
}, 1000);
|
|
}, i * 100);
|
|
});
|
|
}
|
|
},
|
|
'boom': {
|
|
message: '💥 Boom Effect! 💥',
|
|
effect: () => {
|
|
for (let i = 0; i < 30; i++) {
|
|
createConfetti();
|
|
}
|
|
}
|
|
},
|
|
'code': {
|
|
message: '🖥️ Enter The Matrix 🖥️',
|
|
effect: () => {
|
|
createMatrixEffect();
|
|
}
|
|
}
|
|
};
|
|
|
|
// Track typed keys
|
|
let typedKeys = '';
|
|
let typingTimer;
|
|
|
|
// Listen for key presses
|
|
document.addEventListener('keypress', (e) => {
|
|
typedKeys += e.key.toLowerCase();
|
|
|
|
// Check each sequence
|
|
Object.entries(sequences).forEach(([sequence, { message, effect }]) => {
|
|
if (typedKeys.includes(sequence)) {
|
|
// Show message
|
|
showMessage(message);
|
|
// Run effect
|
|
effect();
|
|
// Reset typed keys
|
|
typedKeys = '';
|
|
}
|
|
});
|
|
|
|
// Reset after 2 seconds of no typing
|
|
clearTimeout(typingTimer);
|
|
typingTimer = setTimeout(() => {
|
|
typedKeys = '';
|
|
}, 2000);
|
|
|
|
// Keep string at reasonable length
|
|
if (typedKeys.length > 10) {
|
|
typedKeys = typedKeys.slice(-10);
|
|
}
|
|
});
|
|
|
|
function showMessage(text) {
|
|
const message = document.createElement('div');
|
|
message.textContent = text;
|
|
message.style.cssText = `
|
|
position: fixed;
|
|
top: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: rgba(0, 0, 0, 0.8);
|
|
color: white;
|
|
padding: 15px 30px;
|
|
border-radius: 30px;
|
|
font-size: 18px;
|
|
z-index: 1000;
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
`;
|
|
|
|
document.body.appendChild(message);
|
|
|
|
// Fade in
|
|
setTimeout(() => {
|
|
message.style.opacity = '1';
|
|
}, 10);
|
|
|
|
// Remove after 2 seconds
|
|
setTimeout(() => {
|
|
message.style.opacity = '0';
|
|
setTimeout(() => message.remove(), 300);
|
|
}, 2000);
|
|
}
|
|
|
|
// Konami Code Easter Egg
|
|
const konamiCode = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];
|
|
let konamiIndex = 0;
|
|
let partyMode = false;
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
// Check if the pressed key matches the next key in the sequence
|
|
if (e.key === konamiCode[konamiIndex]) {
|
|
konamiIndex++;
|
|
|
|
// If we've matched all keys, activate party mode
|
|
if (konamiIndex === konamiCode.length) {
|
|
activatePartyMode();
|
|
konamiIndex = 0; // Reset the index
|
|
}
|
|
} else {
|
|
konamiIndex = 0; // Reset if wrong key is pressed
|
|
// If the wrong key is the first key of the sequence, start over
|
|
if (e.key === konamiCode[0]) {
|
|
konamiIndex = 1;
|
|
}
|
|
}
|
|
});
|
|
|
|
// Party Mode Easter Egg
|
|
function activatePartyMode() {
|
|
if (partyMode) return;
|
|
partyMode = true;
|
|
|
|
// Add party mode class to body
|
|
document.body.classList.add('party-mode');
|
|
|
|
// Create and add party mode styles
|
|
const partyStyle = document.createElement('style');
|
|
partyStyle.textContent = `
|
|
.party-mode {
|
|
animation: backgroundParty 2s infinite !important;
|
|
}
|
|
|
|
.party-mode .container {
|
|
animation: shake 0.5s infinite !important;
|
|
}
|
|
|
|
.party-mode .social-link {
|
|
animation: rainbow 2s infinite !important;
|
|
}
|
|
|
|
@keyframes backgroundParty {
|
|
0% { background-color: #ff0000; }
|
|
20% { background-color: #00ff00; }
|
|
40% { background-color: #0000ff; }
|
|
60% { background-color: #ff00ff; }
|
|
80% { background-color: #ffff00; }
|
|
100% { background-color: #ff0000; }
|
|
}
|
|
|
|
@keyframes shake {
|
|
0%, 100% { transform: translateX(0); }
|
|
25% { transform: translateX(-5px); }
|
|
75% { transform: translateX(5px); }
|
|
}
|
|
|
|
@keyframes rainbow {
|
|
0% { background: #ff0000; }
|
|
20% { background: #00ff00; }
|
|
40% { background: #0000ff; }
|
|
60% { background: #ff00ff; }
|
|
80% { background: #ffff00; }
|
|
100% { background: #ff0000; }
|
|
}
|
|
`;
|
|
document.head.appendChild(partyStyle);
|
|
|
|
// Create confetti
|
|
for (let i = 0; i < 100; i++) {
|
|
createConfetti();
|
|
}
|
|
|
|
// Show success message
|
|
showMessage('🎉 KONAMI CODE ACTIVATED! 🎉');
|
|
|
|
// Reset after 10 seconds
|
|
setTimeout(() => {
|
|
document.body.classList.remove('party-mode');
|
|
partyMode = false;
|
|
}, 10000);
|
|
}
|
|
|
|
// Profile Image Click Easter Egg
|
|
let clickCount = 0;
|
|
profileImage.addEventListener('click', () => {
|
|
clickCount++;
|
|
if (clickCount === 5) {
|
|
profileImage.style.transform = 'rotate(360deg) scale(1.2)';
|
|
profileImage.style.transition = 'transform 1s ease';
|
|
|
|
setTimeout(() => {
|
|
const sunglasses = document.createElement('div');
|
|
sunglasses.className = 'sunglasses';
|
|
sunglasses.innerHTML = '😎';
|
|
sunglasses.style.position = 'absolute';
|
|
sunglasses.style.top = '50%';
|
|
sunglasses.style.left = '50%';
|
|
sunglasses.style.transform = 'translate(-50%, -50%)';
|
|
sunglasses.style.fontSize = '40px';
|
|
sunglasses.style.opacity = '0';
|
|
sunglasses.style.transition = 'opacity 0.5s ease';
|
|
profileImage.appendChild(sunglasses);
|
|
|
|
setTimeout(() => {
|
|
sunglasses.style.opacity = '1';
|
|
}, 100);
|
|
}, 1000);
|
|
|
|
clickCount = 0;
|
|
}
|
|
});
|
|
|
|
// Create confetti particles
|
|
function createConfetti() {
|
|
const confetti = document.createElement('div');
|
|
confetti.className = 'confetti';
|
|
confetti.style.cssText = `
|
|
position: fixed;
|
|
width: 10px;
|
|
height: 10px;
|
|
background: ${['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff'][Math.floor(Math.random() * 5)]};
|
|
left: ${Math.random() * 100}vw;
|
|
top: -10px;
|
|
opacity: 1;
|
|
transform: rotate(${Math.random() * 360}deg);
|
|
animation: fall ${Math.random() * 3 + 2}s linear;
|
|
`;
|
|
|
|
document.body.appendChild(confetti);
|
|
|
|
confetti.addEventListener('animationend', () => {
|
|
confetti.remove();
|
|
});
|
|
}
|
|
|
|
// Add confetti animation style
|
|
const confettiStyle = document.createElement('style');
|
|
confettiStyle.textContent = `
|
|
@keyframes fall {
|
|
to {
|
|
transform: translateY(100vh) rotate(960deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
`;
|
|
document.head.appendChild(confettiStyle);
|
|
|
|
// Add 3D tilt effect to profile image
|
|
profileImage.parentElement.addEventListener('mousemove', (e) => {
|
|
const rect = profileImage.parentElement.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
|
|
const centerX = rect.width / 2;
|
|
const centerY = rect.height / 2;
|
|
|
|
const angleX = (y - centerY) / 20;
|
|
const angleY = (centerX - x) / 20;
|
|
|
|
profileImage.parentElement.style.transform = `perspective(1000px) rotateX(${angleX}deg) rotateY(${angleY}deg)`;
|
|
});
|
|
|
|
profileImage.parentElement.addEventListener('mouseleave', () => {
|
|
profileImage.parentElement.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)';
|
|
});
|
|
|
|
// Animate social links
|
|
socialLinks.forEach((link, index) => {
|
|
link.style.opacity = '0';
|
|
link.style.transform = 'translateY(20px)';
|
|
|
|
setTimeout(() => {
|
|
link.style.transition = 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)';
|
|
link.style.opacity = '1';
|
|
link.style.transform = 'translateY(0)';
|
|
}, 100 * index);
|
|
|
|
// Add hover effect
|
|
link.addEventListener('mousemove', (e) => {
|
|
const rect = link.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
|
|
const shine = `radial-gradient(circle at ${x}px ${y}px, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 50%)`;
|
|
link.style.background = `${getComputedStyle(link).background}, ${shine}`;
|
|
});
|
|
|
|
link.addEventListener('mouseleave', () => {
|
|
link.style.background = '';
|
|
});
|
|
|
|
// Add click ripple effect
|
|
link.addEventListener('click', function(e) {
|
|
const ripple = document.createElement('div');
|
|
ripple.classList.add('ripple');
|
|
|
|
const rect = link.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
|
|
ripple.style.left = `${x}px`;
|
|
ripple.style.top = `${y}px`;
|
|
|
|
link.appendChild(ripple);
|
|
|
|
setTimeout(() => {
|
|
ripple.remove();
|
|
}, 1000);
|
|
});
|
|
});
|
|
|
|
// Mobile Easter Eggs
|
|
let lastTap = 0;
|
|
|
|
document.querySelector('.profile-image').addEventListener('touchstart', (e) => {
|
|
const now = new Date().getTime();
|
|
const timeSince = now - lastTap;
|
|
|
|
if (timeSince < 300 && timeSince > 0) {
|
|
// Double tap
|
|
e.preventDefault();
|
|
const profileImage = e.target;
|
|
profileImage.style.animation = 'bounce 0.5s ease';
|
|
setTimeout(() => profileImage.style.animation = '', 500);
|
|
}
|
|
|
|
lastTap = now;
|
|
});
|
|
|
|
let touchStartY = 0;
|
|
document.querySelector('.container').addEventListener('touchstart', (e) => {
|
|
touchStartY = e.touches[0].clientY;
|
|
});
|
|
|
|
document.querySelector('.container').addEventListener('touchend', (e) => {
|
|
const touchEndY = e.changedTouches[0].clientY;
|
|
const distance = touchEndY - touchStartY;
|
|
|
|
if (Math.abs(distance) > 100) {
|
|
// Long swipe
|
|
if (distance < 0) {
|
|
// Swipe up - spin effect
|
|
document.querySelector('.profile-image').style.animation = 'spin 1s linear infinite';
|
|
setTimeout(() => document.querySelector('.profile-image').style.animation = '', 2000);
|
|
} else {
|
|
// Swipe down - rainbow effect
|
|
document.querySelector('.container').style.animation = 'rainbow-bg 3s linear';
|
|
setTimeout(() => document.querySelector('.container').style.animation = '', 3000);
|
|
}
|
|
}
|
|
});
|
|
|
|
// Add animations
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes bounce {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-20px); }
|
|
}
|
|
|
|
@keyframes rainbow-bg {
|
|
0% { background: linear-gradient(45deg, #ff0000, #ff8000); }
|
|
20% { background: linear-gradient(45deg, #ff8000, #ffff00); }
|
|
40% { background: linear-gradient(45deg, #ffff00, #00ff00); }
|
|
60% { background: linear-gradient(45deg, #00ff00, #0000ff); }
|
|
80% { background: linear-gradient(45deg, #0000ff, #ff00ff); }
|
|
100% { background: linear-gradient(45deg, #ff00ff, #ff0000); }
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
|
|
// Matrix Effect
|
|
function createMatrixEffect() {
|
|
// Create container if it doesn't exist
|
|
let matrixContainer = document.querySelector('.matrix-container');
|
|
if (!matrixContainer) {
|
|
matrixContainer = document.createElement('div');
|
|
matrixContainer.className = 'matrix-container';
|
|
document.body.appendChild(matrixContainer);
|
|
}
|
|
|
|
// Show container
|
|
matrixContainer.style.display = 'block';
|
|
|
|
// Matrix characters
|
|
const matrixChars = '日ﾊﾐﾋｰｳｼﾅﾓﾆｻﾜﾂｵﾘｱﾎﾃﾏｹﾒｴｶｷﾑﾕﾗｾﾈｽﾀﾇﾍ012345789:・.=*+-<>¦｜╌ﾘ';
|
|
|
|
// Create falling characters
|
|
const createCharacter = () => {
|
|
const character = document.createElement('div');
|
|
character.className = 'matrix-character';
|
|
character.style.left = Math.random() * 100 + 'vw';
|
|
character.style.animationDuration = (Math.random() * 2 + 1) + 's';
|
|
character.textContent = matrixChars[Math.floor(Math.random() * matrixChars.length)];
|
|
matrixContainer.appendChild(character);
|
|
|
|
// Remove character after animation
|
|
character.addEventListener('animationend', () => {
|
|
character.remove();
|
|
});
|
|
};
|
|
|
|
// Create characters continuously
|
|
const interval = setInterval(() => {
|
|
for (let i = 0; i < 5; i++) {
|
|
createCharacter();
|
|
}
|
|
}, 100);
|
|
|
|
// Stop after 5 seconds
|
|
setTimeout(() => {
|
|
clearInterval(interval);
|
|
setTimeout(() => {
|
|
matrixContainer.style.display = 'none';
|
|
matrixContainer.innerHTML = '';
|
|
}, 2000);
|
|
}, 5000);
|
|
}
|
|
});
|
|
|
|
// Add ripple effect styles
|
|
const rippleStyle = document.createElement('style');
|
|
rippleStyle.textContent = `
|
|
.social-link {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ripple {
|
|
position: absolute;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
width: 100px;
|
|
height: 100px;
|
|
transform: translate(-50%, -50%) scale(0);
|
|
animation: ripple 1s linear;
|
|
}
|
|
|
|
@keyframes ripple {
|
|
to {
|
|
transform: translate(-50%, -50%) scale(4);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
`;
|
|
document.head.appendChild(rippleStyle);
|