NextLiving Immobilien – Moderne Website

Die NextLiving Immobilien-Website ist eine moderne, statische Webanwendung für ein Immobilienunternehmen, entwickelt mit Next.js 15, Tailwind CSS und TypeScript.
Ziel des Projekts war es, eine visuell klare, barrierearme und benutzerfreundliche Plattform für Kunden zu schaffen, die auf allen Geräten schnell und zuverlässig funktioniert.

Besonders bemerkenswert:

Dieses Projekt habe ich eigenständig umgesetzt. Es war mein erstes vollumfängliches Webprojekt mit fünf Seiten, komplett statisch aufgebaut ohne CMS das ich ohne jegliche hilfe umgesetzt habe. Alle Inhalte (Texte und Bildpfade) werden aus externen JSON-Dateien geladen, wodurch die Seite leicht erweiterbar und pflegbar bleibt.

---

Komponenten & Umsetzung

• Frameworks & Technologien:
  • Next.js 15 für statisches Rendering (SSG mit getStaticProps).
  • Tailwind CSS für modernes, responsives Styling (Mobile-First).
  • TypeScript mit strikten Regeln (strict: true, noImplicitAny) für saubere Typisierung.
• Strukturierung:
  • Saubere Trennung von Komponenten, Barrel-Exports für components/ui.
  • JSON-Dateien in data/ für Texte und Bildpfade.
  • Getrennte TypeScript-Typen in types/.
• Design:
  • Modern & clean: Sans-Serif-Fonts, Weißraum, 2–3 Primärfarben.
  • Einheitliche Buttons, klare Container-Layouts.
• Barrierefreiheit:
  • Semantische HTML-Struktur (<nav>, <main>, <section>).
  • ARIA-Attribute, sinnvolle Alt-Texte, Labels mit htmlFor.
  • Kontraste ≥ 4.5:1.

---

Herausforderungen & Lösungen

• Responsives Design
  Herausforderung: Einheitliches Layout für Desktop, Tablet und Mobile.
  Lösung: Mobile-First mit Tailwind-Breakpoints, Grids für Listen, Flex für Navigation, kein horizontales Scrollen.

• Responsives Video im Hero
  Herausforderung: Das Hintergrundvideo wurde auf mobilen Geräten abgeschnitten oder verzerrt dargestellt.
  Lösung: Video-Container mit object-cover und festen Höhen (z. B. h-[60svh]), bewusster Beschnitt für kleinere Screens. Zusätzlich isMounted-Check eingebaut, um Hydration-Fehler zu vermeiden. So bleibt das Video auch mobil ansprechend, ohne das Layout zu sprengen.

• Saubere Typisierung
  Herausforderung: Externe JSON-Dateien korrekt typisieren, ohne any.
  Lösung: Eigene Interfaces (z. B. PageData, KontaktformularData) und konsequente Nutzung von as.

• Formulare & Datenschutz (DSGVO)
  Herausforderung: Integration eines sicheren Kontaktformulars (Formspark).
  Lösung: Externe POST-Formulare mit Hidden-Feldern (_redirect, _honeypot), DSGVO-konforme Datenschutzerklärung mit JSON-Struktur.

• Design-Konsistenz
  Herausforderung: Doppelte Rahmen, Abstände und Inkonsistenzen bei kleinen Screens.
  Lösung: Optimierung von Container- und Border-Utilities in Tailwind, gezielte Anpassungen für Mobile.

• Bildintegration
  Herausforderung: Lazy Loading und dynamisches Laden von Bildern aus JSON.
  Lösung: Nutzung von next/image mit priority und loading="lazy"; Platzhalterbilder für fehlende Inhalte.

• Navigation & Usability
  Herausforderung: Mobile Navigation sollte sich auch beim erneuten Tippen auf das Hamburger-Menü schließen.
  Lösung: State-Logik in der Navigation (useState) erweitert, um explizites Schließen zu ermöglichen.

---

Besonderheiten

• Inhalte (Texte, Bilder, Projekte, Datenschutz, Impressum) vollständig aus JSON gesteuert.
• Einheitliches Light-Mode-Design (Darkmode entfernt für bessere Übersichtlichkeit).
• Impressum und Datenschutzerklärung im gleichen Stil wie die restliche Seite.
• Formspark als externe, DSGVO-konforme Lösung für das Kontaktformular.
• Docker-Skripte für Build & Deployment auf IONOS-Webspace.
• Favicon/Icon durch eigenes SVG ersetzt (Konvertierung zu .ico mit ImageMagick).

---