codefolio
1.0.0
ライブデモ |導入 |概要 |特長 |貢献
コーディング ポートフォリオを紹介する、すぐに導入できる Web アプリ。
Codefolio は、プログラマー向けの Jamstack ポートフォリオ Web アプリケーションです。 Nuxt.js を使用して構築されており、@nuxt/content モジュールを利用して/contentディレクトリに配置されたユーザー データを使用し、運用準備が整った静的アセットを生成します。
コード全体は、モジュールと再利用性を念頭に置いて書かれています。
このアプリの主な特徴は、静的デプロイメントをサポートしていることです。コーディング ポートフォリオにはそれほど多くの変更が必要ないため、通常の SPA やフルスタック アプリよりも静的サイトの方が適しています。
Codefolio のユーザーインターフェースは、使いやすさを考慮して設計されています。完全に応答性が高く、モバイルファーストのアプローチを採用しています。
この設計は 7-1 Sass パターンに基づいており、レイアウトとユーティリティに部分的にロードされた Bootstrap 5 を活用しています。
assets/aprite/svgディレクトリには、個々の svg アイコン ファイルが含まれています。これらのアイコンを使用して (または独自の svg アイコンをこのディレクトリに配置して) <icon> vue コンポーネントのアイコン名を参照できます。
Codefolio はカスタム ユーザー データをサポートしています。個人の詳細とは別に、ユーザーは外部リンクや上部ナビゲーションバーの再開ボタンの URL など、その他の優れた機能をカスタマイズすることもできます。
静的サイト ジェネレーターは、生のユーザー データ (通常はマークダウンまたは JSON 形式) を取得して、本番環境に対応した HTML を生成するため、Codefolio にコンテンツを追加する際の参考としてこのガイドが必要になります。
コンテンツフォルダーの構造は次のようになります。
content
| navbar.json
| about.md
| social-icons.json
| user.json
|
└───projects
project1.json
project2.json
project3.json
/* so on... */
各ファイルまたはフォルダーが何のためにあるのかを見てみましょう。
このファイルは、トップ ナビゲーション バーに関連するオプションのデータに使用されます。
| 財産 | タイプ | 説明 |
|---|---|---|
| 履歴書URL | string | ナビゲーションバーの再開ボタンのファイル URL を再開します。 |
| 外部リンク | array | 上部のナビゲーションバーに外部リンクを生成するオブジェクトを含む配列。各外部リンク オブジェクトが正しく機能するには、 textおよびurl列のプロパティが必要です。 |
このマークダウンファイルはaboutページに使用されます。
このファイルは、about ページでソーシャル アイコンを生成するために使用されます。
| 財産 | タイプ | 説明 |
|---|---|---|
| アイコン | array | 連絡先ページにソーシャル アイコンを生成するオブジェクトを含む配列。各オブジェクトにはnameとurlプロパティ (文字列) が必要です。 nameプロパティには、/assets/sprite/svg/ディレクトリに一致する svg ファイルが必要です。ソーシャル アイコンのほとんどはすでに利用可能ですが、カスタム SVG アイコンを自由に追加できます。開発モードでは、 /_iconsルートにアクセスして、使用可能なすべてのアイコンを一覧表示できます。 |
このファイルは、ホームページに必要なユーザーの詳細に使用されます。
| 財産 | タイプ | 説明 |
|---|---|---|
| フルネーム | string | ユーザー名。 |
| について | string | ユーザーについて少し。 |
| 画像 | string | httpで始まる有効な画像 URL、またはassets/imagesディレクトリに配置されている画像の名前 (拡張子を含む)。より良い結果を得るには、画像を500x500にトリミングしてください。 |
| タイトル | string | ユーザーの立場または役割。 |
このファイルは、お問い合わせページを生成するために使用されます。
| 財産 | タイプ | 説明 |
|---|---|---|
| フォームアクション | string | お問い合わせフォームのカスタム フォーム アクション。 Formspree.io を確認してください。 |
| 位置 | string | ユーザーの場所の文字列。 |
| 電子メール | string | ユーザーの電子メール アドレス。 |
| 電話 | string | ユーザーの電話番号。 |
このフォルダーには、すべてのプロジェクトがjson形式の個別のファイルとして含まれています。このフォルダー内の各ファイルは、異なるプロジェクトを表します。
次の表に、プロジェクト フォルダー内の各ファイルの形式を示します。
| 財産 | タイプ | 説明 |
|---|---|---|
| ID | integer | 順序付けの一意の識別子。 |
| タイトル | string | プロジェクト名。 |
| 説明 | string | プロジェクトの詳細。 |
| 画像 | string | httpで始まる有効な画像 URL、またはassets/imagesディレクトリに配置されている画像の名前 (拡張子を含む)。 |
| リンク | object | プロジェクトの外部リンクを含むオブジェクト。 URL には、オプションのliveDemo 、 videoDemo 、およびsourceCodeプロパティを含めることができます。 |
| テクノロジー | array | プロジェクトで使用されるすべてのテクノロジー (文字列) を含む配列。 |
注: 新しいファイルを作成してプロジェクトを追加し、それらにプロジェクト名という名前を付けます。
参考として、コンテンツ フォルダー内の既存のダミー ファイルを参照してください。
Nuxt.js は、検索エンジン向けにサイトを最適化する効率的な方法を提供します。詳細については、Nuxt.js SEO ガイドを参照してください。
このプロジェクトは @nuxtjs/sitemap を使用して sitemap.xml ファイルを自動生成します。さらに詳しい情報が必要な場合は、構成ガイドを参照してください。
ニーズに応じてコンテンツをカスタマイズした後、アプリを運用環境にデプロイする必要があります。
ビルドファイルを生成する方法を見てみましょう。
まず、git を使用してローカル マシン上にリポジトリのクローンを作成します (または手動でダウンロードします)。
git clone https://github.com/0xaliraza/codefolio
次に、リポジトリのルート ディレクトリに移動し、依存関係をインストールします。
npm install
ビルドファイルを生成する
npm run generate
この時点で、デプロイメントに使用できるすべての運用ファイルを含む./buildフォルダーが作成されます。これらのファイルは、ホスティング サーバーまたは CDN にデプロイできます。
アプリがローカルで実行されるのを確認したい場合
npm run dev
github アクションまたは他の CI/CD プラットフォームを使用してこれをデプロイするには、事前の github/コーディングの経験が必要です。
これはテンプレート リポジトリなので、右上にある [このテンプレートを使用] ボタンをクリックするだけでこのリポジトリのクローンを作成できます。ニーズに応じてコンテンツ ファイルをカスタマイズし、[アクション] タブに移動して必要なワークフローを追加します。既存の ci.yml および cd.yml ファイルを再利用できます。
詳細については、github アクションを参照してください。
変更または修正が必要な場合は、お気軽にプルリクエストまたは問題を作成してください。または、以下のリンクを使用して直接私に連絡することもできます。
あらゆる種類のヘルプや情報が必要な場合はお気軽にご連絡ください。つながりましょう！ :)
Webサイト
ギットハブ
ツイッター
中くらい
リンクトイン
ライセンスの権利と制限 (MIT) については、LICENSE ファイルを参照してください。
