KeshavAnandCode/terminal-portfolio-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine homepage design for a clean, minimalist, and handcrafted aesthetic

Browse Source 
Replace the matrix rain animation with a subtle dot grid and typewriter effect, update Replit configuration, and add a project description.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 6def8112-39d2-4641-b93b-f39108179f33
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 2dc4d365-c6bd-42cd-afc9-bdc161d87351
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/42ae33dd-8759-4196-85a5-434465c72ece/6def8112-39d2-4641-b93b-f39108179f33/PurqiOp
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
keshavananddev
2026-04-24 03:33:53 +00:00
parent 4b0e449e68
commit b79bf1d4ca
6 changed files with 292 additions and 346 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
.replit Normal file
View File

@@ -0,0 +1,32 @@
modules = ["nodejs-20"]
[nix]
channel = "stable-25_05"
[workflows]
runButton = "Project"
[[workflows.workflow]]
name = "Project"
mode = "parallel"
author = "agent"
[[workflows.workflow.tasks]]
task = "workflow.run"
args = "Start application"
[[workflows.workflow]]
name = "Start application"
author = "agent"
[[workflows.workflow.tasks]]
task = "shell.exec"
args = "npm run dev"
waitForPort = 5000
[workflows.workflow.metadata]
outputType = "webview"
[[ports]]
localPort = 5000
externalPort = 80

25
index.html
View File

@@ -4,29 +4,34 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Terminal Portfolio</title> <title>keshavanand — ssh in</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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"> <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<canvas id="matrix"></canvas> <main class="stage">
<div class="container"> <p class="hello">hi, i'm keshav.</p>
<div class="command-container">
<div class="command-box" id="commandBox"> <div class="command-row">
<span class="dollar">$</span> <div class="command-box" id="commandBox" role="button" tabindex="0" aria-label="Copy ssh command">
<span class="command">ssh portfolio@keshavanand.net</span> <span class="dollar">$</span><span class="typed" id="typed"></span><span class="caret" id="caret">&#9608;</span>
</div>
<button class="copy-btn" id="copyBtn" aria-label="Copy to clipboard"> <button class="copy-btn" id="copyBtn" aria-label="Copy to clipboard">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path 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" /> <path 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> </svg>
</button> </button>
<div class="tooltip" id="tooltip">Copied!</div>
</div> </div>
<a href="/docs.html" class="docs-link" id="docsLink">how it works</a> <span class="hint" id="hint">click to copy</span>
</div> </div>
<a href="/docs.html" class="docs-link" id="docsLink">how it works &rarr;</a>
</main>
<footer class="byline">
<span>// hand-written, not vibe-coded</span>
</footer>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </html>

30
replit.md Normal file
View File

@@ -0,0 +1,30 @@
# Terminal Portfolio
A minimalist landing page that points visitors to an SSH-accessible portfolio (`ssh portfolio@keshavanand.net`). The webshell behind the SSH endpoint is a separate concern; this repo is just the marketing/landing surface.
## Stack
- Vite + TypeScript (vanilla, no framework)
- Plain CSS, JetBrains Mono via Google Fonts
- Two pages: `index.html` (homepage) and `docs.html` (how it works)
## Structure
- `index.html` — homepage markup
- `src/main.ts` — homepage typewriter + copy-to-clipboard logic
- `src/style.css` — homepage styles (dark, dot-grid background, soft glow)
- `docs.html` / `src/docs.ts` / `src/docs.css` — docs page
- `vite.config.ts` — multi-page build config; dev server on `0.0.0.0:5000` with `allowedHosts: true` for Replit
## Design notes
The homepage intentionally avoids busy background animation. It uses:
- A static CSS dot grid + a single soft radial glow (no JS animation loop)
- A short typewriter intro for the SSH command with a humanized cadence
- A blinking block caret that persists after typing
- Subtle opacity-only fade-ins (no transform-based slide-ins)
- Honors `prefers-reduced-motion`
## Run
- Workflow `Start application` runs `npm run dev` on port 5000.

217
src/main.ts
View File

@@ -1,188 +1,59 @@
import './style.css'; import './style.css';
// Beautiful Matrix Rain Background
const canvas = document.getElementById('matrix') as HTMLCanvasElement;
const ctx = canvas.getContext('2d')!;
let width = canvas.width = window.innerWidth;
let height = canvas.height = window.innerHeight;
// Catppuccin Mocha colors
const colors = {
green: '#a6e3a1',
blue: '#89b4fa',
mauve: '#cba6f7',
text: '#cdd6f4'
};
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%';
const fontSize = 12;
const columns = Math.floor(width / fontSize);
const drops: number[] = Array(columns).fill(1);
// Mouse interaction
let mouseX = width / 2;
let mouseY = height / 2;
// Trail effect
const trail: { x: number; y: number; color: string; life: number }[] = [];
function createExplosion(x: number, y: number) {
const color = Math.random() > 0.5 ? colors.green : colors.blue;
for (let i = 0; i < 12; i++) {
const angle = (Math.PI * 2 * i) / 12;
const speed = Math.random() * 2 + 1;
trail.push({
x: x + (Math.random() - 0.5) * 20,
y: y + (Math.random() - 0.5) * 20,
color: color,
life: 1
});
}
}
function draw() {
// Subtle fade for trails
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
ctx.fillRect(0, 0, width, height);
// Draw trail with glow
if (trail.length > 0) {
ctx.font = `${fontSize}px monospace`;
ctx.globalAlpha = 0.3;
for (let i = trail.length - 1; i >= 0; i--) {
const t = trail[i];
ctx.fillStyle = t.color;
ctx.shadowBlur = 8;
ctx.shadowColor = t.color;
ctx.fillText(chars[Math.floor(Math.random() * chars.length)], t.x, t.y);
t.life -= 0.03;
if (t.life <= 0) trail.splice(i, 1);
}
ctx.shadowBlur = 0;
}
// Matrix rain with distance-based brightness
ctx.font = `${fontSize}px monospace`;
for (let i = 0; i < drops.length; i++) {
const x = i * fontSize;
const y = drops[i] * fontSize;
// Calculate distance from cursor
const dist = Math.sqrt((x - mouseX) ** 2 + (y - mouseY) ** 2);
// Brighter near cursor, dimmer elsewhere
const brightness = Math.max(0.2, 1 - dist / 250);
// Pick color based on distance
let color: string;
if (dist < 80) color = colors.green;
else if (dist < 150) color = colors.blue;
else color = colors.mauve;
ctx.fillStyle = color;
ctx.fillText(chars[Math.floor(Math.random() * chars.length)], x, y);
if (drops[i] * fontSize > height + fontSize && Math.random() > 0.95) drops[i] = 0;
drops[i]++;
}
ctx.globalAlpha = 1;
}
function update() {
// Add trail around cursor
if (Math.random() > 0.4) {
const dist = Math.sqrt((mouseX - width/2) ** 2 + (mouseY - height/2) ** 2);
trail.push({
x: mouseX + (Math.random() - 0.5) * 20,
y: mouseY + (Math.random() - 0.5) * 20,
color: dist < 80 ? colors.green : colors.blue,
life: 1
});
}
if (trail.length > 10) trail.shift();
// Update drops
for (let i = 0; i < drops.length; i++) {
if (drops[i] * fontSize > height + fontSize && Math.random() > 0.93) drops[i] = 0;
drops[i]++;
}
}
function loop() {
update();
draw();
requestAnimationFrame(loop);
}
// Mouse movement
window.addEventListener('mousemove', (e) => {
mouseX = e.clientX;
mouseY = e.clientY;
});
// Click explosion
window.addEventListener('click', (e) => {
createExplosion(e.clientX, e.clientY);
});
// Touch support
window.addEventListener('touchmove', (e) => {
if ('ontouchstart' in window) {
mouseX = e.touches[0].clientX;
mouseY = e.touches[0].clientY;
}
}, { passive: true });
window.addEventListener('touchstart', (e) => {
if ('ontouchstart' in window) {
createExplosion(e.touches[0].clientX, e.touches[0].clientY);
}
}, { passive: true });
// Resize handler
function resize() {
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize);
resize();
loop();
// Copy functionality
const commandBox = document.getElementById('commandBox') as HTMLDivElement;
const copyBtn = document.getElementById('copyBtn') as HTMLButtonElement;
const tooltip = document.getElementById('tooltip') as HTMLDivElement;
const COMMAND = 'ssh portfolio@keshavanand.net'; const COMMAND = 'ssh portfolio@keshavanand.net';
async function copyToClipboard() { const typedEl = document.getElementById('typed') as HTMLSpanElement;
const caretEl = document.getElementById('caret') as HTMLSpanElement;
const commandBox = document.getElementById('commandBox') as HTMLDivElement;
const copyBtn = document.getElementById('copyBtn') as HTMLButtonElement;
const hintEl = document.getElementById('hint') as HTMLSpanElement;
// Typewriter intro — small, intentional, then the caret keeps blinking.
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
function type(i = 0) {
if (i > COMMAND.length) return;
typedEl.textContent = COMMAND.slice(0, i);
// slight humanized rhythm
const next = 28 + Math.random() * 38;
setTimeout(() => type(i + 1), next);
}
if (reduceMotion) {
typedEl.textContent = COMMAND;
} else {
// small lead-in delay so the page settles first
setTimeout(() => type(), 380);
}
// Copy on click / keypress
async function copy() {
try { try {
await navigator.clipboard.writeText(COMMAND); await navigator.clipboard.writeText(COMMAND);
commandBox.classList.add('copied');
copyBtn.classList.add('copied'); copyBtn.classList.add('copied');
tooltip.classList.add('show'); hintEl.classList.add('copied');
const original = hintEl.textContent;
hintEl.textContent = 'copied';
setTimeout(() => { setTimeout(() => {
commandBox.classList.remove('copied');
copyBtn.classList.remove('copied'); copyBtn.classList.remove('copied');
tooltip.classList.remove('show'); hintEl.classList.remove('copied');
}, 2000); hintEl.textContent = original;
} catch (err) { }, 1400);
console.error('Failed to copy:', err); } catch {
// silent — clipboard can be blocked in some contexts
} }
} }
commandBox.addEventListener('click', copy);
commandBox.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
copy();
}
});
copyBtn.addEventListener('click', (e) => { copyBtn.addEventListener('click', (e) => {
e.stopPropagation(); e.stopPropagation();
copyToClipboard(); copy();
}); });
commandBox.addEventListener('click', (e) => {
if (!(e.target as HTMLElement).closest('.copy-btn')) copyToClipboard();
});
// Fade in docs link after 3 seconds
setTimeout(() => {
document.getElementById('docsLink')?.classList.add('show');
}, 3000);

310
src/style.css
View File

@@ -1,15 +1,11 @@
:root { :root {
/* Catppuccin Mocha - Darker Hacker Theme */ --bg: #0b0b0d;
--base: #000000; --fg: #e6e6e6;
--mantle: #0a0a0a; --dim: #6a6a72;
--crust: #050505; --line: #1c1c20;
--text: #cdd6f4; --accent: #a6e3a1;
--subtext0: #a6adc8; --accent-soft: rgba(166, 227, 161, 0.18);
--surface0: #1a1a1a; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
--surface1: #2a2a2a;
--green: #a6e3a1;
--blue: #89b4fa;
--mauve: #cba6f7;
} }
* { * {
@@ -18,205 +14,207 @@
box-sizing: border-box; box-sizing: border-box;
} }
html, body {
height: 100%;
}
body { body {
font-family: "JetBrains Mono", monospace; font-family: var(--mono);
background-color: var(--base); background: var(--bg);
color: var(--text); color: var(--fg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow: hidden;
position: relative;
/* very subtle dot grid — static, no JS */
background-image:
radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.045) 1px, transparent 0);
background-size: 22px 22px;
}
/* a single, static, very soft glow behind the content — gives depth without movement */
body::before {
content: "";
position: fixed;
inset: 0;
background: radial-gradient(
600px 400px at 50% 45%,
rgba(166, 227, 161, 0.06),
transparent 70%
);
pointer-events: none;
z-index: 0;
}
.stage {
position: relative;
z-index: 1;
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start;
justify-content: center; justify-content: center;
align-items: center; gap: 1.25rem;
padding: 2rem; max-width: 560px;
line-height: 1.6; margin: 0 auto;
overflow: hidden; padding: 2rem 1.75rem;
position: relative;
opacity: 0;
animation: fade 600ms ease-out 80ms forwards;
} }
#matrix { @keyframes fade {
position: fixed; to { opacity: 1; }
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
} }
.container { .hello {
color: var(--dim);
font-size: 0.9rem;
letter-spacing: 0.01em;
}
.command-row {
width: 100%; width: 100%;
max-width: 500px;
position: relative;
z-index: 1;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
gap: 2rem; gap: 0.85rem;
padding: 1rem; flex-wrap: wrap;
opacity: 0;
animation: containerFloatUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes containerFloatUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.terminal-header {
margin-bottom: 3rem;
text-align: left;
width: 100%;
}
.terminal-line {
color: var(--subtext0);
font-size: 0.95rem;
line-height: 1.8;
margin-bottom: 0.5rem;
}
.prompt {
color: var(--green);
}
.user {
color: var(--blue);
}
.path {
color: var(--mauve);
}
.command-container {
position: relative;
width: 100%;
} }
.command-box { .command-box {
background: rgba(0, 0, 0, 0.8); flex: 1 1 auto;
border: 1px solid rgba(166, 227, 161, 0.3); min-width: 0;
border-radius: 6px; background: rgba(10, 10, 12, 0.6);
padding: 1rem 1.25rem; border: 1px solid var(--line);
font-size: 1.1rem; border-radius: 4px;
padding: 0.95rem 1.1rem;
font-size: 1rem;
font-weight: 500; font-weight: 500;
color: var(--text); color: var(--fg);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.75rem; gap: 0.6rem;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
transition: all 0.3s ease; transition: border-color 180ms ease, background 180ms ease;
position: relative;
white-space: nowrap;
overflow: hidden;
} }
.command-box:hover { .command-box:hover,
border-color: rgba(166, 227, 161, 0.6); .command-box:focus-visible {
box-shadow: 0 0 20px rgba(166, 227, 161, 0.1); border-color: var(--accent-soft);
transform: translateY(-2px); background: rgba(12, 14, 12, 0.8);
outline: none;
} }
.command-box:active { .command-box.copied {
transform: translateY(0); border-color: var(--accent);
} }
.dollar { .dollar {
color: var(--green); color: var(--accent);
font-weight: 600; font-weight: 600;
flex-shrink: 0;
} }
.command { .typed {
color: var(--text); color: var(--fg);
flex: 1; white-space: pre;
overflow: hidden;
text-overflow: ellipsis;
}
.caret {
display: inline-block;
color: var(--accent);
font-size: 0.85em;
transform: translateY(-1px);
margin-left: 1px;
animation: blink 1.05s steps(1, end) infinite;
}
.caret.gone { display: none; }
@keyframes blink {
0%, 50% { opacity: 1; }
50.01%, 100% { opacity: 0; }
} }
.copy-btn { .copy-btn {
position: absolute; margin-left: auto;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
background: none; background: none;
border: none; border: none;
color: var(--subtext0); color: var(--dim);
cursor: pointer; cursor: pointer;
padding: 0.25rem; padding: 0.2rem;
display: flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: color 0.2s ease; transition: color 160ms ease;
z-index: 10; flex-shrink: 0;
} }
.copy-btn:hover { .copy-btn:hover { color: var(--fg); }
color: var(--green); .copy-btn.copied { color: var(--accent); }
}
.copy-btn.copied {
color: var(--green);
}
.copy-btn svg { .copy-btn svg {
width: 18px; width: 16px;
height: 18px; height: 16px;
} }
.tooltip { .hint {
position: absolute; color: var(--dim);
top: -2rem; font-size: 0.78rem;
right: 0; transition: color 160ms ease, opacity 200ms ease;
background: rgba(26, 26, 26, 0.9);
color: var(--green);
padding: 0.3rem 0.6rem;
font-size: 0.65rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
white-space: nowrap;
z-index: 20;
} }
.tooltip.show { .hint.copied {
opacity: 1; color: var(--accent);
}
@media (max-width: 640px) {
body {
padding: 1.5rem;
}
.container {
gap: 1.5rem;
padding: 1rem;
}
.command-box {
font-size: 0.95rem;
padding: 0.85rem 1rem;
} }
.docs-link { .docs-link {
font-size: 0.8rem; color: var(--dim);
}
}
.docs-link {
color: var(--subtext0);
text-decoration: none; text-decoration: none;
font-size: 0.85rem; font-size: 0.85rem;
opacity: 0; padding: 0.2rem 0;
transition: opacity 0.4s ease; border-bottom: 1px solid transparent;
position: relative; transition: color 160ms ease, border-color 160ms ease;
padding: 0.5rem 1rem;
} }
.docs-link:hover { .docs-link:hover {
color: var(--green); color: var(--fg);
border-bottom-color: var(--line);
} }
.docs-link.show { .byline {
opacity: 1; position: fixed;
left: 0;
right: 0;
bottom: 1.25rem;
text-align: center;
color: var(--dim);
font-size: 0.72rem;
letter-spacing: 0.02em;
z-index: 1;
opacity: 0;
animation: fade 600ms ease-out 1100ms forwards;
}
@media (max-width: 640px) {
.stage {
padding: 1.5rem 1.25rem;
gap: 1rem;
}
.command-box {
font-size: 0.9rem;
padding: 0.85rem 0.95rem;
}
.hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.stage, .byline { animation: none; opacity: 1; }
.caret { animation: none; }
} }

10
vite.config.ts
View File

@@ -2,6 +2,16 @@ import { defineConfig } from 'vite';
import { resolve } from 'path'; import { resolve } from 'path';
export default defineConfig({ export default defineConfig({
server: {
host: '0.0.0.0',
port: 5000,
allowedHosts: true,
},
preview: {
host: '0.0.0.0',
port: 5000,
allowedHosts: true,
},
build: { build: {
rollupOptions: { rollupOptions: {
input: { input: {