Back to templates
Portfolio template
Cursor-Animate Portfolio
Portfolio with custom cursor, smooth-scroll, and Framer Motion section transitions — hero, work, about, contact.
Next.js 14TypeScriptTailwind CSSFramer Motionshadcn/ui
Clone it
terminalClone the templategit clone https://github.com/MUKE-coder/vibekit.git /tmp/vibekit-templates
cp -r /tmp/vibekit-templates/public-templates/blog-template ./cursor-animate-portfolio
cd cursor-animate-portfolio
pnpm install
pnpm devWhat's in the box
- Custom cursor with hover effects
- Smooth-scroll provider with section transitions
- Hero, work, about, contact sections
- Framer Motion entrance animations
- Navbar + footer included
When to use
Use it
Designers, motion-heavy portfolios, agencies, anyone who wants a tactile cursor-driven aesthetic.
Skip it
Mobile-first audiences (custom cursor degrades on touch). For dev portfolios prefer `personal-portfolio`.
The 0 customization sections
When you ask your AI agent to customize this template, it will walk through these sections in order, asking you the questions for each. The agent only edits the files needed to apply your answers — no restructuring.
Customization prompt — paste into your AI agent
After you clone, open the project in Claude Code, Cursor, Cline, or any agent that reads files. Paste this prompt to start the section-by-section interview:
paste into your AI agentCustomization interview promptI want to customize the "Cursor-Animate Portfolio" template using the VibeKit customization guide.
Walk me through the 0 sections one at a time. For each section, ask the questions defined in the guide below, wait for my answers, then move on.
After all sections are answered, edit ONLY the files needed to apply my answers — config files, content, branding. Don't restructure the project.
CUSTOMIZATION GUIDE:
Each section is `components/<name>-section.tsx`. Edit work entries in `components/work-section.tsx`. Replace cursor SVG / animation in `components/custom-cursor.tsx`.
SECTIONS:
Begin with section 1 now.