建立現代個人投資組合”？

使用Next.js 框架開發完美作品集網站的分步教程，透過具有漂亮粒子動畫和平滑過渡的視覺吸引力網站更好地訪問作品集資源用於增強體驗的互動資源。這裡是即時連結 my-portfolio

？特徵

• 適用於所有裝置的響應式設計
• 互動粒子背景
• 平滑的頁面轉換
• 動態項目展示
• 帶有電子郵件驗證的聯絡表單
• 可下載履歷
• 社群媒體整合
• 部落格部分
• 專業技能視覺化
• Docker 對容器化的支援

?️ 內置

• Next.js 14
• 反應 18
• Tailwind CSS
• 成幀器運動
• 反應圖示
• 滑動器
• TSP文章
• Radix UI 元件
• 碼頭工人

?‍♂️ 開始使用

先決條件

• Node.js 18 或更高版本
• npm 或紗線

安裝

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 功能/AmazingFeature）
5. 開啟拉取請求

？執照

該項目已獲得 ISC 許可證 - 請參閱許可證文件以了解詳細資訊。

？作者

比貝克·塔帕

• 領英：bibek-thapa1
• GitHub：@B-KEY

？致謝

• Next.js 團隊創造了令人驚嘆的框架
• Vercel 託管
• 所有開源貢獻者
• 部分靈感來自cristianmihai01

以上是建立現代個人投資組合”？的詳細內容。更多資訊請關注PHP中文網其他相關文章！