Merge pull request #2 from babblebey/fix/projects-section-safari

fix: projects section overlaps to footer in safari

Author: babblebey

app/(www)/page.tsx

@@ -106,7 +106,7 @@ export default async function IndexPage() {
           <p className="leading-normal text-muted-foreground sm:text-xl sm:leading-8">
             I like to engineer solutions that make a difference. Whether it&apos;s crafting problem-solving applications for businesses, creating tools that streamline my workflow or just hacking around with some ideas, innovation drives me. Here&apos;s a curated project collection, ranging from empowering business solutions to personal hacks that have either aided my learning or transformed my productivity:
           </p>
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <div className="flex flex-wrap justify-between">
             {projects.map((p, i) => (
               <ProjectCard key={i} {...p} />
             ))}

components/project-card.tsx

@@ -27,7 +27,7 @@ interface ProjectCardProps {
 
 export function ProjectCard({ title, desc, image, category, url, linkText }: ProjectCardProps) {
   return (
-    <Card className="flex flex-col overflow-hidden">
+    <Card className="basis-full md:basis-[49%] lg:basis-[32.33%] mb-4 flex flex-col overflow-hidden">
       <div className="aspect-[1.4] overflow-hidden min-h-[230px]">
         <CardImage 
           src={image}