Portfolio – VERSUCH 1

von

Weil es sich als MMP Studi gehört: hier mein Portfolio als Digezz-Projekt.

Hier die Website: https://christelainahayoz.inexomit.myhostpoint.ch/

Mehr als ein Papierchen

Das Bachelordiplom als Media Engineer Bsc reicht allein nicht, erst sobald das Gelernte gezeigt wird. Darum habe ich es mir als Ziel gesetzt die erste Version einer Portfolio-Website ins Leben zu rufen. Betonung auf ERSTE VERSION!! Nebenbei sollen auch die IM-Basics (HTML, CSS und JS) aus dem 1. und 2. Semester gefestigt werden, da ich vor dem Studium damit noch nichts am Hut hatte.

1 Wozu das Ganze? Und für wen?

Ich habe eine Liste gemacht mit der Schnittmenge aus dem, was ich vor dem Studium gemacht habe, im Studium umgesetzt habe und was ich wirklich gerne mache. Der erste Stolperstein: Ich habe nicht viel vorzuweisen.

Wozu dient das Portfolio? Welche Kundschaft will ich ansprechen? Die Antwort: Ich will offen bleiben für verschiedene Bereiche der Produktion, und das soll man sehen. Nicht clean, sondern einfach, spielerisch und unkonventionell.

2 Design ohne Inspiration

Das Design sollte möglichst simpel sein: wenig Farben und ein einfacher, untypischer Aufbau. Darum gab es auch kein Moodboard, sondern ich bin einfach drauflos. Dafür sollte der Header auffällig, aber simpel sein, und an dem habe ich lange rumgetüftelt. Ausserdem wollte ich die Kritik aus dem Modul Mediengestaltung beherzigen: Ich tendiere dazu, die Bildsprache nicht konstant zu halten. Deshalb habe ich das Design nochmals angepasst. Das 4:2-Grid (skalierbar auf 2:1) sollte sich im gesamten Design widerspiegeln, was bedeutete, dass ich mir gut überlegen musste, wie ich den CV-Part umsetze.

Das Design war zwischendurch frustrierend, und ich bin nicht mehr weitergekommen. Darum habe ich schnell mal die ersten Zeilen Code geschrieben und bin dann wieder zum Design zurückgekehrt, sobald ich vom Code überfordert war.

3 Umsetzung, Umplanung, Verzweiflung

Vieles aus den ersten Semestern musste ich mir neu beibringen (w3schools war mein treuer Begleiter), und der Einstieg fiel mir schwer: Wo anfangen, wie Struktur finden? Mitten im Coden merkte ich, dass viele kleine Konzertfotos nicht sinnvoll sind und eine Slideshow mehr Sinn macht. Also zurück ins Figma, neues Design, Code neu denken, Code löschen, alles nochmals schreiben, das etwa dreimal pro Session. Darum hat dieser Teil ca. 25h gedauert.

CSS war mein Erzfeind: Ich verstehe viele Abhängigkeiten nicht und habe stundenlang im Browser unter «Untersuchen» verbracht. Copilot half, führte aber zu noch mehr Debugging. Für JS habe ich Claude als Erklärhilfe genutzt. Dazu kamen Hosting-Probleme (nicht richtig verknüpft, Live Server funktionierte oft nicht), sodass ich bei Fehlern nie wusste, ob es am Code, an den Pfaden oder am Deployment lag.

(mmi)

Aus meiner Sicht ein enttäuschendes Zwischenresultat, nicht nur bei der Website, sondern auch beim Inhalt: Ich habe mir zu wenig Gedanken zur Kundschaft gemacht und fühle mich noch nicht ganz sicher in der Produktion multimedialer Inhalte. Trotz 33h blieb das Ergebnis hinter meinen Erwartungen zurück.

Was ich anders machen würde:

  • Konzept vor dem Coden testen: UI/UX-Skizze oder Prototyp hätten mir die Neuschreib-Schleifen erspart. Dass eine Slideshow mehr Sinn macht als viele kleine Fotos, hätte ich schon vor dem Code merken können.
  • Mobile first statt Desktop: Ich habe das Layout für Desktop gebaut und Mobile nicht von Anfang an mitgedacht. Das hat das Layout-Fixen zusätzlich erschwert.
  • Hosting früh aufsetzen und mit einer leeren Seite testen.
  • KI gezielter nutzen: Für JS hat mir Claude als Erklärhilfe gut geholfen. Bei CSS hat Copilot-Code das Debugging erschwert, weil ich ihn nicht durchblickt habe. Nächstes Mal verstehe ich das Layout zuerst selbst.
  • Früher testen und mehr Zeitpuffer: Ich dachte, am Abgabetag genug Zeit zum Debuggen zu haben. Das hat nicht gereicht.

Weil das Projekt so mit meiner eigenen Person verwoben ist, habe ich viel hinterfragt, was alles verzögert hat. Motivation und Selbstvertrauen sind Richtung Abgabe gesunken.

Fürs nächste Mal: Ich akzeptiere, dass Code schreiben nicht meine Stärke ist, und gehe es entsprechend an: erst auf Papier planen, mobile first denken und weniger grübeln. Ich muss das Rad nicht neu erfinden, es gibt genug gute Websites mit ähnlichem Aufbau, an denen ich mich orientieren kann. Immerhin habe ich jetzt eine Erstfassung, die ich anpassen und in anderem Kontext wiederverwenden kann.