codefolio -Download - codefolio Quellcode-Download

codefolio

Andere Kategorien

1.0.0

Herunterladen

Codefolio

Live-Demo | Bereitstellung | Über | Funktionen | Beitrag

Eine einsatzbereite Web-App zur Präsentation Ihres Coding-Portfolios.

Um

Codefolio ist eine Jamstack-Portfolio-Webanwendung für Programmierer. Es wird mit Nuxt.js erstellt und nutzt das @nuxt/content-Modul, um im Verzeichnis /content abgelegte Benutzerdaten zu verwenden und produktionsbereite statische Assets zu generieren.

Merkmale

Der gesamte Code wurde unter Berücksichtigung von Modulen und Wiederverwendbarkeit geschrieben.

Das Hauptmerkmal dieser App ist die Unterstützung der statischen Bereitstellung. Das Codieren von Portfolios erfordert nicht so viele Änderungen, daher ist eine statische Site eine bessere Wahl als ein normales SPA oder eine Full-Stack-App.

Benutzeroberfläche

Die Benutzeroberfläche von Codefolio ist unter Berücksichtigung der Benutzerfreundlichkeit gestaltet. Es ist vollständig responsiv und nutzt den Mobile-First-Ansatz.

Das Design basiert auf dem 7-1-Sass-Muster und nutzt teilweise geladenes Bootstrap 5 für Layout und Dienstprogramme.

Das Verzeichnis „assets/aprite/svg“ enthält einzelne SVG-Symboldateien. Sie können diese Symbole verwenden (oder Ihre eigenen SVG-Symbole in diesem Verzeichnis platzieren), um auf den Symbolnamen in der Vue-Komponente <icon> zu verweisen.

Inhalt

Codefolio unterstützt benutzerdefinierte Benutzerdaten. Neben den persönlichen Daten können Benutzer auch andere coole Funktionen wie externe Links und die URL der Schaltfläche „Fortsetzen“ in der oberen Navigationsleiste anpassen.

Inhaltsleitfaden

Statische Site-Generatoren verwenden rohe Benutzerdaten (normalerweise im Markdown- oder JSON-Format), um produktionsbereites HTML zu generieren. Daher benötigen Sie dieses Handbuch als Referenz, wenn Sie Ihre Inhalte zu Codefolio hinzufügen.

So sieht die Struktur des Inhaltsordners aus.

 content
|	navbar.json
|	about.md
|	social-icons.json
|	user.json
|
└───projects
		project1.json
		project2.json
		project3.json
		/* so on... */

Sehen wir uns an, wofür jede Datei oder jeder Ordner gedacht ist.

navbar.json

Diese Datei wird für optionale Daten im Zusammenhang mit der oberen Navigationsleiste verwendet.

Eigentum	Typ	Beschreibung
LebenslaufUrl	`string`	URL der Fortsetzungsdatei für die Schaltfläche „Fortsetzen“ in der Navigationsleiste.
externe Links	`array`	Ein Array mit Objekten zum Generieren externer Links in der oberen Navigationsleiste. Jedes externe Linkobjekt muss über `text` und `url` String-Eigenschaften verfügen, um ordnungsgemäß zu funktionieren.

über.md

Diese Markdown-Datei wird für die About-Seite verwendet.

social-icons.json

Diese Datei wird verwendet, um soziale Symbole auf der About-Seite zu generieren.

Eigentum	Typ	Beschreibung
Symbole	`array`	Ein Array mit Objekten zum Generieren sozialer Symbole auf der Kontaktseite. Jedes Objekt muss `name` und `url` Eigenschaften (Strings) haben. Für die `name` sollte eine passende SVG-Datei im Verzeichnis /assets/sprite/svg/ vorhanden sein. Die meisten sozialen Symbole sind bereits verfügbar, Sie können jedoch gerne Ihre benutzerdefinierten SVG-Symbole hinzufügen. Im Entwicklungsmodus können Sie die Route `/_icons` aufrufen, um alle verfügbaren Symbole aufzulisten.

user.json

Diese Datei wird für Benutzerdetails verwendet, die für die Homepage erforderlich sind.

Eigentum	Typ	Beschreibung
vollständiger Name	`string`	Benutzername.
um	`string`	Ein wenig über den Benutzer.
Bild	`string`	Eine gültige Bild-URL, beginnend mit http oder ein Name (einschließlich Erweiterung) eines Bildes, das im `assets/images` Verzeichnis abgelegt wird. Für bessere Ergebnisse schneiden Sie das Bild bitte auf `500x500` zu.
Titel	`string`	Benutzerposition oder Rolle.

contact.json

Diese Datei wird zum Generieren einer Kontaktseite verwendet.

Eigentum	Typ	Beschreibung
FormAktion	`string`	Benutzerdefinierte Formularaktion für das Kontaktformular. Überprüfen Sie Formenpree.io.
Standort	`string`	Zeichenfolge für den Benutzerstandort.
E-Mail	`string`	E-Mail-Adresse des Benutzers.
Telefon	`string`	Telefonnummer des Benutzers.

Projekte

Dieser Ordner enthält alle Projekte als einzelne Dateien im JSON -Format. Jede Datei in diesem Ordner repräsentiert ein anderes Projekt.

Die folgende Tabelle enthält das Format jeder Datei im Projektordner.

Eigentum	Typ	Beschreibung
Ausweis	`integer`	Eine eindeutige Kennung für die Bestellung.
Titel	`string`	Projektname.
Beschreibung	`string`	Details zum Projekt.
Bild	`string`	Eine gültige Bild-URL, beginnend mit http oder ein Name (einschließlich Erweiterung) eines Bildes, das im `assets/images` Verzeichnis abgelegt wird.
Links	`object`	Ein Objekt, das externe Links des Projekts enthält. Es kann über optionale `liveDemo` , `videoDemo` und `sourceCode` Eigenschaften für URLs verfügen.
Technologien	`array`	Ein Array, das alle im Projekt verwendeten Technologien (Strings) enthält.

Hinweis: Erstellen Sie neue Dateien, um weitere Projekte hinzuzufügen, und benennen Sie diese als Projektnamen.

Als Referenz finden Sie die vorhandenen Dummy-Dateien im Inhaltsordner.

SEO

Meta-Tags

Nuxt.js bietet effiziente Möglichkeiten, Ihre Website für Suchmaschinen zu optimieren. Weitere Informationen finden Sie im SEO-Leitfaden von Nuxt.j.

Sitemaps

Dieses Projekt verwendet @nuxtjs/sitemap, um die Datei sitemap.xml automatisch zu generieren. Weitere Informationen finden Sie im Konfigurationshandbuch.

Einsatz

Nachdem Sie den Inhalt an Ihre Bedürfnisse angepasst haben, müssen Sie die App für die Produktion bereitstellen.

Manuelle Bereitstellung

Sehen wir uns an, wie man Build-Dateien generiert.

Klonen Sie zunächst das Repository auf Ihrem lokalen Computer mit Git (oder laden Sie es manuell herunter).

 git clone https://github.com/0xaliraza/codefolio

Navigieren Sie dann zum Stammverzeichnis des Repositorys und installieren Sie die Abhängigkeiten

 npm install

Builddateien generieren

 npm run generate

Zu diesem Zeitpunkt verfügen Sie über einen ./build , der alle produktionsbereiten Dateien für die Bereitstellung enthält. Sie können diese Dateien auf einem Hosting-Server oder CDN bereitstellen.

Wenn Sie möchten, dass die App lokal ausgeführt wird

 npm run dev

CI/CD

Sie benötigen Vorkenntnisse in Github/Programmierung, um dies mithilfe von Github-Aktionen oder einer anderen CI/CD-Plattform bereitzustellen.

Dies ist ein Vorlagen-Repository. Sie können also einfach oben rechts auf die Schaltfläche „Diese Vorlage verwenden“ klicken, um dieses Repository zu klonen. Passen Sie Inhaltsdateien an Ihre Bedürfnisse an und gehen Sie zur Registerkarte „Aktionen“, um erforderliche Workflows hinzuzufügen. Sie können vorhandene ci.yml- und cd.yml-Dateien wiederverwenden.

Weitere Informationen finden Sie unter Github-Aktionen.

Beitrag

Fühlen Sie sich frei, eine Pull-Anfrage oder ein Problem zu erstellen, wenn Sie etwas ändern oder beheben möchten. Oder Sie können mich direkt über die folgenden Links kontaktieren.