.. und wie mein innerer Schweinehund aufwachte.
Dass ich mal hier sitze und einen Text darüber schreibe, wie ich meine eigene Portfolio Website programmiert habe, hätte ich im Leben nicht gedacht. Aber hier bin ich: mit einigen Haaren weniger – aber mächtig stolz!
Mein Beitragsbild beschreibt meine Gefühle ganz gut, welche ich nach meinem ersten Semester und zwei ungenügenden Prüfungen gegenüber den Interaktiven Medien hatte. Irgendwo in meinem Kopf war ein Knoten, der sich nicht zu lösen schien und mich nervte. Doch als ich anfing, etwas Sinnvolles zu programmieren, war er plötzlich da, mein innerer Schweinehund, der aufwachte und es mit diesem HTML, CSS und JavaScript aufnehmen wollte. Zirka so und mit viel Gefluche entstand mein Onlineportfolio, dass mich nun mit Freude erfüllt, mir nützlich ist und mich dieser neuen Welt des Programmierens ein Stückchen näher brachte.
Aber seht selbst: Isabelle von Roten (claudestark.ch)
Viel Spass!
(bas)
Idee & Motivation
Anfangs wollte ich unbedingt einen eigenen Podcast aufnehmen, für den ich sogar schon ein Konzept schrieb. Doch nach der ersten Blockwoche der Interaktiven Medien wusste ich, dass ich unbedingt programmieren musste. Es ging dabei weniger um Freude, als dass ich dieses Coding endlich verstehen und anwenden wollte. Also war meine zweite Digezz-Idee ein Spiel, welches ich mit JavaScript codieren wollte. Doch weiter als zum Titel und zum Menü schaffte ich es nicht. Ich hatte absolut keine Lust darauf. Also ging ich in die Recherche, sah mir moderne Designs von Webseiten an und stiess schliesslich auf verschiedene Online-Portfolios. Das wollte ich machen! Ein eigenes Portfolio bereits im zweiten Semester anzulegen ist nämlich nicht nur sinnvoll, sondern auch etwas, was ich wirklich brauchen kann für Bewerbungen. Und sobald ich mich für diese Idee entschied, war ich im Flow und hatte plötzlich jede Menge Freunde und Motivation zu coden.
Umsetzung & Herausforderungen
Auch wenn die Empfehlung lautet «Mobile First», habe ich mit der Desktop-Version angefangen. Vermutlich, weil ich somit schon meine Design-Ideen umsetzen konnte. Ich wollte versuchen, mit nur einem HTML-File zu arbeiten und die Unterseiten nicht separat zu coden. YouTube und Google brachten mich schliesslich auf die Lösung und so baute ich mir meine Struktur mit HTML, CSS und JavaScript Schritt für Schritt auf. Auf den Effekt der Verzögerung bin ich besonders stolz, diesen habe ich mit «transition» im CSS eingebaut. Für mich bringen die smoothen Übergänge einen modernen und lebendigen Touch in die Webseite.
Die Startseite stand relativ schnell. Bei der Projektseite habe ich mich dann für einen Blur-Effekt entschieden, da ich dem ganzen etwas Besonderes verleihen wollte. Ursprünglich war meine Idee, dass ich die animierten GIFs sowie das Video in einem separaten, kleineren Fenster direkt auf der Website abspielen wollte. Hier stiess ich jedoch an meine Grenzen und beliess es schliesslich dabei, den Button auf externe Webseiten zu verlinken, auf denen ich die Projekte hochgeladen hatte. Die «Über mich»-Seite war die grösste Herausforderung. Vor allem bei den Fähigkeiten habe ich Stunden damit verbracht, die richtigen Farben, Grössen und Formen auszuwählen. Auch die Zeitleiste mit den Berufserfahrungen sowie der Schulbildung nahm einige Zeit in Anspruch. Ich habe das Design gefühlt 100-mal wieder verändert. Dass die olivgrünen Felder nun abwechselnd rechts und links durch eine gestrichelte Linie dastehen, habe ich Feedbacks von Freunden und der Familie zu verdanken, die ich um ihre Meinung bat. Die Kontaktseite füllte ich ursprünglich mit einem Kontaktformular und einer Standort-Map. Das Absenden des Formulars wäre jedoch nur eine Attrappe gewesen, da für die Verknüpfung PHP nötig wäre. Nick hat mir dann im Coaching empfohlen, einfach einen netten Text zu verfassen. Denn mir war es wichtig, dass ich die Website direkt in Gebrauch nehmen kann und keine Attrappen vorhanden sind. Ganz am Ende fiel mir auf, dass ich noch einen Footer brauchte. Hier wollte ich eigentlich, wie auch auf der Kontaktseite, meine Socialmedia-Kanäle verlinken. Leider fand ich nicht heraus, wie ich die Icons auf allen Seiten ausser der Kontaktseite (da sich dies verdoppelt hätte) anzeigen lassen kann. Somit entschied ich mich schliesslich, diese wegzulassen.
Dass ich nach Aufbau der Desktopversion «nur noch schnell» die Mobileversion programmieren musste, war ein Fehlgedanke. Mein Code war absolut nicht responsive. Zuerst versuchte ich, die meisten Werte meines bestehenden CSS-Codes in Prozentangaben umzuwandeln, da ich dachte, dass ich dann die Mobileversion schneller fertig hätte. Doch nach zwei Tagen gab ich auf. Schliesslich machte ich einen «Media Screen» Abschnitt und passte Zeile für Zeile den Code mit Werten an, die für die Mobileversion passten. Am Ende habe ich nun 800 Zeilen CSS-Code der sowohl in der Mobile- als auch in der Desktopversion funktioniert. Halleluja!
Learnings:
Rückblickend muss ich mir eingestehen, dass ich vor allem den Aufwand der Desktop- zur Mobileversion unterschätzt habe. Fürs nächste Mal würde ich dies definitiv früher beachten und mit Werten arbeiten, die responsive sind, beispielsweise statt Pixel mit Prozent. Dadurch gibt es bei der Mobileversion sicherlich noch viel Verbesserungspotenzial. Beispielsweise hätte ich es gerne geschafft, dass die Projekte durch das Anklicken der einzelnen Bilder erscheinen würden und somit der Button wegfällt. Wobei ich dann an der Usability arbeiten müsste. Auch das vorhin erwähnte Problem mit den GIFs und Videos werde ich sicherlich im Verlaufe des Studiums noch in Angriff nehmen können, wenn ich mehr übers Programmieren gelernt habe. Trotzdem habe ich durch meine Arbeit gesehen, dass es 100 Wege gibt, ein Problem zu lösen und das Internet meistens weiterhelfen kann.
Abschliessend kann ich jedenfalls sagen, dass ich mich für ein Programmierprojekt entschieden habe, war definitiv das Richtige. Auch wenn coden als Anfänger:in sicherlich viel Zeit und Nerven in Anspruch nimmt, hat sich dies gelohnt. Ich habe enorm viel gelernt und nun ein Produkt, auf das ich unglaublich stolz bin. Ausserdem habe ich nun endlich ein Erfolgsgefühl, welches ich mit den Interaktiven Medien verbinde.