Zenn
🚀

🚀 オープンソースプロジェクト『Open Portfolio』 - データベース不要のポートフォリオサイト

に公開
Next.js
エンジニア
ポートフォリオ
opensource
tech

近年、ポートフォリオサイトは個人のスキルや実績を示す重要なツールとなっています。そこで、Open Portfolioは、データベース不要でNext.jsをベースにしたモダンなポートフォリオサイトのテンプレートとして登場しました。今回は、オープンソースリポジトリとして公開している本プロジェクトに、ぜひ多くの開発者やデザイナーの方々に参加いただきたく、プロジェクトの概要と魅力を紹介いたします。

構築できるサイトはこちら👇
https://open-portfolio.bedev.site

プロジェクト概要

Open Portfolioは、下記のような特徴を持つポートフォリオサイトです：

  • あなたのスキルの掲載
    職務経験、スキル、制作実績など、一般的なポートフォリオサイトに必要な情報をシンプルにまとめています。

  • モダンなデザインと豊富なカラーテーマ
    shadcn/uiを利用した洗練されたデザインと、ダークモード・ライトモードの切り替えに対応。多彩なカラーテーマで自分好みにカスタマイズ可能です。

  • 多言語化対応
    英語、日本語、中国語など、複数の言語でサイトを表示できるため、グローバルなアピールも可能です。

  • 技術ブログサービスとの連携
    QiitaやZennなどのプラットフォームと連携し、技術記事を自動で取り込み、ポートフォリオ内で紹介する機能を備えています。

クイックスタート

プロジェクトのセットアップはとてもシンプルです。まず、Open Portfolio GitHubリポジトリをフォークしていただき、以下の手順でローカル環境に構築してください：

npm install
cp .env.example .env
npm run dev

実行後、ブラウザで http://localhost:3000 にアクセスして、動作を確認できます。
※ インストール前に、Node.jsがインストールされていることをご確認ください。（Node.js公式サイト）

カスタマイズとデプロイ

  • 設定のカスタマイズ
    ja_setting.json のコメントを参考に、必要な設定値を変更していただけます。

  • Vercelへのデプロイ推奨
    GitHubと連携し、環境変数設定を .env.example を参考に行うことで、Vercelへのデプロイがスムーズに実現できます。

貢献とコミュニティ

このプロジェクトはオープンソースとして公開しており、皆さんからの貢献を大歓迎しています。コードの改善、デザインの提案、ドキュメントの整備など、どんな形でも構いません。
詳しくは Contribution Guide をご参照ください。

また、プロジェクトに関するフィードバックや質問は以下のコミュニティチャネルで受け付けています：

今後の展望

Open Portfolioは、オープンソースコミュニティの力を借りながら、さらなる機能拡張とユーザーエクスペリエンスの向上を目指しています。あなたのスキルやアイディアが、このプロジェクトの未来を作ります。ぜひ参加して、一緒に「より良いポートフォリオサイト」を作り上げましょう！

GitHubでスターを押して、最新情報をキャッチアップ！
Open Portfolio GitHubリポジトリ

皆さんのご参加を心よりお待ちしております。

Discussion