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.