blog.sh project start

1 files changed, 106 insertions, 0 deletions

diff --git a/header.sh b/header.sh
new file mode 100644
index 0000000..2e9f467
--- /dev/null
+++ b/header.sh
@@ -0,0 +1,106 @@
+#!/bin/bash
+
+cat <<HEADER
+<style>
+  header h1, header h2 {
+    text-align: left;
+    line-break: anywhere;
+  }
+
+  header .separator-wrap {
+    margin-top: 15px;
+  }
+
+  .cursor {
+    background-color: var(--primary-fg);
+    animation-name: blink-animation;
+    animation-duration: 500ms;
+    animation-iteration-count: infinite;
+    animation-timing-function: cubic-bezier(0.83,-0.22, 0.54, 0.55);
+  }
+
+  @keyframes blink-animation {
+    to {
+      opacity: 0;
+    }
+  }
+
+  .mobile { display: none; }
+
+  @media screen and (max-width: 769px) {
+    .mobile { display: block; }
+    .desktop { display: none; }
+  }
+</style>
+
+<script type="text/javascript">
+  let mobileText = '$HEADER_TITLE_MOBILE';
+  let desktopText = '$HEADER_TITLE';
+  let isMobile = window.innerWidth < 769;
+
+  function hideContent() {
+    let mainContainer = document.querySelector('main');
+    let footer = document.querySelector('footer');
+    let headerSeparator = document.querySelector('header > .separator-wrap');
+    mainContainer.style.opacity = '0';
+    footer.style.opacity = '0';
+    headerSeparator.style.opacity = '0';
+  }
+
+  function showContent() {
+    let mainContainer = document.querySelector('main');
+    let footer = document.querySelector('footer');
+    let headerSeparator = document.querySelector('header > .separator-wrap');
+    mainContainer.style.transition = '500ms';
+    mainContainer.style.opacity = '1';
+    footer.style.transition = '500ms';
+    footer.style.opacity = '1';
+    headerSeparator.style.transition = '500ms';
+    headerSeparator.style.opacity = '1';
+
+  }
+
+  function typingAnimation(el, text, index, cb) {
+    let char = text[index];
+    if (char == ';') {
+      el.innerHTML += '<br />';
+    } else if (char == ' ') {
+      el.innerHTML += '&ensp;';
+    } else {
+      el.innerText += char;
+    }
+    
+    if (index < text.length - 1) {
+      setTimeout(() => typingAnimation(el, text, index + 1, cb), 30);
+    } else {
+      cb();
+    }
+  }
+
+  document.addEventListener('DOMContentLoaded', function(event) {
+    hideContent();
+    let titleMobile = document.querySelector("#header-title-mobile > .text");
+    let titleDesktop = document.querySelector('#header-title > .text');
+
+    if (isMobile) {
+      titleMobile.innerHTML = '';
+    } else {
+      titleDesktop.innerHTML = '';
+    }
+
+    setTimeout(() => {
+      if (isMobile) {
+        typingAnimation(titleMobile, mobileText, 0, showContent);
+      } else {
+        typingAnimation(titleDesktop, desktopText, 0, showContent);
+      }
+    }, 200);
+  });
+</script>
+
+<header>
+  <h1 id="header-title" class="desktop">$ <span class="text">echo "Jefferson Julio" >> ./programadores</span><span class="cursor">&ensp;</span></h1>
+  <h1 id="header-title-mobile" class="mobile">$ <span class="text">echo "Jefferson Julio" \\<br/> >> ./programadores</span><span class="cursor">&ensp;</span></h1>
+  <div class="separator-wrap"><div class="separator"></div></div>
+</header>
+HEADER