Minimal Portfolio

import { Badge } from "@/app/components/ui/badge";

/**
 * Edit this array to change the cards — the grid layout below reads from
 * it and needs no other changes for adding, removing, or reordering items.
 */
const projects = [
  {
    title: "Orbit",
    description: "A minimal analytics dashboard for indie SaaS founders.",
    tags: ["Next.js", "Tailwind"],
  },
  {
    title: "Fieldnote",
    description: "Distraction-free writing app with local-first sync.",
    tags: ["React", "SQLite"],
  },
  {
    title: "Lumen",
    description: "Design token manager for small product teams.",
    tags: ["TypeScript"],
  },
];

export function MinimalCardGrid() {
  return (
    <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
      {projects.map((project) => (
        <article
          key={project.title}
          className="border-border bg-background hover:border-border-strong flex flex-col gap-3 rounded-md border p-5 transition-colors"
        >
          <h3 className="text-foreground text-base font-semibold">
            {project.title}
          </h3>
          <p className="text-muted flex-1 text-sm">{project.description}</p>
          <div className="flex flex-wrap gap-1.5">
            {project.tags.map((tag) => (
              <Badge key={tag}>{tag}</Badge>
            ))}
          </div>
        </article>
      ))}
    </div>
  );
}