some changes

2026-04-13 19:30:14 -05:00
parent 612118ac48
commit 55c88f4577
6 changed files with 35 additions and 300 deletions
--- a/docs.html
+++ b/docs.html
@@ -86,36 +86,14 @@
        <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">
-              <div class="resource-content">
-                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
-                </svg>
-                <span>View Source Code</span>
-              </div>
-              <svg class="external-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
-                <polyline points="15 3 21 3 21 9"></polyline>
-                <line x1="10" y1="14" x2="21" y2="3"></line>
-              </svg>
-            </a>
+       <a href="https://git.keshavanand.net/KeshavAnandCode/terminal-portfolio" target="_blank" rel="noopener noreferrer" class="resource-card">
+          <span>View Source Code</span>
+        </a>

-            <a href="/webshell" class="resource-card">
-              <div class="resource-content">
-                <svg 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="4 17 10 11 4 5"></polyline>
-                  <line x1="12" y1="19" x2="20" y2="19"></line>
-                </svg>
-                <span>Run Web Shell</span>
-              </div>
-              <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <line x1="5" y1="12" x2="19" y2="12"></line>
-                <polyline points="12 5 19 12 12 19"></polyline>
-              </svg>
-            </a>
-          </div>
-          <p class="note">Note: Web shell is a simulated environment, and native terminal is recommended</p>
-        </section>
+        <a href="/webshell" class="resource-card">
+          <span>Run Web Shell</span>
+        </a>
+      </div>
      </div>
    </div>

--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
  </head>
  <body>
    <canvas id="matrix"></canvas>
-    <div class="container">
+   <div class="container">
      <div class="command-container">
        <div class="command-box" id="commandBox">
          <span class="dollar">$</span>
--- a/package-lock.json
+++ b/package-lock.json
@@ -812,7 +812,6 @@
      "integrity": "sha512-zWW5KPngR/yvakJgGOmZ5vTBemDoSqF3AcV/LrO5u5wTWyEAVVh+IT39G4gtyAkh3CtTZs8aX/yRM82OfzHJRg==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "undici-types": "~7.16.0"
      }
@@ -911,7 +910,6 @@
      "version": "4.0.3",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=12"
      },
--- a/src/docs.css
+++ b/src/docs.css
@@ -24,16 +24,8 @@ body {
 }

 .container {
-  max-width: 900px;
+  max-width: 700px;
  margin: 0 auto;
-  opacity: 0;
-  animation: fadeIn 0.8s ease forwards;
-}
-
-@keyframes fadeIn {
-  to {
-    opacity: 1;
-  }
 }

 .header {
@@ -71,19 +63,12 @@ h1 {

 .command-box {
  background-color: rgba(26, 26, 26, 0.8);
-  border: 2px solid var(--green);
-  border-radius: 8px;
+  border: 1px solid var(--green);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
-  box-shadow: 0 0 20px rgba(166, 227, 161, 0.1);
-  transition: all 0.3s ease;
-}
-
-.command-box:hover {
-  box-shadow: 0 0 30px rgba(166, 227, 161, 0.15);
 }

 .command-box code {
@@ -121,19 +106,6 @@ h1 {

 .copy-btn.copied .check-icon {
  display: block;
-  animation: checkPop 0.3s ease;
-}
-
-@keyframes checkPop {
-  0% {
-    transform: scale(0);
-  }
-  50% {
-    transform: scale(1.2);
-  }
-  100% {
-    transform: scale(1);
-  }
 }

 .sections {
@@ -143,35 +115,6 @@ h1 {
 }

 .section {
-  opacity: 0;
-  animation: slideUp 0.6s ease forwards;
-}
-
-.section:nth-child(1) {
-  animation-delay: 0.2s;
-}
-.section:nth-child(2) {
-  animation-delay: 0.4s;
-}
-.section:nth-child(3) {
-  animation-delay: 0.6s;
-}
-.section:nth-child(4) {
-  animation-delay: 0.8s;
-}
-.section:nth-child(5) {
-  animation-delay: 1s;
-}
-
-@keyframes slideUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
 }

 h2 {
@@ -179,14 +122,6 @@ h2 {
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
  font-weight: 600;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-h2::before {
-  content: ">";
-  color: var(--green);
 }

 p {
@@ -208,16 +143,7 @@ strong {
 }

 .breakdown-item {
-  background-color: rgba(26, 26, 26, 0.5);
-  border: 1px solid rgba(166, 227, 161, 0.2);
-  border-radius: 8px;
-  padding: 1.5rem;
-  transition: all 0.3s ease;
-}
-
-.breakdown-item:hover {
-  border-color: rgba(166, 227, 161, 0.4);
-  background-color: rgba(26, 26, 26, 0.7);
+  padding: 1rem;
 }

 .breakdown-item h3 {
@@ -272,59 +198,23 @@ kbd {
 }

 .resource-card {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1.25rem;
+  display: block;
+  padding: 0.85rem 1rem;
  background-color: rgba(26, 26, 26, 0.5);
  border: 1px solid rgba(166, 227, 161, 0.2);
-  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
-  transition: all 0.3s ease;
-  position: relative;
-  overflow: hidden;
+  margin: 0.5rem 0;
+  transition: border-color 0.2s ease, background-color 0.2s ease;
 }

 .resource-card:hover {
-  background-color: rgba(26, 26, 26, 0.7);
  border-color: var(--green);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(166, 227, 161, 0.1);
+  background-color: rgba(26, 26, 26, 0.7);
 }

-.resource-content {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.resource-content svg {
-  color: var(--green);
-}
-
-.resource-content span {
-  font-size: 0.95rem;
-}
-
-.external-icon,
-.arrow-icon {
-  color: var(--subtext0);
-  opacity: 0;
-  transition: all 0.3s ease;
-}
-
-.resource-card:hover .external-icon,
-.resource-card:hover .arrow-icon {
-  opacity: 1;
-  color: var(--green);
-}
-
-.note {
-  margin-top: 1rem;
-  font-size: 0.8rem;
-  text-align: center;
-  color: rgba(166, 172, 200, 0.6);
+.resource-card span {
+  font-size: 0.9rem;
 }

@media (max-width: 768px) {
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,59 +1,5 @@
 import './style.css';

-// Matrix rain effect
-const canvas = document.getElementById('matrix') as HTMLCanvasElement;
-const ctx = canvas.getContext('2d')!;
-
-canvas.width = window.innerWidth;
-canvas.height = window.innerHeight;
-
-const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$%^&*()_+-=[]{}|;:,.<>?/~`';
-const fontSize = 14;
-const columns = canvas.width / fontSize;
-const drops: number[] = Array(Math.floor(columns)).fill(1);
-
-let mouseX = canvas.width / 2;
-let mouseY = canvas.height / 2;
-
-function draw() {
-  ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
-  ctx.fillRect(0, 0, canvas.width, canvas.height);
-  
-  ctx.font = `${fontSize}px monospace`;
-  
-  for (let i = 0; i < drops.length; i++) {
-    const x = i * fontSize;
-    const y = drops[i] * fontSize;
-    const dist = Math.sqrt((x - mouseX) ** 2 + (y - mouseY) ** 2);
-    
-    const text = chars[Math.floor(Math.random() * chars.length)];
-    
-    // Only show characters near cursor
-    const alpha = Math.max(0, 1 - dist / 250);
-    
-    if (alpha > 0.1) {
-      const color = dist < 120 ? '#a6e3a1' : dist < 200 ? '#89b4fa' : '#6c7086';
-      ctx.fillStyle = color + Math.floor(alpha * 255).toString(16).padStart(2, '0');
-      ctx.fillText(text, x, y);
-    }
-    
-    if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) drops[i] = 0;
-    drops[i]++;
-  }
-}
-
-setInterval(draw, 33);
-
-window.addEventListener('mousemove', (e) => {
-  mouseX = e.clientX;
-  mouseY = e.clientY;
-});
-
-window.addEventListener('resize', () => {
-  canvas.width = window.innerWidth;
-  canvas.height = window.innerHeight;
-});
-
 // Copy functionality
 const commandBox = document.getElementById('commandBox') as HTMLDivElement;
 const copyBtn = document.getElementById('copyBtn') as HTMLButtonElement;
--- a/src/style.css
+++ b/src/style.css
@@ -33,34 +33,16 @@ body {
  position: relative;
 }

-#matrix {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 0;
-}
-
 .container {
  width: 100%;
-  max-width: 800px;
+  max-width: 600px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
-  gap: 2.5rem;
-  opacity: 0;
-  transform: translateY(30px);
-  animation: fadeInUp 0.6s ease forwards;
-}
-
-@keyframes fadeInUp {
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+  gap: 3rem;
+  padding: 2rem;
 }

 .terminal-header {
@@ -95,30 +77,19 @@ body {

 .command-box {
  background-color: rgba(0, 0, 0, 0.85);
-  backdrop-filter: blur(12px);
-  border: 2px solid #a6e3a1;
-  border-radius: 8px;
-  padding: 1.5rem 4rem 1.5rem 1.75rem;
-  font-size: 1.1rem;
+  border: 1px solid #a6e3a1;
+  padding: 1.5rem 2.5rem;
+  font-size: 1.4rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.75rem;
-  transition: all 0.3s ease;
  cursor: pointer;
  user-select: none;
-  box-shadow: 0 0 20px rgba(166, 227, 161, 0.15);
 }

 .command-box:hover {
-  background-color: rgba(0, 0, 0, 0.9);
  border-color: #a6e3a1;
-  box-shadow: 0 0 30px rgba(166, 227, 161, 0.25);
-  transform: translateY(-2px);
-}
-
-.command-box:active {
-  transform: translateY(-2px) scale(0.98);
 }

 .dollar {
@@ -142,21 +113,15 @@ body {
  border: none;
  color: var(--subtext0);
  cursor: pointer;
-  padding: 0.5rem;
+  padding: 0.25rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
-  transition: all 0.2s ease;
-  border-radius: 4px;
+  transition: color 0.2s ease;
 }

 .copy-btn:hover {
  color: var(--green);
-  background-color: var(--surface1);
-}
-
-.copy-btn:active {
-  transform: translateY(-50%) scale(0.9);
 }

 .copy-btn.copied {
@@ -170,13 +135,13 @@ body {

 .tooltip {
  position: absolute;
-  top: -2.5rem;
+  top: -2rem;
  right: 0;
  background-color: var(--surface1);
  color: var(--green);
-  padding: 0.5rem 0.75rem;
+  padding: 0.35rem 0.6rem;
  border-radius: 4px;
-  font-size: 0.75rem;
+  font-size: 0.7rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
@@ -192,73 +157,31 @@ body {
    padding: 1.5rem;
  }

-  .terminal-header {
-    margin-bottom: 2rem;
-  }
-
  .command-box {
-    font-size: 0.9rem;
-    padding: 1.1rem 3rem 1.1rem 1.25rem;
-  }
-
-  .terminal-line {
-    font-size: 0.85rem;
+    font-size: 1.1rem;
+    padding: 1.25rem 1.75rem;
  }

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

 .docs-link {
  color: var(--subtext0);
  text-decoration: none;
-  font-size: 0.9rem;
+  font-size: 0.85rem;
  opacity: 0;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: opacity 0.4s ease;
  position: relative;
  padding: 0.5rem 1rem;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  transform: translateY(10px);
-}
-
-.docs-link::before {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  width: 0;
-  height: 1px;
-  background: linear-gradient(90deg, transparent, var(--green), transparent);
-  transition: all 0.4s ease;
-  transform: translateX(-50%);
 }

 .docs-link:hover {
  color: var(--green);
-  border-color: rgba(166, 227, 161, 0.2);
-  background-color: rgba(166, 227, 161, 0.05);
-  transform: translateY(-2px);
-}
-
-.docs-link:hover::before {
-  width: 100%;
 }

 .docs-link.show {
  opacity: 1;
-  transform: translateY(0);
-  animation: pulse 2s ease-in-out 0.5s;
-}
-
-@keyframes pulse {
-  0%,
-  100% {
-    box-shadow: 0 0 0 0 rgba(166, 227, 161, 0.4);
-  }
-  50% {
-    box-shadow: 0 0 0 8px rgba(166, 227, 161, 0);
-  }
 }