Update all images to webp

src/assets/js/projects.js

@@ -1,7 +1,7 @@
 const projects = [
   {
     title: "TOPH",
-    img: "toph.png",
+    img: "toph.webp",
     description:
       "A wearable navigation aid for the visually impaired. Uses machine learning " +
       "algorithms such as object detection, image classification, and face recognition " +
@@ -12,7 +12,7 @@ const projects = [
   },
   {
     title: "LISTR",
-    img: "LISTR.gif",
+    img: "LISTR.webp",
     description:
       "A concept real estate application developed in WPF as a group " +
       "project for a human computer interaction course. Provides a Tinder-style " +
@@ -23,15 +23,15 @@ const projects = [
 
   {
     title: "CatanJS",
-    img: "catan_board.png",
+    img: "catan_board.webp",
     description:
       "An online multiplayer version of the board game Catan using Vue.js for the frontend " +
       "and Node.js for the backend.",
     project_link: "https://github.com/idenc/CatanJS",
   },
   {
     title: "Snapceit",
-    img: "snapceit.png",
+    img: "snapceit.webp",
     description:
       "An Android app which utilizes Google's MLKit to perform character" +
       " recognition on receipts to allow quick and easy bill-splitting between" +
@@ -40,7 +40,7 @@ const projects = [
   },
   {
     title: "Minesweeper",
-    img: "minesweeper.png",
+    img: "minesweeper.webp",
     description: "Minesweeper written using JQuery",
     project_link: "https://gitlab.com/idenc/minesweeper",
   },

src/components/Footer.vue

@@ -2,7 +2,7 @@
   <footer id="footer-root">
     <Mountain />
     <div id="footer-content">
-      <img src="../assets/img/logo.png" alt="logo" />
+      <img src="../assets/img/logo.webp" alt="logo" />
       <div class="vertical-divider"></div>
       <h1>Iden Craven</h1>
     </div>

src/components/NavBar.vue

@@ -4,7 +4,7 @@
       <img
         id="logo"
         alt="logo"
-        src="@/assets/img/logo.png"
+        src="@/assets/img/logo.webp"
         @click="homeClick"
       />
       <nav id="links-div">

src/components/PortfolioItem.vue

@@ -20,7 +20,7 @@
               target="_blank"
               style="margin-left: 30px"
             >
-              <img src="@/assets/img/youtube.png" alt="video link" />
+              <img src="@/assets/img/youtube.svg" alt="video link" />
             </a>
           </div>
         </div>

src/components/ProfilePic.vue

@@ -28,7 +28,7 @@ export default {
     // Loading
     const textureLoader = new THREE.TextureLoader();
     const texture = textureLoader.load(
-      require("@/assets/img/me.jpg"),
+      require("@/assets/img/me.webp"),
       this.profilePicLoaded
     );
     // Debug

src/views/Home.vue

@@ -87,13 +87,13 @@ export default {
   top: 0;
   height: 110%;
   width: 100%;
-  background: url("~@/assets/img/forest.jpg");
+  background: url("~@/assets/img/forest.webp");
   background-size: cover;
 }
 
 .moving-clouds {
   z-index: -1;
-  background: url("~@/assets/img/clouds.png") repeat-x;
+  background: url("~@/assets/img/clouds.webp") repeat-x;
   position: fixed;
   bottom: 0;
   left: 0;