Portfolio 1.0

Im dritten Semester meines Studiums als Multimedia Producer habe ich ein Portfolio erstellt. Mein Ziel war es, alles selber aufzustellen. Dies hat natürlich einige Schwierigkeiten und längen aufgewiesen:

Die Seite des alten Portfolio wird demnächst abgeschaltet oder ist bereits gelöscht. Trotzdem hier ein paar Insights:

Der Aufbau sah folgendermassen aus (Der Aufbau war sehr ähnlich wie im neuen Portfolio):

Alles in allem wirkte es sehr unordentlich. Dies lag daran, dass ich bei den «Kategorien» Texte und Galerie keine Unterseiten machte und mit CSS-Grid arbeitete.

Bei meinen Projekten habe ich mit Unterseiten gearbeitet. Hier habe ich das CSS sehr angepasst, dass einfach das Projekt im Fokus liegt.

Schnell zum Projekt: Ich habe eine Interaktive Geschichte geschrieben mit drei Entscheidungen.
(Falls du Interesse hast, diese Geschichte zu lesen, hier der Link: Interaktive Geschichte)

Zum Code:

Auf HTML und CSS gehe ich nicht ein. PHP habe ich praktisch nur für das Einfügen vom Header und dem Footer auf jeder Seite gebraucht. JavaScript habe ich jedoch benutzt.

Mein Ziel war es die Seite dynamisch zu gestalten und nicht statisch. Glücklicherweise habe ich mich im Semester davor mit Java Script beschäftigt:

Die Auswahl der Entscheidung habe ich somit mit Buttons dargestellt. Diesen habe ich jeweils eine ID zugeweist:

Im JS-Dokument habe ich zuerst die verschiedenen Variablen erstellt, um die Funktion übersichtlicher zu machen:

Die Funktion sieht dann so aus: Diese wurde dann für jeden Button neu erstellt und angepasst.

Als erstes sollt die Funktion ausgeführt werden, wenn man auf den Button klickt. Dabei sollen Folgende Sachen passieren: Die Überschrift des Kapitels soll erscheinen. Danach Soll der Inhalt dieser Version erscheinen. Diese landet in das bereits erstellte div. Die Buttons sollten nicht mehr sichtbar sein und anschliessend sollen die neuen sichtbar werden.

Einen grossen Nachteil hat meine Herangehensweise jedoch. Wenn ich einen Fehler im Text entdeckte, musste ich diesen in den jeweiligen Variablen suchen gehen und diese sind unübersichtlich dargestellt. Vielleicht finde ich irgendwann eine bessere Lösung.