codewithgarry
Version:
Girish Sharma's NPX business card - DevOps Engineer & Cloud Architect - Connect with me directly via terminal!
1,054 lines (921 loc) • 40.9 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CodeWithGary - Advanced Business Card</title>
<!-- Security Headers -->
<meta http-equiv="X-Content-Type-Options" content="nosniff">
<meta http-equiv="X-Frame-Options" content="SAMEORIGIN">
<meta http-equiv="X-XSS-Protection" content="1; mode=block">
<meta name="referrer" content="strict-origin-when-cross-origin">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com; style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com https://cdnjs.cloudflare.com; img-src 'self' data: https:; connect-src 'self' https://api.github.com; object-src 'none'; base-uri 'self'; form-action 'self'; upgrade-insecure-requests;">
<!-- Preload critical resources for faster loading -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://cdnjs.cloudflare.com">
<link rel="dns-prefetch" href="https://api.github.com">
<style>
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;600;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: linear-gradient(45deg, #0c0c0c, #1a1a2e, #16213e, #0f3460);
background-size: 400% 400%;
animation: gradientShift 15s ease infinite;
color: #00ff00;
font-family: 'Fira Code', monospace;
min-height: 100vh;
overflow-x: hidden;
position: relative;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Particle System */
.particles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
.particle {
position: absolute;
background: #00ff00;
border-radius: 50%;
animation: float 20s infinite linear;
opacity: 0.7;
}
@keyframes float {
0% {
transform: translateY(100vh) rotate(0deg);
opacity: 0;
}
10% {
opacity: 0.7;
}
90% {
opacity: 0.7;
}
100% {
transform: translateY(-100px) rotate(360deg);
opacity: 0;
}
}
/* Matrix rain effect */
.matrix-rain {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
opacity: 0.1;
}
.matrix-column {
position: absolute;
color: #00ff00;
font-size: 14px;
line-height: 14px;
animation: matrixFall 10s linear infinite;
}
@keyframes matrixFall {
to {
transform: translateY(100vh);
}
}
/* Main container */
.container {
position: relative;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 20px;
}
.terminal {
background: rgba(0, 0, 0, 0.9);
border: 3px solid #00ff00;
border-radius: 15px;
padding: 40px;
max-width: 900px;
width: 100%;
box-shadow:
0 0 50px rgba(0, 255, 0, 0.3),
inset 0 0 30px rgba(0, 255, 0, 0.1);
backdrop-filter: blur(10px);
animation: terminalGlow 4s ease-in-out infinite alternate;
position: relative;
overflow: hidden;
}
@keyframes terminalGlow {
0% { box-shadow: 0 0 50px rgba(0, 255, 0, 0.3), inset 0 0 30px rgba(0, 255, 0, 0.1); }
100% { box-shadow: 0 0 80px rgba(0, 255, 0, 0.5), inset 0 0 50px rgba(0, 255, 0, 0.2); }
}
.terminal::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0, 255, 0, 0.2), transparent);
animation: scan 3s linear infinite;
}
@keyframes scan {
0% { left: -100%; }
100% { left: 100%; }
}
.terminal-header {
background: linear-gradient(45deg, #333, #555);
margin: -40px -40px 30px -40px;
padding: 15px 25px;
border-radius: 12px 12px 0 0;
border-bottom: 2px solid #00ff00;
display: flex;
align-items: center;
gap: 10px;
}
.terminal-controls {
display: flex;
gap: 5px;
}
.control-btn {
width: 12px;
height: 12px;
border-radius: 50%;
background: #ff5f56;
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.control-btn:nth-child(2) { background: #ffbd2e; }
.control-btn:nth-child(3) { background: #27ca3f; }
.control-btn:hover { transform: scale(1.2); }
.terminal-title {
color: #fff;
font-size: 16px;
font-weight: 600;
margin-left: 15px;
}
.ascii-art {
color: #00bfff;
font-size: 10px;
line-height: 1.1;
text-align: center;
margin-bottom: 30px;
white-space: pre;
background: linear-gradient(45deg, #00ff00, #00bfff, #ff00ff, #ffff00);
background-size: 400% 400%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: rainbowText 5s ease infinite;
}
@keyframes rainbowText {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.card-content {
line-height: 2;
position: relative;
}
.name {
color: #00ff00;
font-weight: 700;
font-size: 24px;
text-shadow: 0 0 10px #00ff00;
animation: pulse 2s ease-in-out infinite alternate;
}
@keyframes pulse {
0% { text-shadow: 0 0 10px #00ff00; }
100% { text-shadow: 0 0 20px #00ff00, 0 0 30px #00ff00; }
}
.handle {
color: #fff;
font-weight: 400;
}
.title {
color: #ffff00;
margin-bottom: 25px;
font-weight: 600;
background: linear-gradient(45deg, #ffff00, #ff8c00);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.contact-info {
margin-bottom: 25px;
}
.contact-row {
display: flex;
align-items: center;
margin-bottom: 8px;
padding: 5px;
border-radius: 5px;
transition: all 0.3s ease;
}
.contact-row:hover {
background: rgba(0, 255, 0, 0.1);
transform: translateX(10px);
}
.label {
color: #fff;
font-weight: 600;
display: inline-block;
width: 120px;
}
.value {
color: #ccc;
transition: color 0.3s ease;
}
.contact-row:hover .value {
color: #00ff00;
}
.skills {
color: #00bfff;
font-weight: 500;
}
.fun-fact {
color: #ff00ff;
margin-bottom: 25px;
font-weight: 500;
}
.stats-section {
background: rgba(0, 255, 0, 0.05);
border: 1px solid rgba(0, 255, 0, 0.3);
border-radius: 10px;
padding: 15px;
margin: 20px 0;
}
.stat-item {
display: flex;
justify-content: space-between;
margin-bottom: 5px;
}
.links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
margin-top: 30px;
}
.link-button {
background: linear-gradient(45deg, #1a1a2e, #16213e);
border: 2px solid #00ff00;
color: #00ff00;
padding: 15px 25px;
text-decoration: none;
border-radius: 10px;
text-align: center;
transition: all 0.4s ease;
cursor: pointer;
font-weight: 600;
position: relative;
overflow: hidden;
}
.link-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0, 255, 0, 0.2), transparent);
transition: left 0.5s;
}
.link-button:hover::before {
left: 100%;
}
.link-button:hover {
background: linear-gradient(45deg, #00ff00, #00cc00);
color: #000;
box-shadow: 0 0 25px rgba(0, 255, 0, 0.7);
transform: translateY(-3px) scale(1.02);
}
.npx-command {
background: linear-gradient(45deg, #333, #444);
border: 2px solid #00ff00;
padding: 20px;
margin-top: 25px;
border-radius: 10px;
text-align: center;
position: relative;
}
.npx-text {
color: #00ff00;
font-size: 18px;
font-weight: 700;
font-family: 'Fira Code', monospace;
}
.copy-btn {
background: linear-gradient(45deg, #00ff00, #00cc00);
color: #000;
border: none;
padding: 8px 20px;
margin-left: 15px;
border-radius: 5px;
cursor: pointer;
font-family: inherit;
font-weight: 600;
transition: all 0.3s ease;
}
.copy-btn:hover {
background: linear-gradient(45deg, #00cc00, #009900);
transform: scale(1.1);
}
.note {
color: #888;
font-style: italic;
text-align: center;
margin-top: 25px;
line-height: 1.6;
}
.floating-icons {
position: absolute;
top: 20px;
right: 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
.floating-icon {
width: 40px;
height: 40px;
background: rgba(0, 255, 0, 0.1);
border: 1px solid #00ff00;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #00ff00;
font-size: 16px;
animation: float-icon 3s ease-in-out infinite;
cursor: pointer;
transition: all 0.3s ease;
}
.floating-icon:nth-child(odd) {
animation-delay: 1s;
}
.floating-icon:hover {
background: rgba(0, 255, 0, 0.3);
transform: scale(1.2);
}
@keyframes float-icon {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
/* Loading animation */
.loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
transition: opacity 0.5s ease;
}
.loading-text {
color: #00ff00;
font-size: 24px;
animation: loadingPulse 1.5s ease-in-out infinite;
}
@keyframes loadingPulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
/* Responsive design */
@media (max-width: 768px) {
.terminal {
margin: 10px;
padding: 20px;
}
.ascii-art {
font-size: 8px;
}
.links {
grid-template-columns: 1fr;
}
.floating-icons {
display: none;
}
}
</style>
</head>
<body>
<!-- Loading screen -->
<div class="loading" id="loading">
<div class="loading-text">Initializing Girish's DevOps Terminal...</div>
</div>
<!-- Particle system -->
<div class="particles" id="particles"></div>
<!-- Matrix rain -->
<div class="matrix-rain" id="matrixRain"></div>
<div class="container">
<div class="terminal" id="terminal">
<div class="terminal-header">
<div class="terminal-controls">
<button class="control-btn" onclick="minimizeTerminal()" title="Minimize"></button>
<button class="control-btn" onclick="maximizeTerminal()" title="Maximize"></button>
<button class="control-btn" onclick="closeTerminal()" title="Close"></button>
</div>
<div class="terminal-title">
<i class="fas fa-terminal"></i>
CodeWithGary v2.0 - Advanced NPX Business Card
</div>
</div>
<!-- Floating action icons -->
<div class="floating-icons">
<div class="floating-icon" onclick="toggleTheme()" title="Toggle Theme">
<i class="fas fa-palette"></i>
</div>
<div class="floating-icon" onclick="toggleParticles()" title="Toggle Particles">
<i class="fas fa-star"></i>
</div>
<div class="floating-icon" onclick="toggleMatrix()" title="Toggle Matrix">
<i class="fas fa-code"></i>
</div>
<div class="floating-icon" onclick="playSound()" title="Sound Effects">
<i class="fas fa-volume-up"></i>
</div>
</div>
<div class="ascii-art" id="asciiArt">
██████╗ ██╗██████╗ ██╗███████╗██╗ ██╗ ███████╗██╗ ██╗ █████╗ ██████╗ ███╗ ███╗ █████╗
██╔════╝ ██║██╔══██╗██║██╔════╝██║ ██║ ██╔════╝██║ ██║██╔══██╗██╔══██╗████╗ ████║██╔══██╗
██║ ███╗██║██████╔╝██║███████╗███████║ ███████╗███████║███████║██████╔╝██╔████╔██║███████║
██║ ██║██║██╔══██╗██║╚════██║██╔══██║ ╚════██║██╔══██║██╔══██║██╔══██╗██║╚██╔╝██║██╔══██║
╚██████╔╝██║██║ ██║██║███████║██║ ██║ ███████║██║ ██║██║ ██║██║ ██║██║ ╚═╝ ██║██║ ██║
╚═════╝ ╚═╝╚═╝ ╚═╝╚═╝╚══════╝╚═╝ ╚═╝ ╚══════╝╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═╝
</div>
<div class="card-content">
<div class="name">Girish Sharma</div>
<div class="handle">@codewithgarry</div>
<div class="title">DevOps Engineer | Cloud Architect | Full Stack Developer</div>
<div class="contact-info">
<div class="contact-row">
<span class="label"><i class="fas fa-envelope"></i> Email:</span>
<span class="value">devops.girishsharma@gmail.com</span>
</div>
<div class="contact-row">
<span class="label"><i class="fab fa-twitter"></i> Twitter:</span>
<span class="value">https://twitter.com/codewithgarry</span>
</div>
<div class="contact-row">
<span class="label"><i class="fab fa-github"></i> GitHub:</span>
<span class="value">https://github.com/codewithgarry</span>
</div>
<div class="contact-row">
<span class="label"><i class="fab fa-linkedin"></i> LinkedIn:</span>
<span class="value">https://linkedin.com/in/codewithgarry</span>
</div>
<div class="contact-row">
<span class="label"><i class="fas fa-globe"></i> Website:</span>
<span class="value">https://codewithgarry.com</span>
</div>
<div class="contact-row">
<span class="label"><i class="fab fa-youtube"></i> YouTube:</span>
<span class="value">https://youtube.com/@codewithgarry</span>
</div>
</div>
<div class="contact-row">
<span class="label"><i class="fas fa-code"></i> Skills:</span>
<span class="skills">Kubernetes • GCP • Azure • Terraform • Ansible • Node.js • React • JavaScript • KQL • PromQL</span>
</div>
<div class="fun-fact">
<span class="label"><i class="fas fa-lightbulb"></i> Fun Fact:</span>
💡 "Infrastructure as Code is poetry written in automation!"
</div>
<!-- Live Stats Section -->
<div class="stats-section" id="statsSection">
<h3 style="color: #00ff00; margin-bottom: 10px;">
<i class="fas fa-chart-bar"></i> Live Coding Stats
</h3>
<div class="stat-item">
<span>GitHub Repos:</span>
<span id="repoCount">Loading...</span>
</div>
<div class="stat-item">
<span>Followers:</span>
<span id="followerCount">Loading...</span>
</div>
<div class="stat-item">
<span>Coffee Consumed:</span>
<span id="coffeeCount">∞ cups</span>
</div>
<div class="stat-item">
<span>Current Time:</span>
<span id="currentTime">--:--</span>
</div>
<div class="stat-item">
<span>Visitors Today:</span>
<span id="visitorCount">1</span>
</div>
</div>
<div class="npx-command">
<div>🚀 For the full interactive terminal experience:</div>
<span class="npx-text">npx codewithgarry</span>
<button class="copy-btn" onclick="copyToClipboard('npx codewithgarry')">
<i class="fas fa-copy"></i> Copy
</button>
</div>
<div class="links">
<a href="mailto:devops.girishsharma@gmail.com" class="link-button">
<i class="fas fa-envelope"></i> Send Email
</a>
<a href="https://twitter.com/codewithgarry" target="_blank" class="link-button">
<i class="fab fa-twitter"></i> Follow on Twitter
</a>
<a href="https://github.com/codewithgarry" target="_blank" class="link-button">
<i class="fab fa-github"></i> Visit GitHub
</a>
<a href="https://linkedin.com/in/codewithgarry" target="_blank" class="link-button">
<i class="fab fa-linkedin"></i> Connect on LinkedIn
</a>
<a href="https://codewithgarry.com" target="_blank" class="link-button">
<i class="fas fa-globe"></i> Visit Website
</a>
<a href="https://youtube.com/@codewithgarry" target="_blank" class="link-button">
<i class="fab fa-youtube"></i> Subscribe to YouTube
</a>
</div>
<div class="note">
<i class="fas fa-info-circle"></i>
No Node.js? No problem! This advanced web version works in any modern browser.<br>
<strong>Pro tip:</strong> Try the floating controls for extra features!
Want the full experience? Install Node.js from
<a href="https://nodejs.org" target="_blank" style="color: #00ff00;">nodejs.org</a>
</div>
</div>
</div>
</div>
<script>
// Advanced Interactive Features
let currentTheme = 'matrix';
let particlesEnabled = true;
let matrixEnabled = true;
let soundEnabled = true;
let visitorCount = Math.floor(Math.random() * 1000) + 1;
// Initialize everything when page loads
document.addEventListener('DOMContentLoaded', function() {
// Start initialization immediately
initializeCard();
startRealTimeClock();
// Use requestAnimationFrame for smooth performance
requestAnimationFrame(() => {
createParticles();
createMatrixRain();
});
// Load stats asynchronously to not block UI
setTimeout(() => {
updateStats();
}, 100);
// Remove loading screen much faster
setTimeout(() => {
const loading = document.getElementById('loading');
if (loading) {
loading.style.opacity = '0';
setTimeout(() => loading.remove(), 300);
}
}, 800);
// Animate terminal appearance much faster
const terminal = document.getElementById('terminal');
terminal.style.opacity = '0';
terminal.style.transform = 'translateY(30px) scale(0.95)';
setTimeout(() => {
terminal.style.transition = 'all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55)';
terminal.style.opacity = '1';
terminal.style.transform = 'translateY(0) scale(1)';
}, 900);
});
// Particle system - optimized for performance
function createParticles() {
const container = document.getElementById('particles');
container.innerHTML = '';
if (!particlesEnabled) return;
// Reduce particle count for better performance
const particleCount = window.innerWidth < 768 ? 20 : 35;
const fragment = document.createDocumentFragment();
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
particle.style.left = Math.random() * 100 + '%';
particle.style.width = particle.style.height = Math.random() * 3 + 1.5 + 'px';
particle.style.animationDelay = Math.random() * 15 + 's';
particle.style.animationDuration = (Math.random() * 10 + 8) + 's';
fragment.appendChild(particle);
}
container.appendChild(fragment);
}
// Matrix rain effect - optimized for performance
function createMatrixRain() {
const container = document.getElementById('matrixRain');
container.innerHTML = '';
if (!matrixEnabled) return;
const chars = '01'; // Simplified to just binary for better performance
const columns = Math.floor(window.innerWidth / 25); // Fewer columns
const fragment = document.createDocumentFragment();
for (let i = 0; i < Math.min(columns, 40); i++) { // Cap at 40 columns
const column = document.createElement('div');
column.className = 'matrix-column';
column.style.left = (i * 25) + 'px';
column.style.animationDelay = Math.random() * 8 + 's';
let text = '';
for (let j = 0; j < 30; j++) { // Reduced from 50 to 30
text += chars[Math.floor(Math.random() * chars.length)] + '<br>';
}
column.innerHTML = text;
fragment.appendChild(column);
}
container.appendChild(fragment);
}
// GitHub stats fetcher
async function updateStats() {
try {
const response = await fetch('https://api.github.com/users/codewithgarry');
const data = await response.json();
document.getElementById('repoCount').textContent = data.public_repos || '50+';
document.getElementById('followerCount').textContent = data.followers || '1K+';
} catch (error) {
document.getElementById('repoCount').textContent = '50+';
document.getElementById('followerCount').textContent = '1K+';
}
// Update visitor count
document.getElementById('visitorCount').textContent = visitorCount;
}
// Real-time clock
function startRealTimeClock() {
function updateClock() {
const now = new Date();
const timeString = now.toLocaleTimeString();
document.getElementById('currentTime').textContent = timeString;
}
updateClock();
setInterval(updateClock, 1000);
}
// Theme switcher
function toggleTheme() {
const themes = ['matrix', 'ocean', 'sunset', 'neon'];
const currentIndex = themes.indexOf(currentTheme);
currentTheme = themes[(currentIndex + 1) % themes.length];
const body = document.body;
const terminal = document.querySelector('.terminal');
switch(currentTheme) {
case 'matrix':
body.style.background = 'linear-gradient(45deg, #0c0c0c, #1a1a2e, #16213e, #0f3460)';
terminal.style.borderColor = '#00ff00';
break;
case 'ocean':
body.style.background = 'linear-gradient(45deg, #001122, #003366, #004488, #0066aa)';
terminal.style.borderColor = '#00aaff';
break;
case 'sunset':
body.style.background = 'linear-gradient(45deg, #2c1810, #4a2c2a, #8b4513, #ff6347)';
terminal.style.borderColor = '#ff8c00';
break;
case 'neon':
body.style.background = 'linear-gradient(45deg, #0a0a0a, #ff00ff, #00ffff, #ffff00)';
terminal.style.borderColor = '#ff00ff';
break;
}
playSound('theme');
showNotification(`Theme changed to ${currentTheme}!`);
}
// Particle toggle
function toggleParticles() {
particlesEnabled = !particlesEnabled;
createParticles();
playSound('toggle');
showNotification(`Particles ${particlesEnabled ? 'enabled' : 'disabled'}!`);
}
// Matrix toggle
function toggleMatrix() {
matrixEnabled = !matrixEnabled;
createMatrixRain();
playSound('toggle');
showNotification(`Matrix rain ${matrixEnabled ? 'enabled' : 'disabled'}!`);
}
// Sound effects
function playSound(type = 'click') {
if (!soundEnabled) return;
try {
// Create audio context for Web Audio API
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
switch(type) {
case 'click':
oscillator.frequency.setValueAtTime(800, audioContext.currentTime);
gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);
break;
case 'theme':
oscillator.frequency.setValueAtTime(400, audioContext.currentTime);
oscillator.frequency.exponentialRampToValueAtTime(800, audioContext.currentTime + 0.3);
gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);
break;
case 'toggle':
oscillator.frequency.setValueAtTime(600, audioContext.currentTime);
gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.15);
break;
}
oscillator.start(audioContext.currentTime);
oscillator.stop(audioContext.currentTime + 0.3);
} catch (error) {
console.log('Audio not supported in this browser');
}
}
// Terminal controls
function minimizeTerminal() {
const terminal = document.querySelector('.terminal');
terminal.style.transform = 'scale(0.1)';
terminal.style.opacity = '0.5';
playSound();
setTimeout(() => {
terminal.style.transform = 'scale(1)';
terminal.style.opacity = '1';
}, 1000);
}
function maximizeTerminal() {
const terminal = document.querySelector('.terminal');
terminal.style.transform = 'scale(1.1)';
playSound();
setTimeout(() => {
terminal.style.transform = 'scale(1)';
}, 500);
}
function closeTerminal() {
if (confirm('Are you sure you want to close the terminal?')) {
const terminal = document.querySelector('.terminal');
terminal.style.transform = 'rotateY(90deg)';
terminal.style.opacity = '0';
playSound();
setTimeout(() => {
document.body.innerHTML = `
<div style="display: flex; align-items: center; justify-content: center; height: 100vh; color: #00ff00; font-family: 'Fira Code', monospace; text-align: center;">
<div>
<h1>Terminal Closed</h1>
<p>Thanks for visiting CodeWithGary!</p>
<button onclick="location.reload()" style="margin-top: 20px; padding: 10px 20px; background: #00ff00; color: #000; border: none; border-radius: 5px; cursor: pointer;">Restart Terminal</button>
</div>
</div>
`;
}, 500);
}
}
// Copy to clipboard with advanced feedback
function copyToClipboard(text) {
navigator.clipboard.writeText(text).then(function() {
const btn = event.target;
const originalHTML = btn.innerHTML;
btn.innerHTML = '<i class="fas fa-check"></i> Copied!';
btn.style.background = 'linear-gradient(45deg, #00cc00, #009900)';
playSound('click');
// Advanced notification
showNotification('Command copied to clipboard! 🚀', 'success');
setTimeout(() => {
btn.innerHTML = originalHTML;
btn.style.background = 'linear-gradient(45deg, #00ff00, #00cc00)';
}, 2000);
}).catch(function() {
// Fallback for older browsers
const textArea = document.createElement('textarea');
textArea.value = text;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
showNotification('Command copied! (fallback method)', 'info');
});
}
// Advanced notification system
function showNotification(message, type = 'info') {
const notification = document.createElement('div');
notification.innerHTML = `
<i class="fas fa-${type === 'success' ? 'check-circle' : 'info-circle'}"></i>
${message}
`;
notification.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
background: rgba(0, 0, 0, 0.9);
color: ${type === 'success' ? '#00ff00' : '#00aaff'};
padding: 15px 20px;
border-radius: 10px;
border: 1px solid ${type === 'success' ? '#00ff00' : '#00aaff'};
z-index: 1000;
font-family: 'Fira Code', monospace;
animation: slideIn 0.5s ease;
box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
`;
document.body.appendChild(notification);
setTimeout(() => {
notification.style.animation = 'slideOut 0.5s ease';
setTimeout(() => notification.remove(), 500);
}, 3000);
}
// Easter eggs and secret commands
let konamiCode = [];
const konamiSequence = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'KeyB', 'KeyA'];
document.addEventListener('keydown', function(e) {
konamiCode.push(e.code);
if (konamiCode.length > konamiSequence.length) {
konamiCode.shift();
}
if (JSON.stringify(konamiCode) === JSON.stringify(konamiSequence)) {
activateKonamiCode();
konamiCode = [];
}
});
function activateKonamiCode() {
showNotification('🎮 KONAMI CODE ACTIVATED! 🎮', 'success');
document.body.style.animation = 'rainbow 2s linear infinite';
playSound('theme');
// Add rainbow effect
const style = document.createElement('style');
style.innerHTML = `
@keyframes rainbow {
0% { filter: hue-rotate(0deg); }
100% { filter: hue-rotate(360deg); }
}
`;
document.head.appendChild(style);
setTimeout(() => {
document.body.style.animation = '';
style.remove();
}, 5000);
}
// Initialize card with faster typing effect
function initializeCard() {
const nameElement = document.querySelector('.name');
const originalText = nameElement.textContent;
nameElement.textContent = '';
let i = 0;
const typeInterval = setInterval(() => {
nameElement.textContent += originalText[i];
// Reduced sound frequency for better performance
if (i % 2 === 0) playSound('click');
i++;
if (i >= originalText.length) {
clearInterval(typeInterval);
}
}, 60); // Faster typing - reduced from 100ms to 60ms
}
// Add CSS animations
const styleSheet = document.createElement('style');
styleSheet.innerHTML = `
@keyframes slideIn {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOut {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(100%); opacity: 0; }
}
`;
document.head.appendChild(styleSheet);
// Responsive particle count
window.addEventListener('resize', () => {
createParticles();
createMatrixRain();
});
// Add hover effects to all interactive elements
document.querySelectorAll('.link-button, .copy-btn, .floating-icon').forEach(element => {
element.addEventListener('mouseenter', () => playSound('click'));
});
// Security enforcement
function enforceHTTPS() {
if (window.location.protocol === 'http:' &&
window.location.hostname !== 'localhost' &&
window.location.hostname !== '127.0.0.1') {
console.log('🔒 Redirecting to HTTPS...');
window.location.replace(window.location.href.replace('http:', 'https:'));
}
}
// Initialize security
enforceHTTPS();
console.log('%c🚀 CodeWithGary Advanced NPX Card loaded!', 'color: #00ff00; font-size: 20px; font-weight: bold;');
console.log('%c🔒 Security measures active', 'color: #ffff00; font-weight: bold;');
console.log('%cTry the Konami Code: ↑↑↓↓←→←→BA', 'color: #00aaff;');
</script>
<!-- Load security configuration -->
<script src="security.js" defer></script>
</body>
</html>