fühlen Sie sich frei, diesen Link zu öffnen
[https://arcana-architecture.netlify.app/

Die meisten Architekturstudio-Websiten eröffnen auf dieselbe Weise: ein Vollbild-Hero-Bild, eine Überschrift in einer Serifenschrift, ein Raster aus Projekt-Thumbnails. Das ist okay. Es ist auch völlig vergesslich. ARCANA beginnt anders — mit einem technischen Projekttblatt, Koordinaten und Abmessungen, die wie ein echtes Zeichenpult vorbeiziehen, und einer Scroll-Sequenz, in der ein handgezeichneter Plan allmählich zu einem Foto des fertigen Gebäudes wird. Es ist die Art ersten Eindrucks, der den Besucher für eine Sekunde das Scrollen anhalten lässt und tatsächlich hinschauen lässt. Alles nach diesem Opening ist darauf ausgerichtet, dieses Gefühl beizubehalten, statt in generischen Template-Territorium zurückzufallen.

Die Vorlage wird als vollständige siebenseitige Next.js-Seite ausgeliefert. Die Startseite trägt die signierte Blueprint → Reality-Scroll-Interaktion, einen redaktionellen Projektindex, Materialstudien, Studio-Philosophie, ausgewählte Arbeiten und einen Journal-Teaser. Der Projects-Index präsentiert Studio-Arbeiten als eine dichte, redaktionelle Liste statt eines generischen Kartenrasters. Jede Projekt-Detailseite ist eine vollständige Fallstudie — Projektdaten, Leitgedanke und ein interaktiver Plan-/Ansicht-/Schnitt-/ Detail-Zeichnung-Viewer, der Besuchern ermöglicht, zwischen technischen Zeichnungen zu wechseln, wie es ein Architekt an der Wand befestigen würde, plus die verwendeten Materialien und Fotografie. Das Studio deckt Überblick über die Praxis und ein horizontales Archiv von Studio-Artefakten ab, Approach führt durch die fünfstufige Methodik (Beobachten, Definieren, Zeichnen, Testen, Bauen), Journal enthält Studio-Notizen zu Material und Prozess, und Contact ist ein vollständig validiertes Anfrageformular mit ordentlichen Lade-/Erfolg-/Fehlerzuständen.

Hier ist nichts dabei, das Backend berührt. Jedes Inhaltselement — Projekte, Journal-Einträge, Materialien, Studio-Text, Navigationsbeschriftungen — lebt in einfachen, lesbaren TypeScript-Dateien unter data/, sodass das Umbenennen eines Projekts, das Austauschen eines Materials oder das Umschreiben der Studio-Bio lediglich eine Textänderung ist, kein Neustart erforderlich. Bilder werden über einen kleinen URL-Builder-Helfer geladen, sodass Sie jeden Eintrag auf Ihre eigene Fotografie oder eine gehostete Datei in public/ in Sekunden verweisen können. Farben sind als CSS-Custom-Properties zentralisiert, Schriftarten werden in einer Datei ausgetauscht, und Navigation ist ein einziges Array — die Art Struktur, die Anpassungen auch dann zugänglich macht, wenn Sie nicht tief in React kompetent sind.

Unter der Haube: Next.js 16 (App Router) + TypeScript, Tailwind CSS 4, Framer Motion für UI- und Seiten-Transitionen, GSAP + ScrollTrigger treiben die signierte Scroll-Sequenz an, Lenis für sanftes Scrollen, und React Hook Form + Zod für die Validierung des Kontaktformulars. Die gesamte Erfahrung respektiert prefers-reduced-motion (GSAP/Lenis entfallen vollständig, Framer-Transitions werden reduziert), ist mit Blick auf Barrierefreiheit aufgebaut (wirklicher Alt-Text, :focus-visible s