resume nextjs

---

導入

• 誰でも簡単にきれいなWeb履歴書を作成できます（いくつかのコーディングを使用して..）
• next.js、ブートストラップCSSが使用されます。
• 実際、https：//github.com/uyu423/resume- regacyはnext.jsでそれを移植しました
• サンプル：https：//uyu423.github.io/resume-nextjs
  • その他の例については、example.mdを参照してください。

貢献者

• YOWU（UYU423）
• dal-ya
• テヨン・キム（リザード・キム）
• テヤングジン（ヘリオス）
• Hyogeun Oh（Zerohertz）

requirems

• node.js> 18
  • node.js 18 NODE_OPTIONS=--openssl-legacy-providerオプションを回避するためにバージョン18以降から発生するERR_OSSL_EVP_UNSUPPORTEDが適用されます。
  • 18以降のnode.jsバージョンでテストし、 .nvmrcにリストされているnode.jsバージョンを使用することをお勧めします。

インストール

 # fork to your github account & git cloning your forked repository
npm install

開発モードを実行します

npm run dev

構造

• 資産/
  • 画像、ファビコン
• 成分/
  • 反応コンポーネント
• ページ/
  • index.htmlをレンダリングするための1ページのみです。
• ペイロード/
  • ペイロードデータを変更するだけで、個人のWeb履歴書を引き出すことができます。
  • 履歴書のレンダリングに必要なデータが含まれます。
  • 下部のペイロードの詳細
• docs/
  • npm run export (next export)が実行されると、静的HTMLがレンダリングされ、 docsディレクトリの下部に生成されます。
  • GitHub Pagesのdocs/ Githubページのディレクトリは、GitHubページをホストするために実行できます。
  • docs/typedoc/ contable typedoc htmlですが、 npm run exportようには生成されません。 npm run typedocます。

ペイロード説明

• typedoc：https：//uyu423.github.io/resume-nextjs/typedoc
  • typedoc内のすべてのペイロードのレンダリングサンプルスクリーンショット。
• _globalとfooterペイロードを除くすべてのペイロードにはdisable?: booleanフィールド。フィールドがtrueある場合、そのペイロードのセクションをレンダリングしません。

プロフィール

• プロフィール写真、名前、連絡先、いくつかの通知領域
• typedoc：iprofile.payload
• TSサンプル：Payload/profile.ts

導入

• 自己導入エリア
• typedoc：iintroduce.paylod
• TSサンプル：Payload/Introduce.ts

スキル

• 独自のテクノロジーの紹介エリア
• typedoc：iskill.payload
• TSサンプル：Payload/Skill.ts

経験

• （職場）経験のための紹介エリア
• typedoc：iexperience.paylod
• TSサンプル：Payload/Experience.ts

プロジェクト

• 実装プロジェクトの紹介領域
• typedoc：iproject.payload
• TSサンプル：Payload/project.ts

オープンソース

• オープンソースアクティビティの紹介
• typedoc：iopensource.paylod
• TSサンプル：Payload/OpenSource.ts

プレゼンテーション

• プレゼンテーション活動の紹介
• typedoc：ipresentation.payload
• TSサンプル：Payload/Presention.ts

記事

• ブログ/SNSの投稿、記事の紹介領域
• typedoc：iarticle.paylod
• TSサンプル：Payload/article.ts

教育

• アカデミックの紹介
• typedoc：ieducation.payload
• TSサンプル：Payload/Education.ts

等

• 他のアイテムの紹介（競争、認定、サービスなど）
• typedoc：ietc.paylod
• TSサンプル：ペイロード/など

_グローバル

• グローバル設定用の設定エリア（Webタイトル、SEO、ファビコンなど）
• typedoc：iglobal.payload
• TSサンプル：ペイロード/_global.ts

輸出

npm run export

• 静的HTMLリソースは、 /docsの下部に生成されます。
• サブパスブランチは、ドメイン構造を変更します（ex。https://uyu423.github.io/resume） package.jsonのhomepageフィールド値をホストするドメインに変更します。
  • homepageフィールドにpathnameがある場合、 next.config.jsのassetPrefix追加するロジックがあります。

githubページにエクスポートします

リポジトリ設定

• Options -Githubページ-Source -Select Master Branch /Docsフォルダー
  • Githubページソースの詳細については、help.github.comを参照してください。
• npm run exportを実行して、 docsで静的HTMLを更新します。
• 外部ドメインがある場合は、カスタムドメインアイテムを入力してください。
  • GitHubページのホスティングに必要なdocs/CNAMEファイルはnpm run exportプロセス中に自動的に作成されます。
  • docs/CNAMEファイルの作成については、 package.jsonのhomepageフィールドを参照してください。カスタムドメインを使用するときにホームページ値を変更します。
  • package.jsonのhomepageフィールドが*.github.io/*カスタムドメインを使用せず、 docs/CNAMEを生成しないと見なされます。
  • 外部ドメインの詳細については、help.github.comを参照してください。
• *.github.ioドメインをそのまま使用する場合http://{username}.github.io/{repository_name}接続すると、Web履歴書が表示されます。

貢献

• 追加機能が必要な場合は、ご覧ください。常に開いています。

質問？

• 生産ビルドで画像が壊れたとき
  • ＃24を参照してください
• セクションの順序をどのように調整しますか？
  • 現在、 pages/index.tsxから直接レンダリング順序を変更する以外に選択肢はありません。
  • データまたは_globalペイロードで処理する方法を考えています。
• 画像の場合、index.htmlのCSS404
  • ＃37メモ