1 files changed, 137 insertions, 0 deletions
diff --git a/static/header.js b/static/header.js
new file mode 100644
index 0000000..06d868a
--- /dev/null
+++ b/static/header.js
@@ -0,0 +1,137 @@
+let isMobile = window.innerWidth < 769;
+let keyPressAudio = new Audio('/static/key-press.mp3');
+let headerAnimationTerminated = false;
+let cursorHTML = '<span class="cursor">&ensp;</span>';
+
+window.addEventListener('resize', () => {
+  isMobile = window.innerWidth < 769;
+});
+
+function hideTopNav() {
+  let topNav = document.querySelector('.top-nav');
+  topNav.style.opacity = '0';
+  topNav.style.display = 'none';
+}
+
+function hideContent() {
+  hideTopNav();
+  let mainContainer = document.querySelector('main');
+  let footer = document.querySelector('footer');
+  mainContainer.style.opacity = '0';
+  mainContainer.style.display = 'none';
+  footer.style.opacity = '0';
+  footer.style.display = 'none';
+}
+
+function showContent(cb) {
+  let mainContainer = document.querySelector('main');
+  let footer = document.querySelector('footer');
+  let topNav = document.querySelector('.top-nav');
+
+  topNav.style.transition = '100ms';
+  topNav.style.opacity = '1';
+  topNav.style.display = 'block';
+
+  setTimeout(() => {
+    mainContainer.style.transition = '500ms';
+    mainContainer.style.opacity = '1';
+    mainContainer.style.display = 'block';
+    setTimeout(() => {
+      footer.style.transition = '500ms';
+      footer.style.opacity = '1';
+      footer.style.display = 'block';
+      if (cb) cb();
+    }, 500);
+  }, 100);
+}
+
+function clearHideContentTransition() {
+  let mainContainer = document.querySelector('main');
+  let footer = document.querySelector('footer');
+  let topNav = document.querySelector('.top-nav');
+  topNav.style.transition = '0s';
+  mainContainer.style.transition = '0s';
+  footer.style.transition = '0s';
+}
+
+function typingAnimation(el, text, index, cb) {
+  let delay = 30;
+
+  let char = text[index];
+  if (char == ';') {
+    el.innerHTML += '<br />$ ';
+    !isMobile && keyPressAudio.play();
+    delay += 400;
+  } else if (char == ' ') {
+    el.innerHTML += '&ensp;';
+  } else {
+    el.innerText += char;
+  }
+  
+  if (index < text.length - 1) {
+    setTimeout(() => typingAnimation(el, text, index + 1, cb), delay);
+  } else {
+    !isMobile && keyPressAudio.play();
+    el.innerHTML += '<br />';
+    setTimeout(() => {
+      if (cb) cb();
+      setTimeout(clearHideContentTransition, 1000);
+    }, 600);
+  }
+}
+
+function clearHeaderTerminal(cb) {
+  let titleMobile = document.querySelector("#header-title-mobile > .text");
+  let titleDesktop = document.querySelector('#header-title > .text');
+  let footerCommandPrompt = document.querySelector('#footer-command-prompt');
+
+  if (isMobile) {
+    titleMobile.innerHTML = '';
+  } else {
+    titleDesktop.innerHTML = '';
+  }
+
+  footerCommandPrompt.style.height = 'calc(100vh)';
+  hideTopNav();
+  footerCommandPrompt.querySelector('.after-prompt').scrollIntoView({
+    behavior: 'smooth',
+  });
+
+  setTimeout(() => {
+    if (cb) cb();
+    footerCommandPrompt.style.height = 'auto';
+  }, 1000);
+}
+
+function headerTerminalExecute(desktopText, mobileText, cb) {
+  window.scrollTo(0, 0);
+  headerAnimationTerminated = false;
+  let titleMobile = document.querySelector("#header-title-mobile > .text");
+  let titleDesktop = document.querySelector('#header-title > .text');
+
+  if (!mobileText) mobileText = desktopText;
+
+  setTimeout(() => {
+    if (isMobile) {
+      titleMobile.insertAdjacentHTML('afterend', cursorHTML);
+      typingAnimation(titleMobile, mobileText, 0, () => {
+        if (cb) cb();
+        headerAnimationTerminated = true;
+        document.querySelector('#header-title-mobile .cursor').remove();
+      });
+    } else {
+      titleDesktop.insertAdjacentHTML('afterend', cursorHTML);
+      typingAnimation(titleDesktop, desktopText, 0, () => {
+        if (cb) cb();
+        headerAnimationTerminated = true;
+        document.querySelector('#header-title .cursor').remove();
+      });
+    }
+  }, 200);
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+  clearHeaderTerminal();
+  hideContent();
+  headerTerminalExecute(desktopText, mobileText, () => showContent(bindAllRelativeAnchors));
+});