FIX: Compressed images, removed most content layout shifting.

_data/work.yml

@@ -4,7 +4,7 @@ malung:
   subtitle: COVID-19 Classifier
   stack: [ html, css, js, php, docker, mariadb, azure ]
   color: malung
-  image: /res/projects/malung.png
+  image: /res/projects/malung.webp
 
   ready: true
 
@@ -36,7 +36,7 @@ freshmanual:
   stack: [ react, js, firebase, swift, objective-c ]
   link: https://apps.apple.com/us/app/freshmanuals/id1627091250
   color: freshmanual
-  image: /res/projects/freshmanual.png
+  image: /res/projects/freshmanual.webp
 
   ready: false
 
@@ -64,7 +64,7 @@ pollbuddy:
   stack: [ react, js, docker ]
   link: https://pollbuddy.app
   color: pollbuddy
-  image: /res/projects/pollbuddy.png
+  image: /res/projects/pollbuddy.webp
 
   ready: false
 
@@ -92,7 +92,7 @@ rpi-crisis:
   stack: [ python, bs ]
   link: https://rpicrisis.org
   color: rpi-crisis
-  image: /res/projects/rpi-crisis.png
+  image: /res/projects/rpi-crisis.webp
 
   ready: false
 

_includes/default.html

@@ -9,14 +9,14 @@
     <link rel="shortcut icon" type="image/png" href="/res/favicon.png">
 
     <link rel="preconnect" href="https://fonts.googleapis.com"> 
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
+    <link rel="preconnect" href="https://fonts.gstatic.com"> 
 
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,500,1,200">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;900&display=swap">
+    <link rel="preload stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,500,1,200&display=swap">
+    <link rel="preload stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap">
+    <link rel="preload stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;900&display=swap">
     
-    <link rel="stylesheet" href="/styles/global.css">
-    <link rel="stylesheet" href="/styles/default.css">
+    <link rel="preload stylesheet" href="/styles/global.css">
+    <link rel="preload stylesheet" href="/styles/default.css">
 
     <title>{{ include.title }} ─ Max Hutz</title>
   </head>

_includes/footer.html

@@ -1,13 +1,13 @@
-<link rel="stylesheet" href="/styles/footer.css">
+<link rel="preload stylesheet" href="/styles/footer.css">
 
 <footer class="dark back">
   <h2>&copy; 2022</h2>
   <div class="flex"></div>
   <a href="https://github.com/MajorDroolz" class="png-icon" target="_blank">
-    <img src="/res/icons/github.png" alt="GitHub" width="30" height="30">
+    <img src="/res/icons/github.webp" alt="GitHub" width="30" height="30">
   </a>
   <a href="https://www.linkedin.com/in/maximhutz/" class="png-icon" target="_blank">
-    <img src="/res/icons/linkedin.png" alt="LinkedIn" width="30" height="30">
+    <img src="/res/icons/linkedin.webp" alt="LinkedIn" width="30" height="30">
   </a>
   <a href="mailto:maximhutz@gmail.com" class="nav-link white icon" data-i="mail" aria-label="Contact" target="_blank"></a>
 </footer>

_layouts/experience.html

@@ -6,8 +6,8 @@
   {% assign malung = site.data.work[page.project_id] %}
   {% assign techs = site.data.techs %}
 
-  <link rel="stylesheet" href="/styles/experience.css">
-  <link rel="stylesheet" href="/styles/tech.css">
+  <link rel="preload stylesheet" href="/styles/experience.css">
+  <link rel="preload stylesheet" href="/styles/tech.css">
 
   <section id="experience" class="dark back">
     <section id="banner" class="{{malung.color}} back">
@@ -15,7 +15,7 @@
         <h1>{{malung.title}}</h1>
         <i>{{malung.subtitle}}</i>
       </div>
-      <button class="nav-link dark icon" data-i="close" aria-label="Exit" type="button" onclick="history.back(-1)"></button>
+      <button id="close-icon" class="nav-link dark icon" data-i="close" aria-label="Exit" type="button" onclick="history.back(-1)"></button>
     </section>
     <div id="content">
       <div id="description">

styles/default.css

@@ -12,6 +12,7 @@ body {
   box-sizing: border-box;
   margin: auto;
   padding: 0 20px;
+  line-height: 1.2;
 }
 
 /*----------------------------------------------------------------------------*/
@@ -51,12 +52,14 @@ button {
   font-family: 'Material Symbols Outlined';
   content: attr(data-i);
   font-size: 36px;
+  width: 1em;
   margin-right: 5px;
 }
 
 .r-icon::after {
   font-family: 'Material Symbols Outlined';
   content: attr(data-i);
+  width: 1em;
   margin-left: 5px;
 }
 

styles/experience.css

@@ -75,4 +75,9 @@
 #image-inner {
   max-width: 100%;
   max-height: 100%;
+}
+
+#close-icon {
+  font-size: 36px;
+  line-height: 1;
 }