some load performance improvements

.htaccess

@@ -1,3 +1,4 @@
+Header append Cache-Control max-age=31536000
 Options +MultiViews -Indexes
 ErrorDocument 404 /404.html
 

404.html

@@ -5,12 +5,13 @@
     <meta charset="UTF-8">
     <title>404</title>
 
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&display=swap">
     <link rel="icon" href="favicon.ico">
 
     <style>
         body {
-            font-family: Roboto;
+            font-family: Roboto, sans-serif;
+            font-display: swap;
             background-color: #383838;
         }
 

actaddmanual/index.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&display=swap">
     <link rel="stylesheet" href="style.css">
     <title>Actually Additions Manual</title>
 

actaddmanual/style.css

@@ -1,5 +1,6 @@
 body {
-    font-family: Roboto;
+    font-family: Roboto, sans-serif;
+    font-display: swap;
     margin-top: 30px;
     margin-bottom: 30px;
     background-color: #e2e2e2;

commissions/index.html

@@ -11,7 +11,7 @@
     <meta name="keywords" content="Ellpeck, Minecraft, Mods, Modding, Commission, Forge, Plugin">
 
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&display=swap">
     <link rel="stylesheet" href="style.css">
     <link rel="icon" href="../favicon.ico">
 
@@ -44,7 +44,7 @@
         <h1>About Me</h1>
         <div class="row">
             <div class="col-md-auto">
-                <img class="rounded" width="180" height="180" src="../res/me.png">
+                <img class="rounded" width="180" height="180" src="../res/me.jpeg">
             </div>
             <div class="col">
                 <p>Hi, I'm Ellpeck, a student and programmer from Germany. I've been making Minecraft mods for over 6 years, and during that time, I created some popular mods like <a href="https://www.curseforge.com/minecraft/mc-mods/actually-additions">Actually Additions</a> and <a href="https://www.curseforge.com/minecraft/mc-mods/natures-aura">Nature's Aura</a>. If you want to know more about my projects, you should check out <a href="https://ellpeck.de">my website</a>.</p>

commissions/style.css

@@ -1,5 +1,6 @@
 body {
-    font-family: Roboto;
+    font-family: Roboto, sans-serif;
+    font-display: swap;
 }
 
 .par {

foefrenzy/index.html

@@ -11,7 +11,7 @@
     <meta name="keywords" content="Ellpeck, Foe Frenzy, Steam, Discord, itch, itch.io, Battle, 2d, Top Down, Pixelart, MonoGame, Fighting, Game">
 
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&display=swap">
     <link rel="stylesheet" href="style.css">
     <link rel="icon" href="favicon.ico">
 

foefrenzy/style.css

@@ -4,7 +4,8 @@ body {
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-size: cover;
-    font-family: Roboto;
+    font-family: Roboto, sans-serif;
+    font-display: swap;
 }
 
 .main {

index.html

@@ -11,7 +11,7 @@
     <meta name="keywords" content="Ellpeck, Actually Additions, Rock Bottom, Programming, Minecraft, Game Development, Nature's Aura, C#, Java, Blog, Tutorial, Foe Frenzy">
 
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&display=swap">
     <link rel="stylesheet" href="./style/prettify.css">
     <link rel="stylesheet" href="./style/style.css">
     <link rel="icon" href="./favicon.ico">
@@ -89,7 +89,7 @@
                     <div class="container">
                         <div class="row">
                             <div class="col-md-auto">
-                                <img src="./res/me.png" class="rounded-circle" width="200" height="200" id="navbar-image">
+                                <img src="./res/me.jpeg" class="rounded-circle" width="200" height="200" id="navbar-image">
                             </div>
                             <div class="col">
                                 <h1 class="display-4" id="intro-text"></h1>

scripts/main.js

@@ -27,7 +27,7 @@ $(function () {
     });
 
     $('#blobheart').on('click', function () {
-        $('#navbar-image').attr('src', 'res/heart.png');
+        $('#navbar-image').attr('src', 'res/heart.jpeg');
     });
 
     let mode = $('#dark-mode');

style/style.css

@@ -5,7 +5,8 @@ html {
 
 body {
     margin-top: 106px;
-    font-family: Roboto;
+    font-family: Roboto, sans-serif;
+    font-display: swap;
     background-color: #404142;
     margin-bottom: 100px;
 }