Prompt file imported from wyw121/PortfolioPulse (
.github/prompts/vercel-style-layout.prompt.md). Copyright stays with the author.
Vercel 风格布局实现
概述
此提示文件用于指导实现 Vercel 风格的大屏中心式布局，营造专业的个人技术项目展示平台。
布局要求
整体结构
┌─────────────────────────────────────┐
│ Navigation Bar │ ← 透明背景，居中对齐
├─────────────────────────────────────┤
│ │
│ Hero Section │ ← 全屏高度，品牌展示
│ (个人品牌 + 技术栈) │
│ │
├─────────────────────────────────────┤
│ │
│ Project Grid (3列) │ ← 项目卡片，悬停效果
│ │
└─────────────────────────────────────┘
设计特点
-
极简主义：
- 大量留白空间
- 内容居中对齐
- 最小化视觉干扰
-
专业感：
- 深色背景为主
- 高对比度文字
- 科技感渐变点缀
-
交互体验：
- 微妙的悬停效果
- 流畅的页面滚动
- 响应式适配
组件规范
Hero Section
- 高度：100vh
- 内容居中（水平 + 垂直）
- 渐变背景点缀
- 个人品牌标识
项目卡片
- 3 列网格布局（桌面）
- 悬停时 translateY(-4px)
- 渐变边框效果
- 发光阴影
导航栏
- 固定顶部
- 透明背景
- 居中对齐导航项
- 平滑滚动锚点
响应式断点
- 手机：< 640px（1 列）
- 平板：640px-1024px（2 列）
- 桌面：> 1024px（3 列）
请基于这些规范创建具有 Vercel 风格特色的现代化布局。