Portfolio

Etwas kann man nicht aufhalten, die Zeit. Da ich mein Studium im Sommer hoffentlich abschliesse, war es höchste Zeit, eine eigene Portfolio-Website anzulegen. In diesem Beitrag erfährst du mehr über die Entstehung meiner Website.

Ich arbeite schon so lange an dieser Website, dass ich gar nicht mehr weiss, wie der Arbeitsprozess begonnen hat. Auf jeden Fall habe ich damit begonnen, mich von den Websites anderer Filmemacher inspirieren zu lassen. Mir ist sofort aufgefallen, dass alle Websites, die mir gefallen haben, eines gemeinsam hatten: Die Arbeit stand im Fokus. Es gab keine langen, sich selbst beweihräuchernden Texte oder inszenierte Fotos von sich selbst. Nein, Filmstills, Trailer und minimaler Text, mehr nicht. Das eigene Portfolio wird eher als Galerie betrachtet, die die eigenen Werke ausstellt, als ein Verkaufsprospekt, in dem Dienstleistungen angeboten werden. Dieser Ansatz gefiel mir sehr gut und passt auch sehr gut zu meinem Designstil.

Technologien

Da die Website sehr minimalistisch gestaltet ist, habe ich mich gegen ein Figma entschieden und stattdessen meine Ideen mithilfe von Skizzen dargestellt. Trotz des minimalistischen Designs habe ich das Design sorgfältig geplant und konzeptiert. Danach begann ich mit dem Coden und wollte es auch hier so simpel wie möglich halten. Ich nutze nur HTML/CSS und verzichte auf JS, wenn es geht (es geht). Zu meiner Überraschung konnte ich sogar grösstenteils auf Co-Pilot oder ChatGPT verzichten. Das Hosting läuft über Infomaniak, da ich das schon aus dem IM-Unterricht kenne.

Aufbau

Der Aufbau der Website ist sehr einfach. Auf der Startseite werden sofort meine Projekte angezeigt. Warum gibt es keine eigene Projekte-Seite? Weil meiner Meinung nach das Wichtigste auf die Startseite gehört. Und das Wichtigste sind nun mal meine Projekte und nicht Texte darüber, wer ich bin oder was ich schon für grossartige Sachen gemacht habe. „Show, don’t tell”, wie beim Filmemachen eben auch.  Wenn man mit der Maus über die Thumbnails fährt, erscheint der Titel des Films. Wenn man daraufklickt, gelangt man zur jeweiligen Projektseite. Der Aufbau dieser Seite ist für jeden Film gleich, nur die Galerien sind unterschiedlich. Auf der linken Seite befinden sich die wichtigsten Informationen zum Film und auf der rechten Seite ist ein Titelbild zu sehen. Darunter findet man auf jeder Seite eine Galerie mit Filmstills. Je nach Film variiert die Anzahl der Stills.

KI

Anders als im IM-Unterricht wurde dieses Projekt nicht von Co-Pilot und ChatGPT getragen. Ich bin mir sicher, dass man diese Website mit den richtigen Prompts problemlos mit ChatGPT hätte erstellen können. Ich habe es nicht getan. Warum? Ehrlich gesagt, weil mir das Programmieren sogar ein bisschen Spass gemacht hat. Wofür ich dann aber ChatGPT benutzt habe, waren die Galerien: Ich habe eine Anordnung auf Papier skizziert und dann ChatGPT den Code für das CSS-Grid erstellen lassen. Das hat sehr gut funktioniert und mir einiges an logischem Denken abgenommen, sodass ich mich ganz aufs Visuelle konzentrieren konnte. Zudem habe ich ChatGPT genutzt, um die Website anschliessend einigermassen responsiv zu machen. Ich habe die Website nach dem Prinzip „Desktop first“ programmiert, dann ein paar Breakpoints definiert und diese anschliessend in ChatGPT eingegeben, um mir die Media Queries generieren zu lassen. Auch das hat gut funktioniert. Hier musste ich den Code allerdings noch etwas anpassen, damit alles so aussieht, wie ich es mir vorgestellt habe.

(vha)