Fixed Icons

assets/WorkEntries.ts

@@ -8,7 +8,7 @@ export const workEntries: WorkEntry[] = [
       stack: [
         "/js-logo.png",
         "/css.png",
-        "/mongo.svg",
+        "/mongo.webp",
         "/vue.png",
         "/express.webp",
         "/git.png",
@@ -55,7 +55,7 @@ export const workEntries: WorkEntry[] = [
       stack: [
         
         "/cpp.png",
-        "/unreal.svg",
+        "/unreal.webp",
         "/git.png",
         "/blender.png",
       ],
@@ -90,7 +90,7 @@ export const workEntries: WorkEntry[] = [
       stack: [
         
         "/cpp.png",
-        "/unreal.svg",
+        "/unreal.webp",
         "/git.png",
         "/blender.png",
         "/substance.png",

components/ContactElement.vue

@@ -41,6 +41,36 @@
     </div>
   </div>
 
+  <div class="flex bg-sky-400 min-w-[30%] min-h-[80%] rounded-xl p-4">
+    <div
+      class="flex flex-row align-middle text-center justify-between gap-4 bg-zinc-900 grow p-4 rounded-xl"
+    >
+      <a
+        href="/KyleAustadResume.docx"
+        class="text-center justify-center align-middle items-center flex flex-col"
+      >
+        <nuxt-img
+          class="rounded-xl transform transition-all duration-300 ease-out hover:scale-[1.2] max-w-[52px] max-h-[52px]"
+          height="52"
+          width="52"
+          src="/doc.webp"
+        ></nuxt-img>
+        <p>Resume.docx</p>
+      </a>
+      <h4 class="text-white text-3xl font-bold">Resume</h4>
+      <a
+        href="/KyleAustadResume.pdf"
+        class="text-center justify-center align-middle items-center flex flex-col"
+      >
+        <nuxt-img
+          class="rounded-xl transform transition-all duration-300 ease-out hover:scale-[1.2] max-w-[52px] max-h-[52px]"
+          src="/pdf.webp"
+        ></nuxt-img>
+        <p>Resume.pdf</p>
+      </a>
+    </div>
+  </div>
+
   <div
     class="flex bg-sky-400 max-w-[60%] sm:max-w-[40%] min-h-[20%] rounded-xl p-2"
   >

components/SkillAvatar.vue

@@ -12,7 +12,12 @@
     <div
       class="flex flex-col items-center justify-center gap-1 text-center p-4 rounded-xl bg-[#292626]"
     >
-      <nuxt-img :src="props.img" class="max-w-[30px] md:max-w-[50px] rounded" />
+      <nuxt-img
+        :src="props.img"
+        height="40"
+        alt="Skill Icon"
+        class="max-w-[30px] md:max-w-[50px] max-h-[30px] md:max-h-[50px] rounded"
+      />
       <h3 class="mb-0 text-sm md:text-base">{{ props.name }}</h3>
     </div>
   </div>

components/SkillColumn.vue

@@ -24,9 +24,9 @@
       <!-- Third Column -->
       <div class="flex md:flex-col gap-4 items-center justify-around">
         <SkillAvatar img="/docker.webp" name="Docker" />
-        <SkillAvatar img="/mongo.svg" name="MongoDB" />
+        <SkillAvatar img="/mongo.webp" name="MongoDB" />
         <SkillAvatar img="/cpp.png" name="C++" />
-        <SkillAvatar img="/unreal.svg" name="Unreal Engine" />
+        <SkillAvatar img="/unreal.webp" name="Unreal Engine" />
       </div>
 
       <div class="flex w-full md:flex-col gap-4 items-center justify-between">

components/WorkCard.vue

@@ -19,12 +19,12 @@
         </a>
       </div>
       <div
-        class="max-h-[18px] sm:max-h-[26px] md:max-h-[32px] w-full md:mb-2 align-middle flex justify-around"
+        class="max-h-[18px] sm:max-h-[26px] gap-4 md:max-h-[32px] md:mb-2 align-middle flex flex-row justify-around"
       >
         <!-- <h3 class="text-white font-base text-xs mt-0">Tech Stack:</h3> -->
         <nuxt-img
           :src="`${img}`"
-          class="aspect-auto"
+          class="aspect-auto max-h-[18px] max-w-[18px] sm:max-h-[26px] sm:max-w-[26px] md:max-h-[32px] md:max-w-[32px]"
           v-for="img in entry.stack"
         />
       </div>

public/mongo.svg

@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
-   <circle cx="512" cy="512" r="512" style="fill:#13aa52"/>
-   <path d="M648.86 449.44c-32.34-142.73-108.77-189.66-117-207.59-9-12.65-18.12-35.15-18.12-35.15-.15-.38-.39-1.05-.67-1.7-.93 12.65-1.41 17.53-13.37 30.29-18.52 14.48-113.54 94.21-121.27 256.37-7.21 151.24 109.25 241.36 125 252.85l1.79 1.27v-.11c.1.76 5 36 8.44 73.34H526a726.68 726.68 0 0 1 13-78.53l1-.65a204.48 204.48 0 0 0 20.11-16.45l.72-.65c33.48-30.93 93.67-102.47 93.08-216.53a347.07 347.07 0 0 0-5.05-56.76zM512.35 659.12s0-212.12 7-212.08c5.46 0 12.53 273.61 12.53 273.61-9.72-1.17-19.53-45.03-19.53-61.53z" style="fill:#fff"/>
-</svg>

public/unreal.svg

@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="400" height="400"><svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M200 399C309.904 399 399 309.904 399 200C399 90.096 309.904 0.999985 200 0.999985C90.096 0.999985 1 90.096 1 200C1 309.904 90.096 399 200 399ZM250.9 310.635C299.562 287.65 314.817 245.204 318.25 228.668C300.458 246.889 280.772 265.359 267.533 252.573C267.533 252.573 266.808 184.338 266.808 156.36C266.808 118.736 302.488 90.6961 302.488 90.6961C282.865 94.1911 259.302 101.178 234.29 125.723C232.033 127.962 229.894 130.313 227.879 132.772C217.161 124.567 203.271 127.026 203.271 127.026C210.777 131.149 218.268 143.157 218.268 153.098V250.813C218.268 250.813 201.903 265.21 189.291 265.21C186.449 265.232 183.642 264.572 181.104 263.288C178.567 262.004 176.375 260.132 174.711 257.828C173.713 256.525 172.886 255.098 172.252 253.584V132.859C168.524 135.934 155.925 138.469 155.925 117.555C155.925 104.561 165.287 89.073 181.959 79.5739C159.065 83.0657 137.623 92.9566 120.108 108.106C106.8 119.604 96.1562 133.867 88.9176 149.896C81.679 165.924 78.0161 183.337 78.1871 200.927C78.1871 200.927 90.379 162.834 105.649 159.314C107.872 158.729 110.204 158.67 112.456 159.146C114.707 159.622 116.815 160.614 118.615 162.05C120.416 163.483 121.852 165.318 122.816 167.408C123.78 169.497 124.243 171.782 124.165 174.08V263.525C124.165 272.591 118.32 274.572 112.919 274.476C109.259 274.218 105.643 273.537 102.142 272.445C113.292 287.535 127.782 299.845 144.476 308.408C161.17 316.972 179.621 321.558 198.383 321.81L231.358 288.664L250.9 310.635Z" fill="black"></path>
-</svg><style>@media (prefers-color-scheme: light) { :root { filter: none; } }
-@media (prefers-color-scheme: dark) { :root { filter: invert(100%); } }
-</style></svg>