Guides / Adapt a template / Portfolio
How to adapt an animated website template for a portfolio
To adapt an animated website template for a portfolio, start from Ferrand Pass That Swings on Its Lanyard, Calder Atelier Climbing a Staircase on Scroll, Brindl No-Code Studio Portfolio or the closest fit, keep the hero with your name and one line, hide chapters without a project in them, add two or three case studies with the problem, your role and the result, and apply the portfolio style pack below. Check the compliance notes for your state before you publish.
The 3 templates that fit designers, developers and freelancers showing their work best
Every pick has a live demo. Open it, scroll it on your phone, then edit it in Create or fetch its prompt.
Pick 1 · Pro
Ferrand Pass That Swings on Its Lanyard
A tactile hero object makes the designer memorable, then case studies read cleanly.
Pick 2 · Pro
Calder Atelier Climbing a Staircase on Scroll
Quiet light colors and a project index let the work do the talking.
Pick 3 · Pro
Brindl No-Code Studio Portfolio
Stacking project cards and a playful button suit a freelancer or small studio.
What to change for a portfolio
Keep
- The hero with your name and one line
- The project index
- Case study pages
- The contact block
Hide
- Chapters without a project in them
- Any effect that hides your work
Add
- Two or three case studies with the problem, your role and the result
- A short bio with your photo
- Rates or a booking link
- A downloadable resume
Copy angles
- Lead with the type of client you want more of.
- Write each case study as problem, role, outcome.
- Make the contact line one sentence long.
Trust elements
- Client names you have permission to show
- A short quote from a real client
- Your role on each project
- A working email address
Compliance notes to check
- Get permission before showing client work covered by an NDA.
- Own or license every image and font you publish.
- Keep the page keyboard accessible and add alt text.
General guidance only, not legal advice. Rules differ by state and change over time, so confirm the details with a licensed attorney or compliance professional before you publish.
Copy-ready adaptation prompt
Paste it into Claude, Cursor or Lovable. It is written for Ferrand Pass That Swings on Its Lanyard and works for the other two picks if you change the name and slug. The example client is Maya Ellison, a freelance product designer in Brooklyn, New York.
1. Fetch the template with the MCP
claude mcp add --transport http animatedwebs https://mcp.animatedwebs.comUse the animatedwebs MCP. Call get_template_prompt for "ferrand-product-designer", then build it as a Next.js site and adapt it with the prompt below.Setup for every client is on the MCP page. Pro templates use a Prompt Pack credit or come with Pro.
2. Adapt it
Adapt the AnimatedWebs template "Ferrand Pass That Swings on Its Lanyard" (slug: ferrand-product-designer) into a website for a portfolio.
Example client: Maya Ellison, a freelance product designer in Brooklyn, New York. Replace it with my real business details, which I will give you.
Keep:
- The hero with your name and one line
- The project index
- Case study pages
- The contact block
Hide:
- Chapters without a project in them
- Any effect that hides your work
Add:
- Two or three case studies with the problem, your role and the result
- A short bio with your photo
- Rates or a booking link
- A downloadable resume
Copy angles:
- Lead with the type of client you want more of.
- Write each case study as problem, role, outcome.
- Make the contact line one sentence long.
Trust elements to include only if I can supply them:
- Client names you have permission to show
- A short quote from a real client
- Your role on each project
- A working email address
Style: use the CSS variables and fonts from the Portfolio style pack. Motion intensity: Medium. A memorable first screen is worth it. After that, keep case studies calm and fast so hiring managers can read them.
Rules:
- Keep the template's motion, and respect prefers-reduced-motion.
- Make it mobile first and keep the main action visible on a phone.
- Never invent testimonials, statistics, licenses or credentials. Use clearly marked TODO placeholders instead.
- Add the legal pages and notices this business type usually needs, and flag anything I should confirm with a licensed professional.Portfolio style pack
Confident, light and editorial. Download the pack as CSS variables, a Tailwind v4 theme, design tokens or a DESIGN.md snippet.
Palette
Ember
#c23d1b
Accent
Pale Citrine
#e6dccb
Surface
Pale Citrine
#f4efe6
Background
Void
#17140f
Text
Type pairing (Google Fonts)
- Display Instrument SerifSpecimen ↗
- Body InterSpecimen ↗
Motion intensity: Medium
A memorable first screen is worth it. After that, keep case studies calm and fast so hiring managers can read them.
The CSS export includes the Google Fonts import and motion variables.
# Portfolio style pack, Style Reference > Confident, light and editorial **Theme:** light · **Template:** Portfolio style pack (https://animatedwebs.com/guides/adapt/portfolio) ## Tokens, Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ember | `#c23d1b` | `--color-accent` | Primary actions, links and highlights: the signature colour, used sparingly | | Pale Citrine | `#e6dccb` | `--color-secondary` | Raised surfaces, cards and secondary accents | | Pale Citrine | `#f4efe6` | `--color-canvas` | Page canvas and section backgrounds: the dominant surface everything floats on | | Void | `#17140f` | `--color-ink` | Headlines and body copy: the primary typographic colour | ## Typography - **Display:** Instrument Serif, Instrument Serif 400 - **Body:** Inter, Inter 400 ## Motion - Intensity: Medium. One scroll-driven hero effect, simple reveals below it. - A memorable first screen is worth it. After that, keep case studies calm and fast so hiring managers can read them. - Respect prefers-reduced-motion: show final states. ## Rules ### Do - Keep Ember (`#c23d1b`) for primary actions, links and highlights only - Let the hero motion carry the page; type and buttons sit on a scrim above it - Respect prefers-reduced-motion: no pinning or scrubbing, show final states ### Don't - Don't fill large sections with the accent colour; it is a signal, not a surface - Don't add typefaces beyond Instrument Serif + Inter
Questions
Which template is best for a portfolio?+
Start with the first of the three picks on this page, then compare the other two. Each has a live demo you can scroll, and all three can be edited in Create.
What should a portfolio site keep, hide and add?+
Keep the hero with your name and one line and the project index. Hide chapters without a project in them. Add two or three case studies with the problem, your role and the result and a short bio with your photo.
Does this page give legal advice?+
No. The compliance notes are general reminders of topics to check. Laws differ by state, so confirm the details with a licensed attorney or compliance professional before you publish.
How do I use the style pack?+
Copy or download the CSS variables, the Tailwind theme or the DESIGN.md snippet, and give it to your AI builder with the adaptation prompt so the colors, fonts and motion stay consistent.