updates

karsonkalt · Jun 21, 2024 · b26ce79 · b26ce79
1 parent b451bbe
commit b26ce79
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 42 deletions.
diff --git a/_layouts/home.html b/_layouts/home.html
@@ -21,7 +21,7 @@ <h1>Karson Kalt</h1>
   </nav>
 </div>
 
-<pre class="terminal">
+<pre class="terminal ripple-container">
   <span class="system-prompt" aria-hidden="true">$</span>
   <div class="input-container">
     <input type="text" class="prompt" value="">

diff --git a/_sass/custom-styles.scss b/_sass/custom-styles.scss
@@ -4,33 +4,37 @@
 }
 
 pre.terminal {
-  all: unset; // ignore pre tags
+  border: none;
   font-family: "Ubuntu Mono";
   cursor: text;
   display: flex;
   align-items: center;
-  padding: 8px;
+  padding: 8px 16px 8px 16px;
   margin: -8px;
   margin-bottom: 10px;
   border-radius: 6px;
   caret-color: transparent;
   border-bottom: 1px solid transparent;
-  font-size: 1.3em;
-  color: white;
-  background-color: #353535a1;
+  font-size: 1.1em;
+  color: rgb(192, 192, 192);
+  background-color: #35353561;
 
   &:hover {
     background-color: #393939c0;
   }
   &:focus-within {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
-    background-color: #343434;
+    background-color: #333333;
     border-bottom: 1px solid #e8e8e8;
 
     & .cursor {
       display: inline;
     }
+
+    & .input-mirror {
+      color: rgb(237, 237, 237);
+    }
   }
 
   @media screen and (max-width: 800px) {
@@ -59,7 +63,7 @@ pre.terminal {
 
 .input-mirror {
   white-space: pre;
-  color: white;
+  color: rgb(191, 191, 191);
 }
 
 .cursor {
@@ -78,14 +82,16 @@ pre.terminal {
   }
 }
 
-
 @keyframes pulse {
   0%, 100% {
     transform: scale(1);
   }
   50% {
     transform: scale(1.5);
   }
+  100% {
+    transform: scale(1)
+  }
 }
 
 .unread-badge {
@@ -102,11 +108,11 @@ pre.terminal {
 
 .unread-badge.show {
   opacity: 1;
-  animation: growFromCenter 300ms ease-in-out;
+  // animation: growFromCenter 300ms ease-in-out;
 }
 
 .unread-badge.pulse {
-  animation: pulse 500ms ease-in-out;
+  animation: pulse 750ms ease-in-out;
 
 }
 
@@ -207,7 +213,6 @@ a .domain {
 
 // TABS
 .tab-container {
-  animation: fadeInUp 1000ms forwards;
   & > div {
     flex-direction: column;
     display: flex;
@@ -230,11 +235,11 @@ a .domain {
 @keyframes fadeInRight {
   0% {
     opacity: 0;
-    transform: translateX(-20px);
+    transform: translateX(-20px) translateY(1px);
   }
   100% {
     opacity: 1;
-    transform: translateX(0);
+    transform: translateX(0) translateY(1px);
   }
 }
 
@@ -280,11 +285,11 @@ a .domain {
 @keyframes fadeInUp {
   0% {
     opacity: 0;
-    transform: translateY(20px);
+    transform: translateY(20px) scale(.95);
   }
   100% {
     opacity: 1;
-    transform: translateY(0);
+    transform: translateY(0) scale(1);
   }
 }
 
@@ -440,3 +445,41 @@ img {
     border-radius: 0;
   }
 }
+.ripple-container {
+  position: relative;
+  overflow: hidden;
+
+  & .ripple {
+    background: rgba(255, 255, 255, 0.6);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    pointer-events: none;
+    animation: ripple 500ms linear;
+}}
+
+
+@keyframes ripple {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+    width: 10px;
+    height: 10px;
+    opacity: 0;
+  }
+  25% {
+    opacity: .7;
+  }
+  50% {
+    opacity: .25
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+    width: var(--ripple-size);
+    height: var(--ripple-size);
+    opacity: 0; /* Fades out */
+  }
+}
diff --git a/assets/js/commands.js b/assets/js/commands.js
@@ -21,8 +21,27 @@ const snarkyResponses = [
     mv: { execute: snarkyResponse },
     chmod: { execute: snarkyResponse },
     chown: { execute: snarkyResponse },
+    mkdir: { execute: snarkyResponse },
+    ls: { execute: snarkyResponse },
+    cat: { execute: snarkyResponse },
+    ps: { execute: snarkyResponse },
+    top: { execute: snarkyResponse },
+    vi: { execute: snarkyResponse },
+    nano: { execute: snarkyResponse },
+    exit: { execute: snarkyResponse },
+    man: { execute: snarkyResponse },
+    grep: { execute: snarkyResponse },
+    find: { execute: snarkyResponse },
+    pwd: { execute: snarkyResponse },
+    df: { execute: snarkyResponse },
+    du: { execute: snarkyResponse },
+    curl: { execute: snarkyResponse },
+    wget: { execute: snarkyResponse },
+    ping: { execute: snarkyResponse },
+    ifconfig: { execute: snarkyResponse }
   };
 
+
   const commands = {
     clear: {
       execute: clearCommand,
@@ -211,11 +230,11 @@ const snarkyResponses = [
 
   function skillsCommand(args) {
     if (args.includes("--languages")) {
-      return "Languages: TypeScript, JavaScript, CSS";
+      return "TypeScript, JavaScript, CSS";
     } else if (args.includes("-l")) {
-      return "Skills: Frontend Development, React, UX Design, TypeScript, JavaScript, Node A11y, Agile, User-Centered Design";
+      return "Frontend Development, React, UX Design, TypeScript, JavaScript, Node A11y, Agile, User-Centered Design";
     } else {
-      return "Skills: Frontend Development, React, UX Design, TypeScript, JavaScript";
+      return "Frontend Development, React, UX Design, TypeScript, JavaScript";
     }
   }
 
@@ -224,15 +243,13 @@ const snarkyResponses = [
   }
 
   function educationCommand(args) {
-    return `Education:
-    - <strong>B.S. Digital Marketing</strong>, <a href="https://www.uvu.edu/"target="_blank">Utah Valley University</a> (2010 - 2014)
-    - **Flatiron School**, Software Engineering Immersive (2017)
+    return `<strong>B.S. Digital Marketing</strong>, <a href="https://www.uvu.edu/"target="_blank">Utah Valley University</a> (2010 - 2014)
+    <strong>Software Engineering Immersive</strong> Flatiron School (2017)
   `;
   }
 
   function experienceCommand(args) {
-    return `Experience:
-    <strong>Software Engineer, Applications</strong>, <a href="https://www.jupiterone.com/"target="_blank">JupiterOne</a> (October 2021 - Present)
+    return `<strong>Software Engineer, Applications</strong>, <a href="https://www.jupiterone.com/"target="_blank">JupiterOne</a> (October 2021 - Present)
     Natural Language Querying
     − Designed and developed the integration of generative AI into our search experience, converting natural language to our query language. Resulted in one of our highest adoption rates and helped accelerate platform time-to-value.
     − Implemented a vector database embedding cache, improving query response times and reducing operational costs.

diff --git a/assets/js/emoticon.js b/assets/js/emoticon.js
@@ -105,7 +105,22 @@ const items = [
   },
   ];
 
-  let autoTypeActive = true;
+let autoTypeActive = true;
+
+function createRipple() {
+  const targetElement = document.querySelector('.ripple-container')
+  const size = Math.max(targetElement.offsetWidth, targetElement.offsetHeight) * 1.1; // Ensure it covers the parent
+
+  const ripple = document.createElement('span');
+  ripple.className = 'ripple';
+  ripple.style.setProperty('--ripple-size', `${size}px`);
+  targetElement.appendChild(ripple);
+
+  // ripple.addEventListener("animationend", () => {
+  //     ripple.remove();
+  // });
+}
+
 
   (function () {
     const terminal = document.querySelector(".terminal");
@@ -178,15 +193,16 @@ const items = [
 
     // Handle the Enter key to submit or do something
     prompt.addEventListener("keydown", (event) => {
-      if (event.key === "Enter") {
+      if (event.key === "Enter" && !!event.target.value.trim()) {
         event.preventDefault(); // Prevents submitting the form
-        handleBashCommand(event.target.value);
+        handleBashCommand(event.target.value.trim());
         setPromptValue("");
         autoTypeActive = false;
       }
     });
 
     function handleBashCommand(command) {
+      createRipple()
       const [cmd, ...args] = command.split(" ");
 
       const result = executeCommand(cmd, args);
@@ -200,12 +216,12 @@ const items = [
       const tabPanels = document.querySelector(".tab-panels");
       const ul = tabPanels.querySelector(".tab-panel-content");
       const li = document.createElement("li");
-      const timestamp = new Date().toLocaleTimeString();
+      // const timestamp = new Date().toLocaleTimeString();
+      // <span class="stdout-timestamp">${timestamp}</span>
 
       li.innerHTML = `
         <div class="stdout-entry">
           <div class="stdout-entry-wrapper">
-          <span class="stdout-timestamp">${timestamp}</span>
           <span class="stdout-command">${command}</span>
           <div class="stdout-output">${output}</div>
           </div>
@@ -215,10 +231,10 @@ const items = [
       // Insert the new stdout entry at the top
       ul.insertBefore(li, ul.firstChild);
 
-      let currentTab = document.querySelector('button[role="tab"][aria-selected="true"]').id;
+      let currentTab = document.querySelector('button[role="tab"][aria-selected="true"]')?.id;
 
       // Update unread count and show badge if not viewing stdout
-      updateBadge(currentTab !== 'stdout');
+      if (currentTab) updateBadge(currentTab !== 'stdout');
     }
 
     function updateBadge(hasUnreadStdout) {
@@ -227,30 +243,22 @@ const items = [
 
       if (hasUnreadStdout) {
         if (!badge.classList.contains('show')) {
-          // Add the 'show' class if the badge is not already visible
           badge.classList.add('show');
-          // Remove the 'pulse' class if it exists to reset the animation state
-          badge.classList.remove('pulse');
         } else {
-          // If the badge is already visible, add the 'pulse' class to trigger the pulse animation
           badge.classList.add('pulse');
-          // Remove the 'pulse' class after the animation completes
-          setTimeout(() => badge.classList.remove('pulse'), 200);
+          badge.addEventListener('animationend', () => badge.classList.remove('pulse'));
         }
       } else {
-        // Remove the 'show' and 'pulse' classes to hide the badge
         badge.classList.remove('show', 'pulse');
       }
     }
 
-    // Handle tab switching
     function switchTab(tabName) {
       currentTab = tabName;
       if (tabName === 'stdout') {
         unreadCount = 0;
         updateBadge();
       }
-      // Handle showing/hiding tab content here
     }
 
     document.querySelectorAll('.tab').forEach(tab => {
@@ -260,7 +268,6 @@ const items = [
       });
     });
 
-    // Initialize badge
     updateBadge();
 
     function resetFocusTimeout() {
@@ -272,7 +279,6 @@ const items = [
       }, FOCUS_TIMEOUT);
     }
 
-    // Restart auto-type if input is not focused for more than 6 seconds
     prompt.addEventListener("blur", resetFocusTimeout);
 
     prompt.addEventListener("focus", () => {

diff --git a/assets/js/tabs.js b/assets/js/tabs.js
@@ -19,6 +19,8 @@ window.onhashchange = function () {
 };
 
 function applyChanges(clickedTab) {
+  updateBadge(clickedTab.getAttribute('id') === 'stdout')
+
   tabNodes.forEach((tab) => {
     const isSelected = tab === clickedTab;
     tab.setAttribute("aria-selected", isSelected.toString());
@@ -38,6 +40,16 @@ function applyChanges(clickedTab) {
   });
 }
 
+// duplicated from other
+function updateBadge(hasUnreadStdout) {
+  const stdoutTab = document.querySelector('#stdout');
+  const badge = stdoutTab.querySelector('.unread-badge');
+
+  if (hasUnreadStdout)  {
+    badge.classList.remove('show');
+  }
+}
+
 if (location.hash) {
   const tab = document.querySelector(location.hash);
   if (tab) {