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.
- 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
- Hero -- Bold headline with gradient text and dual CTAs
- Services -- Bento grid of service offerings
- Work -- Project showcase with hover-reveal descriptions
- Testimonials -- Client testimonial cards with glassmorphism
- Team -- Team member cards with gradient avatars
- Contact -- Contact form with gradient submit button
git clone https://github.com/Terminal-Blank/creative-agency-portfolio.git my-agency
cd my-agency
npm install
npm run devOpen http://localhost:3000 to see your site.
Edit the gradient colors in app/globals.css to match your brand.
components/Hero.tsx-- Agency name, headline, and taglinecomponents/Services.tsx-- Service offeringscomponents/Work.tsx-- Portfolio projectscomponents/Testimonials.tsx-- Client quotescomponents/Team.tsx-- Team members
Update the color variables in the @theme block in app/globals.css.
Click the "Deploy with Vercel" button above, or:
npm i -g vercel
vercelnpm run build
netlify deploy --prod- Next.js 15 -- React framework
- TypeScript -- Type safety
- Tailwind CSS 4 -- Styling
- Framer Motion -- Animations
- Space Grotesk -- Typography
MIT -- Terminal Blank