feat: Project dialog, updated screenshots, migration to bun

components/projectDialog.jsx

@@ -0,0 +1,75 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import Image from "next/image"
+import Link from "next/link"
+import { ExternalLink } from "lucide-react"
+import { skillsList } from "@/lib/skillsList"
+
+export default function ProjectDialog({ children, project }) {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        {children}
+      </DialogTrigger>
+      <DialogContent className="flex flex-col md:flex-row gap-2 md:gap-4 max-w-[95vw] md:max-w-4xl px-4 bg-gray-100">
+        <DialogTitle className="sr-only">{project.name}</DialogTitle>
+        <div className="flex md:flex-col gap-1 overflow-x-auto md:overflow-x-visible md:overflow-y-auto scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200 pb-2 md:pb-0 md:pr-2 shrink-0 md:max-h-[400px]">
+          {project.screenshots.map((screenshot, idx) => (
+            <div key={idx} className="w-full p-2 rounded-lg shrink-0">
+              <Image 
+                className="rounded-md w-full h-auto" 
+                src={screenshot} 
+                width={200} 
+                height={50} 
+                alt={`${project.title} screenshot ${idx + 1}`} 
+              />
+            </div>
+          ))}
+        </div>
+        <div className="flex flex-col gap-4 min-w-0 flex-1 pr-2">
+          <div className="flex flex-col gap-0.5 mx-1">
+            <div className="flex gap-2 items-center flex-wrap">
+              <Image 
+                src={project.logo} 
+                width={24} 
+                height={24} 
+                className="p-0.5 bg-white rounded-sm shrink-0" 
+                alt={project.logoAlt} 
+              />
+              <h3 className="wrap-break-word">{project.title}</h3>
+            </div>
+            {project.url && project.hostname && (
+              <Link 
+                href={project.url} 
+                target="_blank" 
+                className="flex gap-2 items-center text-blue-500 hover:text-blue-600 duration-200 break-all"
+              >
+                <h4>{project.hostname}</h4>
+                <ExternalLink size={18} className="shrink-0" />
+              </Link>
+            )}
+          </div>
+          <div className="flex flex-wrap gap-2 items-center">
+            {project.skills.map((skillName, idx) => {
+              const skill = skillsList.find(s => s.name === skillName);
+              return skill ? (
+                <div 
+                  key={idx} 
+                  className="flex items-center gap-2 rounded-full bg-white px-2 xl:px-3 py-1 shrink-0"
+                >
+                  {skill.icon}
+                  <h6 className="whitespace-nowrap">{skill.name}</h6>
+                </div>
+              ) : null;
+            })}
+          </div>
+          <h4 className="text-sm sm:text-base warp-break-word">{project.text}</h4>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}