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

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
2026-04-24 03:33:53 +00:00
parent 4b0e449e68
commit b79bf1d4ca
6 changed files with 292 additions and 346 deletions
--- a/.replit
+++ b/.replit
@@ -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
--- a/index.html
+++ b/index.html
@@ -4,29 +4,34 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <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.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
  </head>
  <body>
-    <canvas id="matrix"></canvas>
-   <div class="container">
-      <div class="command-container">
-        <div class="command-box" id="commandBox">
-          <span class="dollar">$</span>
-          <span class="command">ssh portfolio@keshavanand.net</span>
+    <main class="stage">
+      <p class="hello">hi, i'm keshav.</p>
+
+      <div class="command-row">
+        <div class="command-box" id="commandBox" role="button" tabindex="0" aria-label="Copy ssh command">
+          <span class="dollar">$</span><span class="typed" id="typed"></span><span class="caret" id="caret">&#9608;</span>
+          <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">
+              <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>
+          </button>
        </div>
-        <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">
-            <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>
-        </button>
-        <div class="tooltip" id="tooltip">Copied!</div>
+        <span class="hint" id="hint">click to copy</span>
      </div>
-      <a href="/docs.html" class="docs-link" id="docsLink">how it works</a>
-    </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>
  </body>
-</html>
+</html>
--- a/replit.md
+++ b/replit.md
@@ -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.
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,188 +1,59 @@
 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';

-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 {
    await navigator.clipboard.writeText(COMMAND);
+    commandBox.classList.add('copied');
    copyBtn.classList.add('copied');
-    tooltip.classList.add('show');
+    hintEl.classList.add('copied');
+    const original = hintEl.textContent;
+    hintEl.textContent = 'copied';
    setTimeout(() => {
+      commandBox.classList.remove('copied');
      copyBtn.classList.remove('copied');
-      tooltip.classList.remove('show');
-    }, 2000);
-  } catch (err) {
-    console.error('Failed to copy:', err);
+      hintEl.classList.remove('copied');
+      hintEl.textContent = original;
+    }, 1400);
+  } 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) => {
  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);
--- a/src/style.css
+++ b/src/style.css
@@ -1,15 +1,11 @@
 :root {
-  /* Catppuccin Mocha - Darker Hacker Theme */
-  --base: #000000;
-  --mantle: #0a0a0a;
-  --crust: #050505;
-  --text: #cdd6f4;
-  --subtext0: #a6adc8;
-  --surface0: #1a1a1a;
-  --surface1: #2a2a2a;
-  --green: #a6e3a1;
-  --blue: #89b4fa;
-  --mauve: #cba6f7;
+  --bg: #0b0b0d;
+  --fg: #e6e6e6;
+  --dim: #6a6a72;
+  --line: #1c1c20;
+  --accent: #a6e3a1;
+  --accent-soft: rgba(166, 227, 161, 0.18);
+  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
 }

 * {
@@ -18,205 +14,207 @@
  box-sizing: border-box;
 }

+html, body {
+  height: 100%;
+}
+
 body {
-  font-family: "JetBrains Mono", monospace;
-  background-color: var(--base);
-  color: var(--text);
+  font-family: var(--mono);
+  background: var(--bg);
+  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;
  display: flex;
  flex-direction: column;
+  align-items: flex-start;
  justify-content: center;
-  align-items: center;
-  padding: 2rem;
-  line-height: 1.6;
-  overflow: hidden;
-  position: relative;
-}
+  gap: 1.25rem;
+  max-width: 560px;
+  margin: 0 auto;
+  padding: 2rem 1.75rem;

-#matrix {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 0;
-  pointer-events: none;
-}
-
-.container {
-  width: 100%;
-  max-width: 500px;
-  position: relative;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2rem;
-  padding: 1rem;
  opacity: 0;
-  animation: containerFloatUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+  animation: fade 600ms ease-out 80ms forwards;
 }

-@keyframes containerFloatUp {
-  from {
-    opacity: 0;
-    transform: translateY(30px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+@keyframes fade {
+  to { opacity: 1; }
 }

-.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;
+.hello {
+  color: var(--dim);
+  font-size: 0.9rem;
+  letter-spacing: 0.01em;
+}
+
+.command-row {
  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+  flex-wrap: wrap;
 }

 .command-box {
-  background: rgba(0, 0, 0, 0.8);
-  border: 1px solid rgba(166, 227, 161, 0.3);
-  border-radius: 6px;
-  padding: 1rem 1.25rem;
-  font-size: 1.1rem;
+  flex: 1 1 auto;
+  min-width: 0;
+  background: rgba(10, 10, 12, 0.6);
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  padding: 0.95rem 1.1rem;
+  font-size: 1rem;
  font-weight: 500;
-  color: var(--text);
+  color: var(--fg);
  display: flex;
  align-items: center;
-  gap: 0.75rem;
+  gap: 0.6rem;
  cursor: pointer;
  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 {
-  border-color: rgba(166, 227, 161, 0.6);
-  box-shadow: 0 0 20px rgba(166, 227, 161, 0.1);
-  transform: translateY(-2px);
+.command-box:hover,
+.command-box:focus-visible {
+  border-color: var(--accent-soft);
+  background: rgba(12, 14, 12, 0.8);
+  outline: none;
 }

-.command-box:active {
-  transform: translateY(0);
+.command-box.copied {
+  border-color: var(--accent);
 }

 .dollar {
-  color: var(--green);
+  color: var(--accent);
  font-weight: 600;
+  flex-shrink: 0;
 }

-.command {
-  color: var(--text);
-  flex: 1;
+.typed {
+  color: var(--fg);
+  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 {
-  position: absolute;
-  right: 0.75rem;
-  top: 50%;
-  transform: translateY(-50%);
+  margin-left: auto;
  background: none;
  border: none;
-  color: var(--subtext0);
+  color: var(--dim);
  cursor: pointer;
-  padding: 0.25rem;
-  display: flex;
+  padding: 0.2rem;
+  display: inline-flex;
  align-items: center;
  justify-content: center;
-  transition: color 0.2s ease;
-  z-index: 10;
+  transition: color 160ms ease;
+  flex-shrink: 0;
 }

-.copy-btn:hover {
-  color: var(--green);
-}
-
-.copy-btn.copied {
-  color: var(--green);
-}
+.copy-btn:hover { color: var(--fg); }
+.copy-btn.copied { color: var(--accent); }

 .copy-btn svg {
-  width: 18px;
-  height: 18px;
+  width: 16px;
+  height: 16px;
 }

-.tooltip {
-  position: absolute;
-  top: -2rem;
-  right: 0;
-  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;
+.hint {
+  color: var(--dim);
+  font-size: 0.78rem;
+  transition: color 160ms ease, opacity 200ms ease;
 }

-.tooltip.show {
-  opacity: 1;
-}
-
-@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 {
-    font-size: 0.8rem;
-  }
+.hint.copied {
+  color: var(--accent);
 }

 .docs-link {
-  color: var(--subtext0);
+  color: var(--dim);
  text-decoration: none;
  font-size: 0.85rem;
-  opacity: 0;
-  transition: opacity 0.4s ease;
-  position: relative;
-  padding: 0.5rem 1rem;
+  padding: 0.2rem 0;
+  border-bottom: 1px solid transparent;
+  transition: color 160ms ease, border-color 160ms ease;
 }

 .docs-link:hover {
-  color: var(--green);
+  color: var(--fg);
+  border-bottom-color: var(--line);
 }

-.docs-link.show {
-  opacity: 1;
+.byline {
+  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; }
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,6 +2,16 @@ import { defineConfig } from 'vite';
 import { resolve } from 'path';

 export default defineConfig({
+  server: {
+    host: '0.0.0.0',
+    port: 5000,
+    allowedHosts: true,
+  },
+  preview: {
+    host: '0.0.0.0',
+    port: 5000,
+    allowedHosts: true,
+  },
  build: {
    rollupOptions: {
      input: {
@@ -10,4 +20,4 @@ export default defineConfig({
      },
    },
  },
-});
+});