Skip to content

Instantly share code, notes, and snippets.

@VitalyErmilov

VitalyErmilov/cv-cyber-hacker.markdown

Created August 16, 2025 22:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save VitalyErmilov/8350621dbc3f5328ef6c2e7b55ddaf89 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save VitalyErmilov/8350621dbc3f5328ef6c2e7b55ddaf89 to your computer and use it in GitHub Desktop.
Download ZIP
CV Cyber Hacker
Raw
index.html
<!DOCTYPE html>
<html lang="en" {IF CLASSES}class="classes"{/IF}>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CyberHacker - Digital Portfolio</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700;800&family=Orbitron:wght@400;500;600;700;800;900&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- Matrix Rain Background Canvas -->
<canvas id="matrix-canvas" class="matrix-canvas"></canvas>
<!-- Scanlines Overlay -->
<div class="scanlines-overlay">
<div class="scanline"></div>
</div>
<!-- Grid Pattern Overlay -->
<div class="grid-overlay"></div>
<!-- Main Container -->
<main class="main-container">
<!-- Hero Section -->
<section id="hero" class="hero-section">
<div class="hero-content">
<!-- Left Side - Avatar and Info -->
<div class="hero-left">
<!-- Avatar -->
<div class="avatar-container">
<div class="avatar-outer-ring">
<div class="avatar-inner">
<div class="avatar-face">
<div class="avatar-pattern"></div>
<div class="avatar-eyes">
<div class="eye left"></div>
<div class="eye right"></div>
</div>
<div class="avatar-center-glow"></div>
</div>
<div class="avatar-scanline"></div>
<div class="avatar-glitch"></div>
<!-- Corner brackets -->
<div class="bracket top-left"></div>
<div class="bracket top-right"></div>
<div class="bracket bottom-left"></div>
<div class="bracket bottom-right"></div>
<!-- Rotating ring -->
<div class="rotating-ring">
<div class="ring-dot top"></div>
<div class="ring-dot bottom"></div>
</div>
</div>
</div>
<!-- Status indicator -->
<div class="status-indicator">
<div class="status-dot"></div>
<span class="status-text">ONLINE</span>
</div>
<!-- Data streams -->
<div class="data-streams top">
<div class="stream"></div>
<div class="stream"></div>
<div class="stream"></div>
<div class="stream"></div>
<div class="stream"></div>
</div>
<div class="data-streams bottom">
<div class="stream"></div>
<div class="stream"></div>
<div class="stream"></div>
<div class="stream"></div>
<div class="stream"></div>
</div>
<!-- Holographic info panel -->
<div class="holo-info hidden">
<div class="holo-content">
<div class="holo-title glitch-text">IDENTITY CONFIRMED</div>
<div class="holo-clearance">CLEARANCE: LEVEL 9</div>
<div class="holo-status">STATUS: ACTIVE</div>
</div>
<div class="holo-arrow"></div>
</div>
</div>
<!-- Name and Title -->
<div class="hero-info">
<h1 class="hero-title">
<span class="glitch-text" data-text="CYBER">CYBER</span>
<br />
<span class="neon-glow primary">HACKER</span>
</h1>
<div class="hero-subtitle">
<p class="role">Full-Stack Developer</p>
<p class="specialization">
Digital Architect & Security Expert
</p>
</div>
<!-- Status Indicators -->
<div class="status-badges">
<div class="status-badge success">
<div class="badge-dot"></div>
<span>Available for hire</span>
</div>
<div class="status-badge secondary">
<div class="badge-dot"></div>
<span>Remote friendly</span>
</div>
</div>
<!-- Quick Stats -->
<div class="stats-grid">
<div class="stat">
<div class="stat-number primary">5+</div>
<div class="stat-label">Years Experience</div>
</div>
<div class="stat">
<div class="stat-number secondary">50+</div>
<div class="stat-label">Projects Completed</div>
</div>
<div class="stat">
<div class="stat-number accent">100+</div>
<div class="stat-label">Security Audits</div>
</div>
</div>
</div>
</div>
<!-- Right Side - Navigation -->
<div class="hero-right">
<div class="nav-buttons">
<button class="nav-btn active" data-section="terminal">
<span class="nav-icon">⌨️</span>
<div class="nav-content">
<div class="nav-title glitch-text">TERMINAL</div>
<div class="nav-description">
Interactive command interface
</div>
</div>
</button>
<button class="nav-btn" data-section="about">
<span class="nav-icon">👤</span>
<div class="nav-content">
<div class="nav-title glitch-text">ABOUT</div>
<div class="nav-description">Personal information</div>
</div>
</button>
<button class="nav-btn" data-section="skills">
<span class="nav-icon">🛠️</span>
<div class="nav-content">
<div class="nav-title glitch-text">SKILLS</div>
<div class="nav-description">Technical expertise</div>
</div>
</button>
<button class="nav-btn" data-section="experience">
<span class="nav-icon">💼</span>
<div class="nav-content">
<div class="nav-title glitch-text">EXPERIENCE</div>
<div class="nav-description">Career timeline</div>
</div>
</button>
<button class="nav-btn" data-section="contact">
<span class="nav-icon">📡</span>
<div class="nav-content">
<div class="nav-title glitch-text">CONTACT</div>
<div class="nav-description">Get in touch</div>
</div>
</button>
</div>
<!-- Quick Contact Buttons -->
<div class="quick-contact">
<a href="mailto:hacker@cybermatrix.dev" class="contact-btn">
<div class="contact-icon">📧</div>
<div class="contact-label">EMAIL</div>
</a>
<a
href="https://github.com/cyber-hacker"
target="_blank"
class="contact-btn"
>
<div class="contact-icon">🐙</div>
<div class="contact-label">GITHUB</div>
</a>
</div>
</div>
</div>
</section>
<!-- Content Sections -->
<div class="content-sections">
<!-- Terminal Section -->
<section id="terminal-section" class="content-section active">
<div class="section-container">
<div class="section-header">
<h2 class="section-title glitch-text">TERMINAL INTERFACE</h2>
<p class="section-description">
Interactive command-line interface to explore my portfolio
</p>
</div>
<div class="terminal-container">
<div class="terminal">
<!-- Terminal Header -->
<div class="terminal-header">
<div class="terminal-controls">
<div class="control-btn close"></div>
<div class="control-btn minimize"></div>
<div class="control-btn maximize"></div>
</div>
<div class="terminal-title">
hacker@cyber-matrix:~/portfolio
</div>
<div class="terminal-time"></div>
</div>
<!-- Terminal Content -->
<div class="terminal-content" id="terminal-content">
<div class="terminal-line info">
Welcome to CyberMatrix Terminal v2.1.337
</div>
<div class="terminal-line info">
Type "help" to see available commands.
</div>
<div class="terminal-line info"></div>
</div>
<!-- Terminal Input -->
<div class="terminal-input-line">
<span class="terminal-prompt"
>hacker@cyber-matrix:~/portfolio$</span
>
<input
type="text"
id="terminal-input"
class="terminal-input"
autocomplete="off"
spellcheck="false"
/>
<span class="terminal-cursor">▋</span>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about-section" class="content-section">
<div class="section-container">
<div class="section-header">
<h2 class="section-title glitch-text">ABOUT ME</h2>
</div>
<div class="about-content neon-box">
<div class="about-text">
<p>
I am a passionate software engineer who thrives at the
intersection of creativity and code. With expertise spanning
multiple programming languages and frameworks, I build digital
experiences that push boundaries and challenge conventions.
</p>
<p>
When I'm not crafting code, you can find me exploring the
latest technologies, contributing to open source projects, or
reverse-engineering complex systems. I believe in the power of
technology to transform ideas into reality.
</p>
</div>
<div class="about-details">
<div class="detail-column">
<h3 class="detail-title secondary">SPECIALIZATIONS</h3>
<ul class="detail-list">
<li>• Full-Stack Web Development</li>
<li>• Cybersecurity & Penetration Testing</li>
<li>• Cloud Architecture & DevOps</li>
<li>• Machine Learning & AI</li>
</ul>
</div>
<div class="detail-column">
<h3 class="detail-title accent">INTERESTS</h3>
<ul class="detail-list">
<li>• Blockchain & Web3 Technologies</li>
<li>• Quantum Computing Research</li>
<li>• Open Source Contributions</li>
<li>• Ethical Hacking & CTF Competitions</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Skills Section -->
<section id="skills-section" class="content-section">
<div class="section-container">
<div class="section-header">
<h2 class="section-title glitch-text">SKILL MATRIX</h2>
<p class="section-description">
Technical expertise across the full stack
</p>
</div>
<!-- Category Filters -->
<div class="skill-filters">
<button class="filter-btn active" data-category="all">
ALL SKILLS
</button>
<button class="filter-btn" data-category="frontend">
FRONTEND
</button>
<button class="filter-btn" data-category="backend">
BACKEND
</button>
<button class="filter-btn" data-category="devops">DEVOPS</button>
<button class="filter-btn" data-category="security">
SECURITY
</button>
<button class="filter-btn" data-category="other">
EMERGING TECH
</button>
</div>
<!-- Skills Grid -->
<div class="skills-grid" id="skills-grid">
<!-- Skills will be dynamically generated by JavaScript -->
</div>
<!-- Legend -->
<div class="skills-legend">
<div class="legend-item">
<div class="legend-dot expert"></div>
<span>Expert (90%+)</span>
</div>
<div class="legend-item">
<div class="legend-dot advanced"></div>
<span>Advanced (80-89%)</span>
</div>
<div class="legend-item">
<div class="legend-dot intermediate"></div>
<span>Intermediate (70-79%)</span>
</div>
<div class="legend-item">
<div class="legend-dot learning"></div>
<span>Learning (&lt;70%)</span>
</div>
</div>
</div>
</section>
<!-- Experience Section -->
<section id="experience-section" class="content-section">
<div class="section-container">
<div class="section-header">
<h2 class="section-title glitch-text">CAREER TIMELINE</h2>
<p class="section-description">
Professional journey through the digital frontier
</p>
</div>
<div class="timeline" id="timeline">
<!-- Timeline items will be dynamically generated by JavaScript -->
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact-section" class="content-section">
<div class="section-container">
<div class="section-header">
<h2 class="section-title glitch-text">CONTACT MATRIX</h2>
</div>
<div class="contact-content neon-box">
<p class="contact-intro">
Ready to collaborate on your next project? Let's connect through
secure channels.
</p>
<div class="contact-grid">
<div class="contact-methods">
<h3 class="contact-subtitle secondary">SECURE CHANNELS</h3>
<a
href="mailto:hacker@cybermatrix.dev"
class="contact-method primary"
>
<span class="method-icon">📧</span>
<div class="method-info">
<div class="method-title">EMAIL</div>
<div class="method-details">hacker@cybermatrix.dev</div>
</div>
</a>
<a
href="https://github.com/cyber-hacker"
target="_blank"
class="contact-method secondary"
>
<span class="method-icon">🐙</span>
<div class="method-info">
<div class="method-title">GITHUB</div>
<div class="method-details">@cyber-hacker</div>
</div>
</a>
<a
href="https://linkedin.com/in/cyber-developer"
target="_blank"
class="contact-method accent"
>
<span class="method-icon">💼</span>
<div class="method-info">
<div class="method-title">LINKEDIN</div>
<div class="method-details">/in/cyber-developer</div>
</div>
</a>
</div>
<div class="security-info">
<h3 class="contact-subtitle warning">SECURITY INFO</h3>
<div class="security-item warning">
<div class="security-title">PGP KEY</div>
<div class="security-details">
4A1B 2C3D 4E5F 6789 ABCD EF01 2345 6789
</div>
</div>
<div class="security-item success">
<div class="security-title">RESPONSE TIME</div>
<div class="security-details">Usually within 24 hours</div>
</div>
<div class="security-item primary">
<div class="security-title">TIME ZONE</div>
<div class="security-details">UTC+0 (Flexible)</div>
</div>
</div>
</div>
<div class="contact-footer">
<p>🔐 All communications are end-to-end encrypted</p>
</div>
</div>
</div>
</section>
</div>
</main>
<!-- Floating Navigation -->
<nav class="floating-nav">
<button
class="nav-dot active"
data-section="terminal"
title="Terminal"
></button>
<button class="nav-dot" data-section="about" title="About"></button>
<button class="nav-dot" data-section="skills" title="Skills"></button>
<button
class="nav-dot"
data-section="experience"
title="Experience"
></button>
<button class="nav-dot" data-section="contact" title="Contact"></button>
</nav>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
// Cyberpunk CV Website - JavaScript Functionality
// Wait for DOM to be fully loaded
document.addEventListener("DOMContentLoaded", function () {
initializeWebsite();
});
// Main initialization function
function initializeWebsite() {
initializeMatrixRain();
initializeTerminal();
initializeNavigation();
initializeSkills();
initializeTimeline();
initializeAvatar();
initializeGlitchEffects();
updateTime();
// Update time every second
setInterval(updateTime, 1000);
}
// Matrix Rain Effect
function initializeMatrixRain() {
const canvas = document.getElementById("matrix-canvas");
const ctx = canvas.getContext("2d");
// Resize canvas to full screen
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resizeCanvas();
window.addEventListener("resize", resizeCanvas);
const matrix = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%+-/~{[|`]}";
const matrixArray = matrix.split("");
const fontSize = 14;
const columns = canvas.width / fontSize;
const drops = [];
// Initialize drops
for (let x = 0; x < columns; x++) {
drops[x] = 1;
}
function draw() {
ctx.fillStyle = "rgba(0, 0, 0, 0.04)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#00ff00";
ctx.font = `${fontSize}px JetBrains Mono, monospace`;
for (let i = 0; i < drops.length; i++) {
if (Math.random() > 0.5) {
// Reduced density
const text =
matrixArray[Math.floor(Math.random() * matrixArray.length)];
ctx.fillStyle = i % 2 === 0 ? "#00ff00" : "#00cc00";
ctx.fillText(text, i * fontSize, drops[i] * fontSize);
if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
drops[i] = 0;
}
drops[i] += 0.5; // Slower speed
}
}
requestAnimationFrame(draw);
}
draw();
}
// Terminal Functionality
function initializeTerminal() {
const terminalInput = document.getElementById("terminal-input");
const terminalContent = document.getElementById("terminal-content");
let commandHistory = [];
let historyIndex = -1;
let isTyping = false;
const username = "hacker";
const hostname = "cyber-matrix";
const currentPath = "~/portfolio";
// Terminal commands
const commands = {
help: {
description: "Show available commands",
execute: () => [
"Available commands:",
" help - Show this help message",
" about - Display information about me",
" skills - List technical skills",
" experience - Show work experience",
" projects - Display portfolio projects",
" contact - Show contact information",
" clear - Clear terminal screen",
" whoami - Display current user",
" pwd - Print working directory",
" ls - List directory contents",
" cat [file] - Display file contents",
" neofetch - Show system information",
" matrix - Enter the matrix...",
"",
"Use TAB for autocompletion, UP/DOWN arrows for command history",
],
},
about: {
description: "Display information about me",
execute: () => [
"╔══════════════════════════════════════════════════════════════╗",
"║ ABOUT ME ║",
"╠══════════════════════════════════════════════════════════════╣",
"║ Name: Elite Cyber Developer ║",
"║ Role: Full-Stack Hacker & Digital Architect ║",
"║ Location: The Digital Frontier ║",
"║ ║",
"║ I am a passionate software engineer who thrives in the ║",
"║ intersection of creativity and code. With expertise in ║",
"║ multiple programming languages and frameworks, I build ║",
"║ digital experiences that push boundaries. ║",
"║ ║",
"║ When I'm not crafting code, you can find me exploring ║",
"║ the latest technologies, contributing to open source ║",
"║ projects, or reverse-engineering complex systems. ║",
"╚══════════════════════════════════════════════════════════════╝",
],
},
skills: {
description: "List technical skills",
execute: () => [
"TECHNICAL SKILLS MATRIX:",
"",
"💻 Programming Languages:",
" ▸ JavaScript/TypeScript [████████████] Expert",
" ▸ Python [██████████ ] Advanced",
" ▸ React/Next.js [████████████] Expert",
" ▸ Node.js [███████████ ] Advanced",
" ▸ Go [████████ ] Intermediate",
" ▸ Rust [██████ ] Learning",
"",
"🛠 Technologies & Tools:",
" ▸ Docker & Kubernetes [███████████ ] Advanced",
" ▸ AWS/GCP/Azure [██████████ ] Advanced",
" ▸ PostgreSQL/MongoDB [███████████ ] Advanced",
" ▸ Redis [████████ ] Intermediate",
" ▸ GraphQL [█████████ ] Advanced",
" ▸ Microservices [██████████ ] Advanced",
"",
"🔒 Security & DevOps:",
" ▸ Penetration Testing [█████████ ] Advanced",
" ▸ CI/CD Pipelines [███████████ ] Advanced",
" ▸ Infrastructure as Code [██████████ ] Advanced",
" ▸ Monitoring & Logging [████████ ] Intermediate",
],
},
experience: {
description: "Show work experience",
execute: () => [
"WORK EXPERIENCE TIMELINE:",
"",
"┌─ Senior Full-Stack Engineer @ CyberCorp Industries (2022-Present)",
"│ ▸ Lead development of mission-critical applications",
"│ ▸ Architected microservices handling 10M+ daily requests",
"│ ▸ Implemented zero-downtime deployment strategies",
"│ ▸ Mentored junior developers and conducted code reviews",
"│",
"├─ Software Engineer @ Digital Nexus Labs (2020-2022)",
"│ ▸ Built scalable web applications using React and Node.js",
"│ ▸ Developed RESTful APIs and GraphQL services",
"│ ▸ Optimized database performance and query efficiency",
"│ ▸ Collaborated with cross-functional teams in agile environment",
"│",
"├─ Junior Developer @ StartupTech Solutions (2019-2020)",
"│ ▸ Contributed to frontend development using modern frameworks",
"│ ▸ Participated in code reviews and testing processes",
"│ ▸ Learned best practices for software development lifecycle",
"│ ▸ Gained experience with version control and deployment",
"│",
"└─ Freelance Web Developer (2018-2019)",
" ▸ Created custom websites and web applications for clients",
" ▸ Worked with various CMS platforms and e-commerce solutions",
" ▸ Developed responsive designs and mobile-first approaches",
" ▸ Managed client relationships and project timelines",
],
},
projects: {
description: "Display portfolio projects",
execute: () => [
"PORTFOLIO PROJECTS:",
"",
"🚀 Project: Quantum Task Manager",
" Description: AI-powered productivity app with neural networks",
" Stack: React, TensorFlow.js, Node.js, PostgreSQL",
" Status: Production | Users: 50K+ | GitHub: ⭐ 2.3K",
"",
"🔐 Project: CyberGuard Security Suite",
" Description: Enterprise security monitoring and threat detection",
" Stack: Go, Redis, Docker, Kubernetes, React Dashboard",
" Status: Production | Clients: 100+ | Private Repository",
"",
"🌐 Project: Neural Network Visualizer",
" Description: Interactive tool for visualizing ML models",
" Stack: Three.js, WebGL, Python, FastAPI",
" Status: Open Source | Contributors: 25+ | GitHub: ⭐ 1.8K",
"",
"⚡ Project: RealTime Collaboration Platform",
" Description: Slack-like communication with video/audio",
" Stack: WebRTC, Socket.io, React, Express, MongoDB",
" Status: MVP Complete | Demo Available",
"",
"🎮 Project: Blockchain Gaming Platform",
" Description: NFT-based gaming ecosystem with smart contracts",
" Stack: Solidity, Web3.js, React, IPFS",
" Status: Beta Testing | Community: 5K+ users",
],
},
contact: {
description: "Show contact information",
execute: () => [
"📡 CONTACT MATRIX:",
"",
"┌─────────────────────────────────────────────────────────┐",
"│ SECURE CHANNELS │",
"├─────────────────────────────────────────────────────────┤",
"│ 📧 Email: hacker@cybermatrix.dev │",
"│ 🐙 GitHub: github.com/cyber-hacker │",
"│ 💼 LinkedIn: linkedin.com/in/cyber-developer │",
"│ 🐦 Twitter: @cyberhacker_dev │",
"│ 🌐 Website: www.cybermatrix.dev │",
"│ 📱 Signal: +1-555-CYBER-01 │",
"│ 🔗 Portfolio: portfolio.cybermatrix.dev │",
"│ 💬 Discord: CyberHacker#1337 │",
"└─────────────────────────────────────────────────────────┘",
"",
"🔐 PGP Key Fingerprint: 4A1B 2C3D 4E5F 6789 ABCD EF01 2345 6789",
"",
"⚠️ All communications are end-to-end encrypted ⚠️",
],
},
clear: {
description: "Clear terminal screen",
execute: () => [],
},
whoami: {
description: "Display current user",
execute: () => [username],
},
pwd: {
description: "Print working directory",
execute: () => [`/home/${username}/portfolio`],
},
ls: {
description: "List directory contents",
execute: () => [
"total 42",
"drwxr-xr-x 8 hacker hacker 4096 Dec 13 23:59 .",
"drwxr-xr-x 3 hacker hacker 4096 Dec 13 20:00 ..",
"-rw-r--r-- 1 hacker hacker 220 Dec 13 20:00 .bash_logout",
"-rw-r--r-- 1 hacker hacker 3771 Dec 13 20:00 .bashrc",
"drwx------ 2 hacker hacker 4096 Dec 13 20:01 .cache",
"-rw-r--r-- 1 hacker hacker 807 Dec 13 20:00 .profile",
"drwxr-xr-x 2 hacker hacker 4096 Dec 13 23:59 projects",
"-rw-r--r-- 1 hacker hacker 2048 Dec 13 23:58 README.md",
"-rw-r--r-- 1 hacker hacker 1024 Dec 13 23:57 skills.txt",
"drwxr-xr-x 2 hacker hacker 4096 Dec 13 23:56 experience",
],
},
neofetch: {
description: "Show system information",
execute: () => [
" .88888888:.",
" 88888888.88888.",
" .8888888888888888.",
" 888888888888888888",
" 88' _`88'_ `88888",
" 88 88 88 88 88888",
" 88_88_::_88_:88888",
" 88:::,::,:::::8888",
" 88`::::::::::':`88",
" .88`:::::::::::::`,88",
" .8888:::::::::::::::88",
" .8888':::::::::::::::88",
" .8888':::::::::::::::::88",
" .8888:::::::::::::::::::88",
" .8888:::::::::::::::::::'88",
" .8888:::::::::::::::::::' 88",
" .8888:::::::::::::::::::' .88",
" .8888:::::::::::::::::::' .888",
"",
`${username}@${hostname}`,
"─".repeat(30),
"OS: CyberLinux x86_64",
"Host: Quantum Computer Pro",
"Kernel: 6.9.0-cyber",
"Uptime: 13 days, 37 hours, 42 mins",
"Packages: 2048 (apt), 512 (snap)",
"Shell: zsh 5.9",
"Resolution: 3840x2160",
"DE: Cyber Desktop Environment",
"WM: i3-gaps",
"Theme: CyberPunk-Neon",
"Terminal: cyber-terminal",
"CPU: Intel Core i9-13900K (24) @ 5.8GHz",
"GPU: NVIDIA RTX 4090 TI",
"Memory: 8192MiB / 32768MiB",
],
},
matrix: {
description: "Enter the matrix...",
execute: () => [
"Entering the Matrix...",
"",
"01001000 01100001 01100011 01101011 01100101 01110010",
"01001101 01100001 01110100 01110010 01101001 01111000",
"",
"⠊⠉⠑⠀⠞⠕⠀⠍⠑⠑⠞⠀⠽⠕⠥⠂⠀⠝⠑⠕⠲⠲⠲",
"",
"The Matrix has you...",
"Follow the white rabbit 🐰",
"",
"Wake up, Neo...",
"The Matrix is calling you.",
"",
"> red_pill.exe executed successfully",
"> Connecting to Zion mainframe...",
"> Welcome to the real world.",
],
},
};
// Add line to terminal
function addLine(type, content) {
const line = document.createElement("div");
line.className = `terminal-line ${type}`;
line.textContent = content;
terminalContent.appendChild(line);
terminalContent.scrollTop = terminalContent.scrollHeight;
}
// Execute command
async function executeCommand(cmd) {
const trimmedCmd = cmd.trim();
if (!trimmedCmd) return;
// Add command to history
commandHistory.push(trimmedCmd);
historyIndex = -1;
// Add command line
addLine("command", `${username}@${hostname}:${currentPath}$ ${trimmedCmd}`);
// Handle special commands
if (trimmedCmd === "clear") {
terminalContent.innerHTML = "";
return;
}
// Parse command and arguments
const [baseCmd, ...args] = trimmedCmd.split(" ");
if (commands[baseCmd]) {
isTyping = true;
// Simulate typing delay
await new Promise((resolve) =>
setTimeout(resolve, 300 + Math.random() * 700),
);
const output = commands[baseCmd].execute();
output.forEach((line) => {
addLine("output", line);
});
isTyping = false;
} else if (baseCmd === "cat" && args.length > 0) {
// Handle cat command with file arguments
const filename = args[0];
isTyping = true;
await new Promise((resolve) => setTimeout(resolve, 200));
if (filename === "README.md") {
addLine("output", "# Welcome to My Digital Portfolio");
addLine("output", "");
addLine(
"output",
"This is the personal portfolio of a cybersecurity expert",
);
addLine(
"output",
"and full-stack developer living in the digital frontier.",
);
addLine("output", "");
addLine("output", "Type `help` to see available commands.");
} else if (filename === "skills.txt") {
addLine(
"output",
"JavaScript, TypeScript, React, Node.js, Python, Go, Rust",
);
addLine("output", "Docker, Kubernetes, AWS, GCP, PostgreSQL, MongoDB");
addLine("output", "Penetration Testing, Security Analysis, DevOps");
} else {
addLine("error", `cat: ${filename}: No such file or directory`);
}
isTyping = false;
} else {
addLine(
"error",
`Command '${baseCmd}' not found. Type 'help' for available commands.`,
);
}
}
// Handle keyboard input
terminalInput.addEventListener("keydown", function (e) {
if (isTyping) {
e.preventDefault();
return;
}
if (e.key === "Enter") {
executeCommand(terminalInput.value);
terminalInput.value = "";
} else if (e.key === "ArrowUp") {
e.preventDefault();
if (commandHistory.length > 0) {
const newIndex =
historyIndex === -1
? commandHistory.length - 1
: Math.max(0, historyIndex - 1);
historyIndex = newIndex;
terminalInput.value = commandHistory[newIndex] || "";
}
} else if (e.key === "ArrowDown") {
e.preventDefault();
if (historyIndex !== -1) {
const newIndex = historyIndex + 1;
if (newIndex >= commandHistory.length) {
historyIndex = -1;
terminalInput.value = "";
} else {
historyIndex = newIndex;
terminalInput.value = commandHistory[newIndex];
}
}
} else if (e.key === "Tab") {
e.preventDefault();
const availableCommands = Object.keys(commands).filter((cmd) =>
cmd.startsWith(terminalInput.value.toLowerCase()),
);
if (availableCommands.length === 1) {
terminalInput.value = availableCommands[0];
} else if (availableCommands.length > 1) {
addLine("info", `Available: ${availableCommands.join(", ")}`);
}
}
});
// Focus terminal input when clicking anywhere on terminal
document.addEventListener("click", function () {
terminalInput.focus();
});
// Initial focus
terminalInput.focus();
}
// Navigation functionality
function initializeNavigation() {
const navButtons = document.querySelectorAll(".nav-btn");
const floatingNavDots = document.querySelectorAll(".nav-dot");
const contentSections = document.querySelectorAll(".content-section");
function showSection(sectionId) {
// Hide all sections
contentSections.forEach((section) => {
section.classList.remove("active");
});
// Show target section
const targetSection = document.getElementById(`${sectionId}-section`);
if (targetSection) {
targetSection.classList.add("active");
}
// Update nav button states
navButtons.forEach((btn) => {
btn.classList.remove("active");
if (btn.dataset.section === sectionId) {
btn.classList.add("active");
}
});
// Update floating nav dots
floatingNavDots.forEach((dot) => {
dot.classList.remove("active");
if (dot.dataset.section === sectionId) {
dot.classList.add("active");
}
});
}
// Add click handlers
navButtons.forEach((btn) => {
btn.addEventListener("click", () => {
showSection(btn.dataset.section);
});
});
floatingNavDots.forEach((dot) => {
dot.addEventListener("click", () => {
showSection(dot.dataset.section);
});
});
}
// Skills functionality
function initializeSkills() {
const skillsData = [
// Frontend
{
name: "React",
level: 95,
category: "frontend",
icon: "⚛️",
description: "Advanced component architecture & hooks",
},
{
name: "TypeScript",
level: 90,
category: "frontend",
icon: "🔷",
description: "Type-safe development & advanced patterns",
},
{
name: "Next.js",
level: 88,
category: "frontend",
icon: "▲",
description: "SSR, SSG, and App Router mastery",
},
{
name: "Tailwind CSS",
level: 92,
category: "frontend",
icon: "🎨",
description: "Utility-first design systems",
},
{
name: "Three.js",
level: 75,
category: "frontend",
icon: "🎮",
description: "3D graphics and WebGL",
},
// Backend
{
name: "Node.js",
level: 93,
category: "backend",
icon: "🟢",
description: "Scalable server-side applications",
},
{
name: "Python",
level: 87,
category: "backend",
icon: "🐍",
description: "Django, FastAPI, and data science",
},
{
name: "Go",
level: 78,
category: "backend",
icon: "🐹",
description: "High-performance microservices",
},
{
name: "PostgreSQL",
level: 85,
category: "backend",
icon: "🐘",
description: "Complex queries and optimization",
},
{
name: "GraphQL",
level: 82,
category: "backend",
icon: "📊",
description: "Apollo Server and schema design",
},
// DevOps
{
name: "Docker",
level: 88,
category: "devops",
icon: "🐳",
description: "Containerization and multi-stage builds",
},
{
name: "Kubernetes",
level: 80,
category: "devops",
icon: "☸️",
description: "Orchestration and service mesh",
},
{
name: "AWS",
level: 85,
category: "devops",
icon: "☁️",
description: "Lambda, ECS, RDS, and more",
},
{
name: "Terraform",
level: 75,
category: "devops",
icon: "🏗️",
description: "Infrastructure as Code",
},
// Security
{
name: "Penetration Testing",
level: 82,
category: "security",
icon: "🔓",
description: "OWASP methodologies",
},
{
name: "Cryptography",
level: 78,
category: "security",
icon: "🔐",
description: "PKI and secure communications",
},
// Other
{
name: "Machine Learning",
level: 72,
category: "other",
icon: "🤖",
description: "TensorFlow and PyTorch",
},
{
name: "Blockchain",
level: 68,
category: "other",
icon: "⛓️",
description: "Smart contracts and Web3",
},
];
const skillsGrid = document.getElementById("skills-grid");
const filterButtons = document.querySelectorAll(".filter-btn");
function getLevelClass(level) {
if (level >= 90) return "expert";
if (level >= 80) return "advanced";
if (level >= 70) return "intermediate";
return "learning";
}
function createSkillCard(skill, index) {
return `
<div class="skill-card ${skill.category}" style="animation-delay: ${index * 50}ms">
<div class="skill-header">
<div class="skill-name-row">
<span class="skill-icon">${skill.icon}</span>
<h3 class="skill-name">${skill.name}</h3>
</div>
<span class="skill-level ${skill.category}">${skill.level}%</span>
</div>
<div class="skill-progress">
<div class="skill-progress-bar ${skill.category}" style="width: ${skill.level}%"></div>
</div>
<p class="skill-description">${skill.description}</p>
<div class="skill-level-indicator ${getLevelClass(skill.level)}"></div>
</div>
`;
}
function renderSkills(category = "all") {
const filteredSkills =
category === "all"
? skillsData
: skillsData.filter((skill) => skill.category === category);
skillsGrid.innerHTML = filteredSkills.map(createSkillCard).join("");
// Animate progress bars
setTimeout(() => {
const progressBars = skillsGrid.querySelectorAll(".skill-progress-bar");
progressBars.forEach((bar) => {
bar.style.width = bar.style.width;
});
}, 100);
}
// Filter functionality
filterButtons.forEach((btn) => {
btn.addEventListener("click", () => {
filterButtons.forEach((b) => b.classList.remove("active"));
btn.classList.add("active");
renderSkills(btn.dataset.category);
});
});
// Initial render
renderSkills();
}
// Timeline functionality
function initializeTimeline() {
const timelineData = [
{
id: "1",
title: "Senior Full-Stack Engineer",
company: "CyberCorp Industries",
period: "2022 - Present",
description: [
"Lead development of mission-critical applications serving 10M+ users",
"Architected microservices infrastructure with 99.9% uptime",
"Implemented zero-downtime deployment strategies using K8s",
"Mentored team of 8 developers and established code review processes",
],
technologies: ["React", "Node.js", "Kubernetes", "AWS", "PostgreSQL"],
type: "work",
status: "current",
},
{
id: "2",
title: "Software Engineer",
company: "Digital Nexus Labs",
period: "2020 - 2022",
description: [
"Built scalable web applications using React and Node.js",
"Developed RESTful APIs and GraphQL services",
"Optimized database performance reducing query time by 60%",
"Collaborated with cross-functional teams in agile environment",
],
technologies: ["React", "Node.js", "GraphQL", "MongoDB", "Docker"],
type: "work",
status: "completed",
},
{
id: "3",
title: "Junior Developer",
company: "StartupTech Solutions",
period: "2019 - 2020",
description: [
"Contributed to frontend development using modern frameworks",
"Participated in code reviews and testing processes",
"Learned best practices for software development lifecycle",
"Gained experience with version control and deployment pipelines",
],
technologies: ["JavaScript", "Vue.js", "Python", "Git", "Jenkins"],
type: "work",
status: "completed",
},
{
id: "4",
title: "Computer Science Degree",
company: "Cyber University",
period: "2015 - 2019",
description: [
"Graduated Summa Cum Laude with 3.9 GPA",
"Specialized in Cybersecurity and Machine Learning",
"Led university hackathon team to 3 consecutive victories",
"Published research on neural network optimization",
],
technologies: ["Python", "C++", "Machine Learning", "Cryptography"],
type: "education",
status: "completed",
},
];
const timeline = document.getElementById("timeline");
function getTypeIcon(type) {
switch (type) {
case "work":
return "💼";
case "education":
return "🎓";
case "project":
return "🚀";
default:
return "📍";
}
}
function createTimelineItem(item, index) {
const currentBadge =
item.status === "current"
? '<div class="current-badge">CURRENT</div>'
: "";
const currentClass = item.status === "current" ? "current" : "";
return `
<div class="timeline-item ${currentClass}" style="animation-delay: ${index * 200}ms">
<div class="timeline-node">${getTypeIcon(item.type)}</div>
<div class="timeline-content">
${currentBadge}
<div class="timeline-header">
<div>
<h3 class="timeline-title glitch-text" data-text="${item.title}">${item.title}</h3>
<p class="timeline-company">${item.company}</p>
</div>
<div class="timeline-period">${item.period}</div>
</div>
<ul class="timeline-description">
${item.description.map((desc) => `<li>${desc}</li>`).join("")}
</ul>
<div class="timeline-technologies">
${item.technologies.map((tech) => `<span class="tech-chip">${tech}</span>`).join("")}
</div>
</div>
</div>
`;
}
// Render timeline
timeline.innerHTML = timelineData.map(createTimelineItem).join("");
// Add end marker
timeline.innerHTML += `
<div class="timeline-item" style="animation-delay: ${timelineData.length * 200}ms">
<div class="timeline-node" style="background: var(--neon-accent); border-color: var(--neon-accent);">✨</div>
<div class="timeline-content">
<h3 class="timeline-title glitch-text" data-text="The journey continues...">The journey continues...</h3>
</div>
</div>
`;
}
// Avatar functionality
function initializeAvatar() {
const avatarContainer = document.querySelector(".avatar-container");
const holoInfo = document.querySelector(".holo-info");
if (avatarContainer && holoInfo) {
avatarContainer.addEventListener("mouseenter", () => {
holoInfo.classList.remove("hidden");
});
avatarContainer.addEventListener("mouseleave", () => {
holoInfo.classList.add("hidden");
});
}
}
// Glitch effects
function initializeGlitchEffects() {
const glitchElements = document.querySelectorAll(".glitch-text");
glitchElements.forEach((element) => {
// Set data-text attribute if not present
if (!element.hasAttribute("data-text")) {
element.setAttribute("data-text", element.textContent);
}
// Random glitch effect
if (element.dataset.trigger !== "hover") {
setInterval(
() => {
if (Math.random() > 0.7) {
element.style.animation = "glitch 0.3s";
setTimeout(() => {
element.style.animation = "";
}, 300);
}
},
3000 + Math.random() * 2000,
);
}
});
}
// Update time display
function updateTime() {
const timeElement = document.querySelector(".terminal-time");
if (timeElement) {
timeElement.textContent = new Date().toLocaleTimeString();
}
}
// Intersection Observer for animations
function initializeIntersectionObserver() {
const observerOptions = {
threshold: 0.1,
rootMargin: "0px 0px -50px 0px",
};
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("animate");
}
});
}, observerOptions);
// Observe elements for animation
const animatedElements = document.querySelectorAll(
".skill-card, .timeline-item, .contact-method",
);
animatedElements.forEach((el) => observer.observe(el));
}
// Handle mobile touch interactions
function initializeMobileInteractions() {
// Disable hover effects on touch devices
if ("ontouchstart" in window) {
document.body.classList.add("touch-device");
}
// Handle mobile navigation
const navButtons = document.querySelectorAll(".nav-btn");
navButtons.forEach((btn) => {
btn.addEventListener("touchstart", function () {
this.classList.add("touch-active");
});
btn.addEventListener("touchend", function () {
this.classList.remove("touch-active");
});
});
}
// Performance optimizations
function initializePerformanceOptimizations() {
// Throttle scroll events
let ticking = false;
function updateScrollEffects() {
// Add any scroll-based effects here
ticking = false;
}
function requestTick() {
if (!ticking) {
requestAnimationFrame(updateScrollEffects);
ticking = true;
}
}
window.addEventListener("scroll", requestTick);
// Optimize animations for mobile
if (window.innerWidth <= 768) {
const style = document.createElement("style");
style.textContent = `
.animate-pulse-neon { animation-duration: 4s !important; }
.animate-glitch { animation-duration: 0.5s !important; }
`;
document.head.appendChild(style);
}
}
// Error handling
window.addEventListener("error", function (e) {
console.error("JavaScript error:", e.error);
});
// Initialize additional features when DOM is ready
document.addEventListener("DOMContentLoaded", function () {
initializeIntersectionObserver();
initializeMobileInteractions();
initializePerformanceOptimizations();
});
// Service Worker registration (optional)
if ("serviceWorker" in navigator) {
window.addEventListener("load", function () {
// Uncomment if you want to add offline functionality
// navigator.serviceWorker.register('/sw.js');
});
}
Raw
style.css
/* CSS Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* CSS Variables - Cyberpunk Color Scheme */
:root {
/* Base colors */
--bg-primary: #0a0a0f;
--bg-secondary: #0f0f1a;
--bg-card: #161620;
--text-primary: #f0f0f0;
--text-secondary: #b0b0b0;
--text-muted: #707070;
/* Neon colors */
--neon-primary: #00ff00;
--neon-secondary: #00ccff;
--neon-accent: #cc00ff;
--neon-warning: #ffff00;
--neon-danger: #ff0040;
--neon-success: #00ff00;
/* Glitch colors */
--glitch-1: #ff0040;
--glitch-2: #00ccff;
--glitch-3: #00ff00;
/* Typography */
--font-cyber: "Orbitron", "Arial", sans-serif;
--font-mono: "JetBrains Mono", "Courier New", monospace;
/* Spacing */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-2xl: 3rem;
/* Border radius */
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
/* Shadows */
--shadow-neon-sm: 0 0 10px;
--shadow-neon-md: 0 0 20px;
--shadow-neon-lg: 0 0 30px;
}
/* Base Typography */
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-mono);
background: var(--bg-primary);
color: var(--text-primary);
overflow-x: hidden;
line-height: 1.6;
}
.font-cyber {
font-family: var(--font-cyber);
font-weight: 600;
letter-spacing: 0.1em;
}
.font-mono {
font-family: var(--font-mono);
}
/* Matrix Rain Background */
.matrix-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
opacity: 0.2;
}
/* Scanlines Overlay */
.scanlines-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
pointer-events: none;
opacity: 0.1;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0, 255, 0, 0.1) 2px,
rgba(0, 255, 0, 0.1) 4px
);
}
.scanline {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(
90deg,
transparent,
var(--neon-primary),
transparent
);
animation: scanlines 2s linear infinite;
}
/* Grid Pattern Overlay */
.grid-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
opacity: 0.05;
background-image: url("data:image/svg+xml,%3csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='none' fill-rule='evenodd'%3e%3cg fill='%2300ff00' fill-opacity='0.1'%3e%3cpath d='m36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
}
/* Main Container */
.main-container {
position: relative;
z-index: 10;
min-height: 100vh;
}
/* Hero Section */
.hero-section {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-lg);
}
.hero-content {
max-width: 1400px;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-2xl);
align-items: center;
}
.hero-left {
text-align: center;
animation: fadeInLeft 1s ease-out;
}
.hero-right {
animation: fadeInRight 1s ease-out 0.3s both;
}
/* Avatar Component */
.avatar-container {
position: relative;
display: inline-block;
margin-bottom: var(--spacing-xl);
}
.avatar-outer-ring {
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(
from 0deg,
var(--neon-primary),
var(--neon-secondary),
var(--neon-accent),
var(--neon-primary)
);
padding: 4px;
animation: pulse-neon 2s infinite;
transition: transform 0.5s ease;
}
.avatar-container:hover .avatar-outer-ring {
transform: scale(1.1);
}
.avatar-inner {
width: 100%;
height: 100%;
border-radius: 50%;
background: var(--bg-primary);
border: 4px solid var(--neon-primary);
position: relative;
overflow: hidden;
}
.avatar-face {
position: absolute;
inset: 8px;
border-radius: 50%;
border: 1px solid rgba(0, 255, 0, 0.5);
background: linear-gradient(
135deg,
rgba(0, 255, 0, 0.1),
rgba(0, 204, 255, 0.1)
);
display: flex;
align-items: center;
justify-content: center;
}
.avatar-pattern {
position: absolute;
inset: 8px;
border-radius: 50%;
opacity: 0.3;
background-image: url("data:image/svg+xml,%3csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='none' fill-rule='evenodd'%3e%3cg fill='%2300ff00' fill-opacity='0.1'%3e%3cpath d='m36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
}
.avatar-eyes {
display: flex;
gap: var(--spacing-lg);
margin-top: -var(--spacing-md);
}
.eye {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--neon-primary);
animation: blink 3s infinite;
}
.avatar-center-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(0, 255, 0, 0.3),
rgba(0, 255, 0, 0.1),
transparent
);
filter: blur(5px);
}
.avatar-scanline {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(
90deg,
transparent,
rgba(0, 255, 0, 0.8),
transparent
);
animation: scanlines-avatar 2s linear infinite;
filter: blur(1px);
}
.avatar-glitch {
position: absolute;
inset: 0;
border-radius: 50%;
background: repeating-linear-gradient(
90deg,
transparent,
transparent 2px,
var(--glitch-1) 2px,
var(--glitch-1) 4px,
transparent 4px,
transparent 6px,
var(--glitch-2) 6px,
var(--glitch-2) 8px
);
opacity: 0;
transition: opacity 0.3s ease;
}
.avatar-container:hover .avatar-glitch {
opacity: 0.2;
}
/* Avatar Brackets */
.bracket {
position: absolute;
width: 16px;
height: 16px;
border: 2px solid var(--neon-primary);
}
.bracket.top-left {
top: 4px;
left: 4px;
border-right: none;
border-bottom: none;
}
.bracket.top-right {
top: 4px;
right: 4px;
border-left: none;
border-bottom: none;
}
.bracket.bottom-left {
bottom: 4px;
left: 4px;
border-right: none;
border-top: none;
}
.bracket.bottom-right {
bottom: 4px;
right: 4px;
border-left: none;
border-top: none;
}
/* Rotating Ring */
.rotating-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border: 1px solid rgba(0, 204, 255, 0.5);
animation: rotate 10s linear infinite;
}
.ring-dot {
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
left: 50%;
transform: translateX(-50%);
}
.ring-dot.top {
top: -2px;
background: var(--neon-secondary);
}
.ring-dot.bottom {
bottom: -2px;
background: var(--neon-accent);
}
/* Status Indicator */
.status-indicator {
position: absolute;
bottom: -8px;
right: -8px;
background: var(--bg-card);
border: 1px solid var(--neon-success);
border-radius: 20px;
padding: var(--spacing-xs) var(--spacing-sm);
display: flex;
align-items: center;
gap: var(--spacing-xs);
font-size: 0.75rem;
font-family: var(--font-mono);
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--neon-success);
animation: pulse 2s infinite;
}
.status-text {
color: var(--neon-success);
font-weight: 600;
}
/* Data Streams */
.data-streams {
position: absolute;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 2px;
}
.data-streams.top {
top: -32px;
}
.data-streams.bottom {
bottom: -32px;
transform: translateX(-50%) rotate(180deg);
}
.stream {
width: 1px;
height: 32px;
background: linear-gradient(to top, var(--neon-primary), transparent);
animation: pulse 2s infinite;
}
.stream:nth-child(2) {
animation-delay: 0.2s;
background: linear-gradient(to top, var(--neon-secondary), transparent);
}
.stream:nth-child(3) {
animation-delay: 0.4s;
}
.stream:nth-child(4) {
animation-delay: 0.6s;
background: linear-gradient(to top, var(--neon-secondary), transparent);
}
.stream:nth-child(5) {
animation-delay: 0.8s;
}
/* Holographic Info Panel */
.holo-info {
position: absolute;
top: -80px;
left: 50%;
transform: translateX(-50%);
background: rgba(22, 22, 32, 0.9);
backdrop-filter: blur(10px);
border: 1px solid var(--neon-primary);
border-radius: var(--radius-md);
padding: var(--spacing-md);
white-space: nowrap;
animation: fadeInUp 0.3s ease-out;
}
.holo-info.hidden {
display: none;
}
.holo-content {
text-align: center;
}
.holo-title {
font-family: var(--font-cyber);
font-size: 0.875rem;
color: var(--neon-primary);
margin-bottom: var(--spacing-xs);
}
.holo-clearance,
.holo-status {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--text-secondary);
}
.holo-status {
color: var(--neon-success);
}
.holo-arrow {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid var(--neon-primary);
}
/* Hero Info */
.hero-info {
margin-top: var(--spacing-xl);
}
.hero-title {
font-family: var(--font-cyber);
font-size: clamp(2rem, 5vw, 4rem);
font-weight: 800;
line-height: 1.1;
margin-bottom: var(--spacing-lg);
}
.hero-subtitle {
margin-bottom: var(--spacing-lg);
}
.role {
font-size: clamp(1.25rem, 3vw, 1.75rem);
color: var(--neon-secondary);
font-family: var(--font-mono);
margin-bottom: var(--spacing-sm);
}
.specialization {
font-size: clamp(1rem, 2.5vw, 1.25rem);
color: var(--neon-accent);
font-family: var(--font-mono);
}
/* Status Badges */
.status-badges {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-md);
margin-bottom: var(--spacing-xl);
justify-content: center;
}
.status-badge {
display: flex;
align-items: center;
gap: var(--spacing-sm);
background: rgba(22, 22, 32, 0.5);
backdrop-filter: blur(10px);
border-radius: var(--radius-md);
padding: var(--spacing-sm) var(--spacing-md);
border: 1px solid rgba(0, 255, 0, 0.3);
font-family: var(--font-mono);
font-size: 0.875rem;
}
.status-badge.success {
border-color: rgba(0, 255, 0, 0.3);
color: var(--neon-success);
}
.status-badge.secondary {
border-color: rgba(0, 204, 255, 0.3);
color: var(--neon-secondary);
}
.badge-dot {
width: 8px;
height: 8px;
border-radius: 50%;
animation: pulse 2s infinite;
}
.status-badge.success .badge-dot {
background: var(--neon-success);
}
.status-badge.secondary .badge-dot {
background: var(--neon-secondary);
}
/* Stats Grid */
.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-md);
padding-top: var(--spacing-xl);
}
.stat {
text-align: center;
}
.stat-number {
font-family: var(--font-cyber);
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 800;
margin-bottom: var(--spacing-xs);
}
.stat-number.primary {
color: var(--neon-primary);
}
.stat-number.secondary {
color: var(--neon-secondary);
}
.stat-number.accent {
color: var(--neon-accent);
}
.stat-label {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--text-muted);
}
/* Navigation Buttons */
.nav-buttons {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
margin-bottom: var(--spacing-xl);
}
.nav-btn {
display: flex;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-lg);
background: rgba(22, 22, 32, 0.3);
backdrop-filter: blur(10px);
border: 1px solid rgba(112, 112, 112, 0.3);
border-radius: var(--radius-md);
color: var(--text-muted);
text-align: left;
cursor: pointer;
transition: all 0.3s ease;
font-family: inherit;
width: 100%;
}
.nav-btn:hover,
.nav-btn.active {
border-color: var(--neon-primary);
color: var(--neon-primary);
background: rgba(22, 22, 32, 0.5);
transform: scale(1.02);
box-shadow: var(--shadow-neon-md) var(--neon-primary);
}
.nav-icon {
font-size: 2rem;
}
.nav-title {
font-family: var(--font-cyber);
font-weight: 600;
font-size: 1.1rem;
margin-bottom: var(--spacing-xs);
}
.nav-description {
font-family: var(--font-mono);
font-size: 0.875rem;
opacity: 0.7;
transition: opacity 0.3s ease;
}
.nav-btn:hover .nav-description {
opacity: 1;
}
/* Quick Contact */
.quick-contact {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-md);
}
.contact-btn {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--spacing-md);
background: transparent;
border: 1px solid var(--neon-primary);
border-radius: var(--radius-md);
color: var(--neon-primary);
text-decoration: none;
transition: all 0.3s ease;
font-family: var(--font-mono);
}
.contact-btn:hover {
background: rgba(0, 255, 0, 0.1);
box-shadow: var(--shadow-neon-sm) var(--neon-primary);
text-shadow: var(--shadow-neon-sm) var(--neon-primary);
}
.contact-icon {
font-size: 1.5rem;
margin-bottom: var(--spacing-xs);
}
.contact-label {
font-size: 0.75rem;
font-weight: 600;
}
/* Content Sections */
.content-sections {
position: relative;
}
.content-section {
min-height: 100vh;
padding: var(--spacing-xl);
display: none;
}
.content-section.active {
display: block;
animation: fadeIn 0.5s ease-out;
}
.section-container {
max-width: 1200px;
margin: 0 auto;
}
.section-header {
text-align: center;
margin-bottom: var(--spacing-2xl);
}
.section-title {
font-family: var(--font-cyber);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
color: var(--neon-primary);
margin-bottom: var(--spacing-lg);
}
.section-description {
font-family: var(--font-mono);
color: var(--text-secondary);
font-size: 1.1rem;
}
/* Neon Effects */
.neon-glow {
text-shadow: var(--shadow-neon-md) currentColor;
}
.neon-glow.primary {
color: var(--neon-primary);
text-shadow: var(--shadow-neon-md) var(--neon-primary);
}
.neon-box {
background: rgba(0, 255, 0, 0.1);
border: 1px solid var(--neon-primary);
border-radius: var(--radius-md);
padding: var(--spacing-xl);
box-shadow:
var(--shadow-neon-md) rgba(0, 255, 0, 0.3),
inset var(--shadow-neon-md) rgba(0, 255, 0, 0.1);
}
/* Glitch Text */
.glitch-text {
position: relative;
display: inline-block;
}
.glitch-text:hover {
animation: glitch 0.3s infinite;
}
.glitch-text:hover::before,
.glitch-text:hover::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.glitch-text:hover::before {
animation: glitch-1 0.3s infinite;
color: var(--glitch-1);
z-index: -1;
}
.glitch-text:hover::after {
animation: glitch-2 0.3s infinite;
color: var(--glitch-2);
z-index: -2;
}
/* Terminal Component */
.terminal-container {
height: 600px;
border-radius: var(--radius-md);
overflow: hidden;
}
.terminal {
width: 100%;
height: 100%;
background: var(--bg-primary);
color: rgba(0, 255, 0, 0.8);
border: 1px solid var(--neon-primary);
border-radius: var(--radius-md);
box-shadow:
var(--shadow-neon-md) rgba(0, 255, 0, 0.3),
inset var(--shadow-neon-md) rgba(0, 255, 0, 0.1);
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}
.terminal::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(
90deg,
transparent,
var(--neon-primary),
transparent
);
animation: scanlines 2s linear infinite;
z-index: 10;
}
.terminal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-md);
border-bottom: 1px solid rgba(0, 255, 0, 0.3);
background: rgba(0, 255, 0, 0.05);
}
.terminal-controls {
display: flex;
gap: var(--spacing-sm);
}
.control-btn {
width: 12px;
height: 12px;
border-radius: 50%;
}
.control-btn.close {
background: var(--neon-danger);
}
.control-btn.minimize {
background: var(--neon-warning);
}
.control-btn.maximize {
background: var(--neon-success);
}
.terminal-title {
font-family: var(--font-mono);
font-size: 0.875rem;
color: var(--text-secondary);
}
.terminal-time {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--text-muted);
}
.terminal-content {
flex: 1;
padding: var(--spacing-md);
overflow-y: auto;
font-family: var(--font-mono);
font-size: 0.875rem;
line-height: 1.4;
}
.terminal-line {
margin-bottom: var(--spacing-xs);
white-space: pre-wrap;
word-break: break-word;
}
.terminal-line.command {
color: var(--neon-warning);
}
.terminal-line.output {
color: rgba(0, 255, 0, 0.8);
}
.terminal-line.error {
color: var(--neon-danger);
}
.terminal-line.info {
color: var(--neon-secondary);
}
.terminal-input-line {
display: flex;
align-items: center;
padding: var(--spacing-md);
border-top: 1px solid rgba(0, 255, 0, 0.2);
background: rgba(0, 255, 0, 0.02);
}
.terminal-prompt {
color: var(--neon-secondary);
margin-right: var(--spacing-sm);
font-family: var(--font-mono);
font-size: 0.875rem;
}
.terminal-input {
flex: 1;
background: transparent;
border: none;
outline: none;
color: var(--neon-warning);
font-family: var(--font-mono);
font-size: 0.875rem;
}
.terminal-cursor {
color: var(--neon-primary);
animation: blink 1s infinite;
margin-left: 2px;
}
/* About Section */
.about-content {
max-width: 800px;
margin: 0 auto;
}
.about-text {
margin-bottom: var(--spacing-xl);
}
.about-text p {
font-family: var(--font-mono);
font-size: 1.1rem;
color: var(--text-secondary);
line-height: 1.8;
margin-bottom: var(--spacing-lg);
}
.about-details {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-xl);
}
.detail-title {
font-family: var(--font-cyber);
font-size: 1.1rem;
margin-bottom: var(--spacing-md);
}
.detail-title.secondary {
color: var(--neon-secondary);
}
.detail-title.accent {
color: var(--neon-accent);
}
.detail-list {
list-style: none;
}
.detail-list li {
font-family: var(--font-mono);
font-size: 0.9rem;
color: var(--text-secondary);
margin-bottom: var(--spacing-sm);
}
/* Skills Section */
.skill-filters {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-md);
justify-content: center;
margin-bottom: var(--spacing-2xl);
}
.filter-btn {
padding: var(--spacing-sm) var(--spacing-lg);
border-radius: 25px;
border: 1px solid var(--text-muted);
background: transparent;
color: var(--text-muted);
font-family: var(--font-cyber);
font-size: 0.875rem;
cursor: pointer;
transition: all 0.3s ease;
}
.filter-btn:hover,
.filter-btn.active {
border-color: var(--neon-primary);
color: var(--neon-primary);
background: rgba(0, 255, 0, 0.2);
box-shadow: var(--shadow-neon-sm) var(--neon-primary);
}
.skills-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--spacing-lg);
margin-bottom: var(--spacing-2xl);
}
.skill-card {
position: relative;
padding: var(--spacing-lg);
border-radius: var(--radius-md);
border: 1px solid;
background: rgba(22, 22, 32, 0.5);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.6s ease-out forwards;
}
.skill-card.frontend {
border-color: rgba(0, 255, 0, 0.5);
color: var(--neon-primary);
}
.skill-card.backend {
border-color: rgba(0, 204, 255, 0.5);
color: var(--neon-secondary);
}
.skill-card.devops {
border-color: rgba(204, 0, 255, 0.5);
color: var(--neon-accent);
}
.skill-card.security {
border-color: rgba(255, 0, 64, 0.5);
color: var(--neon-danger);
}
.skill-card.other {
border-color: rgba(255, 255, 0, 0.5);
color: var(--neon-warning);
}
.skill-card:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: var(--shadow-neon-md) currentColor;
}
.skill-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--spacing-md);
}
.skill-name-row {
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.skill-icon {
font-size: 1.5rem;
}
.skill-name {
font-family: var(--font-cyber);
font-weight: 600;
color: var(--text-primary);
}
.skill-level {
font-family: var(--font-mono);
font-size: 0.875rem;
font-weight: 700;
}
.skill-progress {
position: relative;
height: 8px;
background: rgba(112, 112, 112, 0.3);
border-radius: 4px;
overflow: hidden;
margin-bottom: var(--spacing-md);
}
.skill-progress-bar {
height: 100%;
border-radius: 4px;
transition: width 1s ease-out;
box-shadow: var(--shadow-neon-sm) currentColor;
}
.skill-description {
font-family: var(--font-mono);
font-size: 0.8rem;
color: var(--text-muted);
opacity: 0.7;
transition: opacity 0.3s ease;
}
.skill-card:hover .skill-description {
opacity: 1;
}
.skill-level-indicator {
position: absolute;
top: -4px;
right: -4px;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid currentColor;
transition: transform 0.3s ease;
}
.skill-card:hover .skill-level-indicator {
transform: scale(1.25);
}
.skill-level-indicator.expert {
background: var(--neon-success);
border-color: var(--neon-success);
}
.skill-level-indicator.advanced {
background: var(--neon-primary);
border-color: var(--neon-primary);
}
.skill-level-indicator.intermediate {
background: var(--neon-warning);
border-color: var(--neon-warning);
}
.skill-level-indicator.learning {
background: var(--text-muted);
border-color: var(--text-muted);
}
.skills-legend {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-lg);
justify-content: center;
font-family: var(--font-mono);
font-size: 0.75rem;
}
.legend-item {
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.legend-dot {
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid currentColor;
}
.legend-dot.expert {
background: var(--neon-success);
border-color: var(--neon-success);
}
.legend-dot.advanced {
background: var(--neon-primary);
border-color: var(--neon-primary);
}
.legend-dot.intermediate {
background: var(--neon-warning);
border-color: var(--neon-warning);
}
.legend-dot.learning {
background: var(--text-muted);
border-color: var(--text-muted);
}
/* Timeline */
.timeline {
position: relative;
max-width: 800px;
margin: 0 auto;
}
.timeline::before {
content: "";
position: absolute;
left: 32px;
top: 0;
bottom: 0;
width: 1px;
background: linear-gradient(
to bottom,
var(--neon-primary),
var(--neon-secondary),
rgba(0, 255, 0, 0.3)
);
}
.timeline-item {
position: relative;
padding-left: 80px;
margin-bottom: var(--spacing-2xl);
opacity: 0;
transform: translateX(20px);
animation: fadeInLeft 0.6s ease-out forwards;
}
.timeline-node {
position: absolute;
left: 0;
top: 8px;
width: 32px;
height: 32px;
border-radius: 50%;
border: 2px solid var(--neon-primary);
background: var(--neon-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
box-shadow: var(--shadow-neon-md) var(--neon-primary);
transition: all 0.3s ease;
}
.timeline-item.current .timeline-node {
border-color: var(--neon-secondary);
background: var(--neon-secondary);
box-shadow: var(--shadow-neon-md) var(--neon-secondary);
animation: pulse-neon 2s infinite;
}
.timeline-item:hover .timeline-node {
transform: scale(1.1);
box-shadow: var(--shadow-neon-lg) currentColor;
}
.timeline-content {
background: rgba(22, 22, 32, 0.5);
backdrop-filter: blur(10px);
border: 1px solid rgba(0, 255, 0, 0.3);
border-radius: var(--radius-md);
padding: var(--spacing-lg);
transition: all 0.3s ease;
}
.timeline-item:hover .timeline-content {
transform: scale(1.02);
box-shadow: var(--shadow-neon-md) rgba(0, 255, 0, 0.3);
}
.timeline-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--spacing-lg);
flex-wrap: wrap;
gap: var(--spacing-md);
}
.timeline-title {
font-family: var(--font-cyber);
font-size: 1.25rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: var(--spacing-xs);
}
.timeline-company {
font-family: var(--font-mono);
color: var(--neon-primary);
}
.timeline-period {
font-family: var(--font-mono);
font-size: 0.875rem;
padding: var(--spacing-xs) var(--spacing-md);
border-radius: 20px;
border: 1px solid var(--neon-primary);
color: var(--neon-primary);
background: rgba(0, 255, 0, 0.1);
}
.timeline-item.current .timeline-period {
border-color: var(--neon-secondary);
color: var(--neon-secondary);
background: rgba(0, 204, 255, 0.1);
}
.timeline-description {
list-style: none;
margin-bottom: var(--spacing-lg);
}
.timeline-description li {
display: flex;
align-items: flex-start;
margin-bottom: var(--spacing-sm);
font-family: var(--font-mono);
color: var(--text-secondary);
}
.timeline-description li::before {
content: "▸";
color: var(--neon-primary);
margin-right: var(--spacing-sm);
margin-top: 2px;
}
.timeline-technologies {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
}
.tech-chip {
display: inline-flex;
align-items: center;
padding: var(--spacing-xs) var(--spacing-md);
border-radius: 20px;
background: rgba(0, 255, 0, 0.1);
border: 1px solid rgba(0, 255, 0, 0.5);
color: var(--neon-primary);
font-family: var(--font-mono);
font-size: 0.8rem;
transition: all 0.3s ease;
}
.tech-chip:hover {
background: rgba(0, 255, 0, 0.2);
box-shadow: var(--shadow-neon-sm) var(--neon-primary);
text-shadow: var(--shadow-neon-sm) var(--neon-primary);
}
.current-badge {
position: absolute;
top: -8px;
right: -8px;
background: var(--neon-secondary);
color: var(--bg-primary);
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: 12px;
font-family: var(--font-cyber);
font-size: 0.7rem;
font-weight: 700;
animation: pulse 2s infinite;
}
/* Contact Section */
.contact-content {
max-width: 800px;
margin: 0 auto;
}
.contact-intro {
font-family: var(--font-mono);
font-size: 1.1rem;
color: var(--text-secondary);
text-align: center;
margin-bottom: var(--spacing-2xl);
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-2xl);
margin-bottom: var(--spacing-2xl);
}
.contact-subtitle {
font-family: var(--font-cyber);
font-size: 1.1rem;
margin-bottom: var(--spacing-lg);
}
.contact-subtitle.secondary {
color: var(--neon-secondary);
}
.contact-subtitle.warning {
color: var(--neon-warning);
}
.contact-methods {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.contact-method {
display: flex;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-md);
border-radius: var(--radius-md);
border: 1px solid rgba(112, 112, 112, 0.3);
background: rgba(22, 22, 32, 0.5);
text-decoration: none;
transition: all 0.3s ease;
}
.contact-method.primary {
border-color: rgba(0, 255, 0, 0.3);
color: var(--neon-primary);
}
.contact-method.secondary {
border-color: rgba(0, 204, 255, 0.3);
color: var(--neon-secondary);
}
.contact-method.accent {
border-color: rgba(204, 0, 255, 0.3);
color: var(--neon-accent);
}
.contact-method:hover {
border-color: currentColor;
background: rgba(22, 22, 32, 0.8);
box-shadow: var(--shadow-neon-sm) currentColor;
text-shadow: var(--shadow-neon-sm) currentColor;
}
.method-icon {
font-size: 1.5rem;
}
.method-title {
font-family: var(--font-cyber);
font-weight: 600;
margin-bottom: var(--spacing-xs);
}
.method-details {
font-family: var(--font-mono);
font-size: 0.875rem;
opacity: 0.8;
}
.security-info {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.security-item {
padding: var(--spacing-md);
border-radius: var(--radius-md);
background: rgba(22, 22, 32, 0.5);
border: 1px solid rgba(112, 112, 112, 0.3);
}
.security-item.warning {
border-color: rgba(255, 255, 0, 0.3);
}
.security-item.success {
border-color: rgba(0, 255, 0, 0.3);
}
.security-item.primary {
border-color: rgba(0, 255, 0, 0.3);
}
.security-title {
font-family: var(--font-cyber);
font-size: 0.9rem;
margin-bottom: var(--spacing-xs);
}
.security-item.warning .security-title {
color: var(--neon-warning);
}
.security-item.success .security-title {
color: var(--neon-success);
}
.security-item.primary .security-title {
color: var(--neon-primary);
}
.security-details {
font-family: var(--font-mono);
font-size: 0.8rem;
color: var(--text-muted);
word-break: break-all;
}
.contact-footer {
text-align: center;
padding-top: var(--spacing-lg);
border-top: 1px solid rgba(112, 112, 112, 0.2);
font-family: var(--font-mono);
font-size: 0.875rem;
color: var(--text-muted);
}
/* Floating Navigation */
.floating-nav {
position: fixed;
right: 24px;
top: 50%;
transform: translateY(-50%);
z-index: 100;
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.nav-dot {
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid var(--text-muted);
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
}
.nav-dot:hover,
.nav-dot.active {
background: var(--neon-primary);
border-color: var(--neon-primary);
box-shadow: var(--shadow-neon-sm) var(--neon-primary);
transform: scale(1.25);
}
/* Utility Classes */
.hidden {
display: none !important;
}
.fade-in {
animation: fadeIn 0.5s ease-out;
}
.fade-in-up {
animation: fadeInUp 0.6s ease-out;
}
.fade-in-left {
animation: fadeInLeft 1s ease-out;
}
.fade-in-right {
animation: fadeInRight 1s ease-out;
}
/* Animations */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
@keyframes pulse-neon {
0%,
100% {
box-shadow: var(--shadow-neon-sm) currentColor;
}
50% {
box-shadow: var(--shadow-neon-lg) currentColor;
}
}
@keyframes blink {
0%,
50% {
opacity: 1;
}
51%,
100% {
opacity: 0;
}
}
@keyframes glitch {
0%,
100% {
transform: translate(0);
}
20% {
transform: translate(-2px, 2px);
}
40% {
transform: translate(-2px, -2px);
}
60% {
transform: translate(2px, 2px);
}
80% {
transform: translate(2px, -2px);
}
}
@keyframes glitch-1 {
0%,
100% {
transform: translate(0);
}
20% {
transform: translate(-2px, 2px);
}
40% {
transform: translate(-2px, -2px);
}
60% {
transform: translate(2px, 2px);
}
80% {
transform: translate(2px, -2px);
}
}
@keyframes glitch-2 {
0%,
100% {
transform: translate(0);
}
20% {
transform: translate(2px, -2px);
}
40% {
transform: translate(2px, 2px);
}
60% {
transform: translate(-2px, -2px);
}
80% {
transform: translate(-2px, 2px);
}
}
@keyframes scanlines {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(100vh);
}
}
@keyframes scanlines-avatar {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(200px);
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Mobile Responsive Design */
@media (max-width: 768px) {
.hero-content {
grid-template-columns: 1fr;
gap: var(--spacing-xl);
text-align: center;
}
.hero-left,
.hero-right {
order: 0;
}
.hero-title {
font-size: clamp(2rem, 8vw, 3rem);
}
.avatar-outer-ring {
width: 150px;
height: 150px;
}
.stats-grid {
gap: var(--spacing-sm);
}
.status-badges {
justify-content: center;
}
.content-section {
padding: var(--spacing-lg);
}
.section-title {
font-size: clamp(1.5rem, 6vw, 2.5rem);
}
.terminal-container {
height: 500px;
}
.terminal-title {
display: none;
}
.terminal-time {
display: none;
}
.terminal-prompt {
font-size: 0.75rem;
}
.terminal-input {
font-size: 0.75rem;
}
.terminal-content {
font-size: 0.75rem;
padding: var(--spacing-sm);
}
.about-details {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}
.skill-filters {
gap: var(--spacing-sm);
}
.filter-btn {
font-size: 0.75rem;
padding: var(--spacing-xs) var(--spacing-md);
}
.skills-grid {
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
.skills-legend {
gap: var(--spacing-md);
}
.timeline::before {
left: 16px;
}
.timeline-item {
padding-left: 50px;
}
.timeline-node {
width: 24px;
height: 24px;
font-size: 0.8rem;
}
.timeline-header {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-sm);
}
.contact-grid {
grid-template-columns: 1fr;
gap: var(--spacing-xl);
}
.floating-nav {
right: 12px;
}
.nav-dot {
width: 8px;
height: 8px;
}
/* Reduce neon effects intensity on mobile for battery */
.neon-glow {
text-shadow: var(--shadow-neon-sm) currentColor;
}
.neon-box {
box-shadow:
var(--shadow-neon-sm) rgba(0, 255, 0, 0.2),
inset var(--shadow-neon-sm) rgba(0, 255, 0, 0.05);
}
.pulse-neon {
animation: pulse-neon 4s infinite;
}
.glitch-text:hover {
animation: glitch 0.5s infinite;
}
}
@media (max-width: 480px) {
.hero-section {
padding: var(--spacing-md);
}
.avatar-outer-ring {
width: 120px;
height: 120px;
}
.nav-buttons {
gap: var(--spacing-sm);
}
.nav-btn {
padding: var(--spacing-md);
}
.nav-icon {
font-size: 1.5rem;
}
.nav-title {
font-size: 1rem;
}
.nav-description {
font-size: 0.75rem;
}
.quick-contact {
gap: var(--spacing-sm);
}
.contact-btn {
padding: var(--spacing-sm);
}
.contact-icon {
font-size: 1.25rem;
}
.contact-label {
font-size: 0.7rem;
}
}
/* Print Styles */
@media print {
.matrix-canvas,
.scanlines-overlay,
.grid-overlay,
.floating-nav {
display: none;
}
body {
background: white;
color: black;
}
.neon-glow,
.neon-box {
color: black;
background: transparent;
border-color: black;
box-shadow: none;
text-shadow: none;
}
}
/* High contrast mode support */
@media (prefers-contrast: high) {
:root {
--neon-primary: #00ff00;
--neon-secondary: #ffffff;
--neon-accent: #ffff00;
--text-primary: #ffffff;
--text-secondary: #cccccc;
--bg-primary: #000000;
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.scanline,
.avatar-scanline,
.rotating-ring {
animation: none;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment