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/app/resources/page.tsx

@@ -0,0 +1,65 @@
+import type { Metadata } from "next"
+import Link from "next/link"
+import { FileText, Database, ArrowRight } from "lucide-react"
+
+export const metadata: Metadata = {
+  title: "Resources",
+  description: "Browse articles and models on nasarek.dev",
+}
+
+export default function ResourcesPage() {
+  return (
+    <article className="mx-auto flex min-h-full flex-1 flex-col max-w-7xl">
+      <header className="mb-12">
+        <h1 className="mb-4 text-4xl font-bold tracking-tight text-slate-900 sm:text-5xl">
+          Resources
+        </h1>
+        <p className="max-w-2xl text-lg text-slate-600">
+          Explore my curated collection of articles and models.
+        </p>
+      </header>
+
+      <section className="grid gap-8 sm:grid-cols-2">
+        <Link
+          href="/resources/articles"
+          className="group block rounded-xl border border-slate-200 bg-white p-8 outline-none transition-all duration-200 ease-out hover:border-emerald-500/40 hover:shadow-lg focus-visible:ring-2 focus-visible:ring-emerald-600 focus-visible:ring-offset-2"
+        >
+          <div className="mb-4 inline-flex rounded-lg bg-emerald-100 p-3 text-emerald-600">
+            <FileText className="size-6" aria-hidden />
+          </div>
+          <h2 className="mb-3 text-xl font-semibold text-emerald-600 transition-colors duration-200 ease-out group-hover:text-emerald-500">
+            Articles
+          </h2>
+          <p className="mb-4 text-slate-600">
+            Written content covering tutorials, guides, and insights. Articles
+            are published pieces with full text, images, and structured
+            formatting.
+          </p>
+          <span className="inline-flex items-center gap-2 text-sm font-medium text-emerald-600 transition-colors duration-200 ease-out group-hover:text-emerald-500">
+            Browse articles
+            <ArrowRight className="size-4 transition-transform duration-200 ease-out group-hover:translate-x-1" aria-hidden />
+          </span>
+        </Link>
+
+        <Link
+          href="/resources/datamodelling"
+          className="group block rounded-xl border border-slate-200 bg-white p-8 outline-none transition-all duration-200 ease-out hover:border-fuchsia-500/40 hover:shadow-lg focus-visible:ring-2 focus-visible:ring-emerald-600 focus-visible:ring-offset-2"
+        >
+          <div className="mb-4 inline-flex rounded-lg bg-fuchsia-100 p-3 text-fuchsia-600">
+            <Database className="size-6" aria-hidden />
+          </div>
+          <h2 className="mb-3 text-xl font-semibold text-fuchsia-600 transition-colors duration-200 ease-out group-hover:text-fuchsia-500">
+            Datamodelling
+          </h2>
+          <p className="mb-4 text-slate-600">
+            Structured data models and schemas from my projects.
+          </p>
+          <span className="inline-flex items-center gap-2 text-sm font-medium text-emerald-600 transition-colors duration-200 ease-out group-hover:text-emerald-500">
+            Browse models
+            <ArrowRight className="size-4 transition-transform duration-200 ease-out group-hover:translate-x-1" aria-hidden />
+          </span>
+        </Link>
+      </section>
+    </article>
+  )
+}