ホーム>ASPソースコード>その他のカテゴリー
ダウンロード

️ ️ ️このリポジトリは継続されません。後継のリポジトリは LukaHarambasic/vue-resume-component で見つけることができます。 ️ ️ ️

YAML2CV

デモ - デフォルト

デモ - ハイテク企業

ToDo

いくつかの新機能が必要ですか?問題を作成してください:)

  • LinkedIn インポート
  • コンテンツ内のフォルダーごとにページと CV を自動的に生成
  • 本番環境でカバーレターを無効にする
  • ページのオーバーフロー警告
  • 住所と電話番号のフィールドを追加
  • 新しいレイアウトを追加: スキル レベル、タイムライン
  • 応答性を追加する
  • 新しい情報を追加する方法を説明する

既知の問題

  • 十分なコンテンツがなければ、教育/経験/ボランティアの 2 つの要素が同じ線上にある可能性があります。簡単な修正では、正常に見えるまで非表示の文字 (スペースではない) をできるだけ多く追加します。 https://stackoverflow.com/questions/17978720/invisible-characters-ascii?answertab=votes#tab-top からコピーできます。

履歴書をカスタマイズする

  1. contentに移動してすべてのファイルを編集します。ただし、ファイルを削除したり属性を削除したりしないでください (コンテンツが不要な場合は、コンテンツを削除するだけです)。
    1. company.yml : 企業固有の情報 <- 応募する企業ごとにカスタマイズする必要があります。用途:カバーレター
    2. education.yml : 学歴、用途:履歴書の最初のページ
    3. experienceFirstPage.yml : 職歴、用途:履歴書の firstpage
    4. experienceSecondPage.yml : 最初のページに十分なスペースがない場合の作業経験。ページ上のプロジェクトなど、異なるものを 2 つ表示することもできます。必要ない場合は、セグメントを削除するだけで、ファイルは削除しません。用途: cv の Secondpage
    5. footer.yml : フッター内のリンク。非常に柔軟で、次の用途に使用されます:各ページ
    6. person.yml : あなたの個人情報、用途:カバーレター、履歴書の最初のページ
    7. settings.yml : 表示されるほとんどのものを管理するための中央ハブ。すべてがこのファイルで説明されており、次の用途に使用されます。
    8. skills.yml : すべてのスキル、用途:履歴書の最初のページ
    9. voluntary.yml : ボランティア活動のための教育や経験のようなもので、次の目的で使用されます: cv コンポーネントの 2 ページ目components/Footer.vueのロゴ。
  2. さまざまな仕事やポジションに応募したい場合は、次の手順に従う必要があります。
    1. このジョブ/位置用に、カスタマイズするファイルをコピーするフォルダーを作成します。このリポジトリには、 company.yml 、 coverletter.yml 、およびskills.ymlがカスタマイズされているサンプルHighTechCompanyがあります。
    2. pages内のpages/index.vueを複製し、新しいファイルに一致するように次の行をカスタマイズします (ここでは HighTechCompany の例から)。 
        import settings from '~/content/settings.yml'
  import coverletter from '~/content/HighTechCompany/coverletter.yml' //CUSTOMIZED
  import company from '~/content/HighTechCompany/company.yml' //CUSTOMIZED
  import person from '~/content/person.yml'
  import experienceFirstPage from '~/content/experienceFirstPage.yml'
  import experienceSecondPage from '~/content/experienceSecondPage.yml'
  import education from '~/content/education.yml'
  import skills from '~/content/HighTechCompany/skills.yml' //CUSTOMIZED
  import voluntary from '~/content/voluntary.yml'
  import footer from '~/content/footer.yml'
    3. その後、ファイル名を URL に追加することでこのページにアクセスできます。このページHighTechCompany.vueの例では、URL に/HighTechCompany追加してhttp://localhost:3000/HighTechCompanyを取得します。
    4. したがって、ジョブ/ポジションごとにこれを繰り返す必要があります。
  3. assets/scss/_settings.scssの色を変更します。主に$c-primaryカラーですが、必要なものはすべて変更できますが、レイアウトが破壊されると思います。
  4. 同じファイル内でフォントを変更できますが、 nuxt.config.jsファイルに Google フォントを追加する必要があります (そこで見つかった URL を置き換えるだけです)。

ローカルで実行

  1. すべての依存関係をインストールしますnpm install - これは 1 回だけ行う必要があります
  2. npm run devを実行し、localhost:3000 に移動します。

CV の生成 - MacO および Windows 上の Chrome バージョン 71.0.3578.98 でテスト済み

  1. 印刷ダイアログを開く
  2. More settingsをクリックします
  3. そして選択してください
    1. 用紙サイズ：A4
    2. 余白: なし
    3. スケール: 100
    4. オプション: (true) 背景グラフィックス
  4. 印刷先としてSave as PDFを選択します
  5. それで終わりです:)

本番サーバーで使用する

  • Netlify 経由でデプロイできます。無料アカウントで十分で、必要に応じて独自のドメインを追加できます。
  • すべてが公開され、閲覧される可能性があるため、 content内のデータには注意してください
  • カバーレターはモバイル デバイス用に最適化されていません

サーバー上で実行する

  1. npm run build
  2. npm run start

ドッカー上で実行

  1. $ docker build -t yaml2cv --build-arg NODE_ENV=production .
  2. $ docker-compose up -d

ドッカーで確認中

  1. コンテナに移動する
    1. docker exec -it yaml2cv bash
    2. pm2 monit
    3. pm2 list
    4. pm2 stop app
    5. pm2 restart app

静的 HTML を生成する

  1. npm run generate
  2. distフォルダーから Web サーバーにファイルをコピーします。

技術コンセプト

  • コンテンツはページごとに管理する必要があるため、一元的に簡単にカスタマイズできます
  • オブジェクトのような複雑なプロパティはなく、プリミティブのみです。オブジェクトが必要な場合、プロパティには予期されるキーが存在するかどうかを確認するためのカスタムバリデータがあります。

テクノロジー

このプロジェクトでは、Nuxt.js で Vue.js を使用します。

拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて