nextjs resume
1.0.0
特にソフトウェアの専門家を念頭に置いて構築された履歴書。潜在的な雇用主に美しく信じられないほど速い履歴書のウェブサイトで感動し、電子メールと印刷用のPDFを生成します。
例を参照してください
履歴書は、パブリックURLでアクセスできない情報を表示する安全なURLを生成することもできます。安全なバージョンには、電子メール、電話番号、郵送先住所などの個人情報を含めることができます。潜在的な雇用主にプライベートリンクを送信するか、それを使用してより完全なPDFを自分で生成することができます。
このプロジェクトでは、カスタム構成をセットアップし、内部CMSにコンテンツを追加し、VercelまたはNetlifyに展開するためのいくつかのステップのみが必要です。
開始する最も簡単な方法は、1つのステップでクローンと展開することです。その後、ニーズに合わせてCMSとテンプレートを編集できます。
このプロジェクトは、netlifyまたはvercelに展開されるように設計されています。次のボタンのいずれかをクリックして、リポジトリをクローンし、環境変数を設定して展開できます。
履歴書をカスタマイズするには、地元のマシンとcdに作成したプロジェクトをクローンします。
cd my-resume
npm i bun 、 npm 、 pnpm 、およびyarnでプロジェクトをテストしましたが、顕著な問題は発生していません。開発のために、テストランナーはデフォルトでbunになります。
お気に入りのエディターでプロジェクトを開き、 resumeConfig.tsファイルを編集してニーズを満たすことができるrootでedit-me/config/ folderを開きます。構成ファイルには、プロジェクト全体で使用される次の定数が含まれています（これらは、適切なオートコンプリートとエラーチェックを提供するために入力されます）：
accentColor ： AccentColor 。 Radix UI色のアクセントパレットの名前。標準色を使用する場合、対照的なテキストの色は白になり、明るい色を使用する場合、対照的なテキストの色は黒になります。neutralColor ： NeutralColor 。 Radix UIグレーからのニュートラルパレットの名前。appTheme ： 'system' | 'light' | 'dark' 。 appThemeがsystemに設定されている場合、履歴サイトはデフォルトでユーザーのシステム優先順位になります。 lightまたはdarkなると設定されている場合、ユーザーの好みはオーバーライデンになります。imageTheme ： 'light' | 'dark' 。 OG共有画像とアプリのアイコンは、明るいバリアントまたはダークバリアントで生成されます。pdfTheme ： 'light' | 'dark' 。 PDFは、明るいバリアントまたはダークバリアントで生成されます。また、ドキュメントの下部に外部リンクを生成するlinks.tsもあります。これらのリンクと一緒に、単純なアイコンから任意のアイコンを使用できます。
履歴書発電機は、すぐにボックスで19のアクセントカラーパレットと6つのニュートラルカラーパレットを提供します。以下は、明るいモードとダークモードの両方のいくつかのバリエーションのスクリーンショットです。
| ライトモード | ダークモード |
|---|---|
ブルー/モーブ | ブルー/モーブ |
ルビー/グレー | ルビー/グレー |
ミント/スレート | ミント/スレート |
アクセント、ニュートラル、および配色の好みは、生成されたOG画像にも適用されます。
| ライトモード | ダークモード |
|---|---|
青/スレート | 青/スレート |
次に、 edit-me/content/に含まれる模擬CMSデータを変更します。各Markdownファイルは、アイテムに属性を追加するために使用されるフロントマターフィールドを使用します。これらの属性はタイプ安全であるため、必要なフィールドが欠落または無効な場合はプロジェクトが実行されません。マークダウンファイルの残りの部分は、アイテムの説明を提供するためにHTMLとしてレンダリングされます。
モックファイルはかなり自明である必要がありますが、必要なフィールドとオプションのフィールドの詳細な説明のためにContentLayer構成を表示できます。
アプリが展開されている場所に関係なく、次の環境変数へのアクセスが必要になる場合があります。
PRIVATE_KEY （オプション）：これは著者によって決定されたコードであり、個人情報を含む履歴書のバージョンへのURLアクセスを提供します。このコードを生成することをお勧めします（例：UUIDまたはパスワードジェネレーターの使用）。 プロジェクトは、パブリックURLよりも多くの情報を表示する秘密のURLを提供するように構成できます。これは、潜在的な雇用主に完全な履歴書を送りたい場合、または自分で使用するためにPDFを生成したい場合に役立ちます。このバージョンでは、一般の人に表示されたくない電子メール、電話番号、住所などの個人情報を含めることができます。
プライベートURLは、 PRIVATE_KEY環境変数を追加した場合にのみ機能します。ローカルで作業している場合は、これを.env.localファイルに追加できます。
PRIVATE_KEY=your-private-key
その後、 https://your-url.com/private/your-private-keyにアクセスして、履歴書のプライベートバージョンを見ることができます。
組み込みのマークダウン統合については、個人情報をパブリックGITリポジトリにコミットしないでください。この機能はプライベートリポジトリでのみ使用してください。それでも、gitリポジトリに個人情報を委託することに関するセキュリティの懸念に注意してください。
プライベートデータをCMSに追加するには、 privateFieldsフォルダーに追加するだけです。
cms/privateFields/ 。表示するだけのプライベート連絡先情報フィールドを追加します。それらはフォルダーに配置されている順序で表示されるため、数字のプレフィックスを使用して注文できます。label ：必要な文字列。 「電子メール」や「アドレス」などのフィールドのラベル。このプライベートURLは、送信する人と同じくらい安全です。古いプライベートURLを無効にするには、 PRIVATE_KEY環境変数を変更する必要があります。
このテンプレートは、レスポンシブで美しく、すぐにアクセスできるように構築されています。 Webバージョンでの自動ダーク/ライトモードのテーマと、PDFバージョンでの優れたシングルページの印刷レイアウトをサポートします。このプロジェクトは、アクセントの色などの最小限の構成セットをサポートしていますが、フロントエンドの開発者やデザイナーの場合、ソースコードを簡単に開き、適切でカスタマイズできます。
カスタマイズについて本当に深く行きたい場合は、ルートフォルダーtailwind.config.tsファイルのtailwind構成を完全に制御できます。
next.js画像生成を使用して、動的なオープングラフ（Facebook/Twitter）共有画像とアプリアイコンを生成します。 src/app/api/og/route.tsxでtailwindクラスを使用して、og画像のレイアウト、スタイル、およびテキストを編集し、 src/app/icon.tsxでアイコンを使用できます。
この動的な共有イメージは、CMSからのデータだけでなく、カスタムaccentColor設定を使用します。
このプロジェクトの最新バージョンと個人の履歴書を同期するには、次のことを行うことができます。
// 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 main次に、マージ競合を解決し、希望する変更を加えます。チェンジログを調べて、最後に引っ張ったときから何が起こったのかを確認する必要があります。上流の変更により、カスタマイズが壊れる可能性があることに注意してください。
