Noch ein Portfolio?

IDEE

Die Idee mein Portfolio zu programmieren hatte ich bereits vor gut zwei Jahren. Jedoch fand ich nie die Zeit dafür beziehungsweise setzte andere Prioritäten, sodass mein Portfolio-Projekt ständig in den Hintergrund rückte. In meinem ersten Semester mit Digezz, setzte ich mir das Ziel, endlich mein Portfolio zu programmieren. Da ich bereits Programmiererfahrung hatte, war für mich klar, dass ich mein Portfolio von Grund auf selbst programmieren möchte. Was mir noch fehlte, war die Idee wie ich die Seite gestalten und aufbauen will.

Ich war immer schon ein Fan von Webseiten, die mit wenigen gestalterischen Elementen und wenig Text auskommen. Die Webseite vom britischen Musikproduzenten Mura Masa finde ich bereits seit Jahren sehr ansprechend. Diese Webseite von Mura Masa diente mir vor allem zu Beginn der Planung als gestalterische Vorlage. Auf Codepen stöberte ich zudem nach weiteren Ideen, die ich eventuell in mein Portfolio einbauen könnte. Ich stiess dabei auf 3D CSS cards. Die Hover-Animationen und verzogene Perspektive der Karten faszinierte mich. Ich übernahm die Idee der Hover-Animationen sowie des Perspektivenwechsels in meine Planung.

UMSETZUNG

Mit einer klassischen HTML Struktur, eingebundenem CSS und JavaScript startete ich das Projekt. Als erstes definierte ich die drei Menü-Punkte («Projekte», «Kontakt» und «über mich»). Ohne gross auf die Gestaltung zu achten, baute ich zuerst mein Portfolio mit den entsprechenden Unterseiten strukturiert auf. Danach startete ich damit die Hover-Animationen und Perspektivenwechsel der Schriften einzubauen. Ich spielte ein wenig damit herum, um zu sehen was für Designs möglich sind. Ich befüllte die Seiten mit weiteren Infos und Content. Die erste Phase, der Entwicklung war somit abgeschlossen, jedoch war ich mit dem Ergebnis noch nicht so zufrieden. Deshalb fragte ich ein paar Freunde, was sie von dem Portfolio halten. Ein Freund schlug mir vor die Schriften etwas grösser zu machen. Dadurch kam ich auf die Idee, dass ganze doch etwas zu übertreiben und die Schriftgrösse viel zu gross einzustellen. Das Portfolio wirkte sofort viel interessanter. Im Anschluss passte ich das ganze Responsive Design an und gestaltete schlussendlich einen Footer. Im Footer verlinkte ich meine Email-Adresse, mein Instagram und LinkedIn-Account.

SELBSTKRITIK

Obwohl ich bereits Programmiererfahrung hatte, musste ich trotzdem vereinzelte einige Kleinigkeiten googlen. Ansonsten kam ich aber mit dem Projekt ziemlich gut vorwärts. Am meisten Probleme hatte ich mit dem Responsive Design. Da meine Schriften in der Perspektive verzogen waren, brauchten sie je nach Position unterschiedlich viel Platz. Dies führte dazu, dass ich plötzlich unschöne Ränder oder Abstände auf meiner Webseite hatte. Nach einer langen «trial and error» Phase konnte ich die Fehler beheben und die Webseite war wieder responsiv.

LEARNINGS & FAZIT

Ich konnte dank diesem Projekt zwei wichtige Sachen für mich mitnehmen. Zum einen habe ich bemerkt, dass der Austausch mit anderen Personen sehr wichtig ist, auch wenn man selbständig an einem Projekt arbeitet. Dieser Austausch hat mir bei diesem Projekt geholfen neue Ideen und Inspirationen für mein Portfolio zu finden. Zum anderen habe ich mir die Zeit genommen ein HTML-, CSS- und JavaScript-Template zu erstellen. Dies hat mir enorm geholfen bei der Programmierung meiner «Projekt»-Seiten. Zudem kann ich mit diesem Template nun in Zukunft sehr einfach weitere Projekte ins Portfolio einbinden.

Ich bin sehr froh, dass ich mir endlich die Zeit genommen habe mein Portfolio zu programmieren. Die Webseite von Grund auf selbst zu programmieren, war aus meiner Sicht die absolut richtige Entscheidung. Mit der Struktur die ich mir aufgebaut habe, bin ich flexibel und kann zu jeder Zeit Änderungen vornehmen.