Mein Portfolio
Geschafft! Ich habe die Herausforderung gemeistert und mein erstes eigenes Portfolio gestaltet und programmiert.
In diesem Semester habe ich für Digezz ein Portfolio erstellt, dass sowohl meine Persönlichkeit als auch meine Designvorstellungen widerspiegelt. Mein Ziel war es, eine Website zu erstellen, die nicht nur funktional ist, sondern auch authentisch zu mir passt und meine individuellen Fähigkeiten und meine Kreativität hervorhebt. Dabei habe ich mich bewusst dafür entschieden, die Website selbst zu programmieren und nicht auf vorgefertigte CMS wie WordPress oder Wix zurückzugreifen. Die Hilfe von ChatGPT war dabei eine grosse Unterstützung. Die KI hat mir geholfen, einzelne Codes zu verstehen, umzusetzen und meine Animationen zu realisieren.
Das Portfolio ist hier verlinkt: mein portfolio
Moodboard: Um meine Ideen zu strukturieren und visuell darzustellen, sammelte ich sie, entschied mich für eine Richtung und fasste sie schliesslich in einem Moodboard zusammen.
Screendesign: Das Screendesign habe ich in Figma erstellt und anhand dessen mein Portfolio programmiert. (Hier ist der Link zum Screendesign)
(eli)
Vorgehen:
Als ersten Schritt habe ich Ideen gesammelt, wie mein Portfolio aussehen könnte und diese in einem Moodboard festgehalten. Danach habe ich mit dem Wireframe und dem Screendesign begonnen. Es dauerte eine Weile, bis ich mit dem Design zufrieden war, da ich viele Ideen hatte und mehrere Versionen des Screendesigns erstellte. Auch die Erstellung der verschiedenen Charaktere dauerte eine Weile, da ich sie in Illustrator erstellte und nicht mit allen zufrieden war, weshalb ich einige noch einmal überarbeiten musste, bis sie mir gefielen. Der nächste Schritt war die Programmierung des Portfolios, was der aufwendigste Teil des Projekts war und mich viel Zeit und Nerven gekostet hat. Ich begann mit dem Einbinden der SVGs und deren Animationen, die leider nicht immer funktionierten. Danach widmete ich mich dem Grundgerüst der Website, dem Styling und schliesslich dem Responsive Design.
Probleme:
Natürlich gab es auch Schwierigkeiten, sonst wäre es ja langweilig. Leider bin ich kein Programmierprofi, also brauchte ich viel Koffein, Zeit und Geduld. Meine erste Idee war, alle Figuren mit JavaScript zu animieren, was sich als schwieriger herausstellte als gedacht. Die SVG-Datei des Baumes mit den verschiedenen Figuren bestand aus vielen einzelnen Pfaden. Diese in separate Klassen zu legen war kompliziert und unübersichtlich. Trotz grosser Anstrengungen gelang es mir nicht, die Animationen wie gewünscht umzusetzen. Es ist mir aber gelungen, jeder Figur im Baum einen Hover-Effekt zuzuweisen, so dass der Benutzer die Figuren auf den Ästen und die dazugehörigen kleinen Texte selbst einfärben kann. Diese Hover-Effekte habe ich mit JavaScript realisiert. Ein weiteres Problem waren die Augen des Gesichts auf der Startseite, die dem Mauszeiger folgen sollten. Es hat einige Zeit gedauert, dies umzusetzen. Mein drittes Problem war das Responsive Design, das wie immer viel Zeit in Anspruch nahm und mehrere Anläufe brauchte. Am schwierigsten war es, den Lebenslauf auf verschiedenen Bildschirmgrössen darzustellen.
Learnings:
Das Projekt hat mir die Möglichkeit gegeben, viele neue Dinge zu lernen. Ich erlernte die Verwendung von JavaScript-Funktionen für Animationen, was ich vorher nicht konnte. Ausserdem habe ich die Nutzung von CSS-Keyframes angewendet, um SVGs zu animieren. Dieses Projekt hat nicht nur meine kreativen Möglichkeiten erweitert, sondern auch meine technischen Fähigkeiten erheblich verbessert. Ich bin stolz auf dieses Ergebnis. Es gibt aber noch kleine Überarbeitungspunkte, die ich im weiteren Verfahren angehen werde, um mich mit dem Portfolio bewerben zu können.