FIX: Removed large layout shifts.

2022-12-19 02:32:14 -05:00
parent 7fcef515a0
commit 6680d1e1a4
4 changed files with 24 additions and 45 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/resume/index.css
+++ b/resume/index.css
@@ -3,7 +3,7 @@
 :root {
  font-family: sans-serif;
  --timing: cubic-bezier(.2,1,0,1);
-  --enter: 2s var(--timing) 0.2s backwards;
+  --enter: 2s var(--timing) 0.2s both;
  
  --blue: #3F75A2;
  --darkblue: #2E5476;
@@ -23,6 +23,7 @@
 html {
  font-size: 1vw;
  background: black;
+  animation: var(--enter) scene-enter;
 }

@media print {
@@ -31,6 +32,10 @@ html {
  }
 }

+main {
+  display: contents;
+}
+
 /*---- Generic Styles --------------------------------------------------------*/

 h1 {
@@ -79,7 +84,7 @@ nav.navbar {
 .resume-header {
  color: white;
  filter: opacity(0.5);
-  font: bold 8em Poppins;
+  font: 800 8em Poppins;
  animation: var(--enter) title-enter;
  will-change: transform, filter;
  user-select: none;
@@ -131,7 +136,7 @@ article {
  padding: 3em;
  margin: 18em 16em;
  border-radius: 1em;
-  animation: var(--enter) page-enter, var(--enter) scroll-enter;
+  animation: page-enter var(--enter);
  will-change: transform, filter;
  box-shadow: 0 2.5em 5em 0 #0004,
              inset 1.5em 1.5em 5em 2.5em white;
@@ -147,7 +152,6 @@ body::before {
  top: 0;
  left: 0;
  z-index: -2;
-  animation: var(--enter) gradient-enter;
 }

 /*---- Header ----------------------------------------------------------------*/
@@ -291,67 +295,42 @@ body::before {
 /*---- Animations ------------------------------------------------------------*/

@keyframes page-enter {
-  0% {
-    filter: opacity(0);
-    transform: scale(1.5) translate3d(0, 50%, 0);
+  from {
+    transform: scale(0.9) translateY(10%);
  }

-  99% {
-    filter: opacity(1);
-    transform: scale(1) translate3d(0, 0%, 0);
-  }
-
-  100% {
-    filter: opacity(1);
-    transform: scale(1) translate3d(0, 0%, 0);
-  }
-}
-
-@keyframes gradient-enter {
-  0% {
-    filter: opacity(0);
-  }
-  
-  100% {
-    filter: opacity(1);
+  to {
+    transform: scale(1) translateY(0%);
  }
 }

@keyframes title-enter {
  0% {
-    filter: opacity(0);
-    transform: scale(2) translate3d(0, -200%, 0);
+    transform: scale(2) translateY(-50%);
  }

  100% {
-    filter: opacity(0.5);
-    transform: scale(1) translate3d(0, 0%, 0);
+    transform: scale(1) translateY(0%);
  }
 }

@keyframes footer-enter {
  0% {
-    filter: opacity(0);
-    transform: scale(2) translate3d(0, 1000%, 0);
+    transform: scale(2) translateY(50%);
  }

  100% {
-    filter: opacity(1);
-    transform: scale(1) translate3d(0, 0%, 0);
+    transform: scale(1) translateY(0%);
  }
 }

-@keyframes scroll-enter {
-  0% {
-    position: fixed;
+@keyframes scene-enter {
+  from {
+    filter: brightness(0);
  }
  
-  25% {
-    position: fixed;
-  }
-
-  100% {
-    position: static;
+  to {
+    filter: brightness(1);
  }
 }

--- a/resume/index.html
+++ b/resume/index.html
@@ -28,7 +28,7 @@
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
    
    <!-- The font and icons. -->
-    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,500;0,800;0,900;1,100;1,500;1,800;1,900&display=swap" as="style">
+    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,800&display=swap" as="style">
    <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css" as="style">

    <!-- Resume styling. -->
@@ -36,6 +36,7 @@
  </head>

  <body hidden>
+    <i>&nbsp;</i>
    <nav class="navbar">
      <header class="resume-header">Resume</header>
    </nav>
--- a/resume/index.js
+++ b/resume/index.js
@@ -1,5 +1,4 @@
 window.onload = () => {
  const links = document.querySelectorAll('link[rel="preload"]');
  for (const link of links) link.rel = 'stylesheet';
-  document.body.removeAttribute("hidden");
 }