fix build errors

src/components/ContactForm.tsx

@@ -22,6 +22,7 @@ export default function ContactForm() {
             const form = document.getElementById('contact-form') as HTMLFormElement
             form.reset()
         } catch (e) {
+            console.error(e)
             setError('An unexpected error occurred')
         } finally {
             setPending(false)

src/components/DataComponent.tsx

@@ -1,3 +1,5 @@
+import Image from "next/image"
+
 export default async function DataComponent({
     url,
     header,
@@ -19,7 +21,7 @@ export default async function DataComponent({
                 <div className="block">
                     <div className="flex items-center">
                         {
-                            projectImage && <img alt="Project Image" src={projectImage} width={100} height={100} className="w-[80px] h-[50px] object-cover" />
+                            projectImage && <Image alt="Project Image" src={projectImage} width={100} height={100} className="w-[80px] h-[50px] object-cover" />
                         }
 
                         <div className="flex flex-col mx-2 min-w-0 flex-grow">

src/components/Header.tsx

@@ -1,3 +1,5 @@
+import Link from "next/link"
+
 const quoteArray = [
     "It works on my machine",
     "Revert 'Revert 'Revert",
@@ -24,9 +26,9 @@ export default async function Header() {
     return (
         <div className="bg-zinc-900 p-4 flex justify-between">
             <div>
-                <a href="/" className="hover:underline">
+                <Link href="/" className="hover:underline">
                     <h1 className="text-2xl font-bold">Alex Frantz</h1>
-                </a>
+                </Link>
                 <p className="opacity-50 italic select-none">{quote}</p>
             </div>
             <div className="space-x-2 items-center justify-center flex select-none">