Loading Animation

<style>
#splash-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  transition: opacity 1s ease;
  overflow: hidden;
}

#splash-page h1 {
  color: #333;
  font-size: 55px;
  text-align: center;
}

body {
  overflow: hidden;
}

body.splash-loaded {
  overflow: auto;
}
</style>

<script>
(function() {
  document.write('<div id="splash-page"><div><h1>Ryan Leidner Architecture</h1></div></div>');
  
  window.addEventListener('load', function() {
    const splashPage = document.getElementById('splash-page');
    
    setTimeout(function() {
      if (splashPage && splashPage.parentNode) {
        splashPage.style.opacity = '0';
        
        setTimeout(function() {
          if (splashPage && splashPage.parentNode) {
            splashPage.parentNode.removeChild(splashPage);
            document.body.classList.add('splash-loaded');
          }
        }, 1000);
      }
    }, 1000);
  });
})();
</script>