Noch eine Neugestaltung der Website.

In Gedanken habe ich diesen Beitrag erst gestern geschrieben.

OK. Also...ich hätte meine Website vielleicht schon wieder komplett neu erstellt

sid ・ 23. Dezember 21

#webdev #showdev #html #css

Dennoch sind fast vier Jahre wie im Flug vergangen, und im Nachhinein kann ich getrost sagen, dass meine frühen Versuche im Webdesign, nun ja, sagen wir einfach, nicht gerade herausragend waren. Meine Güte Alte Websites sahen aus, als wären sie von einem 13-Jährigen entworfen worden, weil sie das waren – und ja, dieser 13-Jährige war ich?.

Seitdem:

• Ich habe drei weitere Schuljahre abgeschlossen. Ich bin jetzt praktisch ein Berufsstudent.
• Ich habe unzählige Stunden damit verbracht, die wichtigsten Grundlagen eines guten UI-Designs zu studieren. Ich habe mehr Designartikel gelesen, als ich zugeben möchte.
• Ich habe gelernt, besseren Code zu schreiben. Es stürzt nicht mehr ab ... meistens.
• Ich habe das Buch Refactoring UI von Adam Wathan gelesen, das meine Denkweise über das Design von UI völlig verändert hat.

Aber in der ganzen Zeit habe ich irgendwie ein kleines Detail vernachlässigt – ja, Sie haben es erraten – die Aktualisierung meiner Website. Jetzt, mit 16, dieser Kommentar:

Edvard Busck-Nielsen • 6. März 21

Mir gefällt die Benutzeroberfläche der Website sehr gut. Auch tolle Farbauswahl! Aber meiner Meinung nach sollten Sie bei persönlichen Websites Ihre Fähigkeiten und Erfahrungen in den Mittelpunkt stellen. Zumindest wenn Ihr Ziel darin besteht, sich an Personalvermittler zu verkaufen. Es tut mir leid, aber die meisten Personalvermittler interessieren sich nicht für Blogbeiträge. Sie kümmern sich darum, was Sie tun können und wie lange Sie es schon tun. Wichtig ist auch ein Projektportfolio. Blogbeiträge spiegeln sicherlich etwas von Ihrer Persönlichkeit und Ihrem Interesse wider, aber ein Personalvermittler wird wahrscheinlich keine Zeit haben, sie zu lesen. Sie könnten an einem Freitagabend die letzte Bewerbung sein, die sie durchgehen. Das Letzte, was Sie tun möchten, ist, ihre Zeit zu verschwenden.

Aber ansonsten tolle Arbeit! Und das ist natürlich nur meine Meinung.

Ich fing wirklich an, ins Schwarze zu treffen.

Ich hatte so viel Zeit damit verbracht, an verschiedenen Projekten zu arbeiten, hatte aber keinen Ort, an dem ich sie tatsächlich präsentieren konnte, und somit keine Plattform, um potenzielle Personalvermittler zu beeindrucken. Und wenn man sich die Benutzeroberfläche der meisten meiner Projekte ansieht, ist sie immer noch eher mittelmäßig. Ich brauchte etwas, das sie beeindruckt – also habe ich vor ein paar Tagen beschlossen, mein Bestes zu geben und meine persönliche Website (oder mein Portfolio, wenn Sie es vorziehen) neu zu gestalten und neu zu erstellen.

Die Technologie

Alle meine bisherigen persönlichen Websites wurden mit einfachem altem HTML, CSS und JavaScript erstellt. Es ist einfach und funktional, aber es ist, als würde man versuchen, ein Gourmet-Menü mit einer Mikrowelle zuzubereiten. Außerdem wollte ich unbedingt meine Reaktionsfähigkeiten unter Beweis stellen (seien wir ehrlich, das war der wahre Grund).

Also habe ich mich für Next.js entschieden. Warum? Nun, es schien damals eine gute Wahl zu sein (und das war es auch), außerdem hatte ich bereits viel Erfahrung damit.

Für das CSS habe ich mich für Tailwind CSS entschieden (ich meine, wenn Sie es im Jahr 2024 nicht verwenden, sind Sie dann überhaupt real? ?).

Das Design

Nachdem ich viel zu viel Zeit damit verbracht hatte, auf meine alte Website zu starren, kam ich zu dem Schluss, dass der Lichtmodus einfach nicht ausreichte. Ich wollte eine drastische Veränderung, etwas, das eine echte Wirkung haben würde. Und wie könnte man das besser machen, als den Schalter umzulegen und in den vollständigen Dunkelmodus zu wechseln? Es ist, als würde Ihre Website einen Schurkenbogen beginnen?.

Als Schriftart habe ich Inter gewählt. Nach vielen gescheiterten Versuchen mit anderen Schriftarten, insbesondere auf Windows-Geräten, sahen meine Seiten so aus:

...im Vergleich dazu unter macOS habe ich beschlossen, die von Tailwind CSS bereitgestellten Standard-Systemschriftarten nicht mehr zu verwenden.

Die Schriftart auf Macs war eindeutig überlegen. Aber da die Standardschriftart „San Francisco“ exklusiv für Apple verfügbar ist, brauchte ich eine Alternative. Da kommt Inter ins Spiel – eine der beeindruckendsten Schriftarten, die ich je gesehen habe, und ein perfekter Ersatz für San Francisco.

Sehen Sie? Schauen Sie, wie hübsch diese Schriftart aussieht?

Als Hauptfarbe habe ich mich für Lila entschieden. Kein wirklicher Grund, ich habe nur beschlossen, etwas vom Indigo, das ich zuvor verwendet habe, abzuwechseln.

Das Layout

Ich habe mit dem Heldenbereich begonnen. Einfach, einfach und... oh warte... habe ich schon erwähnt, dass es einen Schreibmaschineneffekt gibt?

Danach dachte ich schnell über den nächsten Abschnitt nach.

Wiederholung von Edvards Kommentar:

Edvard Busck-Nielsen • 6. März 21

Mir gefällt die Benutzeroberfläche der Website sehr gut. Auch tolle Farbauswahl! Aber meiner Meinung nach sollten Sie bei persönlichen Websites Ihre Fähigkeiten und Erfahrungen in den Mittelpunkt stellen. Zumindest wenn Ihr Ziel darin besteht, sich an Personalvermittler zu verkaufen. Es tut mir leid, aber die meisten Personalvermittler interessieren sich nicht für Blogbeiträge. Sie kümmern sich darum, was Sie tun können und wie lange Sie es schon tun. Wichtig ist auch ein Projektportfolio. Blogbeiträge spiegeln sicherlich etwas von Ihrer Persönlichkeit und Ihrem Interesse wider, aber ein Personalvermittler wird wahrscheinlich keine Zeit haben, sie zu lesen. Sie könnten an einem Freitagabend die letzte Bewerbung sein, die sie durchgehen. Das Letzte, was Sie tun möchten, ist, ihre Zeit zu verschwenden.

Aber ansonsten tolle Arbeit! Und das ist natürlich nur meine Meinung.

Aber meiner Meinung nach sollten Sie sich bei persönlichen Websites auf Ihre Fähigkeiten und Erfahrungen konzentrieren, insbesondere wenn es Ihr Ziel ist, Personalvermittler zu beeindrucken.

Ich habe beschlossen, den Blog-Bereich komplett aufzugeben. So sehr Sie meine Tausenden von Wörtern zu verschiedenen Frameworks und Tools auch genießen mögen, Personalvermittler werden dies wahrscheinlich nicht tun. Da mein Kurspensum zu Beginn meiner letzten beiden Schuljahre zunahm, hatte ich außerdem einfach keine Zeit, einen Blog zu führen.

Ich habe außerdem meinen Kompetenzbereich ganz nach oben, vorne und in die Mitte verschoben, damit alle Personalvermittler ihn sehen können? Oh, und warum nicht ein paar coole Effekte hinzufügen? Für den unten gezeigten Effekt habe ich framer-motion verwendet, das sie als „Eine produktionsbereite Bewegungsbibliothek für React“ beschreiben. Ich kann nur zustimmen.

Sehen Sie? Schauen Sie, wie cool diese Animation aussieht.

Als nächstes habe ich mich mit dem Abschnitt „Projekte“ beschäftigt. Ich habe meine Top-4-Projekte auf der Homepage vorgestellt und einen Link zu den übrigen eingefügt. Für diesen Abschnitt habe ich mir eine coole Idee ausgedacht: ein Modal, das vom unteren Rand der Seite nach oben springt, wenn auf ein Projekt geklickt wird, und weitere Details bereitstellt. Und natürlich war Framer-Motion das Werkzeug für diesen Job.

Nach einer Stunde hatte ich Folgendes:

Ich dachte, es sei perfekt, bis meine Freunde meinten:

• Zu federnd, etwas leiser machen.
• Mir gefällt es, aber man sollte den Sprung wirklich reduzieren.
• Die Sprungkraft sieht erschütternd aus.

Anfangs habe ich mich dagegen gewehrt, es zu ändern. Aber nach stundenlangem Optimieren wurde mir klar, dass die Sprungkraft vielleicht, nur vielleicht, etwas übertrieben war. Also habe ich es heruntergefahren.

Endgültige Version. Sieht ziemlich gut aus, oder?

Schließlich habe ich einen Kontaktbereich mit Links zu meinem LinkedIn- und E-Mail-Konto hinzugefügt und natürlich einen Link zu meinem GitHub-Profil, damit alle Personalvermittler ihn sehen können.

Ich habe auch eine Projektseite erstellt, wie bereits erwähnt. Es war dem Abschnitt „Projekte“ auf der Homepage sehr ähnlich und verfügte über die gleichen Modalitäten, um alle Projekte vorzustellen, die ich im Laufe der Jahre entwickelt habe (Hinweis: Dieser Abschnitt ist noch in Arbeit, also wundern Sie sich nicht, wenn er noch ein bisschen ist spärlich).

Hier bin ich also und aktualisiere endlich meine Website mit all diesem hart erarbeiteten Wissen. Hoffen wir nur, dass dieses Exemplar am Ende nicht so aussieht, als wäre es von einem 16-Jährigen entworfen worden. Oh warte... ?

---

Sie können sich meine Website hier und den Code hier ansehen. Wenn Ihnen dieser Beitrag gefallen hat, geben Sie dem Repo bitte einen Stern und denken Sie darüber nach, ihm zu folgen.

Sidcraftscode / Portfolio

Meine persönliche Portfolio-Website, erstellt mit Next.js

Dies ist ein Next.js-Projekt, das mit create-next-app gebootet wurde.

Erste Schritte

Führen Sie zunächst den Entwicklungsserver aus:

npm run dev
<span class="pl-c"># or</span>
yarn dev
<span class="pl-c"># or</span>
pnpm dev
<span class="pl-c"># or</span>
bun dev

Öffnen Sie http://localhost:3000 mit Ihrem Browser, um das Ergebnis zu sehen.

Sie können mit der Bearbeitung der Seite beginnen, indem Sie „pages/index.js“ ändern. Die Seite wird automatisch aktualisiert, wenn Sie die Datei bearbeiten.

Auf API-Routen kann über http://localhost:3000/api/hello zugegriffen werden. Dieser Endpunkt kann in pages/api/hello.js bearbeitet werden.

Das Verzeichnis „pages/api“ ist /api/* zugeordnet. Dateien in diesem Verzeichnis werden als API-Routen statt als React-Seiten behandelt.

Dieses Projekt verwendet next/font, um Inter, eine benutzerdefinierte Google-Schriftart, automatisch zu optimieren und zu laden.

Mehr erfahren

Um mehr über Next.js zu erfahren, werfen Sie einen Blick auf die folgenden Ressourcen:

• Next.js-Dokumentation – Erfahren Sie mehr über die Funktionen und die API von Next.js.
• Lernen Sie Next.js – ein interaktives Next.js-Tutorial.

Sie können sich das GitHub-Repository von Next.js ansehen – Ihr Feedback…

Auf GitHub ansehen

Hier sind einige Screenshots


:

Das obige ist der detaillierte Inhalt vonNoch eine Neugestaltung der Website.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!