Caleb Doucet

Caleb Doucet.markdown

Caleb Doucet

A Pen by Cael6 on CodePen.

License.

index.html

<div class="content">
  <h1>
    <span class="logo-tag">&lt;</span>
    <span id="tag-content"></span>
    <span class="text-cursor">|</span>
    <span class="logo-tag">/&gt;</span>
  </h1>
  <h2>&lt;aleb /&gt;oucet</h2>
</div>

script.js

var tags = [
  "Front-End Developer",
  "Designer",
  "Programmer",
  "Disc Golfer",
  "Programmer",
  "Gamer",
  "Board Gamer",
  "CSS Enthusiast",
  "Game Developer",
  "PHP Developer",
  "Cat Person",
  "JavaScript Developer",
  "HTML Developer",
  "Web Programmer",
  "Bug Squasher",
  "Code Penner"
]

$(document).ready(function(){
  setTimeout(backspaceTagContent, 1000);
});

function changeTagContent() {
  backspaceTagContent();
}

function backspaceTagContent() {
  $('#tag-content').html($('#tag-content').html().slice(0,-1));
  if ($('#tag-content').html().length) {
    setTimeout(backspaceTagContent, 50);
  } else {
    setTimeout(function() { insertTagContent(getRandomTag()); }, 100);
  }
}

function insertTagContent(tag) {
  $('#tag-content').html(tag.substring(0, $('#tag-content').html().length + 1));
  if ($('#tag-content').html().length != tag.length) {
    setTimeout(function() { insertTagContent(tag); }, 100);
  } else {
    setTimeout(changeTagContent, 5000);
  }
}

function getRandomTag() {
  return tags[Math.floor(Math.random() * tags.length)];
  
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import "compass";
body {
  font-family: 'Orbitron', sans-serif;
  color: #009688;
  background: #FFF;
  font-size: 62.5%;
}
h1 {
  font-size: 3em;
  
  @media screen and (max-width: 480px) {
    font-size: 2em;
  }
}
.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.logo-tag {
  font-size: 1.5em;
  text-shadow: 0 0 30px rgba(0, 150, 136, 0.4);
}

.text-cursor {
  opacity: 1;
  animation: cursor-flash 1.6s infinite;
}

@keyframes cursor-flash {
    49% {opacity: 1;}
    50% {opacity: 0;}
    99% {opacity: 0;}
    100% {opacity: 1;}
}