diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 700 |
1 files changed, 186 insertions, 514 deletions
@@ -1,525 +1,197 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <meta name="viewport" content="width=device-width, initial-scale=1" /> - <title>subh.space</title> - <link rel="icon" type="image/png" href="favicon.ico"/> - <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 { - height: 100%; - overflow: hidden; - background: var(--bg); - color: var(--text); - font-family: 'Fira Code', monospace; - cursor: crosshair; - } - - 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; - } - - @keyframes scanroll { - from { background-position: 0 0; } - to { background-position: 0 100px; } - } - - 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; - } - - #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; - } - - #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; - } - - @keyframes sweep { - 0% { top: -2px; opacity: 0; } - 5% { opacity: 0.7; } - 95% { opacity: 0.7; } - 100% { top: 100vh; opacity: 0; } - } - - .corner { - position: fixed; - width: 60px; - height: 60px; - z-index: 10; - } - .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); } - - #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; } - - #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; - } - #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%; } } - - .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; - } - - .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; - } - - .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; - } - - .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; - } - - .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: 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;} } - - .tagline { - font-family: 'VT323', monospace; - font-size: 1.15rem; - color: var(--text-dim); - letter-spacing: 4px; - text-transform: uppercase; - margin-bottom: 26px; - position: relative; - } - .tagline::before, .tagline::after { - content: '//'; - color: var(--red); - margin: 0 10px; - opacity: 0.6; - } - - .links-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 8px; - width: 100%; - max-width: 520px; - } - - .link { - position: relative; - display: flex; - align-items: center; - 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 { - 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: 0.9rem; - width: 16px; - text-align: center; - color: var(--text-faint); - transition: all 0.18s ease; - position: relative; - z-index: 1; - } - .link span { position: relative; z-index: 1; } - - .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); } - - .link.full { grid-column: 1 / -1; } - - .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 { - 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> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>subh.space</title> + <style> + :root { + --bg-outer: #1d2021; + --bg-inner: #282828; + --fg: #ebdbb2; + --gray: #928374; + --yellow: #fabd2f; + --aqua: #8ec07c; + --blue: #83a598; + --red: #fb4934; + --line: #3c3836; + } + + body { + background-color: var(--bg-outer); + color: var(--fg); + font-family: 'Iosevka Nerd Font Propo'; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + align-items: center; + min-height: 100vh; + } + + header { + padding: 2.5rem 1rem; + display: flex; + gap: 1.5rem; + justify-content: center; + flex-wrap: wrap; + } + + header a { + color: var(--aqua); + text-decoration: none; + font-weight: bold; + } + + header a:hover { + text-decoration: underline; + } + + .container { + background-color: var(--bg-inner); + width: 90%; + max-width: 750px; + padding: 3rem; + border-radius: 4px; + box-shadow: 0 4px 15px rgba(0,0,0,0.5); + } + + h1 { + color: var(--yellow); + font-size: 2.2rem; + margin-top: 0; + margin-bottom: 1.5rem; + } + + p { + line-height: 1.6; + margin-bottom: 1.2rem; + } + + a { + color: var(--blue); + text-decoration: none; + } + + a:hover { + text-decoration: underline; + } + + pre { + background-color: var(--bg-outer); + padding: 1rem; + border-radius: 4px; + border: 1px solid var(--line); + overflow-x: auto; + margin: 1.5rem 0; + } + + code { + color: var(--blue); + font-size: 0.9rem; + word-break: break-all; + white-space: pre-wrap; + } + + h2 { + color: var(--yellow); + font-size: 1.5rem; + margin-top: 2.5rem; + margin-bottom: 1rem; + } + + .list-container { + display: flex; + flex-direction: column; + } + + .list-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.8rem 0; + border-bottom: 1px dotted var(--line); + text-decoration: none; + } + + .list-item:first-child { + border-top: 1px dotted var(--line); + } + + .list-item:hover { + background-color: #32302f; + } + + .item-title { + color: var(--aqua); + } + + .item-date { + color: var(--gray); + font-size: 0.9rem; + } + + footer { + margin: 3rem 0; + color: var(--gray); + font-size: 0.85rem; + text-align: center; + } + </style> </head> <body> - <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-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="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> + <header> + <a href="#">home</a> + <a href="https://git.subh.space">git</a> + <a href="https://github.com/5epi0l">github</a> + <a href="https://notes.subh.space">notes</a> + <a href="https://www.hackthebox.com">hackthebox</a> + </header> + + <main class="container"> + <h1>Hi, I’m subh</h1> + + <p> + A 20-year old interested in <strong>Linux</strong>, <strong>Computer Security</strong> and <strong>philosophy</strong>. In my spare time, I like to read philosophy, tinker with my system and self-host stuff and write about them incase i forget how to do them in the future, and also to serve as minimal tutorials for anyone interested in the same. + </p> + <p>If you're also one of those soyboys who use proprietary software, you should start transitioning to FOSS and self-hosting. It is good for your privacy (even if you have nothing to hide) and also a good learning exercise. At the end of the day, it is always advantageous to be in control of your data.</p> + + <p>Become based, self-host your own shit.</p> + <p>Reach out to me at <a href="mailto:subh@subh.space">subh@subh.space</a></p> + + <p>Incase you're not a big fan of mail, drop a text on session.</p> + + <pre><code class="language-shell"># Account ID +054290431f91025e295290b3dd7136d8c290a174ed07292411669bfe605934f46e</code></pre> + + <p>You can find my public key <a href="pubkey.txt">here.</a></p> + + <h2>Stuff</h2> + + <div class="list-container"> + <a href="stuff/mullvad-dot.html" class="list-item"> + <span class="item-title">DNS over TLS (DoT) on linux with mullvad</span> + <span class="item-date">2026-04-14</span> + </a> + <a href="stuff/usb-notif-linux.html" class="list-item"> + <span class="item-title">USB notifications with udev</span> + <span class="item-date">2026-04-14</span> + </a> + <a href="stuff/luks-encryption.html" class="list-item"> + <span class="item-title">Drive encryption with LUKS and cryptsetup</span> + <span class="item-date">2026-04-14</span> + </a> + <a href="stuff/dnsforge-dot-mac.html" class="list-item"> + <span class="item-title">DNS over TLS (DoT) on mac with dnsforge</span> + <span class="item-date">2026-04-14</span> + </a> </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,htb</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.19.6-arch1-1</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> - - <div class="tagline">CloudSec · Red Team · HackTheBox</div> - - <div class="links-grid"> - <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-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="fas fa-cloud"></i> - <span>BlueSky</span> - <span class="link-arrow">▶</span> - </a> - - <a class="link" href="https://app.hackthebox.com/profile/716879" target="_blank" rel="noopener"> - <i class="fas fa-cube"></i> - <span>HackTheBox</span> - <span class="link-arrow">▶</span> - </a> -</div> - </div> - - <script> - function tick() { - const now = new Date(); - document.getElementById('clock').textContent = - now.toUTCString().slice(17, 25); - } - tick(); setInterval(tick, 1000); - - 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 { - cur.style.display = 'none'; - setTimeout(() => { - 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); - } - } + </main> - setTimeout(typeChar, 1200); + <footer> + © 2026 subh.space + </footer> - const hexChars = '0123456789ABCDEF'; - function randomHex(len) { - return Array.from({length:len}, () => hexChars[Math.random()*16|0]).join(''); - } - 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> |