このリポジトリは、Remix と Cloudflare Pages を使用して構築されたポートフォリオサイトのテンプレートです。
- 多言語対応 (日本語/英語): ユーザーはボタン一つで表示言語を切り替えることができます。
- ダークモード対応: ユーザーのシステム設定または手動設定に基づいて、ダークモードとライトモードを切り替えます。
- 印刷最適化: 印刷用に最適化されたスタイルが適用され、不要な要素が非表示になります。
- vCard 生成: ユーザー情報を入力することで、vCard ファイルを動的に生成し、ダウンロードできます。
- レスポンシブデザイン: 様々なデバイスサイズで適切に表示されます。
- コンポーネントベース: 再利用可能なコンポーネントを使用して、コードの保守性と拡張性を向上させています。
- 型安全: TypeScript を使用して、型安全性と開発者エクスペリエンスを向上させています。
- フレームワーク: Remix
- デプロイ: Cloudflare Pages
- スタイリング: Tailwind CSS
- アイコン: Lucide React
- 言語: TypeScript
git clone https://github.com/valkyrie263/portfolio-template
cd portfolio-templatenpm installCloudflare Pages にデプロイする場合は、Cloudflare のドキュメント に従って、アカウントの作成とプロジェクトの設定を行ってください。
必要に応じて、.env ファイルを作成し、環境変数を設定してください。
_index.tsx 内の profile オブジェクトを編集して、自身の情報を入力してください。
_index.tsx 内の profile.skills 配列を編集して、自身のスキル情報を入力してください。
アイコンは、Lucide React から選択できます。
_index.tsx 内の profile.certifications 配列を編集して、自身の資格情報を入力してください。
_index.tsx 内の profile.interests オブジェクトを編集して、自身の興味・関心を入力してください。
public/static フォルダ内にアバター画像を配置し、_index.tsx 内の profile.avatar のパスを更新してください。
開発サーバーを起動するには、以下のコマンドを実行します。
npm run devブラウザで http://localhost:8788 を開くと、アプリケーションが起動します。
本番用にアプリケーションをビルドするには、以下のコマンドを実行します。
npm run buildCloudflare Pages にデプロイするには、以下のコマンドを実行します。
npm run deploywrangler.toml 内の Cloudflare バインディングの型を生成するには、以下のコマンドを実行します。
npm run typegenwrangler.toml を変更した場合は、型を再生成する必要があります。
npm run start: ビルドされたアプリケーションをローカルでプレビューします。npm run typecheck: TypeScript の型チェックを実行します。
このプロジェクトは MIT ライセンスの下で公開されています。詳細については、LICENSE ファイルを参照してください。
バグの報告や機能の提案など、どのような貢献も歓迎します。プルリクエストを送信する前に、CONTRIBUTING.md を確認してください。
プロジェクトに関する質問や問題がある場合は、Issues でお知らせください。
このプロジェクトは、以下のライブラリとリソースに依存しています。
このプロジェクトにご関心をお寄せいただきありがとうございます。