Motion Designer Portfolio

Create a professional portfolio website for a motion designer.

PROJECT INPUTS
- Name and short biography: [your details]
- Audience and goal: [hiring teams, collaborators or prospective clients]
- Specialization: [your focus]
- Projects and evidence: [two or three real projects with approved assets]
- Framework and styling: [use the current repository stack, or specify your preference]
- Contact: [public professional address and links]

PAGE STRUCTURE
1. Header: name, Work, About and Contact; visible keyboard focus and mobile menu.
2. Hero: specific specialty, one-sentence value proposition and a link to selected work.
3. Selected work: project cards with context, role, outcome summary and dedicated detail sections.
4. Reel: poster frame, play control, duration, captions where relevant and no autoplay audio.
5. Project breakdown: brief, storyboard, style frames, animation principles, tools and personal contribution.
6. Delivery: aspect ratios, platform constraints, team credits and authorized final assets.

7. About: concise background and working approach. Show credentials only when supplied.
8. Contact: one primary action with a clear response expectation. If a form is a demo, label it as a demo rather than pretending it sends.

VISUAL DIRECTION
Use static thumbnails by default with optional playback; respect reduced motion and keep content available without video.

QUALITY REQUIREMENTS
- Responsive from narrow phones to wide desktop; semantic headings and navigation.
- Accessible contrast, alt text, keyboard controls and reduced-motion behavior.
- Optimized images with fixed dimensions; lazy load below-the-fold media.
- Honest placeholders: never invent clients, testimonials, credentials or success metrics.
- Title, meta description and social preview using supplied identity and project details.
- No API keys, analytics secrets or private documents in browser code.

HOW TO USE WITH CLAUDE / CLAUDE CODE
- Claude: paste this brief with sanitized project notes. Ask for a proposed information hierarchy, then a complete page. Review claims before requesting visual polish.
- Claude Code: read repository instructions, inspect the framework and reuse existing components. Implement one project first, run the existing build/check commands, then expand. Show the changed files and any missing content.

DELIVERABLES
Provide complete source files, instructions to run locally, and a short checklist for mobile, keyboard navigation, links and real form behavior.

FOLLOW-UP PROMPTS
- Review this portfolio from the target audience's perspective. Identify the three places that need stronger evidence and suggest changes using only supplied facts.
- Test the narrow-screen layout and keyboard navigation. Fix overflow, unclear focus, inaccessible media and oversized assets without changing the intended content.