<h1 id="messageLabel">Hello World! || I'm Alex</h1>

@import url('//fonts.googleapis.com/css?family=Bungee+Shade')

//VARIABLES
$bg: #2980b9
$color: #2c3e50
$mt: 100px
$fs: 50px
$fs2: 2em
$fs3: 1.5em
$res: 850px
$res2: 550px

* 
  font-family: 'Bungee Shade'

body
  background-color: $bg
  color: $color

h1
  color: $color
  margin-top: $mt 
  font-size: $fs
  text-align: center
  @media screen and (max-width: $res)
    font-size: $fs2
  @media screen and (max-width: $res2)
    font-size: $fs3  

var message = "Hello World! || I'm Alex";
var msgCount = 0;
var blinkCount = 0;
var blinkFlg = 0;
var timer1, timer2;
var messageLabel = document.getElementById("messageLabel");

function textFunc() {
   messageLabel.innerHTML = message.substring(0, msgCount);
   
   if (msgCount == message.length) {
      // Stop Timer
      clearInterval(timer1);
      
      // Start blinking animation!
      timer2 = setInterval("blinkFunc()", 200);
      
   } else {
      msgCount++;
   }
}

function blinkFunc() {
   
   // Blink 5 times
   if (blinkCount < 6) {
      if(blinkFlg == 0) {
         messageLabel.innerHTML = message;
         blinkFlg = 1;
         blinkCount++;
      } else {
         messageLabel.innerHTML = "";
         blinkFlg = 0;
      }
   } else {
      // Stop Timer
      clearInterval(timer2);
   }
}


timer1 = setInterval("textFunc()", 150); // Every 150 milliseconds