Umsetzung
Nachdem ich bereits im letzten Semester eine Website gemacht hatte, habe ich mir für ein Portfolio ein höheres Ziel gesetzt. Ich wollte von null an alles selbst bauen, ohne mich auf ein Framework zu verlassen. Das habe ich beinahe geschafft.
Zu aller erst habe ich mir Gedanken darüber gemacht, was alles auf der Website zu finden sein sollte: In meinem Portfolio wollte ich möglichst alle Aspekte meiner Fähigkeiten aufzeigen. Deshalb habe ich mir zuerst überlegt, welche Kategorien sinnvoll sein könnten. Danach habe ich mich dem Design gewidmet. Das Logo hat sich aus meinen Initialen ergeben: «LZ». Dann kam ich auf die Idee mit dem Header-Video und dem animierten Logo. Daraus ergab sich dann das Website-Design mit der Linie in der Mitte.
Hier dran bin ich beinahe verzweifelt: Wie macht man eine vertikale Linie mit HTML? Wie platziert man sie in der Mitte? Kann ich die Linie am Video orientieren? Und das schwierigste von allem: wie kann ich die Länge (oder besser: Höhe) der Linie der Höhe des Inhalts anpassen? Die ersten drei Sachen hatte ich relativ schnell zusammengebastelt. Die Höhe der Linie habe ich zuerst mit gefühlten hundert Media Queries angepasst. Nahtlos funktioniert hat das leider nie. Bis ich auf die Idee der Borders kam: Die Kategorien im Index befinden sich alle je in einer Box, mit leeren Boxen dazwischen um das «Schachbrett-Muster» zu erstellen. Ich musste nur noch eine Class erstellen und die Boxen auf der linken bzw. rechten Seite einordnen. Wenn die Seite nun verkleinert wird, erstrecken sich die Boxen über die ganze Breite und die leeren verschwinden. Aber die Borders bleiben, was ich zuerst zwar nicht wollte, visuell aber wirklich cool fand.
Eine Navigation hätte ich schnell selbst bauen können. Aber so, dass sie auch ins Design der Website passt? Da musste ich etwas mehr über Menüs auf Websiten recherchieren und bin prompt über eine schöne Vorlage von w3.css gestolpert. Das ist genau der Grund, weshalb die Website nicht 100% von mir selbst gemacht wurde: Die Navigation habe ich von dort übernommen. Bereue ich es? Nö, denn es passt super zum Rest und hier konnte ich mir etwas Zeit ersparen, die dann bei anderen Challenges drauf ging.
Als einen weiteren Steigerungsfaktor und Challenge für mich selbst, wollte ich ein php-Kontaktformular mit einer E-Mail-Verknüpfung erstellen. Offensichtlich musste ich das aufgeben und habe es durch einen E-Mail-Link ersetzt. Ich hatte nicht nur Probleme mit dem Bau des Formulars und einer winzigen JS-Animation (sehr cool ausgesehen hätte sie, allerdings nie an dem Ort blieb wo sie sollte), sondern auch daran, dass ich PHP unterschätzte. Ich fing bereits vor Semesterbeginn damit an und habe versucht mir PHP selbst beizubringen. Nicht so erfolgreich. Leider haben mich die Vorlesung während des Semesters auch nicht näher an ein funktionierendes PHP-Formular mit der E-Mail-Verknüpfung gebracht. Schlussendlich musste ich es aus Zeitgründen aufgeben.
Fazit
Dies waren nur einige der Probleme, die ich während des Arbeitsprozesses lösen musste. Alles in allem ist es ein Projekt, das nie wirklich fertig ist. Es gibt auch jetzt noch dutzende Dinge, die ich gerne optimieren und ergänzen möchte (Kontaktformular!). Dennoch bin ich mit dem jetzigen Ergebnis zufrieden. Ich habe mich herausgefordert und nun etwas erschaffen, das mich auch repräsentiert.
