responsiveness fixes

src/components/ProjectCard.tsx

@@ -16,7 +16,7 @@ export default function ProjectCard({
 }: ProjectCardProps) {
   const Pill = ({ name }: PillProps) => {
     return (
-      <div className="bg-zinc-500 rounded-lg max-w-fit text-xs p-1 inline-block font-semibold">
+      <div className="bg-zinc-500 rounded-lg text-xs p-1 font-semibold">
         {name}
       </div>
     );
@@ -24,18 +24,18 @@ export default function ProjectCard({
 
   return (
     <div className="bg-neutral-800 rounded-lg p-2 border border-white">
-      <div className="flex justify-between">
-        <h1 className="text-1xl font-bold">{title}</h1>
-        <a href={link} target="_blank">
-          <button className="bg-gray-500 border border-zinc-500 rounded-lg px-2 py-1 text-sm">
+      <div className="flex items-start justify-between gap-3">
+        <h1 className="text-base font-bold">{title}</h1>
+        <a href={link} target="_blank" className="shrink-0">
+          <button className="bg-gray-500 border border-zinc-500 rounded-lg px-2 py-1 text-sm whitespace-nowrap">
             View &gt;
           </button>
         </a>
       </div>
 
-      <div className="space-y-2 w-[75%]">
+      <div className="space-y-2">
         <p className="text-sm">{description}</p>
-        <div className="space-x-2">
+        <div className="flex flex-wrap gap-2">
           {pills.map((v, k) => {
             return <Pill key={k} name={v} />;
           })}