Jnf.me/www/js/main.js

openPerson = false

$(() => {
  // Detect page URL
  path = window.location.pathname.replace(/\//g, '')
  if (path == 'jason' || path == 'flo' || path == 'lucy') {
    // A specific path has been set. Display the profile for that person
    openPerson = path

    // Display content for the relevant person, and hide other content
    $('.main.not' + openPerson).css({
      width: 0,
      height: 0,
      minHeight: 0
    })

    $('#main-' + openPerson).css('min-height', '100vh')

    $('#splash-' + openPerson).css({
      width: '50vw',
      height: '100vh'
    })

    // Animate the display of links
    $('#links-' + openPerson).animate({
      height: $('#links-' + openPerson).get(0).scrollHeight
    }, {
      duration: 300,
      queue: true
    })
  }

  // Listen for pop states
  window.onpopstate = function(event) {
    path = window.location.pathname.replace(/\//g, '')
    //alert(path)
  };

  // Handle clicks on profile links (by doing nothing)
  $('a.openlink').click(function(e) {
    e.preventDefault();
  })

  // Handle clicks on the banner
  $('div.banner').click(function() {
    if (typeof $(this).attr('data-person') == 'undefined') return;

    // If no profile is open, open one...
    if (!openPerson) {
      openPerson = $(this).attr('data-person')

      if (window.matchMedia('(orientation: portrait)').matches) {
        // If we're opening in portrait mode...
        $('.main.not' + openPerson).css({
          height: '50vh',
          minHeight: 0
        })

        $('.main.not' + openPerson).animate({
          height: 0
        }, {
          duration: 300,
          queue: false
        })

        $('#main-' + openPerson).animate({
          minHeight: '100vh'
        }, {
          duration: 300,
          queue: true,
          complete: () => {
            $('.main.not' + openPerson).css('width', 0)
            $('#splash-' + openPerson).css({
              width: '50vw',
              height: '100vh'
            })
          }
        })

      } else {
        // If we're opening in landscape mode...
        $('#splash-' + openPerson).css('height', '100vh')

        $('.main.not' + openPerson).animate({
          width: 0
        }, {
          duration: 300,
          queue: false
        })

        $('#splash-' + openPerson).animate({
          width: '50vw'
        }, {
          duration: 300,
          queue: true,
          complete: () => {
            $('.main.not' + openPerson).css({
              height: 0,
              minHeight: 0
            })
          }
        })
      }

      // Display the links and change the page URL
      setTimeout(() => {
        $('#links-' + openPerson).animate({
          height: $('#links-' + openPerson).get(0).scrollHeight
        }, {
          duration: 300,
          queue: true
        })

        window.history.pushState({ id: "100" }, '', '/' + openPerson);
      }, 300)
    } else {
      // If a profile is open, close it.
      $('#links-' + openPerson).animate({
        height: 0
      }, {
        duration: 300,
        queue: true
      })

      if (window.matchMedia('(orientation: portrait)').matches) {
        // If we're closing in portrait mode...
        $('.main.not' + openPerson).css('width', '100vw')

        $('#main-' + openPerson).animate({
          minHeight: '50vh'
        }, {
          duration: 300,
          queue: false
        })

        $('.main.not' + openPerson).animate({
          height: '50vh'
        }, {
          duration: 300,
          queue: false,
          complete: () => {
            $('.main, .splash').removeAttr('style')
            openPerson = false
          }
        })

      } else {
        // If we're closing in landscape mode...
        $('.main.not' + openPerson).css('height', '100vh')

        $('#splash-' + openPerson).animate({
          width: 0
        }, {
          duration: 300,
          queue: false
        })

        $('.main.not' + openPerson).animate({
          width: '50vw'
        }, {
         duration: 300,
         queue: false,
         complete: () => {
           $('.main, .splash').removeAttr('style')
           openPerson = false
         }
        })
      }

      // Push a new page URL
      window.history.pushState({ id: "100" }, '', '/');
    }
  })
})