Heim > Web-Frontend > js-Tutorial > Wie ich zu meinem Portfolio kam

Wie ich zu meinem Portfolio kam

PHPz
Freigeben: 2024-07-18 21:23:01
Original
1115 Leute haben es durchsucht

How I came up with my Portfolio


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.


Die Werkzeuge

HTML

Wenn Sie wissen, wie eine Suchmaschine ein HTML-Dokument liest, kann sie feststellen, ob eine Seite relevante Informationen enthält. Anstelle von gehen Sie zu s, headers (

,

, ...),
,
...

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!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage