Ist das Portfolio gut?
Ich habe ein Portfolio entwickelt, das Web-Applikationen beinhaltet. Ich möchte eine Ausbildung zum Fachinformatiker für Anwendungsentwicklung absolvieren und ich bin gerade dabei mich zu bewerben.
Bevor ich die Bewerbungen losschicke, möchte ich wissen, ob mein Portfolio gut und/oder man da was besser machen kann.
Das Portfolio und die Applikationen, die es beinhaltet, sind non-responsive. Das heißt, dass die Programme nur über einen Desktop PC gut sichtbar sind.
Hier ist ein Link zu meinem Portfolio:
4 Antworten
Bezüglich des Designs habe ich ehrlich gesagt nicht das Gefühl, dass du wirklich wusstest, wie du deine Seite richtig aufteilen und die einzelnen Bereiche füllen sollst. So wirkt bereits die Stage mittels der Schriftgröße des Textes erzwungen. Bei der Auflistung deiner Profildaten sind es die übergroßen Abstände zwischen den einzelnen Listenpunkten, die die Seite unnötig strecken.
Meine erste Empfehlung wäre daher: Sammel erst einmal Inhalte, die du wirklich auf der Seite einbinden möchtest und überlege dann nochmals, wie sie präsentiert werden können. Reduziere die Seite auf die Elemente, die es wirklich braucht und gebe ihnen, gewichtet an ihrer Priorität auch nur so viel Platz, wie nötig. Deine Navigation halte ich zum Beispiel für zu übergroß, gemessen an dem, was die Seite an (wenigen) Inhalten letztendlich bietet. Vermutlich wäre eine horizontal zentrierte Navigation besser, die auch nur (neben dem Textlogo) drei Punkte aufnimmt (Über mich, Projekte, Kontakt). Home ist unnötig, denn die Stage bietet doch, bis auf die Einleitung, keinerlei wesentliche Information, als dass ich zu ihr zurückspringen müsste.
Die einzelnen Sektionen würde ich nach einem konsistenten Schema gestalten. Das Styling deiner Überschriften variiert immer wieder. Sei es beim Abstand nach oben, der Schriftgröße oder der horizontalen Ausrichtung. Nicht einmal der Text stimmt mit dem aus der Navigation überein. Hinsichtlich der Schriftart würde ich dir ebenfalls zu Konsistenz raten, vielleicht findest du auch noch eine bessere Option als Times New Roman.
Sollte dir für deine Stage nichts besseres einfallen (und sei es zumindest ein Hintergrundbild, den Willkommenstext würde ich entfernen/in den unteren Text einbinden oder vielleicht als Tagline direkt über dem unteren Text positionieren), zieh stattdessen deine Projekte nach oben. Eines von ihnen kann prominenter vorgestellt werden.
Auf zu auffällige Animationen würde ich des Weiteren verzichten. Ich meine den Hovereffekt bei den Projektteasern, den Hovereffekt bei deinem Dark-Mode-Button sowie den Hovereffekt für die Navigationsbuttons. Letzterer sieht so seltsam aus, sodass ich mir auch vorstellen könnte, dass es vielleicht doch ein Fehler ist und die Elemente schon im Initialzustand eine Umrandung haben sollten.
Hinsichtlich der technischen Umsetzung sind mir folgende, verbesserungswürdige Punkte aufgefallen:
- Dein HTML-Dokument gibt vor, englische Inhalte zu bieten (lang-Attribut). Deine Texte sind allerdings größtenteils auf Deutsch.
- Deine Sektionen überdecken sich gegenseitig. So sind zum Beispiel einzelne Projektteaser vollständig von der Kontaktsektion überlagert.
- Irgendwo sollte sich laut Quelltext noch ein Button zum Ändern des Farbmodus befinden. Er liegt bei mir allerdings außerhalb des sichtbaren Bereichs.
- Die Seite ist horizontal scrollbar. Dein Foto befindet sich außerhalb des wohl angedachten Inhaltsbereichs.
- Verzichte wenn möglich auf absolute oder fixe Positionierungen. Die sind mitunter dafür verantwortlich, wieso sich Inhalte gegenseitig überlagern oder komplett aus dem sichtbaren Bereich verschwinden. Und ja, so ist es auch verständlich, dass die Seite trotz ihrer Einfachheit für mobile Endgeräte kaum bedienbar ist. Dein Seitenlayout könntest du einfacher aufbauen (siehe Beispiel unten). Für das Setzen von Abständen genügen im Regelfall margin/padding, wenn (Block-)Elemente nebeneinander positioniert werden müssen, nutze Flexbox oder Grid.
<!doctype html>
<head>
<title>Example</title>
<style>
.wrapper {
display: flex;
flex-wrap: wrap;
}
.navigation { width: 270px }
.content { flex: 1 }
</style>
</head>
<body>
<main class="wrapper">
<nav class="navigation"><!-- navigation ... --></nav>
<div class="content"><!-- content ... --></div>
</main>
</body>
- Es gibt offensichtlich noch einen inneren Hovereffekt für die Titel deiner Projektteaser. Bei zu langem Text (Bsp.: Anwaltskanzlei) wird dieser in dem Zustand abgeschnitten.
- Die Navigationsbuttons springen nicht zu der ihnen zugehörigen Sektion.
- In dem letzten .infolist li-Element nutzt du einen Endtag </habe>, den es nicht gibt.
- Für die Infoliste würde sich eine Tabelle lohnen und für die einzelnen Schulstationen eine eigene Liste.
- h2-Elemente gehören nicht in Buttons. Drehe die Reihenfolge um.
- Für .picMe wäre ein figure-Element die deutlich passendere Wahl.
- Beschäftige dich mehr mit HTML5. Ich sehe bei dir sehr viele div-Elemente, für die section, nav, article, ... besser geeignet wären.
- Die Überschriftenhierarchie ist überarbeitungswürdig. Greife dir bestenfalls nur eine Überschrift als h1 heraus und ordne von da an in der Priorität nach unten. Deine Sektionsüberschriften wären demnach h2. Diese Hierarchie würde ich ebenso im visuellen Styling übertragen (h1 ist präsenter / hat eine höhere Schriftgröße als h2).
Den Inhalt deiner Seite solltest du letzten Endes nochmal auf Rechtschreib- und Ausdrucksschwächen prüfen. So etwas wie "sonstigen Dingen" wirkt etwas unbeholfen.
Der Seitentitel (im head) müsste in die deutsche Sprache übertragen werden und im Kontaktbereich fehlt die Angabe einer ladungsfähigen Adresse. Da du Google Fonts einbindest, aber Webseitenbesucher nicht darauf hinweist, verstößt du außerdem gegen die DSVGO.
Wie schon von anderen Antwortgebern erwähnt, verrät dein eigener Steckbrief noch nicht so viel relevantes über dich. Einer der wichtigsten Punkte bei einer Bewerbung ist immer die Motivation. Der grundsätzliche Fokus sollte stärker darauf liegen, zu zeigen, wieso du dich für Informatik interessierst.
Die Auswahl deiner Projekte wird für deinen Fall wohl reichen (wenn ich einmal davon ausgehe, dass du noch eine schriftliche, aussagekräftigere Bewerbung verschickst). Allerdings würde ich dich dennoch gern dazu anregen, sie wie deine Seite nochmals zu überarbeiten und auszubauen. Das betrifft unter anderem die Layouts und die Beschriftungen. Das Karteikartensystem funktioniert meines Erachtens überhaupt nicht (die weiße Box rotiert seltsamerweise auf der z-Achse, mehr passiert da nicht), auf der Anwaltskanzlei sind Texte deutlich abgeschnitten (das muss dir doch ebenso aufgefallen sein?).
Anwendungen wie den Timer, das Quiz oder die To-Do-Liste lassen sich ganz sicher noch weiter aufpeppen, denn aktuell sind sie funktional unkreativ. Für einen Leser dürfte es so wirken, als wäre einfach nur eine Standard-0815-Vorschlagsliste aus einem Forenthread kurz abgearbeitet worden. Wenn du mich davon überzeugen wollen würdest, dass dir Webentwicklung/Programmierung Spaß macht, würde ich erwarten, dass du über solche Grundfunktionen (z.B. Countdown) hinausgehst.
Vorab: Meine nachfolgende Antwort klingt vermutlich sehr kritisch, aber ich meine das nicht böse, ich möchte nur helfen.
Warum dieses grelle Pink? Im Darkmode ist es etwas besser, aber den Farbton würde ich überarbeiten und durch etwas Neutraleres ersetzen, so wirkt das eher unprofessionell. Gerade, wenn es für eine Bewerbung sein soll, ist es wichtig, dass die Seite einen professionellen Eindruck macht.
Bei "Lieblings-Anime" hast du einen Tippfehler drin, das am beste noch ausbessern.
Sind die Applikationen auch von dir? Dann da auch nacharbeiten. Beispiel: Deine To-Do-Liste hat einen Button auf Deutsch und einen auf Englisch und in der Übersicht und in der Applikation verwendest du verschiedene Schreibweisen (korrekt laut Duden wäre übrigens To-do-Liste)
Um nochmal zum Lieblings-Anime zu kommen: Welche Relevanz hat das denn für deine Bewerbung? Das passt irgendwie nicht so gut rein, zumal du ja auch sonst nichts Persönliches schreibst. Dann nur das Lieblings-Anime aus dem persönlichen Bereich anzuführen, würde vielleicht passen, wenn du was mit Animes machen wollen würdest, so wirkt es eher unpassend.
Hobbys zu nennen, um auch etwas von deiner persönlichen Seite zu schreiben, ist natürlich nicht verkehrt, aber eben nicht so wie hier gemacht, indem nur ein Lieblings-Anime genannt wird. Wenn ich das Portfolio im Rahmen einer Bewerbung mitgeschickt bekomme, würde ich mich da so nur fragen: Aha, und was soll mir das jetzt sagen?
Und noch ein letzter Punkt: Mit einer Überschrift wie "Wie Programmieren zu meiner Leidenschaft wurde" weckst du Erwartungen, nämlich tatsächlich etwas über deine Leidenschaft zu erfahren. Der Text danach klingt aber sehr nüchtern, da schwingt keinerlei Leidenschaft mit. Du warst schon immer begeistert, gut. Aber warum, was hat dich daran fasziniert? Du hast dich dann also mit Hardware befasst - okay, was hast du da gemacht, hast du angefangen rumzubasteln, hast du dich in die Recherche von Komponenten vertieft, wie sah denn dieses Befassen aus? Dann hast du dich mit der Programmierung von Webseiten befasst (würde ich anders formulieren, schon wegen der Wortwiederholung). Auch da: Wie sah das aus, was hast du gemacht? Und dass dir das liegt ist ja schön, aber das klingt halt nicht wirklich nach Leidenschaft für das Thema. Geh da noch mal drüber, werde konkreter, schreibe was Lebhafteres als "Ich habe mich damit befasst". Vielleicht kann dir ja jemand dabei helfen.
Sorry, das war nun wirklich viel Kritik, aber du wolltest ja wissen, was du besser machen kannst, wie gesagt nicht böse gemeint.
Gut, dass du schon was kannst und weißt. Ein paar Fehler stecken aber noch drin.
Schreib da bitte Binärcode statt Primärcode rein.
Das ist vielleicht dein Lieblings-Anime, aber du bist jetzt bald 22 Jahre alt und keine 13 mehr. Lass das lieber weg.
Und wechsel die Hintergrundfarbe und Schriftfarbe von diesem echt nervigen Magenta-Farbton zu einem normalen.
Korrigiere Dingen in Dinge.
Das Paintboard ist eine nette Spielerei, aber könnte man weglassen.
Die Texte deiner Rechtsanwaltskanzlei sind direkt kopiert und könnten kostenpflichtig abgemahnt werden! Nimm die unbedingt ganz schnell raus, bei sowas verstehen Rechtsanwälte gar keinen Spaß. Zumal das ja eine Kanzlei aus deinem Wohnort ist.
Das Karteikartensystem funktioniert nicht. Probiers selbst nochmal aus.
Den Timer finde ich gut, brauche ich häufiger, sollte aber besser länger bimmeln, wenn er abgelaufen ist, vielleicht so zwei oder drei Sekunden.
Das Quiz ist nett. Aber die Fragen würde ich anders aussuchen.
Den Voice Recorder finde ich auch nett.
Aber findest du es angemessen, um einen Ausbildungssplatz zu bekommen?
Auf jeden Fall! Für einen Ausbildungsplatz als Anwendungsentwickler brauchst du nur das Interesse an solchen Dingen zu haben. Programmieren lernst du in der Ausbildung. Viel Erfolg!
Hi AzubiIT,
es ist schön wenn sich jemand entscheidet eine Ausbildung als Fachinformatiker Anwendungsentwicklung zu machen. Ein Portfolio kann dabei helfen sich bei zukünftigen Arbeitgeber vorzustellen. Dabei gibt es aber viel zu beachten um nicht ins Fettnäpchen zu treten. Deine Idee zu einem Portfolio ist gut aber leider nicht deine Umsetzung. An deinem Portfolio solltest du noch arbeiten. Sowohl inhaltlich, techisch als auch gestalterisch solltest du das Portfolio anpassen. Die ausgewählte Farbe ist sehr gewagt, passt aber nirgendwo hin. Du solltest eher mit dieser Farbe sparen.
Du bindest über Google Schriftdateien und begehst damit schon zwei Fehler. Das erste ist das man Schriften herunterlädt und diese dann direkt in das Projekt einbindet. Wenn du Schriften über Google Fonts einbindest, verstößt du gegen die DSG-VO. Das sehen die Chefs nicht gerne, wenn der Bewerber sowas nicht beachtet.
Ein weiteres Problem ist das die Schriften nirgendwo verwendet werden. Sprich du hast die Schriften eingebunden, nutzt aber diese nirgendwo auf der Webseite.
Es liegen auch viele Fehler vor auf der Webseite. Hier solltest du mehr semmantischer arbeiten.
Der Text der dich beschreibt und warum du dich für den Beruf interessierst sollte viel mehr Text haben. Hier solltest viel mehr schreiben und auf diese wichtigen Themen mehr eingehen. Es reicht keinen Zweisätzer das du mal ein Computer in der Schule auseinander geschraubt hast. Hier sollte viel mehr stehen.
Zu den Projektbeschreibungen kannst du auch mehr schreiben und auch darauf eingehen welche Technologien bzw. Webtechnologien du verwendet hast.
Es gibt viele weitere Kritikpunkte, die aber den Rahmen meiner Antwort sprengen würde.
Ich würde dir empfehlen von Grund auf die Seite neu zu machen und auch ein Konzept auszudenken wie man inhaltlich und gestalterisch seinen potenziellen Arbeitgeber erreichen kann.
Ich wünsche dir viel Erfolg bei deinem Projekt und wenn du weitere Fragen hast, dann gerne hier auf gutefrage.net stellen ;-)
Wie findest du die Applikationen?