REMOVED - Drop Home dock item since the logo already links home

- Bring back the corner fan-out controls; drop the in-dock settings tile.
- Regenerate public/dock/*.svg so the squircle fills the whole tile with
  no inner margin.

.githooks/commit-msg

@@ -0,0 +1,52 @@
+#!/usr/bin/env bash
+#
+# commit-msg: enforce the project's commit subject style.
+#
+# The subject (first line) MUST be:   VERB - Short description
+#   - VERB : an ALL-CAPS verb, >= 3 letters
+#            (e.g. ADDED, FIXED, STYLED, DOCUMENTED, CLEANED, REVERTED,
+#             CONFIGURED, IMPROVED, POLISHED, REMOVED, RENAMED, REFACTORED)
+#   - then " - " (space hyphen space)
+#   - then a description (capitalized, imperative, no trailing period).
+#
+# Good:
+#   FIXED - Load .env in drizzle.config so drizzle-kit targets the right DB
+#   STYLED - Turn the admin portfolio overview into a professional table
+#
+# Bad (rejected):
+#   Flatten portfolio category routes to /portfolio/[slug]   (no VERB prefix)
+#   feat(hero): add ambient backdrop                          (wrong style)
+#
+# Install once:   git config core.hooksPath .githooks
+# Emergency skip: git commit --no-verify
+#
+set -euo pipefail
+
+msg_file="$1"
+
+# First non-empty, non-comment line = the subject.
+subject="$(grep -vE '^[[:space:]]*#' "$msg_file" | grep -vE '^[[:space:]]*$' | head -n1 || true)"
+
+# Let git's own housekeeping commits through untouched.
+case "$subject" in
+  Merge\ * | Revert\ * | fixup!\ * | squash!\ *) exit 0 ;;
+esac
+
+pattern='^[A-Z]{3,} - .+'
+if [[ ! "$subject" =~ $pattern ]]; then
+  cat >&2 <<EOF
+
+✗ commit rejected: subject does not match the project style.
+
+  Required:  VERB - Short description
+  Example:   FIXED - Load .env so drizzle-kit targets the right DB
+
+  Your subject was:
+    ${subject:-(empty)}
+
+  VERB must be ALL-CAPS (>= 3 letters), then " - ", then the description.
+  (Emergency skip: git commit --no-verify)
+
+EOF
+  exit 1
+fi

CLAUDE.md

@@ -126,3 +126,32 @@ SITE_RUNTIME_ORIGIN       Internal origin for middleware to fetch runtime state
 - For schema or database changes, inspect the Drizzle schema (`lib/db/schema.ts`), the drizzle-kit migration flow, and migration impact before editing.
 - Ask before performing large refactors, file moves, destructive changes, or broad formatting changes.
 - When updating behavior, also update docs/specs if the change affects public behavior, business rules, or architecture.
+
+## Git commit messages (MANDATORY)
+
+Every commit subject **must** follow this exact style, or the `commit-msg` hook
+(`.githooks/commit-msg`) will reject the commit:
+
+```
+VERB - Short description
+```
+
+- `VERB` is an ALL-CAPS verb, at least 3 letters — e.g. `ADDED`, `FIXED`,
+  `STYLED`, `REMOVED`, `RENAMED`, `REFACTORED`, `IMPROVED`, `DOCUMENTED`,
+  `CLEANED`, `REVERTED`, `CONFIGURED`, `POLISHED`.
+- Then exactly `" - "` (space, hyphen, space).
+- Then a capitalized, imperative description with no trailing period.
+
+Good: `FIXED - Load .env in drizzle.config so drizzle-kit targets the right DB`
+Bad (rejected): `Flatten portfolio category routes` — no `VERB` prefix.
+Bad (rejected): `feat(hero): add backdrop` — Conventional Commits is NOT used here.
+
+Do **not** add any `Co-Authored-By` / "Generated with Claude Code" attribution
+lines to commits in this repo. Write the body (when useful) as wrapped prose or
+bullet points explaining the *why*, matching the existing history.
+
+The hook (and the `pre-push` test gate) live in `.githooks/` and are activated
+per clone via `core.hooksPath`. You don't need to remember this: the `prepare`
+npm script runs `git config core.hooksPath .githooks` automatically on every
+`npm install`. The deploy server does not need it — it only pulls, never commits
+or pushes, so no hook ever fires there. Emergency skip: `git commit --no-verify`.

app/[locale]/(site)/layout.tsx

@@ -4,11 +4,11 @@ import { getLocale } from "next-intl/server";
 import { redirect } from "next/navigation";
 
 import { SiteAmbientBackdrop } from "@/components/layout/site-ambient-backdrop";
+import { SiteDock } from "@/components/layout/site-dock";
 import { SiteFooter } from "@/components/layout/site-footer";
-import { SiteHeader } from "@/components/layout/site-header";
 import { ScrollSmootherProvider } from "@/components/scroll-smoother-provider";
 import { isSuperAdmin } from "@/lib/admin-auth";
-import { getMaintenanceMode, getSiteSettings, getSiteSettingsMediaBindings } from "@/lib/app-config";
+import { getMaintenanceMode, getSiteSettings } from "@/lib/app-config";
 import { getLocalizedPath, resolveLocale } from "@/lib/locale";
 
 type SiteLayoutProps = {
@@ -24,9 +24,8 @@ export const revalidate = 0;
 export default async function SiteLayout({ children, params }: SiteLayoutProps) {
   noStore();
   await params;
-  const [maintenanceEnabled, mediaBindings, siteSettings] = await Promise.all([
+  const [maintenanceEnabled, siteSettings] = await Promise.all([
     getMaintenanceMode(),
-    getSiteSettingsMediaBindings(),
     getSiteSettings(),
   ]);
   const localeKey = resolveLocale(await getLocale().catch(() => siteSettings.defaultLocale), siteSettings.defaultLocale);
@@ -44,12 +43,7 @@ export default async function SiteLayout({ children, params }: SiteLayoutProps)
     <>
       <ScrollSmootherProvider />
       <SiteAmbientBackdrop />
-      <SiteHeader
+      <SiteDock defaultLocale={siteSettings.defaultLocale} isSuperAdmin={authenticated} />
-        lightLogoUrl={mediaBindings.siteLogoLight?.url}
-        darkLogoUrl={mediaBindings.siteLogoDark?.url}
-        defaultLocale={siteSettings.defaultLocale}
-        isSuperAdmin={authenticated}
-      />
       <div id="smooth-wrapper">
         <div id="smooth-content">
           <div className="site-content-frame flex min-h-screen flex-col">

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

@@ -4,16 +4,20 @@ 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 { PortfolioProjectDetail } from "@/components/site/portfolio-project-detail";
+import { PortfolioProjectGrid } from "@/components/site/portfolio-project-grid";
 import { getSiteSettings } from "@/lib/app-config";
 import { buildLocalizedMetadata } from "@/lib/metadata";
 import { resolveLocale } from "@/lib/locale";
 import {
+  getActivePortfolioCategories,
   getLocalizedValue,
-  getPublishedPortfolioProjectBySlug,
+  getPublishedPortfolioProjects,
+  resolvePortfolioSlug,
 } from "@/lib/portfolio";
 
-type PortfolioItemPageProps = {
+type PortfolioSlugPageProps = {
   params: Promise<{
     locale: string;
     slug: string;
@@ -22,41 +26,88 @@ type PortfolioItemPageProps = {
 
 export const dynamic = "force-dynamic";
 
-export async function generateMetadata({ params }: PortfolioItemPageProps): Promise<Metadata> {
+export async function generateMetadata({ params }: PortfolioSlugPageProps): Promise<Metadata> {
   const { slug } = await params;
   const siteSettings = await getSiteSettings();
   const localeKey = resolveLocale(await getLocale().catch(() => siteSettings.defaultLocale), siteSettings.defaultLocale);
-  const item = await getPublishedPortfolioProjectBySlug(slug);
+  const resolved = await resolvePortfolioSlug(slug);
 
-  if (!item) {
+  if (!resolved) {
+    const t = await getTranslations({ locale: localeKey, namespace: "portfolioPage" });
     return await buildLocalizedMetadata({
       locale: localeKey,
       pathname: `/portfolio/${slug}`,
-      title: "Portfolio",
+      title: t("title"),
-      description: "Portfolio item",
+      description: t("intro"),
+    });
+  }
+
+  if (resolved.kind === "category") {
+    const t = await getTranslations({ locale: localeKey, namespace: "portfolioPage" });
+    return await buildLocalizedMetadata({
+      locale: localeKey,
+      pathname: `/portfolio/${slug}`,
+      title: getLocalizedValue(resolved.category.name, localeKey),
+      description: getLocalizedValue(resolved.category.description, localeKey) || t("intro"),
     });
   }
 
   return await buildLocalizedMetadata({
     locale: localeKey,
     pathname: `/portfolio/${slug}`,
-    title: getLocalizedValue(item.title, localeKey),
+    title: getLocalizedValue(resolved.project.title, localeKey),
-    description: getLocalizedValue(item.summary, localeKey),
+    description: getLocalizedValue(resolved.project.summary, localeKey),
   });
 }
 
-export default async function PortfolioItemPage({
+export default async function PortfolioSlugPage({ params }: PortfolioSlugPageProps) {
-  params,
-}: PortfolioItemPageProps) {
   const { slug } = await params;
   const siteSettings = await getSiteSettings();
   const localeKey = resolveLocale(await getLocale().catch(() => siteSettings.defaultLocale), siteSettings.defaultLocale);
-  const item = await getPublishedPortfolioProjectBySlug(slug);
+  const resolved = await resolvePortfolioSlug(slug);
 
-  if (!item) {
+  if (!resolved) {
     notFound();
   }
 
+  if (resolved.kind === "category") {
+    const { category } = resolved;
+    const [categories, projects] = await Promise.all([
+      getActivePortfolioCategories(),
+      getPublishedPortfolioProjects({ categorySlug: slug }),
+    ]);
+    const t = await getTranslations({ locale: localeKey, namespace: "portfolioPage" });
+
+    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}
+            defaultLocale={siteSettings.defaultLocale}
+            categories={categories}
+            allLabel={t("all")}
+            activeCategorySlug={category.slug}
+          />
+          <PortfolioProjectGrid
+            locale={localeKey}
+            defaultLocale={siteSettings.defaultLocale}
+            projects={projects}
+            emptyLabel={t("empty")}
+            openLabel={t("open")}
+          />
+        </Container>
+      </>
+    );
+  }
+
+  const { project: item } = resolved;
   const t = await getTranslations({ locale: localeKey, namespace: "portfolioDetail" });
   const title = getLocalizedValue(item.title, localeKey);
   const category = getLocalizedValue(item.category.name, localeKey);

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

@@ -1,96 +0,0 @@
-import type { Metadata } from "next";
-import { getLocale, 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 { getSiteSettings } from "@/lib/app-config";
-import { buildLocalizedMetadata } from "@/lib/metadata";
-import { resolveLocale } from "@/lib/locale";
-import {
-  getActivePortfolioCategories,
-  getActivePortfolioCategoryBySlug,
-  getLocalizedValue,
-  getPublishedPortfolioProjects,
-} from "@/lib/portfolio";
-
-type PortfolioCategoryPageProps = {
-  params: Promise<{
-    locale: string;
-    slug: string;
-  }>;
-};
-
-export const dynamic = "force-dynamic";
-
-export async function generateMetadata({ params }: PortfolioCategoryPageProps): Promise<Metadata> {
-  const { slug } = await params;
-  const siteSettings = await getSiteSettings();
-  const localeKey = resolveLocale(await getLocale().catch(() => siteSettings.defaultLocale), siteSettings.defaultLocale);
-  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,
-}: PortfolioCategoryPageProps) {
-  const { slug } = await params;
-  const [siteSettings, categories, category, projects] = await Promise.all([
-    getSiteSettings(),
-    getActivePortfolioCategories(),
-    getActivePortfolioCategoryBySlug(slug),
-    getPublishedPortfolioProjects({ categorySlug: slug }),
-  ]);
-  const localeKey = resolveLocale(await getLocale().catch(() => siteSettings.defaultLocale), siteSettings.defaultLocale);
-  const t = await getTranslations({ locale: localeKey, namespace: "portfolioPage" });
-
-  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}
-          defaultLocale={siteSettings.defaultLocale}
-          categories={categories}
-          allLabel={t("all")}
-          activeCategorySlug={category.slug}
-        />
-        <PortfolioProjectGrid
-          locale={localeKey}
-          defaultLocale={siteSettings.defaultLocale}
-          projects={projects}
-          emptyLabel={t("empty")}
-          openLabel={t("open")}
-        />
-      </Container>
-    </>
-  );
-}

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

@@ -1,21 +0,0 @@
-import { getLocale } from "next-intl/server";
-import { permanentRedirect } from "next/navigation";
-
-import { getSiteSettings } from "@/lib/app-config";
-import { getLocalizedPath, resolveLocale } from "@/lib/locale";
-
-type PortfolioCategoryIndexPageProps = {
-  params: Promise<{
-    locale: string;
-  }>;
-};
-
-export default async function PortfolioCategoryIndexPage({
-  params,
-}: PortfolioCategoryIndexPageProps) {
-  await params;
-  const siteSettings = await getSiteSettings();
-  const localeKey = resolveLocale(await getLocale().catch(() => siteSettings.defaultLocale), siteSettings.defaultLocale);
-
-  permanentRedirect(getLocalizedPath(localeKey, "/portfolio", siteSettings.defaultLocale));
-}

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

@@ -50,7 +50,7 @@ export default async function PortfolioPage({
   const selectedCategory = resolvedSearchParams?.category ?? "";
 
   if (selectedCategory) {
-    redirect(getLocalizedPath(localeKey, `/portfolio/category/${selectedCategory}`, siteSettings.defaultLocale));
+    redirect(getLocalizedPath(localeKey, `/portfolio/${selectedCategory}`, siteSettings.defaultLocale));
   }
 
   const [categories, projects] = await Promise.all([

app/globals.css

@@ -295,6 +295,222 @@ html[lang="ar"] .eyebrow {
     display: none;
   }
 
+  /* ---- Layered hero backdrop (HeroMotionBackdrop) ---- */
+  .hero-backdrop-base {
+    position: absolute;
+    inset: 0;
+    background: hsl(var(--background));
+  }
+
+  .hero-backdrop-grid {
+    position: absolute;
+    inset: 0;
+    background-image:
+      linear-gradient(hsl(var(--border) / 0.55) 1px, transparent 1px),
+      linear-gradient(90deg, hsl(var(--border) / 0.55) 1px, transparent 1px);
+    background-size: 30px 30px;
+    background-position: center top;
+    opacity: 0.55;
+    -webkit-mask-image: radial-gradient(ellipse 78% 58% at 50% 30%, #000 0%, transparent 72%);
+    mask-image: radial-gradient(ellipse 78% 58% at 50% 30%, #000 0%, transparent 72%);
+  }
+
+  .dark .hero-backdrop-grid {
+    opacity: 0.4;
+  }
+
+  .hero-backdrop-glow {
+    position: absolute;
+    inset: 0;
+    background:
+      radial-gradient(58% 46% at 50% 20%, hsl(var(--brand-primary) / 0.16), transparent 70%),
+      radial-gradient(46% 42% at 80% 10%, hsl(var(--brand-secondary) / 0.13), transparent 68%),
+      radial-gradient(48% 44% at 16% 18%, hsl(var(--brand-primary) / 0.1), transparent 66%);
+  }
+
+  .hero-orb {
+    position: absolute;
+    border-radius: 9999px;
+    filter: blur(64px);
+    will-change: transform;
+  }
+
+  .hero-orb-1 {
+    top: -10%;
+    inset-inline-start: -8%;
+    height: 32rem;
+    width: 32rem;
+    background: hsl(var(--brand-primary) / 0.18);
+    animation: hero-orb-drift-a 22s ease-in-out infinite;
+  }
+
+  .hero-orb-2 {
+    top: -6%;
+    inset-inline-end: -10%;
+    height: 28rem;
+    width: 28rem;
+    background: hsl(var(--brand-secondary) / 0.15);
+    animation: hero-orb-drift-b 27s ease-in-out infinite;
+  }
+
+  .hero-orb-3 {
+    bottom: -22%;
+    inset-inline-start: 24%;
+    height: 26rem;
+    width: 26rem;
+    background: hsl(var(--brand-primary) / 0.1);
+    animation: hero-orb-drift-a 31s ease-in-out infinite reverse;
+  }
+
+  .hero-backdrop-noise {
+    position: absolute;
+    inset: -8%;
+    opacity: 0.26;
+    mix-blend-mode: soft-light;
+  }
+
+  .dark .hero-backdrop-noise {
+    opacity: 0.1;
+  }
+
+  .hero-backdrop-floor {
+    position: absolute;
+    inset-inline: 0;
+    bottom: 0;
+    height: 40%;
+    background: linear-gradient(to bottom, transparent, hsl(var(--background)) 92%);
+  }
+
+  .hero-backdrop.is-compact .hero-backdrop-grid {
+    opacity: 0.32;
+  }
+
+  .hero-backdrop.is-compact .hero-orb {
+    opacity: 0.7;
+    filter: blur(72px);
+  }
+
+  @keyframes hero-orb-drift-a {
+    0%,
+    100% {
+      transform: translate3d(0, 0, 0) scale(1);
+    }
+    33% {
+      transform: translate3d(70px, -48px, 0) scale(1.1);
+    }
+    66% {
+      transform: translate3d(-42px, 26px, 0) scale(0.94);
+    }
+  }
+
+  @keyframes hero-orb-drift-b {
+    0%,
+    100% {
+      transform: translate3d(0, 0, 0) scale(1);
+    }
+    33% {
+      transform: translate3d(-80px, 42px, 0) scale(0.92);
+    }
+    66% {
+      transform: translate3d(38px, -24px, 0) scale(1.08);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hero-orb {
+      animation: none;
+    }
+  }
+
+  /* ---- Hero entrance (pure CSS so it never flashes blank before hydration) ---- */
+  .hero-rise {
+    opacity: 0;
+    animation: hero-rise-in 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
+  }
+
+  .hero-content > *:nth-child(1) {
+    animation-delay: 0.06s;
+  }
+  .hero-content > *:nth-child(2) {
+    animation-delay: 0.14s;
+  }
+  .hero-content > *:nth-child(3) {
+    animation-delay: 0.22s;
+  }
+  .hero-content > *:nth-child(4) {
+    animation-delay: 0.3s;
+  }
+  .hero-content > *:nth-child(5) {
+    animation-delay: 0.38s;
+  }
+  .hero-content > *:nth-child(6) {
+    animation-delay: 0.46s;
+  }
+
+  @keyframes hero-rise-in {
+    from {
+      opacity: 0;
+      transform: translateY(18px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  /* Focused glow directly behind the hero title */
+  .hero-title {
+    position: relative;
+    isolation: isolate;
+  }
+
+  .hero-title::before {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 46%;
+    z-index: -1;
+    width: 84%;
+    height: 74%;
+    transform: translate(-50%, -50%);
+    background: radial-gradient(closest-side, hsl(var(--brand-primary) / 0.2), transparent 78%);
+    filter: blur(48px);
+    pointer-events: none;
+  }
+
+  .dark .hero-title::before {
+    background: radial-gradient(closest-side, hsl(var(--brand-primary) / 0.3), transparent 78%);
+  }
+
+  /* Scroll cue pinned to the bottom of the home hero */
+  .hero-scroll-anchor {
+    position: absolute;
+    bottom: 1.5rem;
+    left: 50%;
+    z-index: 10;
+    transform: translateX(-50%);
+    opacity: 0;
+    animation: hero-fade-in 0.6s ease 0.7s forwards;
+  }
+
+  .hero-scroll-anchor:hover {
+    transform: translateX(-50%) translateY(2px);
+  }
+
+  @keyframes hero-fade-in {
+    to {
+      opacity: 1;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hero-rise,
+    .hero-scroll-anchor {
+      animation: none;
+      opacity: 1;
+    }
+  }
+
   .hero-title-line {
     display: inline-block;
     padding-inline: 0.02em;

app/sitemap.ts

@@ -57,7 +57,7 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
       priority: 0.9,
     }),
     ...categories.flatMap((category) =>
-      buildLocalizedEntries(`/portfolio/category/${category.slug}`, siteSettings.defaultLocale, {
+      buildLocalizedEntries(`/portfolio/${category.slug}`, siteSettings.defaultLocale, {
         changeFrequency: "weekly",
         priority: 0.8,
       }),

components/layout/floating-controls.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+import { Plus, ShieldCheck } from "lucide-react";
+import { useLocale, useTranslations } from "next-intl";
+import { useState, type ReactNode } from "react";
+
+import { LocaleToggle } from "@/components/layout/locale-toggle";
+import { SoundToggle } from "@/components/sound-toggle";
+import { ThemeToggle } from "@/components/theme-toggle";
+import { buildAdminUrl } from "@/lib/admin-routing";
+import type { AppLocale } from "@/lib/locale";
+import { cn } from "@/lib/utils";
+
+type FloatingControlsProps = {
+  locale: string;
+  defaultLocale: AppLocale;
+  isSuperAdmin?: boolean;
+};
+
+const pill =
+  "flex h-11 w-11 items-center justify-center rounded-full border border-border/60 bg-background/85 text-foreground/80 shadow-panel backdrop-blur-chrome transition-colors hover:bg-accent hover:text-foreground";
+
+/** Radius (px) of the arc the items fan out along. */
+const RADIUS = 92;
+
+export function FloatingControls({
+  locale,
+  defaultLocale,
+  isSuperAdmin = false,
+}: FloatingControlsProps) {
+  const [open, setOpen] = useState(false);
+  const t = useTranslations("navigation");
+  const activeLocale = useLocale();
+  const isRtl = activeLocale === "ar";
+  const reducedMotion = useReducedMotion();
+
+  const controls: ReactNode[] = [
+    <SoundToggle
+      key="sound"
+      ariaLabel={t("soundMute")}
+      mutedAriaLabel={t("soundUnmute")}
+      variant="ghost"
+      className={cn(pill, "border-transparent bg-transparent")}
+    />,
+    <ThemeToggle
+      key="theme"
+      ariaLabel={t("themeToggle")}
+      variant="ghost"
+      className={cn(pill, "border-transparent bg-transparent")}
+    />,
+    <LocaleToggle
+      key="locale"
+      locale={locale}
+      defaultLocale={defaultLocale}
+      className={cn(pill, "border-transparent bg-transparent p-0")}
+    />,
+  ];
+
+  if (isSuperAdmin) {
+    controls.push(
+      <a key="admin" href={buildAdminUrl("/")} aria-label="Open admin dashboard" className={pill}>
+        <ShieldCheck className="h-[1.125rem] w-[1.125rem]" />
+      </a>,
+    );
+  }
+
+  const count = controls.length;
+  // Fan across a quarter arc from "up" (90°) to "sideways" (180°), mirrored for
+  // RTL so the items always spread away from the corner into the page.
+  const startAngle = 94;
+  const endAngle = 176;
+  const positionFor = (index: number) => {
+    const angle = count === 1 ? 135 : startAngle + ((endAngle - startAngle) * index) / (count - 1);
+    const radians = (angle * Math.PI) / 180;
+    return {
+      x: (isRtl ? -1 : 1) * Math.cos(radians) * RADIUS,
+      y: -Math.sin(radians) * RADIUS,
+    };
+  };
+
+  return (
+    <div
+      className="pointer-events-none fixed bottom-0 end-0 z-50 p-4"
+      style={{ paddingBottom: "calc(1.1rem + env(safe-area-inset-bottom, 0px))" }}
+    >
+      <div className="pointer-events-auto relative h-12 w-12">
+        <AnimatePresence>
+          {open ? (
+            <>
+              {/* click-away scrim */}
+              <motion.button
+                key="scrim"
+                type="button"
+                aria-hidden
+                tabIndex={-1}
+                onClick={() => setOpen(false)}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                className="fixed inset-0 -z-10 cursor-default bg-transparent"
+              />
+              {controls.map((control, index) => {
+                const { x, y } = positionFor(index);
+                return (
+                  <motion.div
+                    key={index}
+                    className="absolute bottom-0 end-0 grid h-12 w-12 place-items-center"
+                    initial={reducedMotion ? { opacity: 0 } : { opacity: 0, x: 0, y: 0, scale: 0.4 }}
+                    animate={reducedMotion ? { opacity: 1 } : { opacity: 1, x, y, scale: 1 }}
+                    exit={reducedMotion ? { opacity: 0 } : { opacity: 0, x: 0, y: 0, scale: 0.4 }}
+                    transition={
+                      reducedMotion
+                        ? { duration: 0 }
+                        : { type: "spring", stiffness: 460, damping: 26, delay: index * 0.035 }
+                    }
+                  >
+                    {control}
+                  </motion.div>
+                );
+              })}
+            </>
+          ) : null}
+        </AnimatePresence>
+
+        {/* trigger */}
+        <button
+          type="button"
+          onClick={() => setOpen((value) => !value)}
+          aria-expanded={open}
+          aria-label={open ? t("closeMenu") : t("openMenu")}
+          className={cn(
+            pill,
+            "relative h-12 w-12",
+            open && "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground",
+          )}
+        >
+          <motion.span
+            animate={{ rotate: open ? 135 : 0 }}
+            transition={reducedMotion ? { duration: 0 } : { type: "spring", stiffness: 400, damping: 22 }}
+            className="flex items-center justify-center"
+          >
+            <Plus className="h-5 w-5" />
+          </motion.span>
+        </button>
+      </div>
+    </div>
+  );
+}

components/layout/hero-motion-backdrop.tsx

@@ -1,13 +1,33 @@
+import { cn } from "@/lib/utils";
+
 type HeroMotionBackdropProps = {
   compact?: boolean;
 };
 
-export function HeroMotionBackdrop({}: HeroMotionBackdropProps) {
+/**
+ * Layered ambient backdrop rendered behind every hero (home + page).
+ * Pure CSS so it needs no client JS: a faded grid for structure, a soft
+ * brand glow, slowly drifting brand orbs, a grain overlay for texture, and
+ * a bottom fade that blends the hero into the page content. The orb drift is
+ * disabled under `prefers-reduced-motion` (see globals.css).
+ */
+export function HeroMotionBackdrop({ compact = false }: HeroMotionBackdropProps) {
   return (
-    <div className="hero-sheet pointer-events-none absolute inset-0 overflow-hidden">
+    <div
-      <div className="hero-sheet-base" />
+      aria-hidden="true"
-      <div className="hero-sheet-veil" />
+      className={cn(
-      <div className="hero-sheet-fade" />
+        "hero-backdrop pointer-events-none absolute inset-0 z-0 overflow-hidden",
+        compact && "is-compact",
+      )}
+    >
+      <div className="hero-backdrop-base" />
+      <div className="hero-backdrop-grid" />
+      <div className="hero-backdrop-glow" />
+      <span className="hero-orb hero-orb-1" />
+      <span className="hero-orb hero-orb-2" />
+      <span className="hero-orb hero-orb-3" />
+      <div className="hero-noise hero-backdrop-noise" />
+      <div className="hero-backdrop-floor" />
     </div>
   );
 }

components/layout/site-dock.tsx

@@ -0,0 +1,159 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useLocale, useTranslations } from "next-intl";
+
+import { FloatingControls } from "@/components/layout/floating-controls";
+import { Dock, DockIcon } from "@/components/ui/dock";
+import { getLocalizedPath, stripLocalePrefix, type AppLocale } from "@/lib/locale";
+import { cn } from "@/lib/utils";
+
+type SiteDockProps = {
+  defaultLocale: AppLocale;
+  /**
+   * Server-computed via `isSuperAdmin()` in the parent layout. This client
+   * component only decides whether to *render* the Admin shortcut — it performs
+   * no auth check and grants no access; the real guard lives server-side on
+   * each admin page/action.
+   */
+  isSuperAdmin?: boolean;
+};
+
+type NavKey = "about" | "portfolio" | "products" | "contact";
+
+type NavItem = {
+  key: NavKey;
+  path: string;
+  disabled?: boolean;
+};
+
+// "Home" is intentionally omitted — the logo (first dock icon) is the home link.
+const navItems: NavItem[] = [
+  { key: "about", path: "/about" },
+  { key: "portfolio", path: "/portfolio" },
+  { key: "products", path: "/products", disabled: true },
+  { key: "contact", path: "/contact" },
+];
+
+function isNavItemActive(currentPath: string, itemPath: string) {
+  if (itemPath === "/") {
+    return currentPath === "/";
+  }
+  return currentPath === itemPath || currentPath.startsWith(`${itemPath}/`);
+}
+
+export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps) {
+  const locale = useLocale();
+  const pathname = usePathname();
+  const t = useTranslations("navigation");
+
+  const currentPath = stripLocalePrefix(pathname);
+  const homeHref = getLocalizedPath(locale, "/", defaultLocale);
+
+  return (
+    <>
+      {/* ===== Bottom dock (Magic UI) — primary navigation ===== */}
+      <div
+        className="pointer-events-none fixed inset-x-0 bottom-0 z-40 flex justify-center px-4"
+        style={{ paddingBottom: "calc(0.9rem + env(safe-area-inset-bottom, 0px))" }}
+      >
+        <Dock
+          direction="bottom"
+          iconSize={52}
+          iconMagnification={72}
+          iconDistance={150}
+          className="pointer-events-auto h-[68px] gap-2.5 border-border/60 bg-background/70 shadow-panel"
+        >
+          {/* ── Logo (fixed src → no refresh flash) ── */}
+          <DockIcon className="group relative overflow-visible rounded-[26%] bg-white shadow-[0_6px_14px_-6px_rgba(0,0,0,0.5)] ring-1 ring-black/10">
+            <Link
+              href={homeHref}
+              aria-label="mohfarawati — Home"
+              className="flex h-full w-full items-center justify-center rounded-[inherit]"
+            >
+              <Image
+                src="/logos/light-primary.svg"
+                alt="mohfarawati"
+                width={104}
+                height={104}
+                sizes="104px"
+                priority
+                className="h-full w-full rounded-[inherit] object-contain"
+              />
+            </Link>
+            <DockTip label="mohfarawati" />
+          </DockIcon>
+
+          <div className="mx-0.5 h-9 w-px self-center bg-border/70" aria-hidden />
+
+          {/* ── Pages ── */}
+          {navItems.map(({ key, path, disabled }) => {
+            const itemPath = path || "/";
+            const isActive = isNavItemActive(currentPath, itemPath);
+            const label = t(key);
+            const src = `/dock/${key}${isActive ? "-active" : ""}.svg`;
+
+            const icon = (
+              <Image
+                src={src}
+                alt={label}
+                width={104}
+                height={104}
+                sizes="104px"
+                className={cn("h-full w-full rounded-[inherit] object-contain", disabled && "opacity-55")}
+              />
+            );
+
+            return (
+              <DockIcon
+                key={key}
+                className={cn(
+                  "group relative overflow-visible rounded-[26%] transition-shadow duration-200",
+                  isActive
+                    ? "shadow-[0_12px_26px_-8px_hsl(var(--primary)/0.65)]"
+                    : "shadow-[0_6px_14px_-6px_rgba(0,0,0,0.5)] hover:shadow-[0_10px_22px_-8px_rgba(0,0,0,0.6)]",
+                )}
+              >
+                {disabled ? (
+                  <span
+                    aria-disabled="true"
+                    className="flex h-full w-full cursor-not-allowed items-center justify-center rounded-[inherit]"
+                  >
+                    {icon}
+                  </span>
+                ) : (
+                  <Link
+                    href={getLocalizedPath(locale, itemPath, defaultLocale)}
+                    aria-label={label}
+                    aria-current={isActive ? "page" : undefined}
+                    className="flex h-full w-full items-center justify-center rounded-[inherit]"
+                  >
+                    {icon}
+                  </Link>
+                )}
+                <DockTip label={label} soon={disabled ? t("soon") : undefined} />
+              </DockIcon>
+            );
+          })}
+        </Dock>
+      </div>
+
+      {/* ===== Corner controls — theme / language / sound / admin (fan out) ===== */}
+      <FloatingControls locale={locale} defaultLocale={defaultLocale} isSuperAdmin={isSuperAdmin} />
+    </>
+  );
+}
+
+function DockTip({ label, soon }: { label: string; soon?: string }) {
+  return (
+    <span
+      role="tooltip"
+      className="pointer-events-none absolute bottom-[calc(100%+0.85rem)] left-1/2 -translate-x-1/2 translate-y-1 whitespace-nowrap rounded-lg border border-border/60 bg-background/90 px-3 py-1.5 text-sm font-semibold text-foreground opacity-0 shadow-md backdrop-blur-chrome transition-all duration-150 group-hover:translate-y-0 group-hover:opacity-100"
+    >
+      {label}
+      {soon ? <span className="ms-1.5 text-xs tracking-wide text-primary">{soon}</span> : null}
+    </span>
+  );
+}

components/layout/site-hero.tsx

@@ -1,30 +1,11 @@
-"use client";
-
 import type { ReactNode } from "react";
 
 import { ArrowDown } from "lucide-react";
-import { motion } from "framer-motion";
 
 import { Container } from "@/components/layout/container";
 import { HeroMotionBackdrop } from "@/components/layout/hero-motion-backdrop";
 import { cn } from "@/lib/utils";
 
-const heroItemVariants = {
-  hidden: { opacity: 0, y: 16 },
-  visible: {
-    opacity: 1,
-    y: 0,
-    transition: { duration: 0.54, ease: [0.22, 1, 0.36, 1] as [number, number, number, number] },
-  },
-};
-
-const heroContainerVariants = {
-  hidden: {},
-  visible: {
-    transition: { staggerChildren: 0.13, delayChildren: 0.08 },
-  },
-};
-
 type HeroTone = "default" | "accent" | "soft";
 type HeroLineAlign = "start" | "center" | "end";
 
@@ -128,6 +109,14 @@ export function HeroShell({
           {children}
         </div>
       </Container>
+
+      {variant === "home" ? (
+        <HeroScrollLink
+          href="#home-content"
+          label="Scroll to content"
+          className="hero-scroll-anchor hidden sm:inline-flex"
+        />
+      ) : null}
     </section>
   );
 }
@@ -136,27 +125,14 @@ export function HeroContentMotion({
   children,
   className,
 }: HeroContentMotionProps) {
-  return (
+  return <div className={cn("hero-content", className)}>{children}</div>;
-    <motion.div
-      className={className}
-      initial="hidden"
-      animate="visible"
-      variants={heroContainerVariants}
-    >
-      {children}
-    </motion.div>
-  );
 }
 
 export function HeroMotionItem({
   children,
   className,
 }: HeroContentMotionProps) {
-  return (
+  return <div className={cn("hero-rise", className)}>{children}</div>;
-    <motion.div className={className} variants={heroItemVariants}>
-      {children}
-    </motion.div>
-  );
 }
 
 export function HeroTitle({
@@ -167,7 +143,7 @@ export function HeroTitle({
 }: HeroTitleProps) {
   const isArabic = locale === "ar";
   const titleClassName = cn(
-    "text-balance font-semibold text-[hsl(var(--hero-ink))]",
+    "hero-title hero-rise text-balance font-semibold text-[hsl(var(--hero-ink))]",
     variant === "home"
       ? isArabic
         ? "mt-6 flex w-full max-w-[26rem] flex-col gap-y-1 px-4 text-[clamp(2.85rem,11vw,5.9rem)] leading-[1.06] tracking-[-0.03em] sm:max-w-[30rem] sm:px-0 md:max-w-[36rem] lg:max-w-[32rem]"
@@ -177,7 +153,7 @@ export function HeroTitle({
   );
 
   return (
-    <motion.h1 className={titleClassName} variants={heroItemVariants}>
+    <h1 className={titleClassName}>
       {lines.map((line, index) => (
         <span
           key={`${index}-${line.text}`}
@@ -202,7 +178,7 @@ export function HeroTitle({
               )}
         </span>
       ))}
-    </motion.h1>
+    </h1>
   );
 }
 

components/site/portfolio-category-filter.tsx

@@ -30,7 +30,7 @@ export function PortfolioCategoryFilter({
       {categories.map((category) => (
         <CategoryLink
           key={category.id}
-          href={getLocalizedPath(locale, `/portfolio/category/${category.slug}`, defaultLocale)}
+          href={getLocalizedPath(locale, `/portfolio/${category.slug}`, defaultLocale)}
           label={getLocalizedValue(category.name, locale)}
           active={activeCategorySlug === category.slug}
         />

components/ui/dock.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import React, { useRef, type PropsWithChildren } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import {
+  motion,
+  useMotionValue,
+  useSpring,
+  useTransform,
+  type MotionValue,
+  type MotionProps,
+} from "framer-motion";
+
+import { cn } from "@/lib/utils";
+
+export interface DockProps extends VariantProps<typeof dockVariants> {
+  className?: string;
+  iconSize?: number;
+  iconMagnification?: number;
+  disableMagnification?: boolean;
+  iconDistance?: number;
+  direction?: "top" | "middle" | "bottom";
+  children: React.ReactNode;
+}
+
+const DEFAULT_SIZE = 40;
+const DEFAULT_MAGNIFICATION = 60;
+const DEFAULT_DISTANCE = 140;
+const DEFAULT_DISABLEMAGNIFICATION = false;
+
+const dockVariants = cva(
+  "supports-backdrop-blur:bg-white/10 supports-backdrop-blur:dark:bg-black/10 mx-auto flex w-max items-center justify-center gap-2 rounded-2xl border p-2 backdrop-blur-md",
+);
+
+const Dock = React.forwardRef<HTMLDivElement, DockProps>(
+  (
+    {
+      className,
+      children,
+      iconSize = DEFAULT_SIZE,
+      iconMagnification = DEFAULT_MAGNIFICATION,
+      disableMagnification = DEFAULT_DISABLEMAGNIFICATION,
+      iconDistance = DEFAULT_DISTANCE,
+      direction = "bottom",
+      ...props
+    },
+    ref,
+  ) => {
+    const mouseX = useMotionValue(Infinity);
+
+    const renderChildren = () => {
+      return React.Children.map(children, (child) => {
+        if (React.isValidElement<DockIconProps>(child) && child.type === DockIcon) {
+          return React.cloneElement(child, {
+            ...child.props,
+            mouseX: mouseX,
+            size: iconSize,
+            magnification: iconMagnification,
+            disableMagnification: disableMagnification,
+            distance: iconDistance,
+          });
+        }
+        return child;
+      });
+    };
+
+    return (
+      <motion.div
+        ref={ref}
+        onMouseMove={(e) => mouseX.set(e.pageX)}
+        onMouseLeave={() => mouseX.set(Infinity)}
+        {...props}
+        className={cn(dockVariants({ className }), {
+          "items-start": direction === "top",
+          "items-center": direction === "middle",
+          "items-end": direction === "bottom",
+        })}
+      >
+        {renderChildren()}
+      </motion.div>
+    );
+  },
+);
+
+Dock.displayName = "Dock";
+
+export interface DockIconProps
+  extends Omit<MotionProps & React.HTMLAttributes<HTMLDivElement>, "children"> {
+  size?: number;
+  magnification?: number;
+  disableMagnification?: boolean;
+  distance?: number;
+  mouseX?: MotionValue<number>;
+  className?: string;
+  children?: React.ReactNode;
+  props?: PropsWithChildren;
+}
+
+const DockIcon = ({
+  size = DEFAULT_SIZE,
+  magnification = DEFAULT_MAGNIFICATION,
+  disableMagnification,
+  distance = DEFAULT_DISTANCE,
+  mouseX,
+  className,
+  children,
+  ...props
+}: DockIconProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const padding = 0;
+  const defaultMouseX = useMotionValue(Infinity);
+
+  const distanceCalc = useTransform(mouseX ?? defaultMouseX, (val: number) => {
+    const bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 };
+    return val - bounds.x - bounds.width / 2;
+  });
+
+  const targetSize = disableMagnification ? size : magnification;
+
+  const sizeTransform = useTransform(
+    distanceCalc,
+    [-distance, 0, distance],
+    [size, targetSize, size],
+  );
+
+  const scaleSize = useSpring(sizeTransform, {
+    mass: 0.1,
+    stiffness: 150,
+    damping: 12,
+  });
+
+  return (
+    <motion.div
+      ref={ref}
+      style={{ width: scaleSize, height: scaleSize, padding }}
+      className={cn(
+        "flex aspect-square cursor-pointer items-center justify-center rounded-full",
+        disableMagnification && "hover:bg-muted-foreground transition-colors",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+DockIcon.displayName = "DockIcon";
+
+export { Dock, DockIcon, dockVariants };

lib/portfolio.ts

@@ -285,6 +285,30 @@ export const getPublishedPortfolioProjectBySlug = cache(async function (slug: st
   return mapProject(project);
 });
 
+export type ResolvedPortfolioSlug =
+  | { kind: "category"; category: PortfolioCategoryView }
+  | { kind: "project"; project: PortfolioProjectView }
+  | null;
+
+/**
+ * Resolves a `/portfolio/[slug]` segment to either a category or a project.
+ * Categories take precedence so `/portfolio/web` shows the category listing;
+ * a project slug only wins when no active category shares that slug.
+ */
+export async function resolvePortfolioSlug(slug: string): Promise<ResolvedPortfolioSlug> {
+  const category = await getActivePortfolioCategoryBySlug(slug);
+  if (category) {
+    return { kind: "category", category };
+  }
+
+  const project = await getPublishedPortfolioProjectBySlug(slug);
+  if (project) {
+    return { kind: "project", project };
+  }
+
+  return null;
+}
+
 export async function getAdminPortfolioProjectById(id: string) {
   const project = await db.query.portfolioProject.findFirst({
     where: eq(portfolioProject.id, id),

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
+    "prepare": "git config core.hooksPath .githooks || true",
     "dev": "next dev -p 3014",
     "build": "next build --webpack",
     "start": "next start",

public/dock/about-active.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+<defs>
+<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ff8a5f"/><stop offset="1" stop-color="#e5431f"/></linearGradient>
+<linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
+<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
+</defs>
+<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#bg)"/>
+<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#gl)"/>
+<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="27.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
+<g fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
+<circle cx="50" cy="41" r="11"/><path d="M30 72 C30 57, 70 57, 70 72"/></g>
+</svg>

public/dock/about.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+<defs>
+<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#454b57"/><stop offset="1" stop-color="#1c2027"/></linearGradient>
+<linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
+<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
+</defs>
+<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#bg)"/>
+<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#gl)"/>
+<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="27.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
+<g fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
+<circle cx="50" cy="41" r="11"/><path d="M30 72 C30 57, 70 57, 70 72"/></g>
+</svg>

public/dock/contact-active.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+<defs>
+<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ff8a5f"/><stop offset="1" stop-color="#e5431f"/></linearGradient>
+<linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
+<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
+</defs>
+<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#bg)"/>
+<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#gl)"/>
+<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="27.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
+<g fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
+<rect x="27" y="35" width="46" height="30" rx="6"/><path d="M30 40 L50 54 L70 40"/></g>
+</svg>

public/dock/contact.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+<defs>
+<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#454b57"/><stop offset="1" stop-color="#1c2027"/></linearGradient>
+<linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
+<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
+</defs>
+<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#bg)"/>
+<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#gl)"/>
+<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="27.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
+<g fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
+<rect x="27" y="35" width="46" height="30" rx="6"/><path d="M30 40 L50 54 L70 40"/></g>
+</svg>

public/dock/portfolio-active.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+<defs>
+<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ff8a5f"/><stop offset="1" stop-color="#e5431f"/></linearGradient>
+<linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
+<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
+</defs>
+<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#bg)"/>
+<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#gl)"/>
+<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="27.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
+<g fill="#fff">
+<rect x="32" y="32" width="15" height="15" rx="4"/><rect x="53" y="32" width="15" height="15" rx="4"/>
+<rect x="32" y="53" width="15" height="15" rx="4"/><rect x="53" y="53" width="15" height="15" rx="4"/></g>
+</svg>

public/dock/portfolio.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+<defs>
+<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#454b57"/><stop offset="1" stop-color="#1c2027"/></linearGradient>
+<linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
+<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
+</defs>
+<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#bg)"/>
+<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#gl)"/>
+<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="27.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
+<g fill="#fff">
+<rect x="32" y="32" width="15" height="15" rx="4"/><rect x="53" y="32" width="15" height="15" rx="4"/>
+<rect x="32" y="53" width="15" height="15" rx="4"/><rect x="53" y="53" width="15" height="15" rx="4"/></g>
+</svg>

public/dock/products-active.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+<defs>
+<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ff8a5f"/><stop offset="1" stop-color="#e5431f"/></linearGradient>
+<linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
+<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
+</defs>
+<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#bg)"/>
+<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#gl)"/>
+<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="27.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
+<g fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
+<path d="M50 28 L71 40 L71 60 L50 72 L29 60 L29 40 Z"/><path d="M29 40 L50 52 L71 40"/><path d="M50 52 L50 72"/></g>
+</svg>

public/dock/products.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+<defs>
+<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#454b57"/><stop offset="1" stop-color="#1c2027"/></linearGradient>
+<linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
+<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
+</defs>
+<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#bg)"/>
+<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#gl)"/>
+<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="27.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
+<g fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
+<path d="M50 28 L71 40 L71 60 L50 72 L29 60 L29 40 Z"/><path d="M29 40 L50 52 L71 40"/><path d="M50 52 L50 72"/></g>
+</svg>

tests/component/portfolio-category-filter.test.tsx

@@ -35,7 +35,7 @@ describe("PortfolioCategoryFilter", () => {
     expect(screen.getByRole("link", { name: "All" })).toHaveAttribute("href", "/en/portfolio");
     expect(screen.getByRole("link", { name: "Branding" })).toHaveAttribute(
       "href",
-      "/en/portfolio/category/branding",
+      "/en/portfolio/branding",
     );
   });
 
@@ -51,7 +51,7 @@ describe("PortfolioCategoryFilter", () => {
     // German locale on the default locale -> unprefixed paths and German labels
     expect(screen.getByRole("link", { name: "Marke" })).toHaveAttribute(
       "href",
-      "/portfolio/category/branding",
+      "/portfolio/branding",
     );
     expect(screen.getByRole("link", { name: "Alle" })).toHaveAttribute("href", "/portfolio");
   });

tests/integration/portfolio.test.ts

@@ -8,6 +8,7 @@ import {
   getAdminPortfolioProjects,
   getPublishedPortfolioProjectBySlug,
   getPublishedPortfolioProjects,
+  resolvePortfolioSlug,
 } from "@/lib/portfolio";
 import { eq } from "drizzle-orm";
 
@@ -124,6 +125,44 @@ describe("published projects", () => {
   });
 });
 
+describe("resolvePortfolioSlug", () => {
+  it("resolves an active category slug to a category", async () => {
+    await createCategory({ slug: "web", isActive: true });
+    const resolved = await resolvePortfolioSlug("web");
+    expect(resolved?.kind).toBe("category");
+    expect(resolved?.kind === "category" && resolved.category.slug).toBe("web");
+  });
+
+  it("resolves a published project slug to a project", async () => {
+    const cat = await createCategory({ isActive: true });
+    await createProject({ categoryId: cat.id, slug: "my-project", isPublished: true });
+    const resolved = await resolvePortfolioSlug("my-project");
+    expect(resolved?.kind).toBe("project");
+    expect(resolved?.kind === "project" && resolved.project.slug).toBe("my-project");
+  });
+
+  it("prefers the category when a category and a project share a slug", async () => {
+    const cat = await createCategory({ slug: "shared", isActive: true });
+    await createProject({ categoryId: cat.id, slug: "shared", isPublished: true });
+    const resolved = await resolvePortfolioSlug("shared");
+    expect(resolved?.kind).toBe("category");
+  });
+
+  it("ignores an inactive category and falls back to a matching project", async () => {
+    // An inactive category named "hidden" must not shadow a published project "hidden".
+    await createCategory({ slug: "hidden", isActive: false });
+    const activeCat = await createCategory({ isActive: true });
+    await createProject({ categoryId: activeCat.id, slug: "hidden", isPublished: true });
+    const resolved = await resolvePortfolioSlug("hidden");
+    expect(resolved?.kind).toBe("project");
+    expect(resolved?.kind === "project" && resolved.project.slug).toBe("hidden");
+  });
+
+  it("returns null for an unknown slug", async () => {
+    expect(await resolvePortfolioSlug("does-not-exist")).toBeNull();
+  });
+});
+
 describe("referential integrity", () => {
   it("restricts deleting a category that still has projects", async () => {
     const cat = await createCategory();