Initial commit: minimalist homepage with matrix rain background

src/docs.css

@@ -24,7 +24,7 @@ body {
 }
 
 .container {
-  max-width: 700px;
+  max-width: 650px;
   margin: 0 auto;
 }
 
@@ -35,10 +35,14 @@ body {
 .back-link {
   color: var(--subtext0);
   text-decoration: none;
-  font-size: 0.9rem;
+  font-size: 0.85rem;
   margin-bottom: 2rem;
   display: inline-block;
-  transition: color 0.3s ease;
+  transition: color 0.2s ease;
+}
+
+.back-link:hover {
+  color: var(--green);
 }
 
 .back-link:hover {
@@ -62,13 +66,18 @@ h1 {
 }
 
 .command-box {
-  background-color: rgba(26, 26, 26, 0.8);
+  background: rgba(26, 26, 26, 0.8);
   border: 1px solid var(--green);
-  padding: 1.5rem;
+  padding: 1.25rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
+  transition: border-color 0.2s ease;
+}
+
+.command-box:hover {
+  border-color: var(--blue);
 }
 
 .command-box code {
@@ -144,12 +153,17 @@ strong {
 
 .breakdown-item {
   padding: 1rem;
+  border-bottom: 1px solid rgba(166, 227, 161, 0.1);
+}
+
+.breakdown-item:last-child {
+  border-bottom: none;
 }
 
 .breakdown-item h3 {
   color: var(--blue);
-  font-size: 1.1rem;
+  font-size: 1rem;
-  margin-bottom: 0.75rem;
+  margin-bottom: 0.5rem;
   font-weight: 600;
 }
 
@@ -199,9 +213,9 @@ kbd {
 
 .resource-card {
   display: block;
-  padding: 0.85rem 1rem;
+  padding: 0.75rem 1rem;
-  background-color: rgba(26, 26, 26, 0.5);
+  background: rgba(26, 26, 26, 0.5);
-  border: 1px solid rgba(166, 227, 161, 0.2);
+  border: 1px solid rgba(166, 227, 161, 0.15);
   text-decoration: none;
   color: var(--text);
   margin: 0.5rem 0;
@@ -210,7 +224,7 @@ kbd {
 
 .resource-card:hover {
   border-color: var(--green);
-  background-color: rgba(26, 26, 26, 0.7);
+  background: rgba(26, 26, 26, 0.7);
 }
 
 .resource-card span {
@@ -223,15 +237,11 @@ kbd {
   }
 
   h1 {
-    font-size: 2rem;
+    font-size: 1.8rem;
   }
 
   h2 {
-    font-size: 1.3rem;
+    font-size: 1.1rem;
-  }
-
-  .command-box code {
-    font-size: 0.9rem;
   }
 
   .breakdown-grid,

src/main.ts

@@ -1,5 +1,158 @@
 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;
@@ -29,7 +182,7 @@ commandBox.addEventListener('click', (e) => {
   if (!(e.target as HTMLElement).closest('.copy-btn')) copyToClipboard();
 });
 
-// Fade in docs link after 2 seconds
+// Fade in docs link after 3 seconds
 setTimeout(() => {
   document.getElementById('docsLink')?.classList.add('show');
-}, 2000);
+}, 3000);

src/style.css

@@ -33,16 +33,39 @@ body {
   position: relative;
 }
 
+#matrix {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  pointer-events: none;
+}
+
 .container {
   width: 100%;
-  max-width: 600px;
+  max-width: 500px;
   position: relative;
   z-index: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 3rem;
+  gap: 2rem;
-  padding: 2rem;
+  padding: 1rem;
+  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 {
@@ -76,27 +99,34 @@ body {
 }
 
 .command-box {
-  background-color: rgba(0, 0, 0, 0.85);
+  background: rgba(0, 0, 0, 0.8);
-  border: 1px solid #a6e3a1;
+  border: 1px solid rgba(166, 227, 161, 0.3);
-  padding: 1.5rem 2.5rem;
+  border-radius: 6px;
-  font-size: 1.4rem;
+  padding: 1rem 1.25rem;
+  font-size: 1.1rem;
+  font-weight: 500;
   color: var(--text);
   display: flex;
   align-items: center;
   gap: 0.75rem;
   cursor: pointer;
   user-select: none;
+  transition: all 0.3s ease;
 }
 
 .command-box:hover {
-  border-color: #a6e3a1;
+  border-color: rgba(166, 227, 161, 0.6);
+  box-shadow: 0 0 20px rgba(166, 227, 161, 0.1);
+  transform: translateY(-2px);
+}
+
+.command-box:active {
+  transform: translateY(0);
 }
 
 .dollar {
   color: var(--green);
   font-weight: 600;
-  font-size: 1.3rem;
-  text-shadow: 0 0 10px rgba(166, 227, 161, 0.5);
 }
 
 .command {
@@ -106,18 +136,19 @@ body {
 
 .copy-btn {
   position: absolute;
-  right: 1rem;
+  right: 0.75rem;
   top: 50%;
   transform: translateY(-50%);
   background: none;
   border: none;
   color: var(--subtext0);
   cursor: pointer;
-  padding: 0.25rem 0.5rem;
+  padding: 0.25rem;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: color 0.2s ease;
+  z-index: 10;
 }
 
 .copy-btn:hover {
@@ -129,23 +160,23 @@ body {
 }
 
 .copy-btn svg {
-  width: 20px;
+  width: 18px;
-  height: 20px;
+  height: 18px;
 }
 
 .tooltip {
   position: absolute;
   top: -2rem;
   right: 0;
-  background-color: var(--surface1);
+  background: rgba(26, 26, 26, 0.9);
   color: var(--green);
-  padding: 0.35rem 0.6rem;
+  padding: 0.3rem 0.6rem;
-  border-radius: 4px;
+  font-size: 0.65rem;
-  font-size: 0.7rem;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.2s ease;
   white-space: nowrap;
+  z-index: 20;
 }
 
 .tooltip.show {
@@ -157,14 +188,18 @@ body {
     padding: 1.5rem;
   }
 
-  .command-box {
+  .container {
-    font-size: 1.1rem;
+    gap: 1.5rem;
-    padding: 1.25rem 1.75rem;
+    padding: 1rem;
   }
 
-  .copy-btn svg {
+  .command-box {
-    width: 16px;
+    font-size: 0.95rem;
-    height: 16px;
+    padding: 0.85rem 1rem;
+  }
+
+  .docs-link {
+    font-size: 0.8rem;
   }
 }