| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>CyberNexus | Hacker Showcase</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300;400;600&display=swap'); |
| |
| :root { |
| --primary: #0aff9d; |
| --secondary: #00e676; |
| --dark: #0a192f; |
| --darker: #020c1b; |
| } |
| |
| body { |
| font-family: 'Source Code Pro', monospace; |
| background-color: var(--darker); |
| color: white; |
| overflow-x: hidden; |
| } |
| |
| .glow { |
| text-shadow: 0 0 5px var(--primary), 0 0 10px var(--primary); |
| } |
| |
| .terminal { |
| background-color: rgba(10, 25, 47, 0.8); |
| border: 1px solid var(--primary); |
| box-shadow: 0 0 20px rgba(10, 255, 157, 0.3); |
| } |
| |
| .terminal-header { |
| background-color: var(--dark); |
| border-bottom: 1px solid var(--primary); |
| } |
| |
| .terminal-body { |
| height: 300px; |
| overflow-y: auto; |
| } |
| |
| .command-line { |
| border-top: 1px solid rgba(10, 255, 157, 0.2); |
| } |
| |
| .cursor { |
| animation: blink 1s infinite; |
| } |
| |
| @keyframes blink { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0; } |
| } |
| |
| .matrix-bg { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| z-index: -1; |
| opacity: 0.1; |
| } |
| |
| .hacker-card { |
| transition: all 0.3s ease; |
| border: 1px solid rgba(10, 255, 157, 0.2); |
| } |
| |
| .hacker-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 20px rgba(10, 255, 157, 0.2); |
| border-color: var(--primary); |
| } |
| |
| .progress-bar { |
| height: 4px; |
| background: linear-gradient(90deg, var(--darker), var(--primary), var(--darker)); |
| background-size: 200% 100%; |
| animation: progress 2s linear infinite; |
| } |
| |
| @keyframes progress { |
| 0% { background-position: 0% 50%; } |
| 100% { background-position: 200% 50%; } |
| } |
| |
| .scanline { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient( |
| to bottom, |
| transparent 0%, |
| rgba(10, 255, 157, 0.05) 50%, |
| transparent 100% |
| ); |
| background-size: 100% 8px; |
| animation: scan 8s linear infinite; |
| pointer-events: none; |
| z-index: 9999; |
| } |
| |
| @keyframes scan { |
| from { transform: translateY(-100%); } |
| to { transform: translateY(100%); } |
| } |
| |
| .hexagon { |
| clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); |
| } |
| |
| .typewriter { |
| overflow: hidden; |
| border-right: 2px solid var(--primary); |
| white-space: nowrap; |
| animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite; |
| } |
| |
| @keyframes typing { |
| from { width: 0 } |
| to { width: 100% } |
| } |
| |
| @keyframes blink-caret { |
| from, to { border-color: transparent } |
| 50% { border-color: var(--primary) } |
| } |
| </style> |
| </head> |
| <body> |
| |
| <canvas id="matrix" class="matrix-bg"></canvas> |
| |
| |
| <div class="scanline"></div> |
| |
| |
| <header class="bg-dark border-b border-primary border-opacity-20 sticky top-0 z-50"> |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> |
| <div class="flex items-center"> |
| <div class="hexagon bg-primary w-10 h-10 flex items-center justify-center mr-3"> |
| <i class="fas fa-terminal text-darker text-xl"></i> |
| </div> |
| <h1 class="text-2xl font-bold glow">Cyber<span class="text-primary">Nexus</span></h1> |
| </div> |
| <nav class="hidden md:flex space-x-8"> |
| <a href="#about" class="text-gray-300 hover:text-primary transition duration-300">[root@home]</a> |
| <a href="#skills" class="text-gray-300 hover:text-primary transition duration-300">[skills]</a> |
| <a href="#projects" class="text-gray-300 hover:text-primary transition duration-300">[projects]</a> |
| <a href="#contact" class="text-gray-300 hover:text-primary transition duration-300">[contact]</a> |
| </nav> |
| <button class="md:hidden text-gray-300 hover:text-primary"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
| </div> |
| <div class="progress-bar"></div> |
| </header> |
| |
| |
| <section class="min-h-screen flex items-center justify-center relative overflow-hidden"> |
| <div class="container mx-auto px-4 py-20 text-center"> |
| <div class="max-w-4xl mx-auto"> |
| <div class="text-sm text-primary mb-4 tracking-widest">WELCOME TO MY DIGITAL REALM</div> |
| <h1 class="text-5xl md:text-7xl font-bold mb-6"> |
| <span class="text-white">I </span> |
| <span class="text-primary typewriter">hack systems</span> |
| </h1> |
| <p class="text-xl text-gray-400 mb-10 max-w-2xl mx-auto"> |
| Penetration tester | Security researcher | Ethical hacker |
| </p> |
| <div class="flex justify-center space-x-4"> |
| <button class="bg-primary hover:bg-secondary text-darker font-bold py-3 px-6 rounded transition duration-300 flex items-center"> |
| <i class="fas fa-terminal mr-2"></i> Connect |
| </button> |
| <button class="border border-primary text-primary hover:bg-primary hover:text-darker font-bold py-3 px-6 rounded transition duration-300 flex items-center"> |
| <i class="fas fa-code mr-2"></i> Explore |
| </button> |
| </div> |
| </div> |
| |
| <div class="terminal max-w-3xl mx-auto mt-20 rounded-lg overflow-hidden"> |
| <div class="terminal-header flex items-center px-4 py-2"> |
| <div class="flex space-x-2 mr-4"> |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> |
| </div> |
| <div class="text-gray-400 text-sm">user@cybernexus:~</div> |
| </div> |
| <div class="terminal-body p-4 text-green-400 font-mono text-sm" id="terminal-output"> |
| <div>> Initializing system...</div> |
| <div>> Loading security protocols...</div> |
| <div>> Establishing encrypted connection...</div> |
| <div class="text-primary">> Welcome to CyberNexus v3.1.4</div> |
| <div>> Type 'help' for available commands</div> |
| </div> |
| <div class="command-line p-4 flex items-center"> |
| <span class="text-primary mr-2">$</span> |
| <input type="text" id="terminal-input" class="bg-transparent border-none outline-none text-green-400 flex-grow font-mono" placeholder="Enter command..." autocomplete="off"> |
| <span class="cursor">█</span> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="about" class="py-20 bg-dark bg-opacity-70 backdrop-blur-sm"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"> |
| <span class="text-gray-300">About </span> |
| <span class="text-primary">Me</span> |
| </h2> |
| <div class="w-20 h-1 bg-primary mx-auto mb-6"></div> |
| <p class="text-gray-400 max-w-2xl mx-auto"> |
| Digital security specialist with a passion for uncovering vulnerabilities and strengthening systems. |
| </p> |
| </div> |
| |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/3 mb-10 md:mb-0 flex justify-center"> |
| <div class="relative group"> |
| <div class="absolute -inset-1 bg-primary rounded-lg blur opacity-75 group-hover:opacity-100 transition duration-300"></div> |
| <div class="relative bg-darker rounded-lg overflow-hidden border border-primary border-opacity-30"> |
| <img src="https://images.unsplash.com/photo-1560253096-0bdf7a386c77?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Hacker" class="w-full h-auto opacity-90 hover:opacity-100 transition duration-300"> |
| </div> |
| </div> |
| </div> |
| |
| <div class="md:w-2/3 md:pl-16"> |
| <h3 class="text-2xl font-bold mb-6 text-primary">Who am I?</h3> |
| <p class="text-gray-300 mb-6"> |
| I'm a cybersecurity expert with over 8 years of experience in penetration testing, vulnerability assessment, and security architecture. My journey began when I was 14, hacking into my school's grading system (don't worry, I reported the vulnerabilities responsibly). |
| </p> |
| <p class="text-gray-300 mb-6"> |
| I specialize in red team operations, social engineering, and advanced persistent threat simulation. My mission is to help organizations identify weaknesses before malicious actors can exploit them. |
| </p> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8"> |
| <div class="hacker-card bg-darker p-6 rounded-lg border border-gray-800 hover:border-primary"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-primary bg-opacity-20 p-2 rounded-full mr-4"> |
| <i class="fas fa-shield-alt text-primary"></i> |
| </div> |
| <h4 class="text-lg font-bold">Security First</h4> |
| </div> |
| <p class="text-gray-400 text-sm"> |
| Every system has vulnerabilities. My job is to find them before the bad guys do. |
| </p> |
| </div> |
| |
| <div class="hacker-card bg-darker p-6 rounded-lg border border-gray-800 hover:border-primary"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-primary bg-opacity-20 p-2 rounded-full mr-4"> |
| <i class="fas fa-lock text-primary"></i> |
| </div> |
| <h4 class="text-lg font-bold">Ethical Approach</h4> |
| </div> |
| <p class="text-gray-400 text-sm"> |
| With great power comes great responsibility. I adhere to strict ethical guidelines. |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="skills" class="py-20"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"> |
| <span class="text-gray-300">My </span> |
| <span class="text-primary">Skills</span> |
| </h2> |
| <div class="w-20 h-1 bg-primary mx-auto mb-6"></div> |
| <p class="text-gray-400 max-w-2xl mx-auto"> |
| Mastery of tools and techniques to assess and secure digital infrastructure. |
| </p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| |
| <div class="hacker-card bg-dark p-8 rounded-lg border border-gray-800 hover:border-primary"> |
| <div class="text-primary text-4xl mb-4"> |
| <i class="fas fa-fingerprint"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-4">Penetration Testing</h3> |
| <p class="text-gray-400 mb-6"> |
| Simulating cyber attacks to identify exploitable vulnerabilities in systems, networks, and applications. |
| </p> |
| <div class="space-y-3"> |
| <div> |
| <div class="flex justify-between text-sm text-gray-400 mb-1"> |
| <span>Kali Linux</span> |
| <span>95%</span> |
| </div> |
| <div class="w-full bg-gray-800 rounded-full h-2"> |
| <div class="bg-primary h-2 rounded-full" style="width: 95%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between text-sm text-gray-400 mb-1"> |
| <span>Metasploit</span> |
| <span>90%</span> |
| </div> |
| <div class="w-full bg-gray-800 rounded-full h-2"> |
| <div class="bg-primary h-2 rounded-full" style="width: 90%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between text-sm text-gray-400 mb-1"> |
| <span>Burp Suite</span> |
| <span>88%</span> |
| </div> |
| <div class="w-full bg-gray-800 rounded-full h-2"> |
| <div class="bg-primary h-2 rounded-full" style="width: 88%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="hacker-card bg-dark p-8 rounded-lg border border-gray-800 hover:border-primary"> |
| <div class="text-primary text-4xl mb-4"> |
| <i class="fas fa-user-secret"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-4">Social Engineering</h3> |
| <p class="text-gray-400 mb-6"> |
| Manipulating individuals to divulge confidential information through psychological tactics. |
| </p> |
| <div class="space-y-3"> |
| <div> |
| <div class="flex justify-between text-sm text-gray-400 mb-1"> |
| <span>Phishing</span> |
| <span>92%</span> |
| </div> |
| <div class="w-full bg-gray-800 rounded-full h-2"> |
| <div class="bg-primary h-2 rounded-full" style="width: 92%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between text-sm text-gray-400 mb-1"> |
| <span>Pretexting</span> |
| <span>85%</span> |
| </div> |
| <div class="w-full bg-gray-800 rounded-full h-2"> |
| <div class="bg-primary h-2 rounded-full" style="width: 85%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between text-sm text-gray-400 mb-1"> |
| <span>Impersonation</span> |
| <span>88%</span> |
| </div> |
| <div class="w-full bg-gray-800 rounded-full h-2"> |
| <div class="bg-primary h-2 rounded-full" style="width: 88%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="hacker-card bg-dark p-8 rounded-lg border border-gray-800 hover:border-primary"> |
| <div class="text-primary text-4xl mb-4"> |
| <i class="fas fa-code"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-4">Secure Coding</h3> |
| <p class="text-gray-400 mb-6"> |
| Developing applications with security in mind from the ground up to prevent vulnerabilities. |
| </p> |
| <div class="space-y-3"> |
| <div> |
| <div class="flex justify-between text-sm text-gray-400 mb-1"> |
| <span>Python</span> |
| <span>90%</span> |
| </div> |
| <div class="w-full bg-gray-800 rounded-full h-2"> |
| <div class="bg-primary h-2 rounded-full" style="width: 90%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between text-sm text-gray-400 mb-1"> |
| <span>JavaScript</span> |
| <span>85%</span> |
| </div> |
| <div class="w-full bg-gray-800 rounded-full h-2"> |
| <div class="bg-primary h-2 rounded-full" style="width: 85%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between text-sm text-gray-400 mb-1"> |
| <span>C/C++</span> |
| <span>80%</span> |
| </div> |
| <div class="w-full bg-gray-800 rounded-full h-2"> |
| <div class="bg-primary h-2 rounded-full" style="width: 80%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-16 grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4"> |
| <div class="bg-dark p-4 rounded-lg border border-gray-800 flex flex-col items-center hover:border-primary transition duration-300"> |
| <img src="https://www.kali.org/images/kali-logo.svg" alt="Kali Linux" class="h-12 mb-2"> |
| <span class="text-gray-400 text-sm">Kali Linux</span> |
| </div> |
| <div class="bg-dark p-4 rounded-lg border border-gray-800 flex flex-col items-center hover:border-primary transition duration-300"> |
| <img src="https://www.metasploit.com/assets/favicon-32x32-3eb5f7b8c7c4b7c1cd7d7a21a9d9e9e5.png" alt="Metasploit" class="h-12 mb-2"> |
| <span class="text-gray-400 text-sm">Metasploit</span> |
| </div> |
| <div class="bg-dark p-4 rounded-lg border border-gray-800 flex flex-col items-center hover:border-primary transition duration-300"> |
| <img src="https://portswigger.net/burp/favicon.ico" alt="Burp Suite" class="h-12 mb-2"> |
| <span class="text-gray-400 text-sm">Burp Suite</span> |
| </div> |
| <div class="bg-dark p-4 rounded-lg border border-gray-800 flex flex-col items-center hover:border-primary transition duration-300"> |
| <img src="https://www.wireshark.org/assets/images/wireshark_icon_64x64.png" alt="Wireshark" class="h-12 mb-2"> |
| <span class="text-gray-400 text-sm">Wireshark</span> |
| </div> |
| <div class="bg-dark p-4 rounded-lg border border-gray-800 flex flex-col items-center hover:border-primary transition duration-300"> |
| <img src="https://nmap.org/images/sitelogo-nmap.svg" alt="Nmap" class="h-12 mb-2"> |
| <span class="text-gray-400 text-sm">Nmap</span> |
| </div> |
| <div class="bg-dark p-4 rounded-lg border border-gray-800 flex flex-col items-center hover:border-primary transition duration-300"> |
| <img src="https://www.python.org/static/favicon.ico" alt="Python" class="h-12 mb-2"> |
| <span class="text-gray-400 text-sm">Python</span> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="projects" class="py-20 bg-dark bg-opacity-70 backdrop-blur-sm"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"> |
| <span class="text-gray-300">My </span> |
| <span class="text-primary">Projects</span> |
| </h2> |
| <div class="w-20 h-1 bg-primary mx-auto mb-6"></div> |
| <p class="text-gray-400 max-w-2xl mx-auto"> |
| Selected security research and development projects demonstrating my expertise. |
| </p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="hacker-card bg-darker rounded-lg overflow-hidden border border-gray-800 hover:border-primary transition duration-300"> |
| <div class="relative overflow-hidden h-48"> |
| <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Project" class="w-full h-full object-cover transition duration-500 hover:scale-105"> |
| <div class="absolute inset-0 bg-primary bg-opacity-20 flex items-center justify-center opacity-0 hover:opacity-100 transition duration-300"> |
| <a href="#" class="bg-primary text-darker px-6 py-2 rounded-full font-bold">View Details</a> |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-center mb-2"> |
| <h3 class="text-xl font-bold">Zero-Day Exploit Research</h3> |
| <span class="text-xs bg-primary text-darker px-2 py-1 rounded">2023</span> |
| </div> |
| <p class="text-gray-400 mb-4"> |
| Discovered and responsibly disclosed 3 zero-day vulnerabilities in popular enterprise software. |
| </p> |
| <div class="flex flex-wrap gap-2"> |
| <span class="text-xs bg-gray-800 text-primary px-2 py-1 rounded">Exploit Development</span> |
| <span class="text-xs bg-gray-800 text-primary px-2 py-1 rounded">Reverse Engineering</span> |
| <span class="text-xs bg-gray-800 text-primary px-2 py-1 rounded">CVE Research</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="hacker-card bg-darker rounded-lg overflow-hidden border border-gray-800 hover:border-primary transition duration-300"> |
| <div class="relative overflow-hidden h-48"> |
| <img src="https://images.unsplash.com/photo-1563206767-5b18f218e8df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Project" class="w-full h-full object-cover transition duration-500 hover:scale-105"> |
| <div class="absolute inset-0 bg-primary bg-opacity-20 flex items-center justify-center opacity-0 hover:opacity-100 transition duration-300"> |
| <a href="#" class="bg-primary text-darker px-6 py-2 rounded-full font-bold">View Details</a> |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-center mb-2"> |
| <h3 class="text-xl font-bold">Red Team Operation</h3> |
| <span class="text-xs bg-primary text-darker px-2 py-1 rounded">2022</span> |
| </div> |
| <p class="text-gray-400 mb-4"> |
| Led a 3-month red team engagement for Fortune 500 company, uncovering critical infrastructure vulnerabilities. |
| </p> |
| <div class="flex flex-wrap gap-2"> |
| <span class="text-xs bg-gray-800 text-primary px-2 py-1 rounded">Penetration Testing</span> |
| <span class="text-xs bg-gray-800 text-primary px-2 py-1 rounded">Lateral Movement</span> |
| <span class="text-xs bg-gray-800 text-primary px-2 py-1 rounded">Privilege Escalation</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="hacker-card bg-darker rounded-lg overflow-hidden border border-gray-800 hover:border-primary transition duration-300"> |
| <div class="relative overflow-hidden h-48"> |
| <img src="https://images.unsplash.com/photo-1563013544-824ae1b704d3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Project" class="w-full h-full object-cover transition duration-500 hover:scale-105"> |
| <div class="absolute inset-0 bg-primary bg-opacity-20 flex items-center justify-center opacity-0 hover:opacity-100 transition duration-300"> |
| <a href="#" class="bg-primary text-darker px-6 py-2 rounded-full font-bold">View Details</a> |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-center mb-2"> |
| <h3 class="text-xl font-bold">Secure Framework Development</h3> |
| <span class="text-xs bg-primary text-darker px-2 py-1 rounded">2021</span> |
| </div> |
| <p class="text-gray-400 mb-4"> |
| Developed a secure web application framework with built-in protection against OWASP Top 10 vulnerabilities. |
| </p> |
| <div class="flex flex-wrap gap-2"> |
| <span class="text-xs bg-gray-800 text-primary px-2 py-1 rounded">Secure Coding</span> |
| <span class="text-xs bg-gray-800 text-primary px-2 py-1 rounded">Web Security</span> |
| <span class="text-xs bg-gray-800 text-primary px-2 py-1 rounded">Framework Design</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center mt-16"> |
| <button class="border border-primary text-primary hover:bg-primary hover:text-darker font-bold py-3 px-8 rounded transition duration-300 flex items-center mx-auto"> |
| <i class="fas fa-archive mr-2"></i> View All Projects |
| </button> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="contact" class="py-20"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"> |
| <span class="text-gray-300">Get In </span> |
| <span class="text-primary">Touch</span> |
| </h2> |
| <div class="w-20 h-1 bg-primary mx-auto mb-6"></div> |
| <p class="text-gray-400 max-w-2xl mx-auto"> |
| For security consulting, research collaboration, or just to chat about cybersecurity. |
| </p> |
| </div> |
| |
| <div class="max-w-4xl mx-auto"> |
| <div class="bg-dark rounded-lg border border-gray-800 overflow-hidden"> |
| <div class="grid grid-cols-1 md:grid-cols-2"> |
| <div class="p-8 md:p-10"> |
| <h3 class="text-xl font-bold mb-6 text-primary">Send a Secure Message</h3> |
| |
| <form> |
| <div class="mb-6"> |
| <label for="name" class="block text-gray-400 text-sm mb-2">Your Name</label> |
| <input type="text" id="name" class="w-full bg-darker border border-gray-800 rounded px-4 py-3 text-gray-300 focus:outline-none focus:border-primary transition duration-300" placeholder="John Doe"> |
| </div> |
| <div class="mb-6"> |
| <label for="email" class="block text-gray-400 text-sm mb-2">Your Email</label> |
| <input type="email" id="email" class="w-full bg-darker border border-gray-800 rounded px-4 py-3 text-gray-300 focus:outline-none focus:border-primary transition duration-300" placeholder="john@example.com"> |
| </div> |
| <div class="mb-6"> |
| <label for="subject" class="block text-gray-400 text-sm mb-2">Subject</label> |
| <input type="text" id="subject" class="w-full bg-darker border border-gray-800 rounded px-4 py-3 text-gray-300 focus:outline-none focus:border-primary transition duration-300" placeholder="Security Consultation"> |
| </div> |
| <div class="mb-8"> |
| <label for="message" class="block text-gray-400 text-sm mb-2">Message</label> |
| <textarea id="message" rows="4" class="w-full bg-darker border border-gray-800 rounded px-4 py-3 text-gray-300 focus:outline-none focus:border-primary transition duration-300" placeholder="Your message here..."></textarea> |
| </div> |
| <button type="submit" class="w-full bg-primary hover:bg-secondary text-darker font-bold py-3 px-6 rounded transition duration-300"> |
| <i class="fas fa-paper-plane mr-2"></i> Send Encrypted Message |
| </button> |
| </form> |
| </div> |
| |
| <div class="bg-darker p-8 md:p-10 flex flex-col justify-between"> |
| <div> |
| <h3 class="text-xl font-bold mb-6 text-primary">Contact Information</h3> |
| <p class="text-gray-400 mb-8"> |
| For sensitive communications, please use PGP encryption. My public key fingerprint is available upon request. |
| </p> |
| |
| <div class="space-y-5"> |
| <div class="flex items-start"> |
| <div class="bg-primary bg-opacity-20 p-2 rounded-full mr-4"> |
| <i class="fas fa-envelope text-primary"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-gray-300 mb-1">Email</h4> |
| <a href="mailto:secure@cybernexus.io" class="text-gray-400 hover:text-primary transition duration-300">secure@cybernexus.io</a> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-primary bg-opacity-20 p-2 rounded-full mr-4"> |
| <i class="fas fa-key text-primary"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-gray-300 mb-1">PGP Key</h4> |
| <a href="#" class="text-gray-400 hover:text-primary transition duration-300">0x1A2B3C4D5E6F7G8H</a> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-primary bg-opacity-20 p-2 rounded-full mr-4"> |
| <i class="fab fa-github text-primary"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-gray-300 mb-1">GitHub</h4> |
| <a href="#" class="text-gray-400 hover:text-primary transition duration-300">github.com/cybernexus</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-10"> |
| <h4 class="font-bold text-gray-300 mb-4">Follow Me</h4> |
| <div class="flex space-x-4"> |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 hover:text-primary hover:bg-primary hover:bg-opacity-20 transition duration-300"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 hover:text-primary hover:bg-primary hover:bg-opacity-20 transition duration-300"> |
| <i class="fab fa-linkedin-in"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 hover:text-primary hover:bg-primary hover:bg-opacity-20 transition duration-300"> |
| <i class="fab fa-reddit-alien"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 hover:text-primary hover:bg-primary hover:bg-opacity-20 transition duration-300"> |
| <i class="fab fa-hacker-news"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <footer class="bg-darker py-10 border-t border-gray-800"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="flex items-center mb-4 md:mb-0"> |
| <div class="hexagon bg-primary w-8 h-8 flex items-center justify-center mr-3"> |
| <i class="fas fa-terminal text-darker"></i> |
| </div> |
| <h1 class="text-xl font-bold">Cyber<span class="text-primary">Nexus</span></h1> |
| </div> |
| |
| <div class="text-gray-400 text-sm mb-4 md:mb-0"> |
| © 2023 CyberNexus. All rights reserved. |
| </div> |
| |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-primary transition duration-300"> |
| <i class="fas fa-lock"></i> Privacy |
| </a> |
| <a href="#" class="text-gray-400 hover:text-primary transition duration-300"> |
| <i class="fas fa-shield-alt"></i> Security |
| </a> |
| <a href="#" class="text-gray-400 hover:text-primary transition duration-300"> |
| <i class="fas fa-code"></i> Source |
| </a> |
| </div> |
| </div> |
| </div> |
| </footer> |
| |
| |
| <script> |
| |
| const canvas = document.getElementById('matrix'); |
| const ctx = canvas.getContext('2d'); |
| |
| canvas.width = window.innerWidth; |
| canvas.height = window.innerHeight; |
| |
| const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン'; |
| const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; |
| const nums = '0123456789'; |
| const symbols = '!"#$%&\'()*+,-./:;<=>?@[\\]^_`{|}~'; |
| |
| const alphabet = katakana + latin + nums + symbols; |
| |
| const fontSize = 16; |
| const columns = canvas.width / fontSize; |
| |
| const rainDrops = []; |
| |
| for (let x = 0; x < columns; x++) { |
| rainDrops[x] = 1; |
| } |
| |
| const draw = () => { |
| ctx.fillStyle = 'rgba(2, 12, 27, 0.05)'; |
| ctx.fillRect(0, 0, canvas.width, canvas.height); |
| |
| ctx.fillStyle = '#0aff9d'; |
| ctx.font = fontSize + 'px monospace'; |
| |
| for (let i = 0; i < rainDrops.length; i++) { |
| const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length)); |
| ctx.fillText(text, i * fontSize, rainDrops[i] * fontSize); |
| |
| if (rainDrops[i] * fontSize > canvas.height && Math.random() > 0.975) { |
| rainDrops[i] = 0; |
| } |
| rainDrops[i]++; |
| } |
| }; |
| |
| setInterval(draw, 30); |
| |
| |
| const terminalInput = document.getElementById('terminal-input'); |
| const terminalOutput = document.getElementById('terminal-output'); |
| |
| const commands = { |
| help: 'Available commands: help, about, skills, projects, contact, clear', |
| about: 'I\'m a cybersecurity expert with over 8 years of experience in penetration testing and security research.', |
| skills: 'My skills include penetration testing, social engineering, secure coding, and vulnerability research.', |
| projects: 'I\'ve worked on various security projects including zero-day research and red team operations.', |
| contact: 'You can reach me at secure@cybernexus.io (PGP encrypted preferred).', |
| clear: function() { terminalOutput.innerHTML = ''; return ''; }, |
| sudo: 'Nice try. ;)', |
| hack: 'Initiating hack sequence... Just kidding! Ethical hackers don\'t hack without permission.', |
| ls: 'about.txt projects/ skills.md contact.html', |
| whoami: 'You are a visitor to my digital domain. Welcome!', |
| date: new Date().toString(), |
| echo: function(args) { return args.join(' '); } |
| }; |
| |
| terminalInput.addEventListener('keydown', (e) => { |
| if (e.key === 'Enter') { |
| const input = terminalInput.value.trim(); |
| terminalInput.value = ''; |
| |
| if (input) { |
| |
| const userInput = document.createElement('div'); |
| userInput.textContent = `$ ${input}`; |
| userInput.className = 'text-gray-400'; |
| terminalOutput.appendChild(userInput); |
| |
| |
| const parts = input.split(' '); |
| const cmd = parts[0].toLowerCase(); |
| const args = parts.slice(1); |
| |
| let output = ''; |
| |
| if (commands[cmd]) { |
| if (typeof commands[cmd] === 'function') { |
| output = commands[cmd](args); |
| } else { |
| output = commands[cmd]; |
| } |
| } else { |
| output = `Command not found: ${cmd}. Type 'help' for available commands.`; |
| } |
| |
| if (output) { |
| const response = document.createElement('div'); |
| response.textContent = output; |
| response.className = 'text-green-400'; |
| terminalOutput.appendChild(response); |
| } |
| |
| |
| terminalOutput.scrollTop = terminalOutput.scrollHeight; |
| } |
| } |
| }); |
| |
| |
| setTimeout(() => { |
| const welcome = document.createElement('div'); |
| welcome.className = 'text-primary'; |
| welcome.textContent = '> Type \'help\' for available commands'; |
| terminalOutput.appendChild(welcome); |
| terminalOutput.scrollTop = terminalOutput.scrollHeight; |
| }, 3000); |
| |
| |
| window.addEventListener('resize', () => { |
| canvas.width = window.innerWidth; |
| canvas.height = window.innerHeight; |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ |
| behavior: 'smooth' |
| }); |
| }); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=arcoon/xg-hack" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
