nextjs resume
1.0.0
Ein Lebenslauf, der insbesondere mit Software -Profis aufgebaut ist. Beeindrucken Sie Ihren potenziellen Arbeitgeber mit einer schönen und unglaublich schnellen Lebenslaufwebsite oder generieren Sie eine PDF für E -Mail und Druck.
Siehe ein Beispiel
Ihr Lebenslauf kann auch eine sichere URL generieren, in der Informationen angezeigt werden, die auf der öffentlichen URL nicht zugänglich sind. Die sichere Version kann private Informationen wie E -Mail, Telefonnummer und Postanschrift enthalten. Sie können den privaten Link an einen potenziellen Arbeitgeber senden oder ihn verwenden, um ein vollständigeres PDF für sich selbst zu generieren.
Das Projekt erfordert nur wenige Schritte, um Ihre benutzerdefinierte Konfiguration einzurichten, Inhalte zum internen CMS hinzuzufügen und an Vercel oder Netlify bereitzustellen!
Der einfachste Weg, um loszulegen, besteht darin, in einem Schritt zu klonen und in einem Schritt einzusetzen. Anschließend können Sie das CMS und die Vorlage so bearbeiten, dass sie Ihren Anforderungen entsprechen.
Das Projekt ist so konzipiert, dass sie auf Netlify oder Vercel bereitgestellt werden. Sie können auf eine der folgenden Schaltflächen klicken, um die Repo zu klonen, Umgebungsvariablen zu setzen und bereitzustellen.
Um Ihr Lebenslauf anzupassen, klonen Sie das Projekt, das Sie gerade an Ihrer lokalen Maschine erstellt haben, und cd .
cd my-resume
npm i Ich habe das Projekt mit bun , npm , pnpm und yarn getestet und bin nicht auf bemerkenswerte Probleme gestoßen. Für die Entwicklung wird der Testläufer aus Standardeinstellungen zu bun standardmäßig.
Öffnen Sie das Projekt im bevorzugten Editor und öffnen Sie die edit-me/config/ Ordner im Root, in dem Sie die Datei resumeConfig.ts so bearbeiten können, dass Sie Ihre Anforderungen entsprechen. Die Konfigurationsdatei enthält die folgenden Konstanten, die im gesamten Projekt verwendet werden (diese werden tippt, um eine geeignete automatische Vervollständigung und Fehlerprüfung bereitzustellen):
accentColor : AccentColor . Der Name einer Akzentpalette aus Radix UI -Farben. Wenn die Verwendung einer Standardfarbe verwendet wird, ist die kontrastierende Textfarbe weiß, und wenn die Verwendung einer hellen Farbe verwendet wird, ist die kontrastierende Textfarbe schwarz.neutralColor : NeutralColor . Der Name einer neutralen Palette aus Radix UI -Grautönen.appTheme : 'system' | 'light' | 'dark' . Wenn appTheme auf system eingestellt ist, wird die Résumé -Site standardmäßig die Systempräferenz des Benutzers. Wenn Sie auf light oder dark gesetzt sind, wird die Präferenz des Benutzers überschrieben.imageTheme : 'light' | 'dark' . Ihre OG -Share -Bild- und App -Symbole werden entweder in einer hellen oder einer dunklen Variante erzeugt.pdfTheme : 'light' | 'dark' . Ihr PDF wird entweder in einer hellen oder einer dunklen Variante erzeugt. Sie finden auch links.ts , die am Ende des Dokuments externe Links generieren. Sie können jedes Symbol von einfachen Symbolen neben diesen Links verwenden.
Der Lebenslaufgenerator bietet 19 Akzent-Farbpaletten und 6 neutrale Farbpaletten außerhalb des Boxs. Im Folgenden finden Sie Screenshots aus einigen Variationen sowohl im hellen als auch im dunklen Modus.
| Lichtmodus | Dunkler Modus |
|---|---|
Blau/mauve  | Blau/mauve  |
Rubin/Grau  | Rubin/Grau  |
Minze/Schiefer  | Minze/Schiefer  |
Ihr Akzent-, Neutral- und Farbschema -Präferenzen gelten auch für das erzeugte OG -Bild.
| Lichtmodus | Dunkler Modus |
|---|---|
Blau/Schiefer  | Blau/Schiefer  |
Ändern Sie als Nächstes die Mock-CMS-Daten, die in edit-me/content/ enthalten sind. Jede Markdown -Datei verwendet Felder vorne, die zum Hinzufügen von Attributen zum Element verwendet werden. Diese Attribute sind vom Typ sicher, sodass das Projekt nicht ausgeführt wird, wenn die erforderlichen Felder fehlen oder ungültig sind. Der Rest der Markdown -Datei wird als HTML zur Verfügung gestellt, um eine Beschreibung des Elements bereitzustellen.
Obwohl die Mock-Dateien ziemlich selbsterklärend sein sollten, können Sie die ContentLayer-Konfiguration für detaillierte Beschreibungen der erforderlichen und optionalen Felder anzeigen.
Unabhängig davon, wo die App bereitgestellt wird, müssen möglicherweise Zugriff auf die folgenden Umgebungsvariablen zugreifen:
PRIVATE_KEY (optional): Dies ist ein vom Autor festgelegter Code, der URL -Zugriff auf eine Version des Lebenslaufs ermöglicht, die private Informationen enthält. Wir empfehlen, diesen Code zu generieren (z. B. eine UUID oder einen Kennwortgenerator). Ihr Projekt kann so konfiguriert werden, dass eine geheime URL bereitgestellt wird, die mehr Informationen als die öffentliche URL anzeigt. Dies ist hilfreich, wenn Sie einen vollständigen Lebenslauf an einen potenziellen Arbeitgeber senden möchten oder wenn Sie eine PDF für Ihre eigene Verwendung generieren möchten. In dieser Version können Sie persönliche Informationen wie E -Mail, Telefonnummer und Adresse angeben, die Sie nicht für die breite Öffentlichkeit sichtbar möchten.
Die private URL funktioniert nur, wenn Sie eine PRIVATE_KEY -Umgebungsvariable hinzugefügt haben. Wenn Sie lokal arbeiten, können Sie dies in einer .env.local -Datei hinzufügen:
PRIVATE_KEY=your-private-key
Anschließend können Sie https://your-url.com/private/your-private-key besuchen, um die private Version des Résumés zu sehen.
Bitte beachten Sie, dass Sie die privaten Informationen nicht an ein öffentliches Git-Repo verpflichten müssen . Verwenden Sie diese Funktion nur in einem privaten Repo und beachten Sie auch dann die Sicherheitsbedenken hinsichtlich des Git -Repo.
Um dem CMS private Daten hinzuzufügen, fügen Sie sie einfach dem privateFields -Ordner hinzu.
cms/privateFields/ . Fügen Sie so viele private Kontaktinformationsfelder hinzu, wie Sie anzeigen möchten. Sie werden in der Reihenfolge angezeigt, in der sie im Ordner angeordnet sind, sodass Sie ein Zahlenpräfix verwenden können, um sie zu bestellen.label : Erforderliche Zeichenfolge . Das Etikett des Feldes, wie "E -Mail" oder "Adresse". Diese private URL ist nur so sicher wie die Personen, an die Sie sie senden . Um eine alte private URL ungültig zu machen, müssen Sie lediglich die Umgebungsvariable PRIVATE_KEY ändern.
Die Vorlage ist reaktionsschnell, schön und zugänglich gemacht. Es unterstützt die automatische Themen für Dark/Light-Modus in der Webversion und ein großartiges einseitiges Drucklayout in der PDF-Version. Das Projekt unterstützt eine minimale Reihe von Konfigurationen wie Akzentfarben. Wenn Sie jedoch ein Front -End -Entwickler oder Designer sind, können Sie den Quellcode problemlos öffnen und ihn so anpassen, dass Sie es für richtig halten.
Wenn Sie sich wirklich mit der Anpassung einsetzen möchten, haben Sie die volle Kontrolle über die Rückenwind -Konfiguration in der Datei "root order tailwind.config.ts ".
Wir verwenden Next.js Bildgenerierung, um dynamische offene Grafiken (Facebook/Twitter) zu generieren, die Bilder und App -Symbole freigeben. Sie können das Layout, die Stile und den Text des OG -Bildes mithilfe von Tailwind -Klassen in src/app/api/og/route.tsx und im Symbol in src/app/icon.tsx bearbeiten.
Dieses dynamische Freigabebild verwendet Ihre benutzerdefinierte accentColor -Einstellung sowie Daten aus dem CMS.
Um Ihren persönlichen Lebenslauf mit der neuesten Version dieses Projekts zu synchronisieren, können Sie Folgendes tun:
// add the original repo as a git remote
git remote add upstream [email protected]:colinhemphill/nextjs-resume.git
// pull changes from upstream
git pull upstream mainLösen Sie dann alle Zusammenführungskonflikte und nehmen Sie Ihre gewünschten Änderungen vor. Sie müssen sich über den ChangeLog schauen, um zu sehen, was seit dem letzten Mal passiert ist, und bitte beachten Sie, dass Upstream -Änderungen Ihre Anpassungen brechen können!
