diff options
| author | subh <subh@example.com> | 2026-03-10 18:30:13 +0530 |
|---|---|---|
| committer | subh <subh@example.com> | 2026-03-10 18:30:13 +0530 |
| commit | ebb960786de1160054b279d5899d61ee8103140b (patch) | |
| tree | 3e042ba30c6f7172f5b3b3e0024dcdae785921c7 | |
| parent | c2489de4d796f8c28f60e420d434fc4226f88263 (diff) | |
changes
| -rw-r--r-- | index.html | 640 |
1 files changed, 442 insertions, 198 deletions
@@ -3,298 +3,542 @@ <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> - <title>subh.space</title> - <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" /> + <title>subh.space // x4c1s</title> + <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=VT323&family=Fira+Code:wght@300;400;500;600&display=swap" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" /> <style> + :root { + --red: #ff0000; + --red-dim: #cc0000; + --red-glow: rgba(255, 0, 0, 0.4); + --red-faint: rgba(255, 0, 0, 0.07); + --bg: #000000; + --text: #ffffff; + --text-dim: #999; + --text-faint: #444; + --scan-speed: 8s; + } + + *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } + html, body { - margin: 0; - padding: 0; height: 100%; overflow: hidden; - font-family: 'Iosevka Nerdfont Propo', monospace; - background-color: #000000; - color: #ffffff; + background: var(--bg); + color: var(--text); + font-family: 'Fira Code', monospace; + cursor: crosshair; } - #particles-js { - position: absolute; - width: 100%; - height: 100%; - background-color: #000000; - z-index: 0; + /* ── SCANLINES ── */ + body::before { + content: ''; + position: fixed; + inset: 0; + background: repeating-linear-gradient( + 0deg, + transparent, + transparent 2px, + rgba(0,0,0,0.25) 2px, + rgba(0,0,0,0.25) 4px + ); + pointer-events: none; + z-index: 100; + animation: scanroll var(--scan-speed) linear infinite; } - .content { - position: relative; - z-index: 2; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100vh; - gap: 2rem; - padding: 0 1rem; + @keyframes scanroll { + from { background-position: 0 0; } + to { background-position: 0 100px; } } - .terminal-container { - border: 2px solid #ff0000; - border-radius: 8px; - padding: 2rem; - background: rgba(0, 0, 0, 0.8); - backdrop-filter: blur(10px); - min-width: 400px; - margin-bottom: 2rem; + /* ── VIGNETTE ── */ + body::after { + content: ''; + position: fixed; + inset: 0; + background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.85) 100%); + pointer-events: none; + z-index: 99; } - .terminal-header { - display: flex; - align-items: center; - gap: 0.5rem; - margin-bottom: 1rem; - font-size: 0.9rem; - color: #888; + /* ── GRID BACKGROUND ── */ + #grid-bg { + position: fixed; + inset: 0; + background-image: + linear-gradient(rgba(255,0,0,0.04) 1px, transparent 1px), + linear-gradient(90deg, rgba(255,0,0,0.04) 1px, transparent 1px); + background-size: 40px 40px; + z-index: 0; } - .mac-button { - width: 12px; - height: 12px; - border-radius: 50%; - display: inline-flex; - align-items: center; - justify-content: center; - font-size: 8px; - font-weight: bold; - cursor: pointer; - position: relative; + /* ── GLITCH SCANLINE ── */ + #sweep { + position: fixed; + top: -2px; + left: 0; + width: 100%; + height: 2px; + background: linear-gradient(90deg, transparent, var(--red), transparent); + box-shadow: 0 0 12px 4px var(--red-glow); + z-index: 98; + animation: sweep 4s linear infinite; + opacity: 0.7; } - .mac-button.close { - background-color: #ff5f57; - color: #8b0000; + @keyframes sweep { + 0% { top: -2px; opacity: 0; } + 5% { opacity: 0.7; } + 95% { opacity: 0.7; } + 100% { top: 100vh; opacity: 0; } } - .mac-button.minimize { - background-color: #ffbd2e; - color: #8b6914; + /* ── CORNER DECORATIONS ── */ + .corner { + position: fixed; + width: 60px; + height: 60px; + z-index: 10; } - - .mac-button.maximize { - background-color: #28ca42; - color: #0f5132; + .corner::before, .corner::after { + content: ''; + position: absolute; + background: var(--red); + box-shadow: 0 0 8px var(--red-glow); } + .corner::before { width: 2px; height: 100%; } + .corner::after { width: 100%; height: 2px; } + .corner.tl { top: 20px; left: 20px; } + .corner.tr { top: 20px; right: 20px; transform: scaleX(-1); } + .corner.bl { bottom: 20px; left: 20px; transform: scaleY(-1); } + .corner.br { bottom: 20px; right: 20px; transform: scale(-1); } - .mac-button.close::after { - content: "×"; - font-size: 10px; - line-height: 1; + /* ── STATUS BAR ── */ + #status-bar { + position: fixed; + top: 0; + left: 0; + right: 0; + height: 28px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 28px; + font-size: 0.65rem; + font-family: 'Share Tech Mono', monospace; + color: var(--text-dim); + border-bottom: 1px solid rgba(255,0,0,0.15); + background: rgba(0,0,0,0.7); + z-index: 50; + letter-spacing: 1px; } + #status-bar .status-left { display: flex; gap: 20px; } + #status-bar .status-right { display: flex; gap: 20px; align-items: center; } + .status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); display: inline-block; margin-right: 5px; animation: pulse-dot 1.5s ease-in-out infinite; } + @keyframes pulse-dot { 0%,100%{opacity:1;} 50%{opacity:0.2;} } + #clock { color: var(--red); font-size: 0.7rem; } - .mac-button.minimize::after { - content: "−"; - font-size: 8px; - line-height: 1; + /* ── BOTTOM BAR ── */ + #bottom-bar { + position: fixed; + bottom: 0; + left: 0; + right: 0; + height: 24px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 28px; + font-size: 0.6rem; + font-family: 'Share Tech Mono', monospace; + color: var(--text-faint); + border-top: 1px solid rgba(255,0,0,0.1); + background: rgba(0,0,0,0.7); + z-index: 50; } - - .mac-button.maximize::after { - content: "+"; - font-size: 9px; - line-height: 1; + #progress-bar { + height: 2px; + background: linear-gradient(90deg, var(--red), #ff6666); + box-shadow: 0 0 6px var(--red-glow); + animation: progress 3s ease-in-out infinite alternate; } + @keyframes progress { from { width: 40%; } to { width: 90%; } } - .terminal-line { - font-size: 1.1rem; - margin-bottom: 0.5rem; + /* ── MAIN LAYOUT ── */ + .content { + position: relative; + z-index: 5; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + gap: 0; + padding: 40px 1rem 30px; } - .prompt { - color: #ff0000; + /* ── TERMINAL WINDOW ── */ + .terminal-window { + width: 100%; + max-width: 520px; + border: 1px solid rgba(255,0,0,0.5); + background: rgba(0,0,0,0.9); + box-shadow: 0 0 0 1px rgba(255,0,0,0.1), 0 0 40px rgba(255,0,0,0.08), inset 0 0 40px rgba(255,0,0,0.02); + margin-bottom: 28px; + position: relative; } - .command { - color: #ffffff; + .terminal-window::before { + content: ''; + position: absolute; + inset: 0; + background: repeating-linear-gradient( + 0deg, + transparent, + transparent 3px, + rgba(255,0,0,0.015) 3px, + rgba(255,0,0,0.015) 4px + ); + pointer-events: none; } - .output { - color: #ffffff; + .tw-titlebar { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 12px; + border-bottom: 1px solid rgba(255,0,0,0.25); + background: rgba(255,0,0,0.05); + } + .tw-btn { width: 10px; height: 10px; border-radius: 50%; } + .tw-btn.r { background: #ff5f57; } + .tw-btn.y { background: #ffbd2e; } + .tw-btn.g { background: #28ca42; } + .tw-title { + margin-left: auto; + margin-right: auto; + font-size: 0.65rem; + color: var(--text-dim); + font-family: 'Share Tech Mono', monospace; + letter-spacing: 2px; + } + .tw-body { + padding: 16px 18px 14px; + font-family: 'Share Tech Mono', monospace; + font-size: 0.85rem; + line-height: 1.7; } - .cursor { + .t-line { display: flex; align-items: center; gap: 6px; min-height: 1.4em; } + .t-prompt { color: var(--red); user-select: none; flex-shrink: 0; } + .t-user { color: #ff6666; } + .t-at { color: var(--text-dim); } + .t-host { color: #ff9999; } + .t-path { color: var(--text-dim); } + .t-cmd { color: var(--text); } + .t-out { color: #aaa; padding-left: 4px; } + .t-out .val { color: #ff6666; } + .cursor-block { display: inline-block; - width: 2px; - height: 1.2em; - background-color: #ffffff; - animation: blink 1s infinite; + width: 8px; + height: 1em; + background: var(--red); + animation: blink 1s step-end infinite; + vertical-align: middle; + margin-left: 2px; } + @keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} } - @keyframes blink { - 0%, 50% { opacity: 1; } - 51%, 100% { opacity: 0; } + /* ── TAGLINE ── */ + .tagline { + font-family: 'VT323', monospace; + font-size: 1.15rem; + color: var(--text-dim); + letter-spacing: 4px; + text-transform: uppercase; + margin-bottom: 26px; + position: relative; } - - .subtitle { - font-size: 1rem; - margin-bottom: 2rem; - opacity: 0.8; - text-align: center; - letter-spacing: 1px; + .tagline::before, .tagline::after { + content: '//'; + color: var(--red); + margin: 0 10px; + opacity: 0.6; } - .links-container { - display: flex; - flex-direction: column; - gap: 1rem; + /* ── LINKS ── */ + .links-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 8px; width: 100%; - max-width: 400px; + max-width: 520px; } .link { position: relative; - padding: 1rem 2rem; - border: none; - border-radius: 0; - color: #ff0000; - text-decoration: none; - font-size: 1.1rem; - font-weight: 400; - background: transparent; - transition: all 0.3s ease; display: flex; align-items: center; - justify-content: center; - gap: 1rem; - letter-spacing: 0.5px; + gap: 10px; + padding: 11px 16px; + text-decoration: none; + font-family: 'Share Tech Mono', monospace; + font-size: 0.82rem; + color: var(--text-dim); + border: 1px solid rgba(255,255,255,0.07); + background: rgba(255,255,255,0.02); + letter-spacing: 1.5px; + text-transform: uppercase; + transition: all 0.18s ease; + overflow: hidden; + } + + .link::before { + content: ''; + position: absolute; + left: 0; top: 0; bottom: 0; + width: 2px; + background: var(--red); + transform: scaleY(0); + transition: transform 0.18s ease; + box-shadow: 0 0 8px var(--red-glow); + } + + .link::after { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient(90deg, var(--red-faint), transparent); + opacity: 0; + transition: opacity 0.18s ease; } .link:hover { - background: rgba(255, 0, 0, 0.1); - transform: translateX(10px); + color: var(--text); + border-color: rgba(255,0,0,0.35); + background: rgba(255,0,0,0.04); } + .link:hover::before { transform: scaleY(1); } + .link:hover::after { opacity: 1; } + .link:hover i { color: var(--red); filter: drop-shadow(0 0 4px var(--red)); } .link i { - font-size: 1.2rem; - width: 20px; + font-size: 0.9rem; + width: 16px; text-align: center; - color: #ffffff; + color: var(--text-faint); + transition: all 0.18s ease; + position: relative; + z-index: 1; } + .link span { position: relative; z-index: 1; } - @media (max-width: 768px) { - .terminal-container { - min-width: 300px; - padding: 1.5rem; - } - - .link { - font-size: 1rem; - padding: 0.9rem 1.5rem; - } + .link .link-arrow { + margin-left: auto; + font-size: 0.6rem; + opacity: 0; + transform: translateX(-4px); + transition: all 0.18s ease; + color: var(--red); } + .link:hover .link-arrow { opacity: 1; transform: translateX(0); } - .content::before { - content: ''; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 120%; - height: 120%; - background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 70%); - z-index: -1; + /* HTB spans full width */ + .link.full { grid-column: 1 / -1; } + + /* ── GLITCH EFFECT on hover for terminal ── */ + .terminal-window:hover .glitch-text { + animation: glitch 0.3s ease-in-out; + } + @keyframes glitch { + 0% { text-shadow: none; transform: none; } + 20% { text-shadow: -2px 0 var(--red); transform: translateX(2px); } + 40% { text-shadow: 2px 0 #0ff; transform: translateX(-2px); } + 60% { text-shadow: -1px 0 var(--red); transform: translateX(1px); } + 80% { text-shadow: 1px 0 #0ff; transform: translateX(-1px); } + 100% { text-shadow: none; transform: none; } + } + + /* ── NOISE OVERLAY ── */ + #noise { + position: fixed; + inset: 0; + z-index: 1; + opacity: 0.03; pointer-events: none; + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); + } + + @media (max-width: 540px) { + .links-grid { grid-template-columns: 1fr; } + .link.full { grid-column: 1; } + .terminal-window { max-width: 100%; } + .tw-body { font-size: 0.78rem; } } </style> </head> <body> - <div id="particles-js"></div> + + <div id="grid-bg"></div> + <div id="noise"></div> + <div id="sweep"></div> + + <!-- corners --> + <div class="corner tl"></div> + <div class="corner tr"></div> + <div class="corner bl"></div> + <div class="corner br"></div> + + <!-- top bar --> + <div id="status-bar"> + <div class="status-left"> + <span><span class="status-dot"></span>CONNECTED</span> + <span>SSH_TTY=/dev/pts/0</span> + <span>SHELL=/bin/zsh</span> + </div> + <div class="status-right"> + <span id="clock">00:00:00</span> + <span>UTC+0</span> + </div> + </div> + + <!-- bottom bar --> + <div id="bottom-bar"> + <span>subh.space v2.0 — unauthorized access will be prosecuted</span> + <div id="progress-bar"></div> + <span>enc:AES-256 | tls:1.3</span> + </div> + + <!-- main --> <div class="content"> - <div class="terminal-container"> - <div class="terminal-header"> - <span class="mac-button close"></span> - <span class="mac-button minimize"></span> - <span class="mac-button maximize"></span> - </div> - <div class="terminal-line"> - <span class="prompt">$</span> - <span class="command" id="typed-command"></span> - <span class="cursor" id="cursor"></span> + <div class="terminal-window"> + <div class="tw-titlebar"> + <div class="tw-btn r"></div> + <div class="tw-btn y"></div> + <div class="tw-btn g"></div> + <span class="tw-title">bash — 80×24 — subh.space</span> </div> - <div class="terminal-line" id="output-line" style="display: none;"> - <span class="prompt">></span> - <span class="output" id="output-text"></span> + <div class="tw-body"> + <div class="t-line"> + <span class="t-prompt">┌─[</span> + <span class="t-user">x4c1s</span> + <span class="t-at">@</span> + <span class="t-host">subh.space</span> + <span class="t-prompt">]─[</span> + <span class="t-path">~</span> + <span class="t-prompt">]</span> + </div> + <div class="t-line"> + <span class="t-prompt">└─$ </span> + <span class="t-cmd glitch-text" id="typed-cmd"></span> + <span class="cursor-block" id="cur"></span> + </div> + <div class="t-line" id="out1" style="opacity:0"> + <span class="t-out">uid=<span class="val">1337</span>(x4c1s) gid=<span class="val">1337</span>(hackers) groups=<span class="val">red_team,cloudsec,ctf</span></span> + </div> + <div class="t-line" id="out2" style="opacity:0"> + <span class="t-out">hostname: <span class="val">subh.space</span> | arch: <span class="val">x86_64</span> | kernel: <span class="val">6.x.x-hardened</span></span> + </div> + <div class="t-line" id="out3" style="opacity:0"> + <span class="t-prompt">└─$ </span> + <span class="cursor-block"></span> + </div> </div> </div> - - <p class="subtitle">CloudSec | Red Team | HackTheBox</p> - - <div class="links-container"> + + <div class="tagline">CloudSec · Red Team · HackTheBox</div> + + <div class="links-grid"> <a class="link" href="https://discordapp.com/users/876786953494855730" target="_blank" rel="noopener"> <i class="fab fa-discord"></i> <span>Discord</span> + <span class="link-arrow">▶</span> </a> <a class="link" href="https://github.com/5epi0l" target="_blank" rel="noopener"> <i class="fab fa-github"></i> <span>GitHub</span> + <span class="link-arrow">▶</span> </a> <a class="link" href="https://notes.subh.space" target="_blank" rel="noopener"> - <i class="fas fa-book"></i> - <span>My Notes</span> + <i class="fas fa-book-open"></i> + <span>Notes</span> + <span class="link-arrow">▶</span> </a> <a class="link" href="https://x4c1s.bsky.social" target="_blank" rel="noopener"> - <i class="fab fa-twitter"></i> + <i class="fas fa-cloud"></i> <span>BlueSky</span> + <span class="link-arrow">▶</span> </a> - <!-- - <a class="link" href="https://www.linkedin.com/in/x4c1s" target="_blank" rel="noopener"> - <i class="fab fa-linkedin"></i> - <span>LinkedIn</span> - </a> - --> - <a class="link" href="https://app.hackthebox.com/profile/716879" target="_blank" rel="noopener"> + <a class="link full" href="https://app.hackthebox.com/profile/716879" target="_blank" rel="noopener"> <i class="fas fa-cube"></i> <span>Hack The Box</span> + <span class="link-arrow">▶</span> </a> </div> </div> <script> - const command = '/usr/bin/whoami'; - const output = 'x4c1s'; - let commandIndex = 0; - let outputIndex = 0; - - const typedCommand = document.getElementById('typed-command'); - const cursor = document.getElementById('cursor'); - const outputLine = document.getElementById('output-line'); - const outputText = document.getElementById('output-text'); - - function typeCommand() { - if (commandIndex < command.length) { - typedCommand.textContent += command[commandIndex]; - commandIndex++; - setTimeout(typeCommand, 50 + Math.random() * 50); // Variable typing speed + // Clock + function tick() { + const now = new Date(); + document.getElementById('clock').textContent = + now.toUTCString().slice(17, 25); + } + tick(); setInterval(tick, 1000); + + // Typing animation + const cmd = 'id && uname -a'; + let i = 0; + const el = document.getElementById('typed-cmd'); + const cur = document.getElementById('cur'); + + function typeChar() { + if (i < cmd.length) { + el.textContent += cmd[i++]; + setTimeout(typeChar, 60 + Math.random() * 60); } else { - // Hide cursor from command line - cursor.style.display = 'none'; - - // Show output line after a delay + cur.style.display = 'none'; setTimeout(() => { - outputLine.style.display = 'block'; - typeOutput(); - }, 500); + document.getElementById('out1').style.cssText = 'opacity:1;transition:opacity 0.3s'; + setTimeout(() => { + document.getElementById('out2').style.cssText = 'opacity:1;transition:opacity 0.3s'; + setTimeout(() => { + document.getElementById('out3').style.cssText = 'opacity:1;transition:opacity 0.3s'; + }, 200); + }, 200); + }, 400); } } - function typeOutput() { - if (outputIndex < output.length) { - outputText.textContent += output[outputIndex]; - outputIndex++; - setTimeout(typeOutput, 75); - } - // Animation complete - no restart - } + setTimeout(typeChar, 1200); - // Start the animation once on page load - setTimeout(typeCommand, 1000); + // Random hex flicker in grid (subtle) + const hexChars = '0123456789ABCDEF'; + function randomHex(len) { + return Array.from({length:len}, () => hexChars[Math.random()*16|0]).join(''); + } + // Add floating hex elements + const gridBg = document.getElementById('grid-bg'); + for (let j = 0; j < 8; j++) { + const span = document.createElement('div'); + span.style.cssText = ` + position:absolute; + font-family:'Share Tech Mono',monospace; + font-size:0.55rem; + color:rgba(255,0,0,0.12); + top:${10+Math.random()*80}%; + left:${5+Math.random()*90}%; + white-space:nowrap; + pointer-events:none; + user-select:none; + `; + span.textContent = '0x' + randomHex(8); + gridBg.appendChild(span); + setInterval(() => { + span.textContent = '0x' + randomHex(8); + }, 2000 + Math.random() * 3000); + } </script> </body> </html> |