Fixed Icons

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>