Wer hätte es gedacht? Another Portfolio

Inspiration

Wie bereits andere vor mir, kamen einige auf die Idee eine Portfolio-Webseite zu kreieren. Ich habe mich von ihnen inspirieren lassen und deshalb versucht eine selbstgecodete Website zu entwickeln.

Ich bin ein Fan von Dark themes und habe darum meinen Laptop auch in dunkleren Tönen eingestellt. Aus diesem Grund wollte ich aber, dass meine Portfolio-Webseite auch ein Dark theme hat. Zusätzlich fand ich die Idee spannend, einen Schalter zu integrieren, mit dem man auf ein Light mode wechseln kann.

Nachdem ich mir dutzende Portfolios als Beispiele angeschaut habe und im Internet über Möglichkeiten zur Webseitenprogrammierung recherchiert habe, machte ich mich ans Werk.

 

Umsetzung

Als Erstes erstellen wir ein neues Projekt im Visual Code Studio. In meinem Fall heisst es «Mein Portfolio».

In dem Projektordner erstellen wir eine index.html-Datei und einen styles-Ordner für die styles.css-Datei.

Bevor wir anfangen zu stylen, brauchen wir zuerst Inhalt. Dafür gehen wir ins index.html. Dort nutze ich die html-Vorlage, die mir Visual Code Studio beim Tippen von «html» in die erste Zeile, vorschlägt. Hier drin verlinke ich das styles.css-Datei: <link rel=»stylesheet» href=»styles/styles.css»>

Ich suchte auf Google Fonts nach geeigneten Schriften und entschied mich für Noto Sans. Dafür verlinkte ich den Code-Schnipsel, den Google Fonts zur Verfügung stellt.

Im Body können wir die Bausteine für die Unterseiten wie Portfolio oder Kontakt setzen. Dafür erstellen wir div-Tags und versehen sie mit Klassen. Auf meiner Webseite gibt es vier sections. Jede Sektion verfügt über den entsprechenden Inhalt der Unterseite.

SCSS

Als nächstes kreieren wir im styles-Ordner eine styles.scss. Ich habe bewusst mich für Sassy Cascading Style Sheets (SCSS) entschieden, weil es damit einfacher und schneller geht, der Webseite Gestalt zu verleihen. Ich sehe den grossen Vorteil in SCSS darin, dass Verschachtelungen möglich sind. Das heisst, man kann zum Beispiel Klassen in Klassen ansprechen und hat dadurch eine übersichtlichere Darstellung. Auch fiel es mir leichter so Überarbeitungen vorzunehmen.

Damit die styles.scss-Datei aktiv ist, muss sie zuerst von einem Sass-Präprozessor umgewandelt werden. So wird eine SCSS-Datei in CSS umgewandelt. Der Internetbrowser kann nämlich nur CSS lesen. In den Erweiterungen müssen dafür Sass und Live Sass Compiler installiert sein.

Optimierte Farben

Mit Hilfe von Adobe Color habe ich die Farben so ausgewählt, dass sie Komplementärfarben sind und einen guten Kontrast haben. So können sie auch für Menschen mit Sehbeeinträchtigungen besser leserlich sein. Im styles.scss habe ich die Farben für Light- und Dark-Modus separat aufgeschrieben und mit Variablen verknüpft. Die Hauptfarbe kann somit über –color-primary aufgerufen werden.

 

Navigation

Des Weiteren wollte ich die Seite möglichst einfach und simpel gestalten. Deshalb findet man seitlich rechts das fixe Navigationsmenü bestehend aus vier Symbolen. Die Darstellung untereinander ist durch Flexboxen möglich, die wir im IM-Unterricht kennengelernt hatten.

 

Startseite

Auf der Startseite habe ich hinter meinem Portait einen Kreis in der Hauptfarbe abgebildet. Hierfür nutzte ich einen clip-path. Die Seite bennettfeely.com/clippy zeigt einem zahlreiche mögliche Polygone, die man ins CSS kopieren kann.

 

Über mich

Auf der Über mich-Seite wollte ich eine Anzeige haben, wo ich mit meinen multimedialen Fähigkeiten stehe. Dafür erstellte ich Fortschrittleisten und habe die jeweiligen Prozente zugeordnet, um zu zeigen in welchem Rahmen ich mich in etwa befinde.

 

Dark-Light-Button

Wie früher im Text beschrieben, wollte ich einen Button für den Dark- und Light-Modus integrieren. Hierfür erstellte ich eine script.js-Datei. Dort drin erstellte ich eine Konstante für bspw. den Switch-Button mit Hilfe von document.querySelector(‹.switch-button›).

Danach fügen wir der Konstante einen addEventListener bei ‹click› hinzu. Wenn auf den Switch-Button geklickt wird, sollen die Farben des Light-modus mit der klasse light-modus übernommen werden. document.body.classList.toggle(‹light-modus›)

 

To Dos

Die Webseite ist noch nicht komplett fertig. Ich werde im Verlauf vom Sommer die richtigen Projekte erfassen. Momentan sind diese nur Platzhalter. Und die Webseite wird auf eine anständige Domain umgezügelt. Hier war ich mir noch nicht sicher, welcher Domain-Name am besten passen würde.

 

Fazit

Es war spannend meine Fähigkeiten zu testen und selbst zu versuchen eine Webseite zu gestalten mit HTML, CSS und JavaScript. Öfters war ich mir nicht sicher, wie ich eine Idee umsetzen kann und musste deshalb viel googeln. Schlussendlich bin ich mit dem Ergebnis zufrieden. Ich freue mich das Portfolio bald während dem Bewerbungsprozess nutzen zu können.