建立现代个人投资组合”？

使用 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中文网其他相关文章！