FIX: asynchronously downloaded all fonts.

resume/index.css

@@ -4,7 +4,14 @@
   font-family: sans-serif;
   --timing: cubic-bezier(.2,1,0,1);
   --enter: 2s var(--timing) 0.2s backwards;
-  --steelblue: #385757;
+  
+  --blue: #3F75A2;
+  --darkblue: #2E5476;
+  --grey: #575757;
+
+  --link-r: #D13800;
+  --link-g: #006B00;
+  --link-b: #006EDB;
 }
 
 * {
@@ -72,7 +79,7 @@ nav.navbar {
 .resume-header {
   color: white;
   filter: opacity(0.5);
-  font: bold 8em 'Poppins';
+  font: bold 8em Poppins;
   animation: var(--enter) title-enter;
   will-change: transform, filter;
   user-select: none;
@@ -149,6 +156,7 @@ body::before {
   display: flex;
   justify-content: space-between;
   font-style: normal;
+  font-weight: bold;
   margin-top: 1em;
 }
 
@@ -159,15 +167,15 @@ body::before {
 }
 
 .email {
-  /* color: dodgerblue; */
+  color: var(--link-b);
 }
 
 .phone {
-  /* color: orangered; */
+  color: var(--link-r);
 }
 
 .location {
-  /* color: green; */
+  color: var(--link-g);
 }
 
 /*---- Sectioning ------------------------------------------------------------*/
@@ -193,12 +201,11 @@ body::before {
 .title {
   font-weight: bold;
   font-family: Verdana;
-  /* color: var(--steelblue); */
+  color: var(--blue);
 }
 
 .title > i {
   font-weight: normal;
-  /* color: black; */
 }
 
 .date {
@@ -208,7 +215,7 @@ body::before {
 .place {
   font-weight: normal;
   display: block;
-  /* color: dimgray; */
+  color: var(--grey);
   text-transform: uppercase;
 }
 
@@ -224,7 +231,7 @@ body::before {
   display: inline-flex;
   padding: 0.5em 1em;
   border-radius: 0.5em;
-  /* color: black; */
+  color: var(--blue);
   background: whitesmoke;
   font-family: monospace;
   white-space: nowrap;
@@ -278,7 +285,7 @@ body::before {
 }
 
 .freshmanuals {
-  /* color: var(--steelblue); */
+  color: var(--darkblue);
 }
 
 /*---- Animations ------------------------------------------------------------*/

resume/index.html

@@ -9,12 +9,14 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta http-equiv="Content-Security-Policy" content="
-      default-src 'self';
+      default-src 'self' 'unsafe-inline';
       style-src 'self' https://fonts.googleapis.com https://cdn.jsdelivr.net;
       font-src 'self' https://cdn.jsdelivr.net https://fonts.gstatic.com;
       connect-src ws:;
     ">
 
+    <script src="index.js"></script>
+
     <!-- Site's Icon -->
     <link rel="icon" type="image/png" href="/res/favicon.ico">
 
@@ -26,8 +28,8 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
     
     <!-- The font and icons. -->
-    <link rel="stylesheet" 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">
+    <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="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
+    <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css" as="style">
 
     <!-- Resume styling. -->
     <link rel="stylesheet" type="text/css" href="index.css">

resume/index.js

@@ -0,0 +1,6 @@
+window.onload = function () {
+  const links = document.querySelectorAll('link[rel="preload"]');
+  for (const link of links) {
+    link.rel = 'stylesheet';
+  }
+}