From 4dd44dabe76f8bc19fe92c9448c1a27fb7f10e81 Mon Sep 17 00:00:00 2001
From: thebeyondr <19380973+thebeyondr@users.noreply.github.com>
Date: Mon, 17 Jul 2023 17:44:58 -0500
Subject: [PATCH] fix: :iphone: Make projects responsive on mobile

---
 app/projects/[id]/page.tsx | 2 +-
 app/projects/page.tsx      | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/projects/[id]/page.tsx b/app/projects/[id]/page.tsx
index 01afef8..85b06d6 100644
--- a/app/projects/[id]/page.tsx
+++ b/app/projects/[id]/page.tsx
@@ -85,7 +85,7 @@ export default function ProjectDetailPage({ params }: PageProps) {
         </div>
       </div>
       <div className="flex w-full flex-col items-center justify-center gap-5 bg-anakiwa px-6 py-10 md:px-0">
-        <div className="w-[700px]">
+        <div className="w-full md:w-[700px]">
           <div className="relative flex items-center justify-center overflow-hidden rounded-lg">
             <Image
               src={`/project-banners/${
diff --git a/app/projects/page.tsx b/app/projects/page.tsx
index bca79d6..7965d99 100644
--- a/app/projects/page.tsx
+++ b/app/projects/page.tsx
@@ -52,9 +52,9 @@ export default function ProjectsPage() {
               const { id, image, links, name, tldr } = project
               const { github, website } = links
               return (
+                <div key={index}>
                 <Link href={`/projects/${id}`}>
                   <div
-                    key={index}
                     className="flex h-[419px] w-[310px] cursor-pointer flex-col overflow-hidden rounded-lg border border-slate-900/20 transition duration-150 ease-in hover:scale-105"
                   >
                     <Image
@@ -108,6 +108,7 @@ export default function ProjectsPage() {
                     </div>
                   </div>
                 </Link>
+                </div>
               )
             })}
           </div>