fix: 📱 Make projects responsive on mobile

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/${

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>