From 81173d5cbd7f1e6aa6944e567ba740edc629bd7f Mon Sep 17 00:00:00 2001
From: Evan Pratten <ewpratten@gmail.com>
Date: Sat, 3 Dec 2022 10:28:06 -0500
Subject: [PATCH] speed tweaks

---
 Makefile                               | 22 ++++++++++++++++++----
 config.toml                            |  2 +-
 sass/global.scss                       |  2 --
 sass/styles/components/about-card.scss | 10 +++++++++-
 templates/base.html                    |  7 +++++--
 templates/components/about-card.html   | 17 +++++++++--------
 6 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/Makefile b/Makefile
index 8056326..6a3142b 100644
--- a/Makefile
+++ b/Makefile
@@ -1,14 +1,28 @@
 
-static/dist: static/dist/line-awesome/fonts static/dist/github-markdown-css/github-markdown-light.css
+static/dist: static/dist/line-awesome/svg static/dist/github-markdown-css/github-markdown-light.css
 
-static/dist/line-awesome/fonts: node_modules/line-awesome/dist/line-awesome/fonts
-	mkdir -p $@
-	cp -r $</* $@
+static/dist/line-awesome/svg: static/dist/line-awesome/svg/envelope.svg static/dist/line-awesome/svg/github.svg static/dist/line-awesome/svg/linkedin.svg static/dist/line-awesome/svg/ellipsis-h-solid.svg
+
+static/dist/line-awesome/svg/envelope.svg: node_modules/line-awesome/svg/envelope.svg
+	mkdir -p $(dir $@)
+	cp $< $@
+
+static/dist/line-awesome/svg/github.svg: node_modules/line-awesome/svg/github.svg
+	mkdir -p $(dir $@)
+	cp $< $@
+
+static/dist/line-awesome/svg/linkedin.svg: node_modules/line-awesome/svg/linkedin.svg
+	mkdir -p $(dir $@)
+	cp $< $@
 
 static/dist/github-markdown-css/github-markdown-light.css: node_modules/github-markdown-css/github-markdown-light.css
 	@mkdir -p $(dir $@)
 	cp $< $@
 
+static/dist/line-awesome/svg/ellipsis-h-solid.svg: node_modules/line-awesome/svg/ellipsis-h-solid.svg
+	mkdir -p $(dir $@)
+	cp $< $@
+
 node_modules:
 	npm install
 
diff --git a/config.toml b/config.toml
index 54b30ea..b89bf5b 100644
--- a/config.toml
+++ b/config.toml
@@ -25,7 +25,7 @@ domain_name = "ewpratten.com"
 # Me
 name = "Evan Pratten"
 profession = "Software Developer"
-profile_photo = "https://branding.ewpratten.com/pfp/2022/460x460.png"
+profile_photo = "https://branding.ewpratten.com/pfp/2022/460x460.webp"
 # Accounts
 email = "evan@ewpratten.com"
 github = "ewpratten"
diff --git a/sass/global.scss b/sass/global.scss
index a0c25c2..213fd5f 100644
--- a/sass/global.scss
+++ b/sass/global.scss
@@ -8,9 +8,7 @@
 @import "styles/fixes/youtube";
 
 // Core stuff
-@import "styles/icons";
 @import "styles/layout";
-@import "styles/typography";
 @import "styles/utils";
 
 // Always-loaded components
diff --git a/sass/styles/components/about-card.scss b/sass/styles/components/about-card.scss
index 5a20fbb..5fa8db9 100644
--- a/sass/styles/components/about-card.scss
+++ b/sass/styles/components/about-card.scss
@@ -49,8 +49,16 @@
           line-height: 1.25em;
           margin: 0;
           padding: 0;
+
+          .about-quick-link{
+            img{
+              display: inline-block;
+              height: 1em;
+              width: 1em;
+              filter: invert(9%) sepia(97%) saturate(6581%) hue-rotate(247deg) brightness(94%) contrast(144%);
+            }
+          }
         }
-        padding: 0;
       }
     }
   }
diff --git a/templates/base.html b/templates/base.html
index f42c21c..becee94 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -29,12 +29,15 @@
 
     {# External styles #}
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
-        integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
+        integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous" lazyload>
 
     {# Site-wide styles #}
-    <link rel="stylesheet" href="/dist/github-markdown-css/github-markdown-light.css">
     <link rel="stylesheet" href="/global.css">
 
+    {# Less important styles #}
+    <link rel="stylesheet" href="/dist/github-markdown-css/github-markdown-light.css" lazyload>
+    <link rel="stylesheet" href="/styles/typography.css">
+
     {# Component styles #}
     {% block component_styles %}
     {% endblock component_styles %}
diff --git a/templates/components/about-card.html b/templates/components/about-card.html
index c10f77f..0eac183 100644
--- a/templates/components/about-card.html
+++ b/templates/components/about-card.html
@@ -15,26 +15,27 @@
         <div class="quick-links">
             <ul>
                 <li>
-                    <a href="mailto:{{config.extra.email}}" rel="me">
-                        <i class="las la-envelope"></i>
+                    <a class="about-quick-link" href="mailto:{{config.extra.email}}" rel="me">
+                        <img src="/dist/line-awesome/svg/envelope.svg" alt="email: " loading="lazy">
                         {{config.extra.email}}
                     </a>
                 </li>
                 <li>
-                    <a href="https://github.com/{{config.extra.github}}" rel="me">
-                        <i class="lab la-github"></i>
+                    <a class="about-quick-link" href="https://github.com/{{config.extra.github}}" rel="me">
+                        <img src="/dist/line-awesome/svg/github.svg" alt="github: " loading="lazy">
                         {{config.extra.github}}
                     </a>
                 </li>
                 <li>
-                    <a href="https://linkedin.com/in/{{config.extra.linkedin}}" rel="me">
-                        <i class="lab la-linkedin"></i>
+                    <a class="about-quick-link" href="https://linkedin.com/in/{{config.extra.linkedin}}" rel="me">
+                        <img src="/dist/line-awesome/svg/linkedin.svg" alt="linkedin: " loading="lazy">
                         {{config.extra.linkedin}}
                     </a>
                 </li>
                 <li>
-                    <a href="/contact">
-                        ...&nbsp;&nbsp;more
+                    <a class="about-quick-link" href="/contact">
+                        <img src="/dist/line-awesome/svg/ellipsis-h-solid.svg" alt="... " loading="lazy">
+                        more
                     </a>
                 </li>
             </ul>