web/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FIX: Removed large layout shifts.

Browse Source
This commit is contained in:
MajorDroolz
2022-12-19 02:32:14 -05:00
parent 7fcef515a0
commit 6680d1e1a4
4 changed files with 24 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

65
resume/index.css
View File

@@ -3,7 +3,7 @@
:root { :root {
font-family: sans-serif; font-family: sans-serif;
--timing: cubic-bezier(.2,1,0,1); --timing: cubic-bezier(.2,1,0,1);
--enter: 2s var(--timing) 0.2s backwards; --enter: 2s var(--timing) 0.2s both;
--blue: #3F75A2; --blue: #3F75A2;
--darkblue: #2E5476; --darkblue: #2E5476;
@@ -23,6 +23,7 @@
html { html {
font-size: 1vw; font-size: 1vw;
background: black; background: black;
animation: var(--enter) scene-enter;
} }
@media print { @media print {
@@ -31,6 +32,10 @@ html {
} }
} }
main {
display: contents;
}
/*---- Generic Styles --------------------------------------------------------*/ /*---- Generic Styles --------------------------------------------------------*/
h1 { h1 {
@@ -79,7 +84,7 @@ nav.navbar {
.resume-header { .resume-header {
color: white; color: white;
filter: opacity(0.5); filter: opacity(0.5);
font: bold 8em Poppins; font: 800 8em Poppins;
animation: var(--enter) title-enter; animation: var(--enter) title-enter;
will-change: transform, filter; will-change: transform, filter;
user-select: none; user-select: none;
@@ -131,7 +136,7 @@ article {
padding: 3em; padding: 3em;
margin: 18em 16em; margin: 18em 16em;
border-radius: 1em; border-radius: 1em;
animation: var(--enter) page-enter, var(--enter) scroll-enter; animation: page-enter var(--enter);
will-change: transform, filter; will-change: transform, filter;
box-shadow: 0 2.5em 5em 0 #0004, box-shadow: 0 2.5em 5em 0 #0004,
inset 1.5em 1.5em 5em 2.5em white; inset 1.5em 1.5em 5em 2.5em white;
@@ -147,7 +152,6 @@ body::before {
top: 0; top: 0;
left: 0; left: 0;
z-index: -2; z-index: -2;
animation: var(--enter) gradient-enter;
} }
/*---- Header ----------------------------------------------------------------*/ /*---- Header ----------------------------------------------------------------*/
@@ -291,67 +295,42 @@ body::before {
/*---- Animations ------------------------------------------------------------*/ /*---- Animations ------------------------------------------------------------*/
@keyframes page-enter { @keyframes page-enter {
0% { from {
filter: opacity(0); transform: scale(0.9) translateY(10%);
transform: scale(1.5) translate3d(0, 50%, 0);
} }
99% { to {
filter: opacity(1); transform: scale(1) translateY(0%);
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);
} }
} }
@keyframes title-enter { @keyframes title-enter {
0% { 0% {
filter: opacity(0); transform: scale(2) translateY(-50%);
transform: scale(2) translate3d(0, -200%, 0);
} }
100% { 100% {
filter: opacity(0.5); transform: scale(1) translateY(0%);
transform: scale(1) translate3d(0, 0%, 0);
} }
} }
@keyframes footer-enter { @keyframes footer-enter {
0% { 0% {
filter: opacity(0); transform: scale(2) translateY(50%);
transform: scale(2) translate3d(0, 1000%, 0);
} }
100% { 100% {
filter: opacity(1); transform: scale(1) translateY(0%);
transform: scale(1) translate3d(0, 0%, 0);
} }
} }
@keyframes scroll-enter { @keyframes scene-enter {
0% { from {
position: fixed; filter: brightness(0);
} }
25% { to {
position: fixed; filter: brightness(1);
}
100% {
position: static;
} }
} }

3
resume/index.html
View File

@@ -28,7 +28,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- The font and icons. --> <!-- 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"> <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css" as="style">
<!-- Resume styling. --> <!-- Resume styling. -->
@@ -36,6 +36,7 @@
</head> </head>
<body hidden> <body hidden>
<i>&nbsp;</i>
<nav class="navbar"> <nav class="navbar">
<header class="resume-header">Resume</header> <header class="resume-header">Resume</header>
</nav> </nav>

1
resume/index.js
View File

@@ -1,5 +1,4 @@
window.onload = () => { window.onload = () => {
const links = document.querySelectorAll('link[rel="preload"]'); const links = document.querySelectorAll('link[rel="preload"]');
for (const link of links) link.rel = 'stylesheet'; for (const link of links) link.rel = 'stylesheet';
document.body.removeAttribute("hidden");
} }