Having image issues with NextJS images

app/globals.css

@@ -8,7 +8,7 @@
   --background-end-rgb: 255, 255, 255;
 }
 
-@media (prefers-color-scheme: dark) {
+@media (prefers-color-scheme: light) {
   :root {
     --foreground-rgb: 255, 255, 255;
     --background-start-rgb: 0, 0, 0;

app/page.tsx

@@ -1,8 +1,8 @@
 'use client';
 import React from 'react';
 import Head from 'next/head';
-import { Quicksand } from 'next/font/google';
 import Image from 'next/image';
+import ImageComponent from '@/components/ImageComponent';
 import headshot from '../public/finalheadshotedit.png';
 import styles from '../styles/Main.module.css';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -11,6 +11,9 @@ import {
   faLinkedinIn,
   faTwitter,
 } from '@fortawesome/free-brands-svg-icons';
+import Project from '@/components/Project';
+import books from '../public/books.png';
+import books2 from '../public/books.jpeg';
 
 export default function Home() {
   const today = new Date();
@@ -68,9 +71,47 @@ export default function Home() {
           </ul>
         </main>
       </div>
+      <h3 className="mt-10 mb-5 flex justify-center text-xl font-semibold">
+        Projects
+      </h3>
+      <div className="flex justify-center">
+        <Project
+          projectId={1}
+          projectTitle="Books & More"
+          purpose="Website that keeps track of your books"
+          techUsed="Python (Flask) on the backend.
+          HTML, CSS, JavaScript on the frontend. Jinja as Flask's templating
+          language. Bootstrap as the CSS framework for styling. Heroku for
+          hosting."
+          imageComponent={
+            <ImageComponent
+              src={books}
+              alt="headshot"
+              className={styles['card-image']}
+              width={100}
+              height={100}
+            />
+          }
+        />
+        <Project
+          projectId={2}
+          projectTitle="Portfolio Page"
+          purpose="Website to showcase my projects and skills in tech"
+          techUsed="React (NextJS). Deployed on Vercel."
+          imageComponent={
+            <ImageComponent
+              src={books2}
+              alt="headshot"
+              className={styles['card-image']}
+              width={100}
+              height={100}
+            />
+          }
+        />
+      </div>
       <footer className="my-10">
         <div className="w-100 flex justify-center">
-          <hr className="h-0.5 my-8 bg-blue-200 w-1/2 rounded" />
+          <hr className="h-0.5 my-7 bg-blue-200 w-1/2 rounded" />
         </div>
         <ul className="flex justify-center" id="social">
           <li className={styles.socialLink}>
@@ -90,7 +131,7 @@ export default function Home() {
             </a>
           </li>
         </ul>
-        <p className="flex justify-center mt-5">
+        <p className="flex justify-center mt-7">
           &copy; {year} Urbano Baz. All rights reserved.
         </p>
       </footer>

components/ImageComponent.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const ImageComponent = ({ src, ...props }) => {
+  try {
+    return React.createElement(require.resolve('next/image').default, {
+      src: typeof src === 'string' ? src : src.src,
+      ...props,
+    });
+  } catch {
+    console.log('Not using Next.js');
+    return React.createElement('img', { src, ...props });
+  }
+};
+
+export default ImageComponent;

components/Project.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import React from 'react';
+import styles from '../styles/Main.module.css';
+
+type projectProps = {
+  projectId: number;
+  projectTitle: string;
+  purpose: string;
+  techUsed: string;
+  imageComponent: any;
+};
+
+export default function Project({
+  projectId,
+  projectTitle,
+  purpose,
+  techUsed,
+  imageComponent,
+}: projectProps) {
+  return (
+    <div className={styles.card}>
+      {imageComponent}
+      <div className={styles.container}>
+        <h2>
+          <b>
+            Project {projectId}: {projectTitle}
+          </b>
+        </h2>
+        <p>
+          <strong>Info:</strong> {purpose}
+        </p>
+        <p>
+          <strong>Technologies used:</strong> {techUsed}
+        </p>
+      </div>
+    </div>
+  );
+}

tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -24,18 +20,9 @@
       }
     ],
     "paths": {
-      "@/*": [
-        "./*"
-      ]
+      "@/*": ["./*"]
     }
   },
-  "exclude": [
-    "node_modules"
-  ],
-  "include": [
-    "next-env.d.ts",
-    ".next/types/**/*.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ]
+  "exclude": ["node_modules"],
+  "include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx"]
 }