Ich baue mir ein Portfolio

von

Mit WordPress oder anderen Plattformen lassen sich wunderschöne und professionelle Portfolioseiten erstellen. Unzählige Themes und Einstellungsmöglichkeiten im Backend lassen dabei fast keine Wünsche offen. Und trotzdem habe ich mich dagegen entschieden.

Wie kann ich meine Programmierkenntnisse voranbringen, wenn ich sie nicht einsetze? Genau das war mein Gedanke, als ich mit der Planung meines Portfolios begonnen habe. Mit WordPress hätte ich direkt starten können, damit kenne ich mich bereits aus. Dadurch wären mir wohl viele Stunden Arbeit und noch mehr Flucherei erspart geblieben. Aber eine Seite von Grund auf selbst zu programmieren, zu gestalten und genau auf meine Wünschen und Anforderungen anzupassen, hat einfach einen gewissen Reiz.

Nun aber genug gelabert, schaut doch einfach selbst vorbei: michelblind.com

(ash)

Das habe ich dazu benötigt

  • HTML, CSS, JavaScript und PHP
  • Illustrator für das SVG-Logo und die Vektorisierung
  • Photoshop für die Bearbeitung der Projektbilder
  • iPad Pro & Procreate für die gifs und Animationen

So bin ich vorgegangen
Für wen erstelle ich diese Webseite? Mit was arbeite ich überhaupt? Ja, bevor ich mich in die kreative Phase stürzen durfte, gab es zuerst noch so einige Fragen zu klären.

  • Anspruchsgruppe: Arbeitgeber aus dem In- und Ausland
  • Sprache: Englisch
  • Typ: Selbst programmiert
  • Domain: michelblind.com
  • Hosting: Eigener Server
  • Welche Medien: Audio, Video, Bilder, PDF

Der nächste Schritt lag darin Wireframes zu erstellen. Ebenfalls begann ich über ein Designmerkmal nachzudenken, an dem ich die Seite aufziehen möchte. Hier entschied ich mich dafür einen Pixel-Look einfliessen zu lassen. Meine Pixelabbildungen von mir selbst habe ich in Procreate erstellt, animiert und in Illustrator vektorisiert. Mit Mockups habe ich meine Ideen weiter ausgearbeitet und auf die Benutzerfreundlichkeit geprüft.

Für die Webseite kamen HTML, CSS und ein wenig JavaScript zum Einsatz. Ausserdem habe ich mit PHP bewirkt, dass mein Portfolio entflochten und durch Features wie ein Kontaktformular erweitert wird.

Zuletzt galt es noch die Inhalte für den Portfolio-Bereich zu erstellen. Eine aufklappbare Details-Box sorgt dafür, dass auch die Hintergrundinformationen und Rahmenbedingungen der Projekte einsehbar sind.

Das hat mich am meisten Zeit gekostet
Definitiv das Grid so hinzubekommen, dass es sich gut mit den Inhalten verträgt. Die Filterfunktion nach meinen Wünschen anzupassen war ebenfalls eine grosse Herausforderung. Und auch das Mobile-Menü hat enorm viel Geduld von mir abverlangt. Hier musste ich wirklich lange ausprobieren, bis es überhaupt funktionierte.

Das habe ich gelernt
Das ganze Projekt fühlte sich an wie eine Reise durch alle Programmierkenntnisse an, die ich bisher in meinem Studium anwenden musste. Das Durcharbeiten von vielen Tutorials und die Suche nach Antworten auf meine spezifischen Designwünsche haben viele Stunden verschlungen. Doch der Lerneffekt war entsprechend gross: So lösen CSS Grid und Flex bei mir nun kein Kopfzerbrechen mehr aus, ich verstehe ausserdem wie eine Seite semantisch aufgebaut werden soll,  SVG-Icons kann ich selbst erstellen und individualisieren und auch sonst habe ich mein Know-How mit vielen neuen Funktionen im Frontend-Arbeitsprozess gestärkt und erweitert. Schlussendlich kann ich sagen, dass meine Portfolioseite vielleicht nicht so aufpoliert und perfekt wirken mag wie eine, die mit einem fertigen Theme erstellt wurde. Doch ich bin überzeugt, dass diese zusätzliche Arbeit von zukünftigen Arbeitgebenden bestimmt sehr geschätzt wird.

Wie es weiter geht
Nun, ein Portfolio ist nie wirklich abgeschlossen. So werde ich die Seite fortlaufend mit neuen Inhalten erweitern. Ausserdem möchte ich das CSS etwas aufräumen und vielleicht durch SCSS ergänzen. Auch beim Design bin ich schon in den Gedanken von neuen Elementen und Optimierungen des User Interfaces. Dabei habe ich immer die Frage im Kopf: Wie kann ich den Besuchern meiner Portfolio-Seite noch besser in positiver Erinnerung bleiben?