📌 Project Overview
The Portfolio / Agency template is purpose-built for creative professionals, design studios, and marketing agencies who want their website to make a powerful first impression. With GSAP-powered hero animations, Lenis smooth scrolling, Framer Motion scroll-triggered reveals, and a Sanity headless CMS backend, this is a living, breathing digital showroom that's as easy to update as it is beautiful to navigate.
The platform transforms a static project grid into an immersive storytelling experience — ideal for visual directors, brand consultancies, UX agencies, or any team whose work speaks best through imagery and motion.
🧩 Core Features
1. GSAP Hero & Cursor Animations
A GSAP-powered hero section with cinematic text reveal and a cursor follower effect creates an immediate, memorable brand statement that sets the creative tone for the entire site.
2. Lenis Smooth Scroll
Lenis smooth scroll is woven into every page, combined with Framer Motion scroll-triggered animations that reveal content elegantly as users navigate — delivering a luxury browsing experience.
3. Sanity Headless CMS
All project and case study content is managed through Sanity CMS with GROQ queries. Creatives can publish, update, and reorder portfolio pieces through a studio editor — no code required.
4. Dynamic Case Study Pages
Each project has its own dynamic [slug] page with a full image gallery, project narrative, client details, and services rendered — built from structured Sanity content.
5. Category-Filtered Portfolio Grid
The portfolio grid pulls from Sanity via GROQ and supports category filtering so visitors can instantly navigate to branding, web, motion, or print work.
6. Vercel OG Image Generation
Each case study auto-generates a unique Open Graph social card using Vercel's OG image API, ensuring that shared links always display polished preview images.
🧰 Tech Stack
| Feature Area | Technology | Purpose |
|---|---|---|
| Frontend Framework | Next.js 14 (App Router) + TypeScript | Fast static site generation |
| Styling | Tailwind CSS + CSS Modules | Custom design flexibility |
| Animations | Framer Motion + GSAP | Scroll animations & hero effects |
| Smooth Scroll | Lenis | Buttery smooth page scrolling |
| CMS | Sanity (Headless) | Projects, case studies, services content |
| CMS Queries | GROQ API | Flexible content querying |
| Images | Cloudinary | Portfolio image optimization |
| Resend | Contact & inquiry emails | |
| Hosting | Vercel (Edge) | Edge deployment & instant previews |
🗂️ Website Structure
| Page / Component | Functionality |
|---|---|
| Home | GSAP hero with text reveal, featured projects, services teaser, CTA |
| Work / Portfolio | Sanity-powered grid with category filter and hover animations |
| Case Study [slug] | Full project breakdown with gallery, narrative, and OG image |
| Services | Service offerings with descriptions and pricing or engagement models |
| About | Studio story, team bios, values, and client logos |
| Contact | Inquiry form posting to /api/contact via Resend |
🔒 Key Technical Highlights
- Sanity Studio editor for adding and updating projects and case studies
- GROQ query examples included for all data-fetching patterns
- Custom useGSAP and useLenis animation hooks for developer extensibility
- Cloudinary next/image loader with auto-responsive sizing
- Vercel OG image generation for every case study social preview