Add Drupal headless stack with Next.js frontend

- Add Next.js frontend service (nextjs) with Dockerfile and source
- Update docker-compose.yml: image names, Drupal 11.3.3, nextjs service
- Add docker-compose.override.yml.disabled for dev hot-reload
- Add install-headless-modules.sh for OAuth/JSON:API module setup
- Add README.md with full setup and configuration guide
- Update nginx/Dockerfile and nginx.conf.template for cms. subdomain
- Update drupal/Dockerfile PHP-FPM build args
- Gitignore **/.vscode/ to prevent IDE workspace files from being tracked

drupal/nextjs/components/avatar-image.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import Image from "next/image"
+import { useCallback, useState } from "react"
+
+const IMAGE_POOL = [
+  "/assets/images/autumn.png",
+  "/assets/images/kuss.png",
+  "/assets/images/chaos.png",
+  "/assets/images/conference.png",
+  "/assets/images/explaining.png",
+  "/assets/images/family.png",
+  "/assets/images/pres_1.png",
+  "/assets/images/robot.png",
+] as const
+
+function pickRandom(exclude?: string): string {
+  const available = exclude
+    ? IMAGE_POOL.filter((p) => p !== exclude)
+    : [...IMAGE_POOL]
+  return available[Math.floor(Math.random() * available.length)]
+}
+
+export function AvatarImage({ alt }: { alt: string }) {
+  const [currentSrc, setCurrentSrc] = useState(() => pickRandom())
+  const [isSpinning, setIsSpinning] = useState(false)
+
+  const handleMouseEnter = useCallback(() => {
+    setIsSpinning(true)
+    setCurrentSrc((prev) => pickRandom(prev))
+  }, [])
+
+  const handleAnimationEnd = useCallback(() => {
+    setIsSpinning(false)
+  }, [])
+
+  return (
+    <div
+      className="flex size-20 shrink-0 sm:size-24 [perspective:500px]"
+      onMouseEnter={handleMouseEnter}
+      onAnimationEnd={handleAnimationEnd}
+    >
+      <div
+        className={`relative size-full overflow-hidden rounded-full bg-emerald-100 [transform-style:preserve-3d] ${isSpinning ? "animate-coin-spin" : ""}`}
+      >
+        <Image
+          key={currentSrc}
+          src={currentSrc}
+          alt={alt}
+          fill
+          className="object-cover"
+          sizes="192px"
+          quality={95}
+        />
+      </div>
+    </div>
+  )
+}