Spec-Driven Development

带有Next.js的作品集网站

一个现代、响应式的作品集网站，使用Next.js、Tailwind CSS构建，采用时尚的苹果液态玻璃设计，融合了未来主义元素。

特性

• 响应式设计：适用于所有设备尺寸
• 苹果液态玻璃UI：现代磨砂玻璃效果设计
• 日夜模式：在浅色和深色主题之间切换
• 平滑滚动：导航链接可平滑滚动到各个部分
• 渐变悬停效果：卡片在悬停时具有美丽的渐变边框
• 未来主义排版：现代字体选择，外观时尚

技术栈

• Next.js -用于生产的React框架
• 顺风CSS -实用程序优先的CSS框架
• React.js -用于构建用户界面的JavaScript库

组件

• 导航栏：带有徽标和菜单项的极简主义导航栏
• 英雄专区：用你的名字做引人注目的介绍
• 技能科：以卡片形式展示您的技术技能
• 项目组：展示您的项目
• 证书科：以卡片形式显示您的证书
• 接触部分：联系信息和表格
• 页脚：附加链接和版权信息

设计元素

• 液态玻璃主题：干净、半透明的UI元素，带有微妙的阴影
• 未来主义字体：现代排版，给人高科技的感觉
• 渐变悬停效果：卡片功能 rgba(50, 219, 205, 0.9), rgba(250, 250, 250, 0.95) 悬停时的渐变
• 日夜模式：基于用户偏好的主题切换

入门指南

先决条件

• Node.js（v14或更高版本）
• npm或纱线

安装

1. 克隆存储库：

   git clone 

1. 导航到项目目录：

   cd navbar-project

1. 安装依赖项：

   npm install
   # or
   yarn install

1. 运行开发服务器：

   npm run dev
   # or
   yarn dev

1. 打开浏览器并访问： http://localhost:3000

生产大楼

要构建生产项目：

npm run build

要在本地运行生产构建，请执行以下操作：

npm run start

项目结构

navbar-project/
├── app/
├── components/
├── data/
├── public/
├── styles/
├── package.json
├── next.config.js
├── tailwind.config.js
└── README.md

定制

更新内容

• 在中更新您的信息 data/ 目录
• 修改中的组件 components/ 目录
• 在中自定义样式 styles/ 目录

添加项目/证书

• 将项目信息添加到相应的数据文件中
• 用您的凭据更新证书部分

部署

该项目可以部署到Vercel、Netlify或任何支持Next.js应用程序的托管提供商等平台上。

在Vercel上部署

贡献

1. 分叉存储库
2. 创建要素分支(git checkout -b feature/amazing-feature)
3. 提交您的更改(git commit -m 'Add amazing feature')
4. 推到分支(git push origin feature/amazing-feature)
5. 打开拉取请求

许可证

此项目根据MIT许可证获得许可-请参阅 许可证 文件以获取详细信息。

联系

你的名字- email@example.com

项目链接：