summaryrefslogtreecommitdiff
path: root/index.html
diff options
context:
space:
mode:
authorsubh <subh@subh.space>2026-04-15 18:32:58 +0530
committersubh <subh@subh.space>2026-04-15 18:32:58 +0530
commitafecebc9521775a3bf2cdd055035d3d0a3377554 (patch)
treec02d89e5083ca7978dd88c936bb5cdf5f6c02dca /index.html
parent103f55f0f5b08d5e938f92b3e01bcd82d9247f7b (diff)
revamp
Diffstat (limited to 'index.html')
-rw-r--r--index.html700
1 files changed, 186 insertions, 514 deletions
diff --git a/index.html b/index.html
index 3029d49..de09326 100644
--- a/index.html
+++ b/index.html
@@ -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>
© 2026 subh.space