noahe.ch – Digital Portfolio
Der Wunsch nach einem persönlichen Portfolio schwirrte schon seit einiger Zeit in meinem Kopf umher. In diesem Semester war die Zeit nun reif. Mit dem Anspruch, meine zukünftigen Bewerbungen mit dieser digitalen Visitenkarte zu ergänzen, machte ich mich an die Arbeit.
Nachdem ich mich in der Konzeption noch auf bekanntem Terrain bewegte, fand ich mich ziemlich schnell in den scheinbar endlosen Weiten der Webentwicklung wieder. Aus vorherigen Semestern darf ich schon auf ein wenig Erfahrung in der Webentwicklung zurückgreifen. Der Entschluss, mich diesmal an Vue.js zu versuchen schickte mich aber in eine mir praktisch unbekannte Welt.
Mit viel Ausdauer und Geduld, liessen sich aber auch in dieser exotisch scheinenden Umgebung Wege finden. Obwohl ich noch lange nicht all meine Ideen umsetzen konnte, bin ich stolz, mein erstes digitales Portfolio präsentieren zu dürfen: noahe.ch
(mou)
Idee
Wie im Beitragstext bereits erwähnt, bestand schon länger das Bedürfniss nach einem persönlichen Portfolio. Gerade im Hinblick auf Bewerbungen für ein Praktikum schien es mir am sinnvollsten, meine bisherigen Arbeiten auf diese Weise zu präsentieren. Es war mir dabei von Anfang an klar, dass ich dieses Porfolio selbst programmieren möchte. In erster Linie, weil für mich das Portfolio selbst mit am aussagekräftigsten ist wenn es darum geht, die Person hinter den Projekten zu verstehen.
Prototyp
Um mich beim Programmieren möglichst wenig von Designfragen ablenken zu lassen, habe ich einen Prototypen in Adobe XD erstellt.
Programmierung
In vergangenen Webprojekten habe ich mich jeweils mit reinem HTML, CSS und JS begnügt. Ich habe zwar schon mehrfach JS Libraries eingebunden, den Schritt zu einem Framework war mir bisher aber zu gross. Für mein Portfolio sollte es nun aber so weit sein und ich habe mich daran gewagt dieses mit Vue.js umzusetzen.
Fliegende Buchstaben
Die Idee, Buchstaben über den Bildschirm fliegen zu lassen ist aus einer UX Perspektive wohl eher fraglich. Um meinem Portfolio aber eine gewisse Eigenständigkeit zu geben gefiel sie mir. Da ich eine ziemlich genaue Vorstellung hatte wie sich die Buchstaben zu verhalten haben, war es alles andere als ein Kinderspiel dies auch in Code umzumünzen. Ein wenig Mathematik aus meiner Lehre und viel trial and error brachten mich aber zum gewünschten Ergebniss.
Vue.js
Npm, node.js, Vue-cli, router, etc. Die Liste mit neuen Begriffen wäre wohl endlos. Dank Dokumentation, Tutorials und viel debugging, kann ich nun behaupten, meine Webseite mit Vue entwickelt zu haben. Vermutlich gibt es noch sehr viel Luft nach oben und mein Code könnte an so mancher Stelle optimiert werden. Für mich wichtiger war aber in diesem Projekt, ein Verständnis für Frameworks, speziell Vue, zu erlangen. Die investierten Stunden sollten sich dann auch insofern als lohnend erweisen, als dass meine Webseite funktioniert und meinen ersten Anforderungen entspricht.
Headless CMS (Contentful)
Obwohl ein neues Thema schon mehr als genug war, kam ich nicht von der Idee ab, meinen Content in einem Headless CMS verwalten zu können. Nach einigen mehr oder weniger erfolgreichen Versuchen mit unterschiedlichen Systemen, bin ich auf Contentful gestossen. Mit der Möglichkeit meine Inhalte sauber zu erfassen und diese einigermassen einfach mit meiner Webseite zu verknüpfen, ergab sich dieses Tool als die beste Lösung.
Fazit
Ein Projekt das eigentlich nie so gross werden sollte, zog mich voll in seinen Bann. Obwohl ich nun ein funktionierendes Portfolio besitze, habe ich wohl nicht viel mehr als an der Oberfläche von Vue gekratzt. Ich bin zufrieden mit dem Resultat, habe aber noch genügend Pläne wie das Portfolio weiter ausgebaut werden könnte.