creative-agency-portfolio — Next.js 作品集模板

SHA-256: f6aea0ca67ea253bfe3c246f0c79ec08305deba11f3e0f3fabd575b52fa8f5d8

2026-10-14T00:18:17.146Z

# Creative Agency Portfolio

A bold, eye-catching Next.js portfolio template for creative agencies and freelancers. Vibrant gradients, glassmorphism effects, bento-style layouts, and smooth scroll animations. Built with Next.js 15, TypeScript, Tailwind CSS, and Framer Motion.

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/Terminal-Blank/creative-agency-portfolio)

## Features

- **Bold Visual Design** -- Vibrant gradients, glassmorphism cards, and large typography
- **Smooth Animations** -- Scroll-triggered animations and hover effects with Framer Motion
- **Bento Grid Layouts** -- Modern grid-based layouts for services and project showcases
- **Fully Responsive** -- Mobile-first design that works on all devices
- **SEO Optimized** -- Metadata, Open Graph tags, and semantic HTML
- **Easy to Customize** -- Swap colors, content, and sections with minimal effort
- **Modern Stack** -- Next.js 15, TypeScript, Tailwind CSS 4, Framer Motion

## Sections

1. **Hero** -- Bold headline with gradient text and dual CTAs
2. **Services** -- Bento grid of service offerings
3. **Work** -- Project showcase with hover-reveal descriptions
4. **Testimonials** -- Client testimonial cards with glassmorphism
5. **Team** -- Team member cards with gradient avatars
6. **Contact** -- Contact form with gradient submit button

## Quick Start

```bash
git clone https://github.com/Terminal-Blank/creative-agency-portfolio.git my-agency
cd my-agency
npm install
npm run dev
```

Open http://localhost:3000 to see your site.

## Customization

### Branding

Edit the gradient colors in `app/globals.css` to match your brand.

### Content

- `components/Hero.tsx` -- Agency name, headline, and tagline
- `components/Services.tsx` -- Service offerings
- `components/Work.tsx` -- Portfolio projects
- `components/Testimonials.tsx` -- Client quotes
- `components/Team.tsx` -- Team members

### Colors

Update the color variables in the `@theme` block in `app/globals.css`.

## Deployment

### Vercel (Recommended)

Click the "Deploy with Vercel" button above, or:

```bash
npm i -g vercel
vercel
```

### Netlify

```bash
npm run build
netlify deploy --prod
```

## Tech Stack

- [Next.js 15](https://nextjs.org/) -- React framework
- [TypeScript](https://www.typescriptlang.org/) -- Type safety
- [Tailwind CSS 4](https://tailwindcss.com/) -- Styling
- [Framer Motion](https://www.framer.com/motion/) -- Animations
- [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk) -- Typography

## License

MIT -- [Terminal Blank](https://terminalblank.com)