design project page

app/components/Navbar.tsx

@@ -32,11 +32,11 @@ export function Navbar() {
   const pathname = usePathname();
   return (
     <nav className="flex align-center justify-between px-8 py-8 sticky top-0 z-50 bg-slate-50 dark:bg-black ">
-      <div>
+      <div className="mt-[-2]">
         <Link href="/">
           <h1
             className={cn(
-              `${poit.className} font-extrabold text-2xl text-gray-800 dark:text-gray-300`
+              `${poit.className} font-extrabold text-2xl text-gray-800 dark:text-gray-300 `
             )}
           >
             Joel

app/projects/page.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 import React from "react";
 
 const projects = [
@@ -9,6 +10,7 @@ const projects = [
     techStacks:
       "Next.js | React | Node.js | Express.js | MongoDB | TailwindCSS",
     link: "https://github.com/kiojoel/mern-blog",
+    src: "/joels_pic.jpg",
   },
   {
     projectName: "Project 2",
@@ -34,6 +36,22 @@ const projects = [
     techStacks: "Python| Jupyter",
     link: "https://example.com/project4",
   },
+  {
+    projectName: "Project 5",
+    projectType: "Web Developement",
+    description:
+      "Nulla facilisi. Phasellus pretium arcu vitae quam lacinia, in tempor sapien dignissim.",
+    techStacks: "Python| Jupyter",
+    link: "https://example.com/project4",
+  },
+  {
+    projectName: "Project 6",
+    projectType: "Web Developement",
+    description:
+      "Nulla facilisi. Phasellus pretium arcu vitae quam lacinia, in tempor sapien dignissim.",
+    techStacks: "Python| Jupyter",
+    link: "https://example.com/project4",
+  },
   // Add more projects as needed
 ];
 
@@ -46,22 +64,36 @@ const Projects = () => {
       </p>
 
       <div className="mt-8">
-        <ul className=" sm:grid sm:grid-cols-2 block  ">
+        <ul className=" md:grid md:grid-cols-3 gap-5 block  ">
           {projects.map((project, index) => (
             <a
               key={index}
               href={project.link}
               target="_blank"
               rel="noopener noreferrer"
             >
-              <li className="py-4 mt-6 mx-4 w-[80%] shadow-md bg-white dark:bg-gray-950 rounded-xl px-3 text-gray hover:scale-105 transition-transform duration-300">
+              <li className="py-4 mt-6 mx-4 h-full w-full shadow-md bg-white dark:bg-gray-950 rounded-xl px-3 text-gray hover:scale-105 transition-transform duration-300">
                 <div className="space-y-2">
-                  <h2 className="text-lg font-bold mb-3">
-                    {project.projectName}
-                  </h2>
+                  <div className="flex items-center ">
+                    <Image
+                      alt="projectImg"
+                      src={project.src || "/d_images.png"}
+                      width={60}
+                      height={60}
+                      className=" rounded-full mr-5"
+                      style={{ width: "auto", height: "auto" }}
+                    />
+                    <div className="">
+                      <h2 className="text-lg font-bold mb-1">
+                        {project.projectName}
+                      </h2>
+                      <p className="text-sm">{project.projectType}</p>
+                    </div>
+                  </div>
                   <p className="mb-3">{project.description}</p>
-                  <p className="text-sm">{project.projectType}</p>
-                  <p className="text-sm">{project.techStacks}</p>
+                  <p className="text-sm text-gray-500 dark:text-gray-400">
+                    {project.techStacks}
+                  </p>
                 </div>
               </li>
             </a>