chore: make images webp

Author: Highfire1

public/clouds/purple.webp

@@ -4,7 +4,7 @@ import Image from "next/image";
 import Header from "@/components/header"
 import Footer from "@/components/footer";
 
-import HeroImage from '@/../public/purple.jpg'
+import HeroImage from '@/../public/clouds/purple.webp'
 
 
 export default function page() {
@@ -14,7 +14,7 @@ export default function page() {
             <div className="xl:w-[1200px] lg:w-[1000px] md:w-[768px] w-full px-4 flex gap-4 flex-col py-2">
                 <Header />
 
-                <Image src={HeroImage} className="h-[200px] w-full object-cover" alt="picture of sunset" priority />
+                <Image src={HeroImage} className="h-[200px] w-full object-cover" alt="picture of sunset" priority/>
 
 
 

public/clouds/sunrise.webp

@@ -4,7 +4,7 @@ import Image from "next/image";
 import Header from "@/components/header"
 import Footer from "@/components/footer";
 
-import HeroImage from '@/../public/sunset.jpg'
+import HeroImage from '@/../public/clouds/sunset.webp'
 
 import { posts } from "@/app/blog/posts"
 

public/clouds/sunset.webp

@@ -5,7 +5,7 @@ import { ProjectList } from "@/components/project-list";
 import Header from "../components/header"
 import Footer from "@/components/footer";
 
-import HeroImage from '@/../public/sunrise.jpg'
+import HeroImage from '@/../public/clouds/sunrise.webp'
 import Image from "next/image";
 
 export default function Home() {

public/purple.jpg

@@ -4,8 +4,7 @@ const Footer = () => {
     return (
         <footer className="flex flex-col items-center justify-center">
 
-            {/* show links if sidebar is hidden because we are on mobile */}
-            <div className="sm:hidden flex flex-wrap justify-center items-center">
+            <div className="flex flex-wrap justify-center items-center">
 
                 <Link href="https://www.linkedin.com/in/andersontseng/" className="p-2 text-gray-500 dark:hover:text-gray-200 hover:text-gray-900">Linkedin</Link>