feat: big page performance optimizations

index.html

@@ -115,7 +115,7 @@
             <div class="avatar-wrapper">
                 <img src="/assets/mike-czyz.webp" class="avatar" alt="Michał Czyż" class="avatar" width="2.5in" height="2.5in" />
                 <div class="theme" aria-label="Toggle dark/light mode" role="button" tabindex="0">
-                    <i class="material-icons">&#xe51c</i>
+                    <i class="material-icons">🌙</i>
                     <span class="theme-text">Dark Mode</span>
                 </div>
             </div>

main.js

@@ -1,39 +1,41 @@
 const root = document.documentElement;
-const themeText = document.querySelector('.theme-text');
+const themeText = document.querySelector(".theme-text");
-const themeIcon = document.querySelector('.material-icons');
+const themeIcon = document.querySelector(".material-icons");
 
-const isDarkMode = () => root.classList.contains('dark');
+const isDarkMode = () => root.classList.contains("dark");
 
 const setDarkMode = () => {
-  root.classList.add('dark');
+  root.classList.add("dark");
-  themeText.textContent = 'Dark Mode';
+  themeText.textContent = "Dark Mode";
-  themeIcon.innerHTML = '&#xe51c';
+  themeIcon.innerHTML = "🌙";
 };
 
 const setLightMode = () => {
-  root.classList.remove('dark');
+  root.classList.remove("dark");
-  themeText.textContent = 'Light Mode';
+  themeText.textContent = "Light Mode";
-  themeIcon.innerHTML = '&#xe518';
+  themeIcon.innerHTML = "☀️";
 };
 
 const toggleTheme = () => {
   if (isDarkMode()) {
     setLightMode();
-    localStorage.setItem('preferredTheme', 'light');
+    localStorage.setItem("preferredTheme", "light");
   } else {
     setDarkMode();
-    localStorage.setItem('preferredTheme', 'dark');
+    localStorage.setItem("preferredTheme", "dark");
   }
 };
 
 const checkPreferredTheme = () => {
-  const preferredTheme = localStorage.getItem('preferredTheme');
+  const preferredTheme = localStorage.getItem("preferredTheme");
-  if (preferredTheme === 'dark') {
+  if (preferredTheme === "dark") {
     setDarkMode();
-  } else if (preferredTheme === 'light') {
+  } else if (preferredTheme === "light") {
     setLightMode();
   } else {
-    const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    const prefersDarkScheme = window.matchMedia(
+      "(prefers-color-scheme: dark)"
+    ).matches;
     if (prefersDarkScheme) {
       setDarkMode();
     } else {
@@ -46,5 +48,5 @@ document.querySelector("#year").innerHTML = new Date().getFullYear();
 
 checkPreferredTheme();
 
-const themeButton = document.querySelector('.theme');
+const themeButton = document.querySelector(".theme");
-themeButton.addEventListener('click', toggleTheme);
+themeButton.addEventListener("click", toggleTheme);

styles.css

@@ -1,6 +1,12 @@
-@import url("https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400;0,500;1,400&display=swap");
+/* Coiny Regular */
-@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
+@font-face {
-@import url('https://fonts.googleapis.com/css2?family=Coiny&display=swap');
+  font-family: 'Coiny';
+  src: url('/assets/fonts/Coiny-Regular-subset.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
 
 * {
     transition: background-color 0.15s ease-in-out;
@@ -75,11 +81,11 @@ body {
     width: 100%;
     min-height: 100vh;
     /* height: 100vh; */
+    font-family: system-ui, sans-serif;
     background-color: var(--base);
     color: var(--text);
     display: grid;
     place-items: center;
-    font-family: "Schibsted Grotesk", sans-serif;
     overflow: auto;
     overflow-anchor: none;
 }
@@ -112,7 +118,7 @@ body {
 }
 
 a {
-    color: var(--pine);
+    color: var(--foam);
     transition:
         0.1s color ease-in-out,
         0.1s text-decoration ease-in-out;
@@ -264,7 +270,8 @@ a:focus {
 }
 
 .material-icons {
-    font-family: "Material Icons";
+    font-size: 1.25em;
+    font-style: normal;
 }
 
 .theme-text {