Zurück zu den Artikeln

Das Spotlight Portfolio im Aufbau

Ein Rückblick auf drei intensive Entwicklungssessions: ein neuer Leistungsbereich, überarbeitete Projektseiten mit Fallstudie-Feldern, eine Studio-Komponentenbibliothek und ein vollständiges Kontaktformular mit Captcha und E-Mail-Benachrichtigungen.

Devlog: Das Spotlight Portfolio im Aufbau — April/Mai 2026

In den letzten drei Tagen habe ich einen großen Teil der geplanten Features für diese Website umgesetzt. Dieser Beitrag fasst zusammen, was gebaut wurde, warum — und was als Nächstes kommt.

v0.3.0 — Leistungen und eine überarbeitete Projektseite

Der erste Meilenstein war die Einführung eines Leistungsbereichs. Ich wollte einen klaren Weg schaffen, potenziellen Kunden zu vermitteln, was ich konkret anbiete — nicht nur eine Liste vergangener Projekte, sondern eine Beschreibung der Arten von Engagements, die ich eingehe. Das Ergebnis ist eine neue Service-Entität mit vollständigem Admin-CRUD, gesichert durch ein LiveView und in PostgreSQL gespeichert.

Gleichzeitig wurde die Projektseite grundlegend verbessert. Jedes Projekt kann jetzt vollständige Fallstudien-Inhalte enthalten: eine Beschreibung der Herausforderung, den Lösungsansatz und dokumentierte Ergebnisse. Diese Felder sind optional, sodass bestehende Projekte weiterhin funktionieren, aber für zentrale Fallstudien ermöglichen sie eine echte Geschichte statt nur eines Titels mit Screenshot.

Die Admin-Oberfläche für Projekte wurde entsprechend erweitert — längere Texte werden über den neuen Markdown-Editor gepflegt (dazu gleich mehr).

v0.4.0 — Site-Refactoring, Studio-Komponenten und das Kontaktformular

Das war die umfangreichere Session. Vieles kam hier zusammen.

Studio-Komponentenbibliothek

Ich habe eine Reihe wiederverwendbarer Phoenix-Komponenten in einen studio/-Namespace extrahiert. Diese sind speziell für die öffentlich zugänglichen Seiten konzipiert und orientieren sich eng an den Layout-Mustern aus dem Tailwind Plus Spotlight-Design:

  • page_intro — Hero-Einleitungen mit Titel und Einleitungstext
  • section_intro — Abschnittsüberschriften mit optionaler Beschreibung
  • grid_list — flexible Grid-Layouts für Projekte, Leistungen und ähnliche Sammlungen
  • content_list — vertikale Listen für Artikel und strukturierten Inhalt
  • stat_list — Kennzahlen und wichtige Metriken
  • tag_list — inline Tag-/Badge-Sammlungen
  • border — dezente horizontale Trennlinien

Mit diesen Phoenix-Komponenten werden die Templates sauber und konsistent. Eine visuelle Änderung an einem Muster bedeutet jetzt das Bearbeiten einer einzigen Komponente — nicht mehr das Durchsuchen aller Templates.

Markdown-Editor

Der Admin nutzte bisher einfache Textfelder für längere Inhalte. Ich habe eine vollwertige Markdown-Editor-Komponente gebaut — SpotlightWeb.Admin.MarkdownEditor, eine Phoenix-Komponente, die durch einen LiveView-JavaScript-Hook unterstützt wird. Sie bietet eine Split-Pane-Vorschau, Toolbar-Shortcuts und Live-Rendering der Markdown-Ausgabe. Der Editor ist mit der bestehenden Earmark-Pipeline verbunden, sodass die Vorschau im Admin exakt dem entspricht, was auf der öffentlichen Seite angezeigt wird.

Kontaktseite und E-Mail-Benachrichtigungen

Die Website hat jetzt eine funktionierende Kontaktseite. Das Formular ist durch eine hCaptcha-Integration (via Spotlight.Captcha) geschützt, und bei erfolgreicher Übermittlung wird eine E-Mail über das Modul Spotlight.ContactNotifier mit Swoosh versendet. Die Seite selbst wurde vollständig in Phoenix-Templates neu aufgebaut und ersetzt einen bisherigen Platzhalter.

Profil-CTA-Felder

Profile haben zwei neue Felder erhalten: einen Call-to-Action-Text und eine zugehörige URL. Diese werden auf der Startseite angezeigt und ermöglichen es, Besucher gezielt zu einer bestimmten Aktion zu führen — ob zum Buchen eines Gesprächs, zum Herunterladen des Lebenslaufs oder zum Lesen einer bestimmten Seite.

Admin-QoL-Verbesserungen

Quer durch die Admin-LiveViews gab es viele Feinschliffe: bessere Formularlayouts, konsequente Nutzung von admin_form_container, verbessertes Validierungsfeedback und Korrekturen der Translation-Group-IDs, die den zweisprachigen Admin-Workflow beeinträchtigten.

v0.4.1 — Seeds-Bereinigung und neue Content-Strategie

Die letzte Session war kürzer, aber strategisch wichtig. Die Seeds-Datei war auf fast 2000 Zeilen generierter Artikel- und Projektinhalte angewachsen. Diese Inhalte gehören nicht in Seeds — Seeds sind für strukturelle Demo-Daten, nicht für längere Fachtexte.

Dieser Artikel ist der erste, der nach diesem neuen Workflow entstanden ist.

Gebaut mit Phoenix 1.8, LiveView, Ecto, Tailwind CSS und PostgreSQL. Deployed auf einem VPS mit Docker und Caddy.