fix build errors

src/app/page.tsx

@@ -15,8 +15,8 @@ export default function Home() {
       <section id="about">
         <div className="w-full mx-auto text-center p-10">
             <div className="my-1">
-                <h1 className="text-3xl font-bold">Hi, I'm Alex</h1>
+                <h1 className="text-3xl font-bold">Hi, I&apos;m Alex</h1>
-                <p>I'm a junior developer primarily working as QA, but sometimes writing questionable code at <a className="hover:underline text-yellow-400" href="https://medal.tv" target="_blank">Medal.tv</a></p>
+                <p>I&apos;m a junior developer primarily working as QA, but sometimes writing questionable code at <a className="hover:underline text-yellow-400" href="https://medal.tv" target="_blank">Medal.tv</a></p>
             </div>
 
             <div className="block space-x-2">

src/app/privacy/page.tsx

@@ -2,7 +2,7 @@ export default function Privacy() {
     return (
         <div className="my-6 text-left w-full lg:w-1/4 mx-auto">
             <h1 className="text-2xl font-bold">Privacy</h1>
-            <h1>This site doesn't collect anything on you. No cookies (although tasty), no ominous advertisements, nothing.</h1>
+            <h1>This site doesn&apos;t collect anything on you. No cookies (although tasty), no ominous advertisements, nothing.</h1>
 
             <h1 className="my-2 font-bold text-2xl">Plausible</h1>
             <h1>I use <a className="underline" href="https://plausible.io" target="_blank">Plausible analytics</a> to track traffic anonymously. Plausible;</h1>
@@ -11,7 +11,7 @@ export default function Privacy() {
                 <li className="underline"><a href="https://plausible.io/privacy-focused-web-analytics" target="_blank">is dedicated to privacy</a></li>
                 <li>compliant with the GDPR, CCPA and PECR data protection laws</li>
             </ul>
-            <h1>I use a self-hosted instance in the US that doesn't use cookies.</h1>
+            <h1>I use a self-hosted instance in the US that doesn&apos;t use cookies.</h1>
 
             <h1 className="my-2 font-bold text-2xl">Cloudflare</h1>
             <h1>I use <a className="underline" href="https://pages.cloudflare.com" target="_blank">Cloudflare Pages</a> for this site. Most of my sites
@@ -20,7 +20,7 @@ export default function Privacy() {
             <h1 className="my-2 font-bold text-2xl">Email</h1>
             <h1>When you submit a contact request on my page, it is sent to Discord via a webhook & my own API.</h1>
             <h1>This will be shown to me in an embed. I will never receive or process anything but what you provide.</h1>
-            <h1>You can learn more about Discord's dedication to privacy <a className='underline' href="https://discord.com/privacy" target="_blank">here</a>.</h1>
+            <h1>You can learn more about Discord&apos;s dedication to privacy <a className='underline' href="https://discord.com/privacy" target="_blank">here</a>.</h1>
         </div>
     )
 }

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">