Jnf.me/www/js/main.js

openPerson = false

$(() => {
  $('a.openlink').click(function(e) {
    e.preventDefault();
  })

  $('div.banner').click(function() {
    if (!openPerson) {
      // If no profile is open, open one...
      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
      setTimeout(() => {
        $('#links-' + openPerson).animate({
          height: $('#links-' + openPerson).get(0).scrollHeight
        }, {
          duration: 300,
          queue: true
        })
      }, 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
         }
        })
      }
    }
  })
})