Stage

Ein System zur generativen Erstellung eines Entwicklerportfolios

„Meine Code-Projekte, genutzte Technologien, Kenntnisse, Zertifikate, meine Praktika und ein wenig Persönlichkeit. Super einfach. Das Entwicklerportfolio mache ich am Wochenende fertig.” Oft klingen so die Vorsätze der Entwickler, bevor sie sich in die Arbeit stürzen. Ein professionelles Portfolio zu gestalten, entwickeln und pflegen ist ein zeitaufwendiges Unterfangen.

Stage, ein System zur generativen Erstellung eines Portfolios soll Entwickler dabei unterstützen, ihre Erfahrungen und Kenntnisse zu präsentieren und einen Einblick in die Persönlichkeit gewähren.

Generativer Ansatz

Zur Realisierung des Konzepts sind drei wesentliche Bausteine erforderlich: die persönliche Website, der Editor und die APIs.

1. Die persönliche Website, die der Endnutzer als Link zur Verfügung gestellt bekommt, ist “Stage” genannt. Dies ist die öffentlich sichtbare Seite, auf der die Projekte, Qualifikationen und Persönlichkeit des Entwicklers präsentiert werden.

2. Der Backstage genannte Editor ist die Umgebung, in der Entwickler seine Website bearbeiten und die Blöcke hinzufügen, organisieren und editieren können. Hier können Entwickler ihre Projekte und Qualifikationen automatisch aus verschiedenen Quellen wie GitHub, LinkedIn und anderen Plattformen importieren und präsentieren.

3. Die APIs (Application Programming Interfaces) sind die Schnittstellen, über die die Daten importiert werden. Diese APIs ermöglichen es Entwicklern, ihre Projekte und Qualifikationen automatisch aus verschiedenen Quellen wie GitHub, LinkedIn und anderen Plattformen zu importieren und in ihrem Portfolio darzustellen.
   
   

   

Editing Experience

Die Bearbeitung der Blöcke sollte so einfach wie möglich für die User ausfallen. Dabei wurde auf das Prinzip des ‘in-place editing’ gesetzt. Das bedeutet, User können Einstellungen direkt am Objekt vornehmen und nicht in Modalen oder Sidebars. Nebenstehend ist das Editing auf einem Desktop- und Mobile Setup dargestellt. In der Desktopsituation wird ein Hover-State genutzt um die verschiedenen Aktionen, wie Größe ändern oder Löschen, anzubieten. Zusätzlich befindet sich in der Sidebar die Möglichkeit, Blöcke hinzuzufügen, den Websitelink zu kopieren, Analyseservices anzubinden und eine Möglichkeit zu den Websiteeinstellungen zu gelangen. In der mobilen Situation wurde zusätzlich ein Floating Button hinzugefügt, der die Sidebar in der Desktopansicht ersetzt. Dieser Button ist der Call to Action und fordert auf einen Block hinzuzufügen.

Um die Interaktionen mit den Blocken so simpel wie möglich zu halten, wurde eine leicht zu verstehende Layoutengine entwickelt, der ein dreispaltiges System zugrunde liegt. Ein Block hat somit drei verschiedene Größen. Je nachdem welche Größe eingestellt wurde, passt sich die Höhe des Block an den jeweiligen Inhalt an. Es können beliebig viele Blöcke untereinander und nebeneinander platziert werden. Beim Dragging wird mit einer grauen Fläche angezeigt, wo sich der Block beim Loslassen hinbewegen wird, dadurch wird die Interaktion deutlich vereinfacht und schafft einen weiteren Grad an Individualisierung.

Wenn der Nutzer auf das Plus Icon in der Sidebar klickt, so gelangt er in den Block Store. Dieser ist der Ort, an dem alle verfügbaren Blocks zugänglich sind. Durch das Auswählen eines Blocks wird die Authentifizierung der API angestoßen. Für manche APIs werden zusätzlich Parameter, wie User IDs oder Projektnamen benötigt. Diese können vor der Authentifizierung über ein Preferences-Modal, welches dynamisch generiert wird, eingegeben werden. Nach der Authentifizierung wird der Block direkt im Editor mit den Daten des Users angezeigt.