Produktbeschreibung

Website:

Seite: Mein Name und Mein Bild
Meine Ausbildung
Skills and Projects: Meine Skills und meine Projekte (Portfolios)
Über Mich: Freizeit
Get in Touch: Mein LinkedIn und GitHub Profil + Bewerbungsdossier zum downloaden

Code:

Jede Seite ist ein einzelner Komponent, welche in der App.js aufgerufen und zusammengestellt werden. Das Layout von jedem Komponent / von jeder Seite ist mit "display: flex;" in derApp.css Datei gemacht. Ich habe alles mit "flex-direction: column;" gemacht, das heisst, dass alle Elemente in einer Linie (Column) von oben nach unten dargestellt werden. Die Fonts/Schriftarten habe ich mit Google Fonts gemacht. Ich habe im index.html den import geschrieben und dann beim jeweiligen Text die jeweilige Schriftart in der App.css zugeteilt.

Für mich war der schwierigste Teil, nebst dem Designen der Website, das Responsive machen der Website, damit die Website auf verschiedene Geräte angeschaut werden kann mit einem angepasstem Layout.

Dies habe ich im CSS mit folgendem Code gemacht (kurzer Abschnitt):

carbon (8).png

Hier habe ich mit max-width die Maximale Bildschirmgrösse eingestellt, in welcher der nachfolgende Code gebraucht wird. In diesem Beispiel, habe ich bei der "About Me" Seite, die Mittlere Box(HipHop) angepasst. Dies habe ich für alle Elemente gemacht, welche bei dieser Größe anders aussehen sollen, als bei größeren Bildschirmen. Unterhalb sieht man den Unterschied der Website zwischen Smartphone und Laptop.

1306 || React Portfolio Website This page is part of the collection 'Portfolios Lernatelier'.

Add your comment

Antwort an:

Kopieren bestätigen