Wie ich zu meinem Portfolio kam-js-Tutorial-php.cn

Die Idee

Früher war in meiner E-Mail-Signatur ein „about.me“ enthalten. Ich aktualisiere es von Zeit zu Zeit, aber es fehlen die Links, die ich hinzufügen möchte. Linktree und Cardd gab es damals noch nicht, und selbst wenn sie es sind, füge ich immer noch gerne die Projekte hinzu, an denen ich irgendwie gearbeitet habe. Die grundlegende Portfolio-Funktion, zumindest die Links und einige „Über mich“-Texte, sollten auch ohne JS funktionieren.

Das Thema

Die entspannende Atmosphäre von Silent Hill begleitet mich während der COVID-Coding-Sitzungen; Ich denke, ein B.G.M., eine Schriftart und ein Farbschema sind alles, was ich brauche. Obwohl ich ein Farbschema erstellen möchte, ist die Farbtheorie nicht mein Fachgebiet. Ein kurzer Besuch bei Kühlschränken hat geholfen. Für die Musik kann ich Akira Yamaoka noch nicht engagieren, aber ich habe Deadeyejams Jam for the Dead als Jam for the Dead Jam for the Dead (Danke!).

Vielleicht füge ich bald Grafiken hinzu, aber für den Moment würde dies und das Erlernen der Tools ausreichen.

...

In diesem Projekt durfte ich
ausprobieren. Es benötigt immer noch JavaScript, um zu funktionieren. Meiner Meinung nach ist ein „Dialog“-Tag besser als eine weitere Schicht
zum Nachtisch. Wenn Suchmaschinen das spüren können, kann es so sein, ich weiß es nicht.

Die
ermöglicht das Zusammenfassen von Details ohne JS. Mit weiterem Styling klappt das bei mir.

CSS / SASS

Die erste Webkit-Version des Portfolios verarbeitet SASS bis CSS, um die No-JS-Anforderung zu erfüllen. Während ich zu React übergehe, gibt es einen zusätzlichen optionalen Prozess, bei dem einige der SASS-Dateien ausgewählt werden, um das statische Stylesheet zu werden.

Ich habe darüber nachgedacht, zu prüfen, wie man Reacts %PUBLIC_URL% in einem externen Stylesheet anwendet, damit das statische Stylesheet nicht optional ist. Im Moment reicht die optionale statische Stylesheet-Verwaltung aus.

Reagieren

Eine Aufteilung des Portfolios in Komponenten ist wünschenswert, da es sich hauptsächlich um eine Liste von Informationen wie Links, Portfolioelementen und Fähigkeiten handelt.

Es ist auch schön zu wissen, dass die Komponenten von React ihre eigenen Modul-Stylesheets haben können, aber um einige der Komponentenstile in das statische Stylesheet aufzunehmen, müssen die Stilmodule in die Haupt-SASS-Datei importiert werden.

Github-Seiten

Nur ein einfacher Host für eine dreiteilige Landingpage plus Seiten-Assets.

Supabase

Das Portfolio muss irgendwie über eine Informationsquelle verfügen. Mit Supabase habe ich bereits einen Webadministrator für die Datenbank, einen Dateispeicher und eine API in der Cloud! Der Wunsch nach einer lokalen Entwicklungsumgebung für Edge Functions ist nur mit einem kleinen Lernaufwand verbunden. Seien Sie darauf vorbereitet, einen CLI-Pfad zu erstellen zu:

Docker-Setup, falls noch nicht geschehen
Initialisieren Sie ein Supabase-Projekt
Stellen Sie online eine Verbindung zu Ihrem Supabase-Projekt her
Lokales Setup für Supas Datenbank abrufen und erstellen
Deno in VSCode konfigurieren
Lokale Datenbank starten
Schreiben der Kantenfunktion

... Und schließlich die Online-Bereitstellung der Funktion.

Ergebnis

https://github.com/rhizene/status

Was kommt als nächstes?

Ich denke darüber nach, Next in Betracht zu ziehen, um mich um die statischen Stylesheets und Inhalte zu kümmern und SEO zu verbessern.
Themengrafiken und vielleicht ein Markenlogo.
Eine bessere Einführungs- und Navigationsidee.

Das obige ist der detaillierte Inhalt vonWie ich zu meinem Portfolio kam. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Wie ich zu meinem Portfolio kam