script.js

let animateName = "animated pulse";
let animationend = "webkitAnimationEnd mozAnimationEnd oAnimationEnd animationEnd";
let animatedClass = ".title";

$(animatedClass).mouseenter(function(event){
    $(this).addClass(animateName);
});

$(animatedClass).on(animationend, function(event) {
    $(this).removeClass(animateName);
});

function toggleActive(newActiveTab) {
    $(".navbar-nav > li > a").removeClass("active");
    $(`#${newActiveTab}`).addClass("active");
    $(".hero-body").hide();
    $(`#hero-${newActiveTab}`).empty();
    $(`#hero-${newActiveTab}`).show();
  }

function getHome() {
    $("#hero-home").append(
        `<div class="container has-text-centered">
        <h1 id="animated-title" class="title is-1 animated pulse" style="font-size:3em;">
          Hi, I am Amaan.
        </h1>
        <h2 class="subtitle">
          I am a blogger, programmer and designer.
        </h2>
        </div>`);
}

function getAbout() {
    $("#hero-about").append(
        `<section style="padding-left:0;padding-right:0" class="section">
        <div class="tile is-ancestor">
        <div class="tile is-vertical is-8">
          <div class="tile">
            <div class="tile is-parent is-vertical">
              <article class="tile is-child notification is-primary">
                <p class="title">Vertical...</p>
                <p class="subtitle">Top tile</p>
              </article>
              <article class="tile is-child notification is-warning">
                <p class="title">...tiles</p>
                <p class="subtitle">Bottom tile</p>
              </article>
            </div>
            <div class="tile is-parent">
              <article class="tile is-child notification is-info">
                <p class="title">Middle tile</p>
                <p class="subtitle">With an image</p>
                <figure class="image is-4by3">
                  <img src="https://bulma.io/images/placeholders/640x480.png">
                </figure>
              </article>
            </div>
          </div>
          <div class="tile is-parent">
            <article class="tile is-child notification is-danger">
              <p class="title">Wide tile</p>
              <p class="subtitle">Aligned with the right tile</p>
              <div class="content">
                <!-- Content -->
              </div>
            </article>
          </div>
        </div>
        <div class="tile is-parent">
          <article class="tile is-child notification is-success">
            <div class="content">
              <p class="title">Tall tile</p>
              <p class="subtitle">With even more content</p>
              <div class="content">
                <!-- Content -->
              </div>
            </div>
          </article>
        </div>
      </div>
        </section>`);
}

$(function() {
    toggleActive("home");
    getHome();

    $("#home").click(() => {
        toggleActive("home");
        getHome();
      });

    $("#about").click(() => {
        toggleActive("about");
        getAbout();
      });


    });