first commit

page.tsx

@@ -0,0 +1,35 @@
+// This is a mock data source. In a real app, you might fetch this
+// from a headless CMS, a database, or a local JSON file.
+const portfolioItems = [
+  { slug: "project-alpha", title: "Project Alpha", content: "Details about project Alpha..." },
+  { slug: "project-beta", title: "Project Beta", content: "Details about project Beta..." },
+  { slug: "venus-nextjs", title: "Venus Next.js Theme", content: "Details about the Venus theme..." },
+];
+
+// This function tells Next.js which slugs to pre-render at build time.
+export async function generateStaticParams() {
+  // We return an array of objects, where each object has a `slug` property
+  // matching the dynamic segment `[slug]`.
+  return portfolioItems.map((item) => ({
+    slug: item.slug,
+  }));
+}
+
+// This is your page component.
+export default function PortfolioPage({ params }: { params: { slug: string } }) {
+  // Find the specific portfolio item based on the slug from the URL.
+  const item = portfolioItems.find((p) => p.slug === params.slug);
+
+  if (!item) {
+    // Optionally, handle cases where the slug doesn't match any item.
+    // In a static export, this would typically lead to a 404.
+    return <div>Project not found.</div>;
+  }
+
+  return (
+    <div>
+      <h1>{item.title}</h1>
+      <p>{item.content}</p>
+    </div>
+  );
+}