fix animations

_sass/custom-styles.scss

@@ -71,17 +71,6 @@ pre.terminal {
   animation: blink 1s steps(1) infinite;
 }
 
-@keyframes growFromCenter {
-  from {
-    opacity: 0;
-    transform: scale(0);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
 @keyframes pulse {
   0% {
     transform: scale(0);
@@ -232,6 +221,7 @@ a .domain {
   top: 0;
   background-color: #000000;
   z-index: 100;
+  box-shadow: 0px 10px 20px 8px rgba(0, 0, 0, 0.6);
 }
 
 @keyframes fadeInRight {
@@ -257,7 +247,6 @@ a .domain {
   gap: 10px;
   align-items: center;
   transform: translateY(1px);
-  animation: fadeInRight 0.5s ease-in-out;
 
   &:hover {
     color: #c6c6c6;
@@ -488,14 +477,47 @@ img {
 
 @keyframes echo {
   0% {
-    transform: scale(0);
+    transform: scale(0) rotate(0deg);
     opacity: 0;
   }
-  50% {
+  20% {
+    transform: scale(2) rotate(5deg);
+    opacity: 1;
+  }
+  15% {
+    transform: scale(2) rotate(-5deg);
+    opacity: 1;
+  }
+  25% {
+    transform: scale(2) rotate(5deg);
+    opacity: 1;
+  }
+  35% {
+    transform: scale(2) rotate(-5deg);
+    opacity: 1;
+  }
+  45% {
+    transform: scale(2) rotate(5deg);
+    opacity: 1;
+  }
+  55% {
+    transform: scale(2) rotate(-5deg);
+    opacity: 1;
+  }
+  65% {
+    transform: scale(2) rotate(5deg);
+    opacity: 1;
+  }
+  75% {
+    transform: scale(2) rotate(-5deg);
+    opacity: 1;
+  }
+  90% {
+    transform: scale(2) rotate(5deg);
     opacity: 1;
   }
   100% {
-    transform: scale(3);
+    transform: scale(2.2) rotate(0deg);
     opacity: 0;
   }
 }
@@ -512,4 +534,6 @@ img {
   color: white;
   font-size: 12px;
   animation: echo 2s ease-out;
+  max-width: calc(100vw - 100px); /* Ensure it doesn't overflow the viewport */
+  max-height: calc(100vh - 100px); /* Ensure it doesn't overflow the viewport */
 }

assets/ts/terminal/AutoTypeManager.ts

@@ -9,10 +9,16 @@ class AutoTypeManager {
   private prompt: HTMLInputElement;
   private mirrorElement: HTMLDivElement;
   private deleteSpeed: number = 100;
+  private terminal: HTMLDivElement;
 
-  constructor(prompt: HTMLInputElement, mirrorElement: HTMLDivElement) {
+  constructor(
+    prompt: HTMLInputElement,
+    terminal: HTMLDivElement,
+    mirrorElement: HTMLDivElement
+  ) {
     this.prompt = prompt;
     this.mirrorElement = mirrorElement;
+    this.terminal = terminal;
     this.startAutoType();
   }
 

assets/ts/terminal/UserInputManager.ts

@@ -79,18 +79,7 @@ class UserInputManager {
     const badge = stdoutTab.querySelector(".unread-badge") as Element;
 
     if (hasUnreadStdout) {
-      if (!badge.classList.contains("show")) {
-        badge.classList.add("show");
-      } else {
-        badge.classList.add("pulse");
-        badge.addEventListener(
-          "animationend",
-          () => badge.classList.remove("pulse"),
-          { once: true }
-        );
-      }
-    } else {
-      badge.classList.remove("show", "pulse");
+      badge.classList.add("show");
     }
   }
 

assets/ts/terminal/autoTypeOptions.ts

@@ -13,7 +13,7 @@ export const autoTypeOptions: AutoTypeOption[] = [
     execute: true,
     backspace: false,
     typeSpeed: 120,
-    initialDelay: 6000,
+    initialDelay: 3000,
     endActionDelay: 1000,
   },
   {

assets/ts/terminal/commands.ts

@@ -3,11 +3,6 @@ const clearCommand: CommandExecute = (args) => {
   return "";
 };
 
-const echoCommand: CommandExecute = (args) => {
-  createEchoes(args.join(" "));
-  return `Echo effect triggered for ${args.join(" ")}`;
-};
-
 const lsCommand: CommandExecute = (args) => {
   return "file1.txt\nfile2.txt\nfile3.txt";
 };
@@ -120,19 +115,40 @@ function showTab(tabName: string) {
   }
 }
 
-function echo(text: string) {
+const echoCommand: CommandExecute = (args) => {
+  createEchoes(args.join(" "));
+  return `Echo effect triggered for ${args.join(" ")}`;
+};
+
+function echo(text: string, position: "topLeft" | "bottomRight") {
   const oval = document.createElement("div");
   oval.classList.add("oval");
-  oval.innerText = text; // Set the inner text of the oval
-
-  // Position the oval at a random location on the screen
-  const x = Math.random() * window.innerWidth;
-  const y = Math.random() * window.innerHeight;
-  oval.style.left = `${x}px`;
-  oval.style.top = `${y}px`;
+  oval.innerText = text;
+
+  // Common styles for the oval
+  // oval.style.position = "fixed";
+  oval.style.display = "flex";
+  oval.style.alignItems = "center";
+  oval.style.justifyContent = "center";
+  oval.style.zIndex = "500";
+
+  // Apply the position-specific styles
+  if (position === "topLeft") {
+    oval.style.left = "50px";
+    oval.style.top = "50px";
+  } else {
+    oval.style.right = "50px";
+    oval.style.bottom = "50px";
+    oval.style.backgroundColor = "#001349";
+    oval.style.color = "#9a9a9a";
+  }
 
+  // Append the oval to the body
   document.body.appendChild(oval);
 
+  // Add a class for animation and styles, if needed
+  oval.classList.add("oval-animate");
+
   // Remove the oval from the DOM after the animation ends
   oval.addEventListener("animationend", () => {
     document.body.removeChild(oval);
@@ -141,8 +157,9 @@ function echo(text: string) {
 
 // Function to create multiple ovals with the same text
 function createEchoes(text: string) {
-  for (let i = 0; i < 20; i++) {
-    setTimeout(() => echo(text), i * 100); // Adjust timing for staggered appearance
+  const positions: ("topLeft" | "bottomRight")[] = ["topLeft", "bottomRight"];
+  for (let i = 0; i < 2; i++) {
+    setTimeout(() => echo(text, positions[i % 2]), i * 2000); // Adjust timing for staggered appearance
   }
 }
 

assets/ts/terminal/index.ts

@@ -5,7 +5,7 @@ const prompt = document.querySelector(".prompt") as HTMLInputElement;
 const mirrorElement = document.querySelector(".input-mirror") as HTMLDivElement;
 const terminal = document.querySelector(".terminal") as HTMLDivElement;
 
-const autoTypeManager = new AutoTypeManager(prompt, mirrorElement);
+const autoTypeManager = new AutoTypeManager(prompt, terminal, mirrorElement);
 
 const userInputManager = new UserInputManager(
   prompt,