現代的な個人ポートフォリオの構築」?

Next.js フレームワークを使用して完璧なポートフォリオ Web サイトを開発するためのステップバイステップのチュートリアル。優れたパーティクル アニメーションとスムーズな遷移を備えた視覚的に魅力的な Web サイトを通じて、ポートフォリオ リソースへのアクセスを改善します。エクスペリエンスを強化するためのインタラクティブなリソース。ここにライブ リンク my-portfolio

があります。

?特徴

• すべてのデバイスに対応したレスポンシブデザイン
• インタラクティブなパーティクル背景
• スムーズなページ遷移
• ダイナミックなプロジェクトのショーケース
• 電子メール検証を含むお問い合わせフォーム
• ダウンロード可能な履歴書
• ソーシャルメディアの統合
• ブログセクション
• プロのスキルの可視化
• コンテナ化のための Docker サポート

⁉️ で構築

• Next.js 14
• リアクト 18
• Tailwind CSS
• フレーマーモーション
• アイコンに反応
• スワイパー
• TS粒子
• Radix UI コンポーネント
• ドッカー

?‍♂️ はじめに

前提条件

• Node.js 18 以降
• npm または Yarn

インストール

1. リポジトリのクローンを作成します。

   git clone https://github.com/B-KEY/BIBEK-PORTFOLIO.git

1. 依存関係をインストールします。

   npm install
   # or
   yarn install

1. 開発サーバーを実行します。

   npm run dev
   # or
   yarn dev

1. ブラウザで http://localhost:3000 を開きます。

Docker セットアップを希望する場合

1. Docker イメージをビルドします。

   docker build -t portfolio .

1. コンテナを実行します。

   docker run -p 3000:3000 portfolio

?プロジェクトの構造

portfolio/
├── app/ # Next.js app directory
│   ├── contact/ # Contact page
│   ├── resume/ # Resume page
│   ├── work/ # Projects showcase
│   └── layout.jsx # Root layout
├── components/ # Reusable components
├── public/ # Static assets
└── styles/ # Global styles

?導入

プロジェクトは次の手順で Vercel にデプロイできます:

1. コードを GitHub にプッシュします
2. リポジトリを Vercel に接続します
3. ワンクリックで展開

?環境変数

ルート ディレクトリに .env.local ファイルを作成します。

NEXT_PUBLIC_CONTACT_FORM_KEY=your_form_key
Also add username and api for Blog

?貢献する

1. リポジトリをフォークする
2. 機能ブランチを作成します (git checkout -b feature/AmazingFeature)
3. 変更をコミットします (git commit -m 'Add some AmazingFeature')
4. ブランチへのプッシュ (git Push Origin feature/AmazingFeature)
5. プルリクエストを開く

?ライセンス

このプロジェクトは ISC ライセンスに基づいてライセンスされています - 詳細については LICENSE ファイルを参照してください。

?著者

ビベク・タパ

• LinkedIn: ビベク-thapa1
• GitHub: @B-KEY

?謝辞

• 素晴らしいフレームワークの Next.js チーム
• Vercel によるホスティング
• すべてのオープンソース貢献者
• cristianmihai01 からの部分的なインスピレーション

以上が現代的な個人ポートフォリオの構築」?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。