Portfolio v3.0

Die dritte Iteration meines Portfolios!

Die neue Version wurde mit einem komplett anderen Tech-Stack entwickelt als zuvor. Zudem soll das Design möglichst simpel und auf das Nötigste reduziert sein. Das heißt für diese Portfolio-Version folgendes:

• Statische Seiten - generiert durch einen “Static Site Generator” (wie Hexo.io)
• Kein “Schnick-Schnack” (wie “hue-rotate” beim Hover…)
• Keine überladene Startseite (u.a. gut platzierte Bilder und Texte)
• Wenig Farben
• Möglichst keine redundanten Informationen

Im Teaser-Bild oben ist ein Screenshot meines alten Portfolios zu sehen, welches optisch sehr stark von der neuen Version abweicht. Die Grundidee ist jedoch grob die Selbe. Ich habe lediglich die Navigation zu einer “Landing Page” gemacht (prominentes Logo, darunter auf Icons reduzierte Kontakt-Links) und die von Bildern dominierten Projekt-“Banner” zu Bannern gemacht, welche direkt die verwendeten Technologien präsentieren.

Auch in diesem Projekt hat sich zwischen dem ersten Mockup und dem Ergebnis einiges getan.

Das war die ursprüngliche Version und Idee des Portfolios. Es sollte alles sehr eckig sein und die Farben sollten klar herausstechen. Über die Zeit wandelte sich die Vorstellung etwas.

Diese Idee habe ich bis vor kurzem auch noch aktiv verfolgt, fragte mich aber, wofür ich die ganzen Buttons brauche und warum es eine extra Seite rechtfertigen sollte.

Der Lebenslauf findet sich in meinem Xing/LinkedIn Profil wieder, die Profile dienen zudem der Kontaktaufnahme und sowohl dort, als auch in den einzelnen Projekt-Texten erzähle ich genug über mich. Und so verschwanden auch diese Buttons und simple Icons blieben übrig.

Schwierig gestaltete sich die Suche nach geeigneten Icons, die sich gut in dieses Projekt einbinden lassen. Viele Icon-Bibliotheken haben nämlich leider zu wenig Marken-Icons. Die Wahl fiel am Ende auf Simple Icons.

Entwicklung

Ich will im Idealfall problemlos das Portfolio programmatisch bearbeiten können. Zudem sollen die Projekt-Texte in einem einfachen Format vorliegen, sodass man diese notfalls auch mit einem Text-Editor o.ä. bearbeiten kann.

Hexo.io war dafür ideal. Ein Node.JS basierter “Static Site Generator”, der eine einfache Templating Engine (EJS) benutzt und alle Texte aus Markdown-Dateien generiert. Zudem gibt es eine ausreichende Menge Plug-Ins und ein paar Themes, welche man als Vorlage nehmen konnte.

Solche Generatoren sind zwar sehr praktisch, arbeiten allerdings stellenweise im Detail unsauber.

<p>
  <img src="/assets/img/new-portfolio/horizontalconcept.png" alt="Überarbeitetes horizontales Konzept">
</p>

Sowas ist leider unschön. Der <img> Tag wäre vollkommen ausreichend gewesen. Das bläht am Ende zwar etwas das HTML auf, fällt aber zum Glück nicht allzu sehr ins Gewicht, da sich statische Seiten generell sehr schnell laden lassen. Nach nur 11 Anfragen, weniger als 1MB und 0,5 Sekunden ist diese Seite vollständig geladen.

Sonst setze ich natürlich auf Sass/SCSS als CSS-Präprozessor und das NPM Paket scss-compile um mithilfe eines Watchers ad-hoc CSS-Dateien zu generieren. Dazu starte ich per Kommandozeile den Hexo Server und ich kann lokal entwickeln.

Designentscheidungen

In diesem Abschnitt soll es um die Designentscheidungen gehen, die vielleicht etwas ungewohnt sind für ein Portfolio.

Navigation

Auffällig ist die ungewöhnliche Navigation. Es gibt effektiv “keine”. Die Projekte sind nicht untereinander verknüpft und die Startseite verlinkt auf die einzelnen Projekte, meine E-Mail und die relevanten Social Media Profile. Warum?

Zum einen habe ich bei mir beobachtet, dass ich Webseiten-Navigationen selbst eher selten nutze, sondern eher die Seitentasten meiner Maus. Zudem habe ich auch bei anderen beobachtet, dass eher die vor/zurück Pfeile des Browsers genutzt werden als die Navigation. Zum anderen breche ich die Erwartung der Nutzer, die die Webseite bzw. den Browser anders bedienen. Dadurch erhoffe ich mir, dass der Nutzer zumindest durch den Text scrollt um dann am Ende mit einem Home-Button belohnt zu werden.

Außerdem verabscheue ich Webseiten, die die Navigation, vor allem auf Smartphones, oben haben, weil es nie einfach ist den Daumen über das gesamte Display zu strecken um mit Glück den richtigen Button zu treffen. Noch anstrengender wird es bei dem klassischen Hamburger-Menü.

Daher habe ich mich dagegen entschieden und einen leicht zugänglichen Home-Button am Ende und mittig der Seite platziert.

Textlänge

Normalerweise haben Portfolio-Webseiten kaum Text, ich entschied mich jedoch dazu, meine Projekte sehr ausführlich zu beschreiben.

Dadurch will ich eine fehlende “Über mich”-Seite kompensieren, weil ich denke, dass meine Gedankengänge bei einem Projekt, die Begründungen für meine Technologiewahl und meine Vorgehensweise mehr über mich und meine Arbeitsfähigkeit aussagen als eine Seite, welche explizit darauf ausgelegt ist, dass man bestmöglich dasteht. Das ist unnatürlich und und spiegelt kaum meine eigentliche Person wider.

Natürlich kann ich nicht erwarten, dass sich jeder die Texte durchliest, weswegen es den Teaser zu Beginn eines jeden Projekts gibt, damit der Besucher direkt einen Eindruck vom Projekt-Ergebnis bekommt.

Ausblick

Um die Navigation durch den langen Text zu vereinfachen wäre ein “Table of Contents” sicherlich angebracht. Zudem werde ich schauen müssen, ob mir die simple Navigation auch auf Dauer zusagt.

Ein optionaler Dark Mode wäre auch ein schönes “Quality of Life” Feature, damit auch die, die schwarzen Text auf weißem Grund bevorzugen auf ihre Kosten kommen.

Fazit

Insgesamt bin ich sehr zufrieden mit dem finalen Design. Es ist simpel, skalierbar und funktioniert auch ohne eine bestimmte Art von Inhalt (die alte Version konnte nur mit entsprechenden Bildern glänzen).