lighthouse optimizations

src/app.postcss

@@ -115,22 +115,6 @@ body {
 	text-shadow: 0 0 20px #efefef75;
 }
 
-.gradient-text {
-	background: url(
-		https://media1.giphy.com/media/jaOXKCxtBPLieRLI0c/giphy.gif?cid=ecf05e4751fqcqga4vivc5a9mohakfnsodtsu1oew67k5n1a&ep=v1_gifs_search&rid=giphy.gif&ct=g
-	);
-	background-position-x: 0%;
-	background-position-y: 0%;
-	background-clip: border-box;
-	-webkit-background-clip: text;
-	background-clip: text;
-	-webkit-text-fill-color: transparent;
-	-webkit-text-stroke-width: 2px;
-	-webkit-text-stroke-color: rgba(40, 33, 81, 0.333);
-	background-position: center;
-	text-shadow: 0 0 20px #5315bf75;
-}
-
 ::-webkit-scrollbar {
 	height: 5px;
 	width: 5px;

src/lib/animations/gradienttext.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+
+</script>
+
+<template>
+  <span>
+    <slot />
+  </span>
+</template>
+
+<style>
+span {
+	background: url(/gradient.webp);
+	background-position-x: 0%;
+	background-position-y: 0%;
+	background-clip: border-box;
+	-webkit-background-clip: text;
+	background-clip: text;
+	-webkit-text-fill-color: transparent;
+	-webkit-text-stroke-width: 2px;
+	-webkit-text-stroke-color: rgba(40, 33, 81, 0.333);
+	background-position: center;
+	text-shadow: 0 0 20px #5315bf75;
+}
+</style>

src/lib/components/navbar/index.svelte

@@ -25,6 +25,7 @@
       target="_blank"
       rel="noopener noreferrer"
       data-blobity-tooltip="GitHub"
+      aria-label="GitHub"
     >
       <Icon class="icon" icon="akar-icons:github-fill" />
     </a>

src/lib/components/sections/hero/CopyWrite.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import Gradienttext from "$lib/animations/gradienttext.svelte";
+
   let statements = [
     "A Full Stack Developer.",
     "A DevOps expert.",
@@ -19,13 +21,15 @@
   <div class="morphing">
     {#each statements as statement, idx}
       <span
-        class="word gradient-text"
+        class="word"
         style={`
           animation-duration: ${speed}s;
           animation-delay: ${delay(idx)}s;
         `}
       >
-        {statement}
+        <Gradienttext>
+          {statement}
+        </Gradienttext>
       </span>
     {/each}
   </div>

src/lib/components/sections/hero/index.svelte

@@ -5,14 +5,15 @@
 	import Button from "$lib/components/elements/atoms/Button.svelte";
 	import Icon from "@iconify/svelte";
   import type { ProjectMetaData } from "$lib/data/ProjectData";
+  import Gradienttext from "$lib/animations/gradienttext.svelte";
 
   export let allProjects: ProjectMetaData[] = [];
 </script>
 
 <div class="grid-center">
   <h1 class="">
     Hi! I'm
-    <div class="gradient-text">Blaine</div>.
+    <Gradienttext>Blaine</Gradienttext>.
   </h1>
 </div>
 <Ellipsis>