From 6680d1e1a4c69fd25bf59ad17fea280232350541 Mon Sep 17 00:00:00 2001
From: MajorDroolz <maximhutz@gmail.com>
Date: Mon, 19 Dec 2022 02:32:14 -0500
Subject: [PATCH] FIX: Removed large layout shifts.

---
 .DS_Store         | Bin 8196 -> 8196 bytes
 resume/index.css  |  65 ++++++++++++++++------------------------------
 resume/index.html |   3 ++-
 resume/index.js   |   1 -
 4 files changed, 24 insertions(+), 45 deletions(-)

diff --git a/.DS_Store b/.DS_Store
index bbefab555228e325fd9a38104c6016395ed13345..ee6e651ffa3b4f36683dc8600fdf6ccb574cd301 100644
GIT binary patch
delta 41
xcmZp1XmOa}&&abeU^hP_&tx6}-OZkY``9)%2rzDDm-x=InNRE|<HiPFMgSCP4H*Cc

delta 79
zcmZp1XmOa}&&a<qU^hP_|70EkT}~E;42FD$T!z%ie1h_<VBTa+k<+4Z@v`8eyqx^J
ZbOr_n#?58|2iZ2WOMGY9{7#sS82}Zh6qf)1

diff --git a/resume/index.css b/resume/index.css
index 62e039c..4ea66f6 100644
--- 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);
   }
 }
 
diff --git a/resume/index.html b/resume/index.html
index 361fefb..480fb16 100644
--- 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>
diff --git a/resume/index.js b/resume/index.js
index 8c3b533..a07b9e1 100644
--- 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");
 }
\ No newline at end of file