Erstellung dieser Website

in Blick hinter die Kulissen: Wie diese Website mit Hilfe von KI entwickelt wurde

Erstellung dieser Website

Ein Blick hinter die Kulissen: Wie diese Website mit Hilfe von KI entwickelt wurde

Der Original-Prompt

Ich möchte eine neue Webseite für das Startup Gehring.ai erstellen.

Technologisch sollte diese mit PHP erstellt werden. Als Server kommt NGINX mit PHP Erweiterung sowie Authelia für die Authentication zum Einsatz. Ein traefik Reverse Proxy ist der Seite vorgeschaltet. Alles läuft auf Docker.

Die web-Seite sollte einfach aufgebaut sein mit

  • Index.php File welches ein sicheres handling aller Konfigurationen und die validierung der Aufrufe behandelt.
  • Header.php welches ein einfaches Menu mit Home, Services und Login
  • Site.php (mehrere files?) welches den content ausspielt in Abhängigkeit des aufgerufenen menus und ob anonymous oder eingelogged
  • Footer.php mit den klassischen Informationen wie Kontaktaufnahme, etc.

Folgende Acceptance Kriterien sollten berücksichtigt werden:

  • Die Webseite ist unter https://gehring.ai aufrufbar.
  • Authentication ist unter https://gehring.ai/auth
  • Das Login unterscheidet zwischen den Rollen User und Admin. Entsprechen kann auch unterschiedlicher content ausgespielt werden.
  • Im eingeloggten Zustand habe ich unter User ein untermenu zu logout, password und user Profil, welches neben dem Namen auch ein Profilfoto beinhaltet
  • Erstelle je eine Beispiel für eine Person mit der Rolle User und Admin
  • Die Hauptseite sollte einen Text zur Firma beinhalteten welche AI Consulting anbietet. Erstelle hierzu einen Vorschlag
  • Die Seite hat oben links vor dem Firmennamen ein Logo, welches auch als Site Icon zum Einsatz kommt.
  • Das Design soll einfach und klassisch und klar daher kommen. Einige Farbtupfer als Störfarben sind erwünscht.

Erstellte Komponenten

Grundstruktur

Ein modulares PHP-System mit sicherem Routing und Benutzerauthentifizierung.

  • index.php mit Routing-Logik
  • header.php mit Navigation
  • footer.php mit Kontaktdaten
  • Inhaltsseiten für verschiedene Menüpunkte

Design & Branding

Ein klares, modernes Design mit definierter Farbpalette.

  • Logo als SVG
  • Favicon für Browser
  • Responsive Layout
  • Einheitliche Typografie

Benutzerrollen

Unterschiedliche Zugriffsebenen und angepasste Inhalte.

  • Anonyme Besucher
  • Eingeloggte User
  • Administratoren
  • Profilmanagement

Rechtliche Dokumente

Nach Schweizer Recht angepasste rechtliche Seiten.

  • Impressum
  • Datenschutzerklärung

Technische Details

Verwendete Technologien

  • Frontend: HTML5, CSS3
  • Backend: PHP
  • Server: NGINX mit PHP-Erweiterung
  • Authentication: Authelia
  • Reverse Proxy: Traefik
  • Container: Docker

Sicherheitsmaßnahmen

  • Input-Validierung gegen XSS-Angriffe
  • Sichere Authentifizierung via Authentik
  • HTTPS-Verschlüsselung
  • Zugriffskontrolle basierend auf Benutzerrollen