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

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);