Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NEXUS | Hacker Collective</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=Share+Tech+Mono&family=Orbitron:wght@400;700;900&family=Fira+Code:wght@300;400;500&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --primary: #00ff41; | |
| --primary-dim: #00cc33; | |
| --secondary: #0ff; | |
| --bg-dark: #0a0a0a; | |
| --bg-panel: #0d1117; | |
| --text: #e0e0e0; | |
| --danger: #ff0040; | |
| --warning: #ffaa00; | |
| --glitch-1: #ff00ff; | |
| --glitch-2: #00ffff; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: 'Share Tech Mono', monospace; | |
| background: var(--bg-dark); | |
| color: var(--text); | |
| overflow-x: hidden; | |
| cursor: none; | |
| } | |
| /* Custom Cursor */ | |
| .cursor { | |
| width: 20px; | |
| height: 20px; | |
| border: 2px solid var(--primary); | |
| border-radius: 50%; | |
| position: fixed; | |
| pointer-events: none; | |
| z-index: 9999; | |
| transition: transform 0.1s ease; | |
| mix-blend-mode: difference; | |
| } | |
| .cursor-dot { | |
| width: 6px; | |
| height: 6px; | |
| background: var(--primary); | |
| border-radius: 50%; | |
| position: fixed; | |
| pointer-events: none; | |
| z-index: 9999; | |
| } | |
| /* Matrix Rain Canvas */ | |
| #matrix-canvas { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 0; | |
| opacity: 0.15; | |
| } | |
| /* CRT Overlay Effect */ | |
| .crt-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; | |
| z-index: 1000; | |
| background: | |
| repeating-linear-gradient( | |
| 0deg, | |
| rgba(0, 0, 0, 0.15), | |
| rgba(0, 0, 0, 0.15) 1px, | |
| transparent 1px, | |
| transparent 2px | |
| ); | |
| } | |
| .crt-overlay::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.3) 100%); | |
| } | |
| /* Header */ | |
| header { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| padding: 1rem 2rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| z-index: 100; | |
| background: linear-gradient(180deg, rgba(10, 10, 10, 0.95) 0%, transparent 100%); | |
| backdrop-filter: blur(10px); | |
| } | |
| .logo { | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 1.8rem; | |
| font-weight: 900; | |
| color: var(--primary); | |
| text-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary); | |
| letter-spacing: 4px; | |
| position: relative; | |
| } | |
| .logo::before { | |
| content: 'NEXUS'; | |
| position: absolute; | |
| left: 2px; | |
| text-shadow: -1px 0 var(--glitch-1); | |
| clip: rect(44px, 450px, 56px, 0); | |
| animation: glitch-anim 3s infinite linear alternate-reverse; | |
| } | |
| .logo::after { | |
| content: 'NEXUS'; | |
| position: absolute; | |
| left: -2px; | |
| text-shadow: -1px 0 var(--glitch-2); | |
| clip: rect(44px, 450px, 56px, 0); | |
| animation: glitch-anim-2 2s infinite linear alternate-reverse; | |
| } | |
| @keyframes glitch-anim { | |
| 0% { clip: rect(30px, 9999px, 10px, 0); } | |
| 5% { clip: rect(70px, 9999px, 90px, 0); } | |
| 10% { clip: rect(20px, 9999px, 50px, 0); } | |
| 15% { clip: rect(60px, 9999px, 30px, 0); } | |
| 20% { clip: rect(10px, 9999px, 80px, 0); } | |
| 100% { clip: rect(50px, 9999px, 20px, 0); } | |
| } | |
| @keyframes glitch-anim-2 { | |
| 0% { clip: rect(60px, 9999px, 20px, 0); } | |
| 5% { clip: rect(10px, 9999px, 80px, 0); } | |
| 10% { clip: rect(50px, 9999px, 30px, 0); } | |
| 15% { clip: rect(20px, 9999px, 60px, 0); } | |
| 20% { clip: rect(80px, 9999px, 10px, 0); } | |
| 100% { clip: rect(30px, 9999px, 70px, 0); } | |
| } | |
| nav { | |
| display: flex; | |
| gap: 2rem; | |
| } | |
| nav a { | |
| color: var(--text); | |
| text-decoration: none; | |
| font-size: 0.9rem; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| position: relative; | |
| transition: color 0.3s ease; | |
| } | |
| nav a::before { | |
| content: '['; | |
| opacity: 0; | |
| position: absolute; | |
| left: -15px; | |
| color: var(--primary); | |
| transition: opacity 0.3s ease; | |
| } | |
| nav a::after { | |
| content: ']'; | |
| opacity: 0; | |
| position: absolute; | |
| right: -15px; | |
| color: var(--primary); | |
| transition: opacity 0.3s ease; | |
| } | |
| nav a:hover { | |
| color: var(--primary); | |
| text-shadow: 0 0 10px var(--primary); | |
| } | |
| nav a:hover::before, | |
| nav a:hover::after { | |
| opacity: 1; | |
| } | |
| /* Main Content */ | |
| main { | |
| position: relative; | |
| z-index: 1; | |
| padding-top: 80px; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| text-align: center; | |
| padding: 2rem; | |
| position: relative; | |
| } | |
| .hero-title { | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: clamp(2.5rem, 8vw, 6rem); | |
| font-weight: 900; | |
| margin-bottom: 1rem; | |
| position: relative; | |
| } | |
| .hero-title .highlight { | |
| color: var(--primary); | |
| text-shadow: 0 0 20px var(--primary), 0 0 40px var(--primary); | |
| } | |
| .hero-subtitle { | |
| font-size: clamp(1rem, 2vw, 1.5rem); | |
| color: var(--secondary); | |
| margin-bottom: 2rem; | |
| letter-spacing: 4px; | |
| } | |
| /* Terminal Box */ | |
| .terminal { | |
| background: rgba(13, 17, 23, 0.9); | |
| border: 1px solid var(--primary); | |
| border-radius: 8px; | |
| width: min(800px, 90%); | |
| overflow: hidden; | |
| box-shadow: 0 0 30px rgba(0, 255, 65, 0.2), inset 0 0 60px rgba(0, 0, 0, 0.5); | |
| } | |
| .terminal-header { | |
| background: linear-gradient(90deg, var(--primary-dim), var(--primary)); | |
| padding: 0.5rem 1rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .terminal-btn { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| background: var(--bg-dark); | |
| } | |
| .terminal-btn.close { background: #ff5f56; } | |
| .terminal-btn.minimize { background: #ffbd2e; } | |
| .terminal-btn.maximize { background: #27ca40; } | |
| .terminal-title { | |
| flex: 1; | |
| text-align: center; | |
| font-size: 0.8rem; | |
| color: var(--bg-dark); | |
| font-weight: bold; | |
| } | |
| .terminal-body { | |
| padding: 1.5rem; | |
| font-family: 'Fira Code', monospace; | |
| font-size: 0.9rem; | |
| min-height: 200px; | |
| } | |
| .terminal-line { | |
| display: flex; | |
| margin-bottom: 0.5rem; | |
| flex-wrap: wrap; | |
| } | |
| .terminal-prompt { | |
| color: var(--primary); | |
| margin-right: 0.5rem; | |
| } | |
| .terminal-command { | |
| color: var(--secondary); | |
| } | |
| .terminal-output { | |
| color: var(--text); | |
| opacity: 0.8; | |
| padding-left: 1rem; | |
| border-left: 2px solid var(--primary-dim); | |
| margin: 0.5rem 0; | |
| } | |
| /* Typing Cursor */ | |
| .cursor-blink { | |
| animation: blink 1s infinite; | |
| } | |
| @keyframes blink { | |
| 0%, 50% { opacity: 1; } | |
| 51%, 100% { opacity: 0; } | |
| } | |
| /* Scroll Down Indicator */ | |
| .scroll-indicator { | |
| position: absolute; | |
| bottom: 2rem; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 0.5rem; | |
| animation: float 2s ease-in-out infinite; | |
| } | |
| .scroll-indicator span { | |
| font-size: 0.7rem; | |
| letter-spacing: 2px; | |
| color: var(--primary-dim); | |
| } | |
| .scroll-arrow { | |
| width: 20px; | |
| height: 20px; | |
| border-right: 2px solid var(--primary); | |
| border-bottom: 2px solid var(--primary); | |
| transform: rotate(45deg); | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateX(-50%) translateY(0); } | |
| 50% { transform: translateX(-50%) translateY(10px); } | |
| } | |
| /* Sections */ | |
| section { | |
| padding: 6rem 2rem; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| } | |
| .section-title { | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: clamp(1.5rem, 4vw, 2.5rem); | |
| margin-bottom: 3rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .section-title::before { | |
| content: '//'; | |
| color: var(--primary); | |
| font-size: 1.2rem; | |
| } | |
| /* Cards Grid */ | |
| .cards-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .card { | |
| background: var(--bg-panel); | |
| border: 1px solid rgba(0, 255, 65, 0.2); | |
| border-radius: 8px; | |
| padding: 2rem; | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 3px; | |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); | |
| transform: scaleX(0); | |
| transform-origin: left; | |
| transition: transform 0.3s ease; | |
| } | |
| .card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 40px rgba(0, 255, 65, 0.2); | |
| border-color: var(--primary); | |
| } | |
| .card:hover::before { | |
| transform: scaleX(1); | |
| } | |
| .card-icon { | |
| font-size: 2.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .card-title { | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 1.2rem; | |
| margin-bottom: 1rem; | |
| color: var(--primary); | |
| } | |
| .card-text { | |
| font-size: 0.9rem; | |
| opacity: 0.8; | |
| line-height: 1.6; | |
| } | |
| .card-link { | |
| display: inline-block; | |
| margin-top: 1rem; | |
| color: var(--secondary); | |
| text-decoration: none; | |
| font-size: 0.85rem; | |
| letter-spacing: 1px; | |
| position: relative; | |
| } | |
| .card-link::after { | |
| content: ' →'; | |
| transition: transform 0.3s ease; | |
| } | |
| .card-link:hover::after { | |
| transform: translateX(5px); | |
| } | |
| /* Skills Section */ | |
| .skills-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .skill-category { | |
| background: var(--bg-panel); | |
| border: 1px solid rgba(0, 255, 65, 0.2); | |
| border-radius: 8px; | |
| padding: 2rem; | |
| } | |
| .skill-category h3 { | |
| font-family: 'Orbitron', sans-serif; | |
| color: var(--primary); | |
| margin-bottom: 1.5rem; | |
| font-size: 1.1rem; | |
| } | |
| .skill-bar { | |
| margin-bottom: 1.5rem; | |
| } | |
| .skill-info { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 0.5rem; | |
| font-size: 0.85rem; | |
| } | |
| .skill-progress { | |
| height: 6px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 3px; | |
| overflow: hidden; | |
| } | |
| .skill-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); | |
| border-radius: 3px; | |
| width: 0; | |
| transition: width 1.5s ease; | |
| } | |
| /* Stats Section */ | |
| .stats-section { | |
| background: var(--bg-panel); | |
| border-top: 1px solid var(--primary); | |
| border-bottom: 1px solid var(--primary); | |
| } | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 3rem; | |
| text-align: center; | |
| } | |
| .stat-item { | |
| padding: 2rem; | |
| } | |
| .stat-number { | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 3rem; | |
| font-weight: 900; | |
| color: var(--primary); | |
| text-shadow: 0 0 20px var(--primary); | |
| } | |
| .stat-label { | |
| font-size: 0.9rem; | |
| color: var(--secondary); | |
| letter-spacing: 2px; | |
| margin-top: 0.5rem; | |
| } | |
| /* Contact Section */ | |
| .contact-container { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 4rem; | |
| align-items: start; | |
| } | |
| @media (max-width: 768px) { | |
| .contact-container { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .contact-info h3 { | |
| font-family: 'Orbitron', sans-serif; | |
| color: var(--primary); | |
| margin-bottom: 1.5rem; | |
| font-size: 1.3rem; | |
| } | |
| .contact-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| margin-bottom: 1rem; | |
| font-size: 0.9rem; | |
| } | |
| .contact-icon { | |
| color: var(--secondary); | |
| font-size: 1.2rem; | |
| } | |
| .contact-form { | |
| background: var(--bg-panel); | |
| border: 1px solid rgba(0, 255, 65, 0.2); | |
| border-radius: 8px; | |
| padding: 2rem; | |
| } | |
| .form-group { | |
| margin-bottom: 1.5rem; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| font-size: 0.85rem; | |
| color: var(--primary); | |
| letter-spacing: 1px; | |
| } | |
| .form-group input, | |
| .form-group textarea { | |
| width: 100%; | |
| padding: 0.8rem 1rem; | |
| background: rgba(0, 0, 0, 0.3); | |
| border: 1px solid rgba(0, 255, 65, 0.3); | |
| border-radius: 4px; | |
| color: var(--text); | |
| font-family: 'Fira Code', monospace; | |
| font-size: 0.9rem; | |
| transition: border-color 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .form-group input:focus, | |
| .form-group textarea:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 15px rgba(0, 255, 65, 0.2); | |
| } | |
| .form-group textarea { | |
| min-height: 120px; | |
| resize: vertical; | |
| } | |
| .submit-btn { | |
| width: 100%; | |
| padding: 1rem 2rem; | |
| background: transparent; | |
| border: 2px solid var(--primary); | |
| color: var(--primary); | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 1rem; | |
| letter-spacing: 2px; | |
| cursor: none; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .submit-btn::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: var(--primary); | |
| transition: left 0.3s ease; | |
| z-index: -1; | |
| } | |
| .submit-btn:hover { | |
| color: var(--bg-dark); | |
| } | |
| .submit-btn:hover::before { | |
| left: 0; | |
| } | |
| /* Footer */ | |
| footer { | |
| background: var(--bg-panel); | |
| border-top: 1px solid var(--primary); | |
| padding: 2rem; | |
| text-align: center; | |
| } | |
| .footer-content { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .footer-logo { | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 1.5rem; | |
| color: var(--primary); | |
| margin-bottom: 1rem; | |
| } | |
| .footer-links { | |
| display: flex; | |
| justify-content: center; | |
| gap: 2rem; | |
| margin-bottom: 1rem; | |
| } | |
| .footer-links a { | |
| color: var(--text); | |
| text-decoration: none; | |
| font-size: 0.85rem; | |
| opacity: 0.7; | |
| transition: opacity 0.3s ease; | |
| } | |
| .footer-links a:hover { | |
| opacity: 1; | |
| color: var(--primary); | |
| } | |
| .footer-bottom { | |
| font-size: 0.75rem; | |
| opacity: 0.5; | |
| } | |
| .anycoder-link { | |
| color: var(--secondary); | |
| text-decoration: none; | |
| transition: all 0.3s ease; | |
| } | |
| .anycoder-link:hover { | |
| color: var(--primary); | |
| text-shadow: 0 0 10px var(--primary); | |
| } | |
| /* Hexagon Pattern Background */ | |
| .hex-bg { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 0; | |
| opacity: 0.03; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%2300ff41' fill-opacity='1'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); | |
| } | |
| /* Mobile Menu */ | |
| .menu-toggle { | |
| display: none; | |
| flex-direction: column; | |
| gap: 5px; | |
| cursor: none; | |
| z-index: 101; | |
| } | |
| .menu-toggle span { | |
| width: 25px; | |
| height: 2px; | |
| background: var(--primary); | |
| transition: all 0.3s ease; | |
| } | |
| @media (max-width: 768px) { | |
| .menu-toggle { | |
| display: flex; | |
| } | |
| nav { | |
| position: fixed; | |
| top: 0; | |
| right: -100%; | |
| width: 70%; | |
| height: 100vh; | |
| background: var(--bg-panel); | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 2rem; | |
| transition: right 0.3s ease; | |
| border-left: 1px solid var(--primary); | |
| } | |
| nav.active { | |
| right: 0; | |
| } | |
| } | |
| /* Scanline Animation */ | |
| @keyframes scanline { | |
| 0% { transform: translateY(-100%); } | |
| 100% { transform: translateY(100vh); } | |
| } | |
| .scanline { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 4px; | |
| background: linear-gradient(180deg, transparent, rgba(0, 255, 65, 0.1), transparent); | |
| z-index: 999; | |
| animation: scanline 8s linear infinite; | |
| pointer-events: none; | |
| } | |
| /* Binary Rain */ | |
| .binary-rain { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; | |
| z-index: 0; | |
| opacity: 0.1; | |
| font-family: 'Fira Code', monospace; | |
| font-size: 14px; | |
| color: var(--primary); | |
| overflow: hidden; | |
| } | |
| .binary-column { | |
| position: absolute; | |
| top: -100%; | |
| writing-mode: vertical-rl; | |
| text-orientation: upright; | |
| animation: fall linear infinite; | |
| letter-spacing: 10px; | |
| } | |
| @keyframes fall { | |
| 0% { transform: translateY(0); } | |
| 100% { transform: translateY(200vh); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Custom Cursor --> | |
| <div class="cursor"></div> | |
| <div class="cursor-dot"></div> | |
| <!-- Background Effects --> | |
| <canvas id="matrix-canvas"></canvas> | |
| <div class="hex-bg"></div> | |
| <div class="binary-rain" id="binary-rain"></div> | |
| <div class="crt-overlay"></div> | |
| <div class="scanline"></div> | |
| <!-- Header --> | |
| <header> | |
| <div class="logo">NEXUS</div> | |
| <div class="menu-toggle" onclick="toggleMenu()"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| <nav id="nav-menu"> | |
| <a href="#home" onclick="closeMenu()">/home</a> | |
| <a href="#tools" onclick="closeMenu()">/tools</a> | |
| <a href="#skills" onclick="closeMenu()">/skills</a> | |
| <a href="#contact" onclick="closeMenu()">/contact</a> | |
| </nav> | |
| </header> | |
| <!-- Main Content --> | |
| <main> | |
| <!-- Hero Section --> | |
| <section class="hero" id="home"> | |
| <h1 class="hero-title"> | |
| <span class="highlight">WELCOME</span> TO THE<br>NEXUS | |
| </h1> | |
| <p class="hero-subtitle">// SECURE • ANONYMOUS • RESISTANT //</p> | |
| <div class="terminal"> | |
| <div class="terminal-header"> | |
| <div class="terminal-btn close"></div> | |
| <div class="terminal-btn minimize"></div> | |
| <div class="terminal-btn maximize"></div> | |
| <div class="terminal-title">root@nexus:~</div> | |
| </div> | |
| <div class="terminal-body"> | |
| <div class="terminal-line"> | |
| <span class="terminal-prompt">root@nexus:~$</span> | |
| <span class="terminal-command" id="typing-text"></span> | |
| <span class="cursor-blink">█</span> | |
| </div> | |
| <div class="terminal-output" id="terminal-output"></div> | |
| </div> | |
| </div> | |
| <div class="scroll-indicator"> | |
| <span>SCROLL DOWN</span> | |
| <div class="scroll-arrow"></div> | |
| </div> | |
| </section> | |
| <!-- Tools Section --> | |
| <section id="tools"> | |
| <h2 class="section-title">// TOOLS_OF_TRADE</h2> | |
| <div class="cards-grid"> | |
| <div class="card"> | |
| <div class="card-icon">⌬</div> | |
| <h3 class="card-title">NETWORK ANALYSIS</h3> | |
| <p class="card-text">Advanced packet sniffing and network traffic analysis tools for deep packet inspection and vulnerability assessment.</p> | |
| <a href="#" class="card-link">ACCESS TOOLS</a> | |
| </div> | |
| <div class="card"> | |
| <div class="card-icon">⏣</div> | |
| <h3 class="card-title">CRYPTOGRAPHY</h3> | |
| <p class="card-text">Military-grade encryption solutions. AES-256, RSA-4096, and custom cryptographic protocols for secure communications.</p> | |
| <a href="#" class="card-link">ENCRYPT NOW</a> | |
| </div> | |
| <div class="card"> | |
| <div class="card-icon">⌘</div> | |
| <h3 class="card-title">PENETRATION TESTING</h3> | |
| <p class="card-text">Comprehensive vulnerability assessment and exploitation frameworks. Identify weaknesses before they become threats.</p> | |
| <a href="#" class="card-link">START AUDIT</a> | |
| </div> | |
| <div class="card"> | |
| <div class="card-icon">◈</div> | |
| <h3 class="card-title">ANONYMITY SUITE</h3> | |
| <p class="card-text">Complete digital footprint elimination. Multi-layer VPN routing, TOR integration, and anti-forensics tools.</p> | |
| <a href="#" class="card-link">GO GHOST</a> | |
| </div> | |
| <div class="card"> | |
| <div class="card-icon">⚡</div> | |
| <h3 class="card-title">EXPLOIT DEVELOPMENT</h3> | |
| <p class="card-text">Custom exploit frameworks, buffer overflow tools, and zero-day vulnerability research utilities.</p> | |
| <a href="#" class="card-link">DEVELOP</a> | |
| </div> | |
| <div class="card"> | |
| <div class="card-icon">◉</div> | |
| <h3 class="card-title">SOCIAL ENGINEERING</h3> | |
| <p class="card-text">Phishing campaigns, credential harvesting, and human vulnerability assessment frameworks.</p> | |
| <a href="#" class="card-link">INITIATE</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="stats-section"> | |
| <div class="stats-grid"> | |
| <div class="stat-item"> | |
| <div class="stat-number" data-target="2500">0</div> | |
| <div class="stat-label">SYSTEMS SECURED</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-number" data-target="847">0</div> | |
| <div class="stat-label">VULNERABILITIES PATCHED</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-number" data-target="15000">0</div> | |
| <div class="stat-label">THREATS BLOCKED</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-number" data-target="99.9">0</div> | |
| <div class="stat-label">% UPTIME</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Skills Section --> | |
| <section id="skills"> | |
| <h2 class="section-title">// EXPERTISE_LEVELS</h2> | |
| <div class="skills-container"> | |
| <div class="skill-category"> | |
| <h3>> OFFENSIVE SECURITY</h3> | |
| <div class="skill-bar"> | |
| <div class="skill-info"> | |
| <span>Penetration Testing</span> | |
| <span>95%</span> | |
| </div> | |
| <div class="skill-progress"> | |
| <div class="skill-fill" data-width="95"></div> | |
| </div> | |
| </div> | |
| <div class="skill-bar"> | |
| <div class="skill-info"> | |
| <span>Exploit Development</span> | |
| <span>88%</span> | |
| </div> | |
| <div class="skill-progress"> | |
| <div class="skill-fill" data-width="88"></div> | |
| </div> | |
| </div> | |
| <div class="skill-bar"> | |
| <div class="skill-info"> | |
| <span>Reverse Engineering</span> | |
| <span>82%</span> | |
| </div> | |
| <div class="skill-progress"> | |
| <div class="skill-fill" data-width="82"></div> | |
| </div> | |
| </div> | |
| <div class="skill-bar"> | |
| <div class="skill-info"> | |
| <span>Social Engineering</span> | |
| <span>90%</span> | |
| </div> | |
| <div class="skill-progress"> | |
| <div class="skill-fill" data-width="90"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="skill-category"> | |
| <h3>> DEFENSIVE SECURITY</h3> | |
| <div class="skill-bar"> | |
| <div class="skill-info"> | |
| <span>Network Security</span> | |
| <span>92%</span> | |
| </div> | |
| <div class="skill-progress"> | |
| <div class="skill-fill" data-width="92"></div> | |
| </div> | |
| </div> | |
| <div class="skill-bar"> | |
| <div class="skill-info"> | |
| <span>Incident Response</span> | |
| <span>85%</span> | |
| </div> | |
| <div class="skill-progress"> | |
| <div class="skill-fill" data-width="85"></div> | |
| </div> | |
| </div> | |
| <div class="skill-bar"> | |
| <div class="skill-info"> | |
| <span>Malware Analysis</span> | |
| <span>78%</span> | |
| </div> | |
| <div class="skill-progress"> | |
| <div class="skill-fill" data-width="78"></div> | |
| </div> | |
| </div> | |
| <div class="skill-bar"> | |
| <div class="skill-info"> | |
| <span>Cryptography</span> | |
| <span>94%</span> | |
| </div> | |
| <div class="skill-progress"> | |
| <div class="skill-fill" data-width="94"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="skill-category"> | |
| <h3>> PROGRAMMING</h3> | |
| <div class="skill-bar"> | |
| <div class="skill-info"> | |
| <span>Python</span> | |
| <span>98%</span> | |
| </div> | |
| <div class="skill-progress"> | |
| <div class="skill-fill" data-width="98"></div> | |
| </div> | |
| </div> | |
| <div class="skill-bar"> | |
| <div class="skill-info"> | |
| <span>C/C++</span> | |
| <span>89%</span> | |
| </div> | |
| <div class="skill-progress"> | |
| <div class="skill-fill" data-width="89"></div> | |
| </div> | |
| </div> | |
| <div class="skill-bar"> | |
| <div class="skill-info"> | |
| <span>Assembly</span> | |
| <span>75%</span> | |
| </div> | |
| <div class="skill-progress"> | |
| <div class="skill-fill" data-width="75"></div> | |
| </div> | |
| </div> | |
| <div class="skill-bar"> | |
| <div class="skill-info"> | |
| <span>JavaScript</span> | |
| <span>91%</span> | |
| </div> | |
| <div class="skill-progress"> | |
| <div class="skill-fill" data-width="91"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact"> | |
| <h2 class="section-title">// ESTABLISH_CONNECTION</h2> | |
| <div class="contact-container"> | |
| <div class="contact-info"> | |
| <h3>> SECURE COMMUNICATION</h3> | |
| <p style="margin-bottom: 2rem; opacity: 0.8;"> | |
| For encrypted communications, use our PGP key. All channels are monitored for security purposes. | |
| </p> | |
| <div class="contact-item"> | |
| <span class="contact-icon">◈</span> | |
| <span>PGP Key: 0xN3XUS2024</span> | |
| </div> | |
| <div class="contact-item"> | |
| <span class="contact-icon">✉</span> | |
| <span>contact@nexus-security.onion</span> | |
| </div> | |
| <div class="contact-item"> | |
| <span class="contact-icon">⚡</span> | |
| <span>Matrix: @nexus:matrix.org</span> | |
| </div> | |
| <div class="contact-item"> | |
| <span class="contact-icon">⏣</span> | |
| <span>IRC: #nexus@irc.anonops.com</span> | |
| </div> | |
| </div> | |
| <form class="contact-form" onsubmit="handleSubmit(event)"> | |
| <div class="form-group"> | |
| <label>// IDENTIFIER</label> | |
| <input type="text" placeholder="Your codename" required> | |
| </div> | |
| <div class="form-group"> | |
| <label>// ENCRYPTED_CHANNEL</label> | |
| <input type="email" placeholder="secure@email.com" required> | |
| </div> | |
| <div class="form-group"> | |
| <label>// TRANSMISSION</label> | |
| <textarea placeholder="Enter your encrypted message..." required></textarea> | |
| </div> | |
| <button type="submit" class="submit-btn">TRANSMIT MESSAGE</button> | |
| </form> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="footer-content"> | |
| <div class="footer-logo">NEXUS</div> | |
| <div class="footer-links"> | |
| <a href="#">PRIVACY POLICY</a> | |
| <a href="#">TERMS OF SERVICE</a> | |
| <a href="#">PGP KEYS</a> | |
| <a href="#">DONATE BTC</a> | |
| </div> | |
| <p class="footer-bottom"> | |
| <span>© 2024 NEXUS SECURITY COLLECTIVE. ALL RIGHTS RESERVED.</span><br><br> | |
| Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">anycoder</a> | |
| </p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Custom Cursor | |
| const cursor = document.querySelector('.cursor'); | |
| const cursorDot = document.querySelector('.cursor-dot'); | |
| document.addEventListener('mousemove', (e) => { | |
| cursorDot.style.left = e.clientX + 'px'; | |
| cursorDot.style.top = e.clientY + 'px'; | |
| cursor.style.left = e.clientX - 10 + 'px'; | |
| cursor.style.top = e.clientY - 10 + 'px'; | |
| }); | |
| document.addEventListener('mousedown', () => { | |
| cursor.style.transform = 'scale(0.8)'; | |
| }); | |
| document.addEventListener('mouseup', () => { | |
| cursor.style.transform = 'scale(1)'; | |
| }); | |
| // Mobile Menu | |
| function toggleMenu() { | |
| document.getElementById('nav-menu').classList.toggle('active'); | |
| } | |
| function closeMenu() { | |
| document.getElementById('nav-menu').classList.remove('active'); | |
| } | |
| // Matrix Rain Effect | |
| const canvas = document.getElementById('matrix-canvas'); | |
| const ctx = canvas.getContext('2d'); | |
| canvas.width = window.innerWidth; | |
| canvas.height = window.innerHeight; | |
| const chars = '01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン'; | |
| const fontSize = 14; | |
| const columns = canvas.width / fontSize; | |
| const drops = []; | |
| for (let i = 0; i < columns; i++) { | |
| drops[i] = 1; | |
| } | |
| function drawMatrix() { | |
| ctx.fillStyle = 'rgba(10, 10, 10, 0.05)'; | |
| ctx.fillRect(0, 0, canvas.width, canvas.height); | |
| ctx.fillStyle = '#00ff41'; | |
| ctx.font = fontSize + 'px monospace'; | |
| for (let i = 0; i < drops.length; i++) { | |
| const char = chars[Math.floor(Math.random() * chars.length)]; | |
| ctx.fillText(char, i * fontSize, drops[i] * fontSize); | |
| if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) { | |
| drops[i] = 0; | |
| } | |
| drops[i]++; | |
| } | |
| } | |
| setInterval(drawMatrix, 50); | |
| window.addEventListener('resize', () => { | |
| canvas.width = window.innerWidth; | |
| canvas.height = window.innerHeight; | |
| }); | |
| // Binary Rain Background | |
| const binaryRain = document.getElementById('binary-rain'); | |
| const binaryChars = '01'; | |
| for (let i = 0; i < 20; i++) { | |
| const column = document.createElement('div'); | |
| column.className = 'binary-column'; | |
| column.style.left = Math.random() * 100 + '%'; | |
| column.style.animationDuration = (Math.random() * 10 + 10) + 's'; | |
| column.style.opacity = Math.random() * 0.5 + 0.2; | |
| let binaryText = ''; | |
| for (let j = 0; j < 50; j++) { | |
| binaryText += binaryChars[Math.floor(Math.random() * 2)]; | |
| } | |
| column.textContent = binaryText; | |
| binaryRain.appendChild(column); | |
| } | |
| // Terminal Typing Effect | |
| const commands = [ | |
| 'initializing secure connection...', | |
| 'bypassing firewall protocols...', | |
| 'establishing encrypted tunnel...', | |
| 'access granted. welcome to NEXUS.' | |
| ]; | |
| let commandIndex = 0; | |
| let charIndex = 0; | |
| let isDeleting = false; | |
| const typingText = document.getElementById('typing-text'); | |
| const terminalOutput = document.getElementById('terminal-output'); | |
| function typeEffect() { | |
| const currentCommand = commands[commandIndex]; | |
| if (isDeleting) { | |
| typingText.textContent = currentCommand.substring(0, charIndex - 1); | |
| charIndex--; | |
| } else { | |
| typingText.textContent = currentCommand.substring(0, charIndex + 1); | |
| charIndex++; | |
| } | |
| let typeSpeed = isDeleting ? 30 : 50; | |
| if (!isDeleting && charIndex === currentCommand.length) { | |
| typeSpeed = 2000; | |
| isDeleting = true; | |
| } else if (isDeleting && charIndex === 0) { | |
| isDeleting = false; | |
| commandIndex = (commandIndex + 1) % commands.length; | |
| typeSpeed = 500; | |
| if (commandIndex === 0) { | |
| terminalOutput.innerHTML = ''; | |
| } else { | |
| const outputLine = document.createElement('div'); | |
| outputLine.className = 'terminal-output'; | |
| outputLine.textContent = '> ' + commands[commandIndex - 1]; | |
| terminalOutput.appendChild(outputLine); | |
| } | |
| } | |
| setTimeout(typeEffect, typeSpeed); | |
| } | |
| setTimeout(typeEffect, 1000); | |
| // Stats Counter Animation | |
| function animateStats() { | |
| const statNumbers = document.querySelectorAll('.stat-number'); | |
| statNumbers.forEach(stat => { | |
| const target = parseFloat(stat.getAttribute('data-target')); | |
| const duration = 2000; | |
| const step = target / (duration / 16); | |
| let current = 0; | |
| const updateNumber = () => { | |
| current += step; | |
| if (current < target) { | |
| stat.textContent = target % 1 === 0 ? Math.floor(current) : current.toFixed(1); | |
| requestAnimationFrame(updateNumber); | |
| } else { | |
| stat.textContent = target % 1 === 0 ? target : target.toFixed(1); | |
| } | |
| }; | |
| updateNumber(); | |
| }); | |
| } | |
| // Skill Bars Animation | |
| function animateSkills() { | |
| const skillFills = document.querySelectorAll('.skill-fill'); | |
| skillF |