Add sitemap and portfolio category SEO routes

app/[locale]/(site)/portfolio/category/[slug]/page.tsx

@@ -0,0 +1,91 @@
+import type { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
+import { notFound } from "next/navigation";
+
+import { Container } from "@/components/layout/container";
+import { PageHero } from "@/components/layout/page-hero";
+import { PortfolioCategoryFilter } from "@/components/site/portfolio-category-filter";
+import { PortfolioProjectGrid } from "@/components/site/portfolio-project-grid";
+import { buildLocalizedMetadata } from "@/lib/metadata";
+import { resolveLocale } from "@/lib/locale";
+import {
+  getActivePortfolioCategories,
+  getActivePortfolioCategoryBySlug,
+  getLocalizedValue,
+  getPublishedPortfolioProjects,
+} from "@/lib/portfolio";
+
+type PortfolioCategoryPageProps = {
+  params: {
+    locale: string;
+    slug: string;
+  };
+};
+
+export const dynamic = "force-dynamic";
+
+export async function generateMetadata({
+  params: { locale, slug },
+}: PortfolioCategoryPageProps): Promise<Metadata> {
+  const localeKey = resolveLocale(locale);
+  const t = await getTranslations({ locale: localeKey, namespace: "portfolioPage" });
+  const category = await getActivePortfolioCategoryBySlug(slug);
+
+  if (!category) {
+    return await buildLocalizedMetadata({
+      locale: localeKey,
+      pathname: `/portfolio/category/${slug}`,
+      title: t("title"),
+      description: t("intro"),
+    });
+  }
+
+  return await buildLocalizedMetadata({
+    locale: localeKey,
+    pathname: `/portfolio/category/${slug}`,
+    title: getLocalizedValue(category.name, localeKey),
+    description: getLocalizedValue(category.description, localeKey) || t("intro"),
+  });
+}
+
+export default async function PortfolioCategoryPage({
+  params: { locale, slug },
+}: PortfolioCategoryPageProps) {
+  const localeKey = resolveLocale(locale);
+  const t = await getTranslations({ locale: localeKey, namespace: "portfolioPage" });
+  const [categories, category, projects] = await Promise.all([
+    getActivePortfolioCategories(),
+    getActivePortfolioCategoryBySlug(slug),
+    getPublishedPortfolioProjects({ categorySlug: slug }),
+  ]);
+
+  if (!category) {
+    notFound();
+  }
+
+  return (
+    <>
+      <PageHero
+        locale={localeKey}
+        badge={t("heroBadge")}
+        title={getLocalizedValue(category.name, localeKey)}
+        description={getLocalizedValue(category.description, localeKey) || t("intro")}
+      />
+
+      <Container className="flex flex-col gap-section pb-12 lg:pb-16">
+        <PortfolioCategoryFilter
+          locale={localeKey}
+          categories={categories}
+          allLabel={t("all")}
+          activeCategorySlug={category.slug}
+        />
+        <PortfolioProjectGrid
+          locale={localeKey}
+          projects={projects}
+          emptyLabel={t("empty")}
+          openLabel={t("open")}
+        />
+      </Container>
+    </>
+  );
+}

app/[locale]/(site)/portfolio/category/page.tsx

@@ -0,0 +1,17 @@
+import { permanentRedirect } from "next/navigation";
+
+import { getLocalizedPath, resolveLocale } from "@/lib/locale";
+
+type PortfolioCategoryIndexPageProps = {
+  params: {
+    locale: string;
+  };
+};
+
+export default function PortfolioCategoryIndexPage({
+  params: { locale },
+}: PortfolioCategoryIndexPageProps) {
+  const localeKey = resolveLocale(locale);
+
+  permanentRedirect(getLocalizedPath(localeKey, "/portfolio"));
+}

app/[locale]/(site)/portfolio/page.tsx

@@ -1,20 +1,14 @@
 import type { Metadata } from "next";
-import { ArrowUpRight, CalendarDays } from "lucide-react";
-import Link from "next/link";
 import { getTranslations } from "next-intl/server";
+import { redirect } from "next/navigation";
 
 import { Container } from "@/components/layout/container";
 import { PageHero } from "@/components/layout/page-hero";
-import { MotionFade } from "@/components/motion-fade";
+import { PortfolioCategoryFilter } from "@/components/site/portfolio-category-filter";
+import { PortfolioProjectGrid } from "@/components/site/portfolio-project-grid";
 import { buildLocalizedMetadata } from "@/lib/metadata";
-import { AppCard } from "@/components/ui/app-card";
-import { CardContent } from "@/components/ui/card";
 import { getLocalizedPath, resolveLocale } from "@/lib/locale";
-import {
-  getActivePortfolioCategories,
-  getLocalizedValue,
-  getPublishedPortfolioProjects,
-} from "@/lib/portfolio";
+import { getActivePortfolioCategories, getPublishedPortfolioProjects } from "@/lib/portfolio";
 
 type PortfolioPageProps = {
   params: {
@@ -48,11 +42,14 @@ export default async function PortfolioPage({
   const localeKey = resolveLocale(locale);
   const t = await getTranslations({ locale: localeKey, namespace: "portfolioPage" });
   const selectedCategory = searchParams?.category ?? "";
+
+  if (selectedCategory) {
+    redirect(getLocalizedPath(localeKey, `/portfolio/category/${selectedCategory}`));
+  }
+
   const [categories, projects] = await Promise.all([
     getActivePortfolioCategories(),
-    getPublishedPortfolioProjects({
-      categorySlug: selectedCategory || undefined,
-    }),
+    getPublishedPortfolioProjects(),
   ]);
 
   return (
@@ -65,74 +62,13 @@ export default async function PortfolioPage({
       />
 
       <Container className="flex flex-col gap-section pb-12 lg:pb-16">
-        <section className="flex flex-wrap gap-3">
-        <Link
-          href={getLocalizedPath(localeKey, "/portfolio")}
-          className={`rounded-md border px-4 py-2 text-sm transition-colors ${
-            selectedCategory === ""
-              ? "border-input bg-primary text-primary-foreground"
-              : "border-input bg-background text-foreground/80 hover:bg-accent hover:text-accent-foreground"
-          }`}
-        >
-          {t("all")}
-        </Link>
-        {categories.map((category) => (
-          <Link
-            key={category.id}
-            href={getLocalizedPath(localeKey, `/portfolio?category=${category.slug}`)}
-            className={`rounded-md border px-4 py-2 text-sm transition-colors ${
-              selectedCategory === category.slug
-                ? "border-input bg-primary text-primary-foreground"
-                : "border-input bg-background text-foreground/80 hover:bg-accent hover:text-accent-foreground"
-            }`}
-          >
-            {getLocalizedValue(category.name, localeKey)}
-          </Link>
-        ))}
-        </section>
-
-        <section className="grid gap-4 md:grid-cols-2">
-        {projects.map((item, index) => (
-          <MotionFade key={item.slug} delay={index * 0.05}>
-            <AppCard interactive>
-              <CardContent className="p-5">
-                <Link
-                  href={getLocalizedPath(localeKey, `/portfolio/${item.slug}`)}
-                  className="group block"
-                >
-                  <div className="flex items-center justify-between gap-3">
-                    <p className="text-sm text-muted-foreground/80">
-                      {getLocalizedValue(item.category.name, localeKey)}
-                    </p>
-                    <p className="inline-flex items-center gap-1 text-xs text-muted-foreground/80">
-                      <CalendarDays className="h-3.5 w-3.5" />
-                      {item.projectYear}
-                    </p>
-                  </div>
-                  <h2 className="mt-3 text-xl font-semibold text-foreground">
-                    {getLocalizedValue(item.title, localeKey)}
-                  </h2>
-                  <p className="mt-2 text-sm text-muted-foreground">
-                    {getLocalizedValue(item.summary, localeKey)}
-                  </p>
-                  <p className="mt-4 inline-flex items-center gap-2 text-sm font-medium text-foreground/80 group-hover:text-foreground">
-                    {t("open")}
-                    <ArrowUpRight className="h-4 w-4" />
-                  </p>
-                </Link>
-              </CardContent>
-            </AppCard>
-          </MotionFade>
-        ))}
-
-        {projects.length === 0 ? (
-          <AppCard className="md:col-span-2">
-            <CardContent className="p-6 text-sm text-muted-foreground">
-              {t("empty")}
-            </CardContent>
-          </AppCard>
-        ) : null}
-        </section>
+        <PortfolioCategoryFilter locale={localeKey} categories={categories} allLabel={t("all")} />
+        <PortfolioProjectGrid
+          locale={localeKey}
+          projects={projects}
+          emptyLabel={t("empty")}
+          openLabel={t("open")}
+        />
       </Container>
     </>
   );