Little rework

src/sections/FeaturedProjects.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import Link from "next/link";
+import { useProfile } from "../context/ProfileContext";
+import { ProjectCard } from "../components/ProjectCard";
+
+// Homepage teaser: the first 3 projects (ordered by size then name, per the API)
+// plus a button through to the full /projects page.
+export function FeaturedProjects() {
+  const { projects, loading } = useProfile();
+  const top = projects.slice(0, 3);
+
+  return (
+    <section className="mx-auto w-full max-w-6xl space-y-8 px-4 sm:space-y-10">
+      <div className="space-y-3 text-center">
+        <h2 className="text-3xl font-semibold text-white sm:text-4xl">Featured Projects</h2>
+        <p className="mx-auto max-w-2xl text-sm text-gray-500 sm:text-base">
+          A few things I&apos;ve been building lately.
+        </p>
+      </div>
+
+      {loading ? (
+        <p className="text-center text-gray-500">Loading projects…</p>
+      ) : top.length === 0 ? (
+        <div className="rounded-2xl border border-white/10 bg-white/5 px-5 py-8 text-center text-gray-400">
+          No projects published yet.
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 sm:gap-8">
+          {top.map((project) => (
+            <ProjectCard key={project.id} project={project} />
+          ))}
+        </div>
+      )}
+
+      <div className="flex justify-center">
+        <Link
+          href="/projects"
+          className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-6 py-3 text-sm font-semibold text-white transition-all duration-300 hover:border-white/30 hover:bg-white/10"
+        >
+          View all projects
+          <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
+          </svg>
+        </Link>
+      </div>
+    </section>
+  );
+}