Zum Inhalt

Portfolio Dokumentation

flowchart TD
    A[Idee / Skizze] --> B[Wireframe]
    B --> C[Mockup]
    C --> D[Prototyp]
    D --> E[Fertiges Produkt]
    C --> F[Feedback]
    F --> C

Step 1: Betriebswirtschaftliche Überlegungen

Was soll Ihre Portfolio-Seite erreichen?

Auf der Seite soll man sehen wer ich bin und was ich gerne mache. Man soll meine Projekte meine Fähigkeiten sehen. Man soll mich auch leicht kontaktieren können am besten mit einem form.

Wer ist die Zielgruppe?

Die Zielgruppe sind potenzielle Arbeitgeber oder für Praktikums. Sie sollen sehen wer ich bin und was ich gerne mache

Welche Inhalte möchten Sie auf der Website präsentieren? Wie können Sie die Seite bestmöglich für potentielle Arbeitgeber und die Stellensuche gestalten?

Meine Portfolio-Website soll meine Fähigkeiten, Projekte und Persönlichkeit zeigen. Sie dient als digitale Visitenkarte und soll einen professionellen ersten Eindruck hinterlassen.

Step 2: Wireframe und Sitemap

  • Erstellen Sie ein Wireframe mit einem beliebigen Programm oder zeichnen Sie von Hand

  • Sitemap:
graph TD
    A[Onepager / Startseite]
    H[Kontaktformular]
    A --> B[Home]
    A --> C[About Me]
    A --> D[Fähigkeiten]
    A --> E[Projekte]
    A --> F[Ausbildung]
    A --> G[Footer]

Step 3: Tutorialauswahl

Tutorial: Portfolio Webseite

Das Tutorial ist relativ kurz möchte den Rest selber gestalten und auch noch ausbauen

Welche Technik werden Sie verwenden und warum? Responsive Design mobile first?

Ich verwende HTML und CSS, um die Website von Grund auf selbst zu gestalten („from scratch“). Dadurch verstehe ich den Aufbau und das Styling meiner Seite besser und kann alles individuell anpassen.

Ich entscheide mich für einen Onepager mit Jumplinks, da die meisten Inhalte direkt auf einer Seite übersichtlich dargestellt werden können. Es gibt aber eine zusätzliche Unterseite für das Kontaktformular, damit Nachrichten über ein separates Formular versendet werden können. Somit ist es ein Onepager mit einer kleinen Erweiterung.

Ich plane einen einfachen Dark-Mode mit JavaScript. Besucher:innen können über einen Button zwischen heller und dunkler Ansicht umschalten. Der Modus soll automatisch gespeichert werden (z. B. im Local Storage), damit die Seite beim nächsten Besuch im gewählten Design geladen wird.

Welche Ideen haben Sie ergänzend zu Ihrem Tutorial?

  • Anpassen der Schriftarten und Farben:
    Ich wähle eine harmonische Farbpalette und passende Schriftarten, um ein einheitliches, professionelles Erscheinungsbild zu schaffen.

  • Social-Media-Links im Footer:
    Im Footer werden Icons zu meinen Profilen (z. B. GitHub, LinkedIn, E-Mail) eingebaut, damit Arbeitgeber mich leicht kontaktieren können.

  • Einfacher Dark-Mode:
    Mithilfe einer kleinen JavaScript-Funktion können Besucher:innen das Design zwischen hell und dunkel umstellen.
    Das sorgt für einen modernen Look und bessere Lesbarkeit bei Nacht.

Step 4: Designentscheidungen

Begründung meiner Farbpalette

Ich habe mich für eine ruhige, harmonische Farbpalette entschieden, die aus verschiedenen Grau-, Grün- und Beigetönen besteht: #384D48, #6E7271, #ACAD94, #D8D4D5 und #E2E2E2 .

Diese Farben wirken professionell, modern und ausgewogen, ohne zu aufdringlich zu sein. Der dunkle Grünton (#384D48) sorgt für Tiefe und Kontrast, während die helleren Grau- und Beigetöne (#D8D4D5, #E2E2E2) einen freundlichen, klaren Hintergrund bilden. Der leicht grünliche Ton (#ACAD94) bringt einen natürlichen, ruhigen Akzent, der gut zu meiner persönlichen Stilrichtung passt.

Insgesamt vermittelt die Farbpalette Seriosität und Ruhe, was gut zu einer Portfolio-Seite passt, die professionell, aber trotzdem persönlich wirken soll.