Unify website and documentation pages with a consistent terminal aesthetic
Extract shared canvas animation module, refactor docs page to a terminal man-page style, and align overall visual language. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 6def8112-39d2-4641-b93b-f39108179f33 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 87e11a5a-0718-4680-a1d4-0d2c471eca80 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/42ae33dd-8759-4196-85a5-434465c72ece/6def8112-39d2-4641-b93b-f39108179f33/Mumw6Ni Replit-Helium-Checkpoint-Created: true
This commit is contained in:
keshavananddev
172
docs.html
172
docs.html
@@ -3,101 +3,111 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Documentation - Terminal Portfolio</title>
|
||||
<title>man ssh — keshavanand.net</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=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<a href="/" class="back-link">$ cd ..</a>
|
||||
<h1>Documentation</h1>
|
||||
<p class="subtitle">The who, what, when, where, why</p>
|
||||
<body class="docs">
|
||||
<canvas id="field" aria-hidden="true"></canvas>
|
||||
|
||||
<main class="page">
|
||||
<a href="/" class="back">$ cd ..</a>
|
||||
|
||||
<header class="head">
|
||||
<h1>man <span class="accent">ssh</span></h1>
|
||||
<p class="sub">portfolio(1)<span class="dot">·</span>keshavanand.net<span class="dot">·</span>v1</p>
|
||||
</header>
|
||||
|
||||
<div class="rule" aria-hidden="true"></div>
|
||||
|
||||
<div class="command-box" id="commandBox">
|
||||
<span class="line"><span class="dollar">$ </span><span class="typed">ssh portfolio@keshavanand.net</span></span>
|
||||
<button class="action-btn" id="copyBtn" aria-label="Copy command">
|
||||
<svg id="copyIcon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path id="copyPath" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="command-reference">
|
||||
<div class="command-box">
|
||||
<code id="sshCommand">ssh portfolio@keshavanand.net</code>
|
||||
<button class="copy-btn" id="copyBtn" aria-label="Copy command">
|
||||
<svg class="copy-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
||||
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
||||
</svg>
|
||||
<svg class="check-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="20 6 9 17 4 12"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<section class="block">
|
||||
<h2><span class="hash">#</span> name</h2>
|
||||
<p>
|
||||
A keystroke-driven portfolio. The command above opens a real SSH session into a restricted, passwordless
|
||||
account on a homeserver and drops you into a custom C++/FTXUI interface. <span class="fg">No web app, no JS, no installer — just the shell you already have.</span>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div class="sections">
|
||||
<section class="section">
|
||||
<h2>What is it?</h2>
|
||||
<p>
|
||||
When executed in your terminal, this command renders a fully interactive shell portfolio experience.
|
||||
Much like a digital resume or personal site, it allows you to explore my work and background through
|
||||
a safe, <strong>secure</strong>, and purely text-based interface.
|
||||
<strong>It is completely harmless to your system.</strong>
|
||||
</p>
|
||||
</section>
|
||||
<section class="block">
|
||||
<h2><span class="hash">#</span> synopsis</h2>
|
||||
<pre class="code"><span class="dim">$</span> ssh <span class="accent">portfolio</span>@<span class="accent">keshavanand.net</span></pre>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2>Command Breakdown</h2>
|
||||
<div class="breakdown-grid">
|
||||
<div class="breakdown-item">
|
||||
<h3>ssh →</h3>
|
||||
<p><strong>Secure Shell:</strong> The standard terminal protocol for logging into and controlling remote computers safely.</p>
|
||||
</div>
|
||||
<div class="breakdown-item">
|
||||
<h3>portfolio →</h3>
|
||||
<p><strong>User:</strong> A passwordless, restricted user on my homeserver meant for public access.</p>
|
||||
</div>
|
||||
<div class="breakdown-item">
|
||||
<h3>keshavanand.net →</h3>
|
||||
<p><strong>Domain:</strong> Points to a web record that directs your request to my server's public IP (gateway).</p>
|
||||
</div>
|
||||
<section class="block">
|
||||
<h2><span class="hash">#</span> arguments</h2>
|
||||
<dl class="defs">
|
||||
<div class="def">
|
||||
<dt><span class="accent">ssh</span></dt>
|
||||
<dd>secure shell — the standard remote-login protocol. ubiquitous on macOS, linux, and modern windows.</dd>
|
||||
</div>
|
||||
</section>
|
||||
<div class="def">
|
||||
<dt><span class="accent">portfolio</span></dt>
|
||||
<dd>a passwordless, restricted user account. the only thing it can do is launch the portfolio binary.</dd>
|
||||
</div>
|
||||
<div class="def">
|
||||
<dt><span class="accent">keshavanand.net</span></dt>
|
||||
<dd>resolves to my homeserver's public IP. the gateway forwards port 22 to the box.</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2>How to Run</h2>
|
||||
<ol class="steps">
|
||||
<li>Copy the command above using the clipboard tool.</li>
|
||||
<li>Open your native terminal (Terminal on Mac/Linux, PowerShell on Windows).</li>
|
||||
<li>Paste the command and accept the host identity by typing 'yes' if prompted.</li>
|
||||
<li>Press Enter to launch the interactive environment.</li>
|
||||
<li>Terminate the process at any time by pressing <kbd>Ctrl + C</kbd>.</li>
|
||||
</ol>
|
||||
</section>
|
||||
<section class="block">
|
||||
<h2><span class="hash">#</span> usage</h2>
|
||||
<ol class="steps">
|
||||
<li><span class="step">01</span> copy the command above (click the box, or the icon).</li>
|
||||
<li><span class="step">02</span> open your terminal — Terminal, iTerm, Alacritty, Windows Terminal, anything.</li>
|
||||
<li><span class="step">03</span> paste, hit return. accept the host fingerprint with <kbd>yes</kbd> on first connect.</li>
|
||||
<li><span class="step">04</span> navigate with arrow keys + return. quit any time with <kbd>Ctrl</kbd>+<kbd>C</kbd>.</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2>Code Logic</h2>
|
||||
<p>
|
||||
This command gives authenticated access to the <strong>'portfolio'</strong> user account on my private home server.
|
||||
</p>
|
||||
<p>
|
||||
Instead of a standard bash or zsh shell, the user session triggers a custom-coded <strong>C++ executable</strong>.
|
||||
This binary utilizes <strong>FTXUI</strong>—a sophisticated functional terminal user interface library—to handle
|
||||
real-time rendering and input.
|
||||
</p>
|
||||
</section>
|
||||
<section class="block">
|
||||
<h2><span class="hash">#</span> implementation</h2>
|
||||
<p>
|
||||
The <span class="fg">portfolio</span> user's login shell isn't bash — it's a custom C++ binary that uses
|
||||
<a href="https://github.com/ArthurSonzogni/FTXUI" target="_blank" rel="noopener noreferrer">FTXUI</a>
|
||||
for layout, focus management, and rendering. Input is captured raw, output is repainted on a frame loop.
|
||||
<span class="fg">It is sandboxed, read-only, and harmless to your machine.</span>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2>Resources</h2>
|
||||
<div class="resources-grid">
|
||||
<a href="https://git.keshavanand.net/KeshavAnandCode/terminal-portfolio" target="_blank" rel="noopener noreferrer" class="resource-card">
|
||||
<span>View Source Code</span>
|
||||
</a>
|
||||
<section class="block">
|
||||
<h2><span class="hash">#</span> see also</h2>
|
||||
<ul class="links">
|
||||
<li>
|
||||
<a href="https://git.keshavanand.net/KeshavAnandCode/terminal-portfolio" target="_blank" rel="noopener noreferrer">
|
||||
<span class="arrow">→</span> source — git.keshavanand.net
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/webshell">
|
||||
<span class="arrow">→</span> run in browser — /webshell
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<a href="/webshell" class="resource-card">
|
||||
<span>Run Web Shell</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="foot">
|
||||
<span>keshavanand.net</span>
|
||||
<span class="dot">·</span>
|
||||
<span>portfolio(1)</span>
|
||||
<span class="dot">·</span>
|
||||
<span>last updated 2026</span>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
<div class="byline">// vibe coded to present human code</div>
|
||||
|
||||
<script type="module" src="/src/docs.ts"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user