REFERENCE
- Gallery page: https://magpui.com/en/i/illustrated-portfolio-avatar-78eb54
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/illustrated-portfolio-avatar-78eb54/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/illustrated-portfolio-avatar-78eb54/clip.mp4
- Original post: https://x.com/jamesvclements/status/2112283119915004156 by @jamesvclements
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
ASSETS
This needs real artwork, not shapes drawn in code. Use the files the user gives you (ask where they are). If you have an image generation tool, generate them with these prompts; otherwise leave clearly marked placeholders.
- Stamp avatar illustrations: A small set of original loose hand-drawn editorial doodles for a personal portfolio avatar, simple ink and colored-pencil marks, playful but restrained, high contrast at tiny scale, isolated on a plain warm cream background, square aspect ratio.
BUILD: Add a compact scalloped stamp avatar for a minimalist personal portfolio. The avatar cycles through a small set of original hand-drawn illustrations, while nearby identity text can collapse from a full name to a short domain label as the user scrolls. Keep the layout quiet, readable, and personal.
DESIGN SYSTEM: Use a warm off-white page, near-black text, and restrained accent colors inside the artwork. Center a narrow editorial column with generous whitespace. Make the avatar about 112px square with a pronounced scalloped circular edge; use a clean sans-serif for navigation and a readable text face for long-form writing.
MOTION: On a 4-second loop, crossfade illustration variants over 350ms with ease cubic-bezier(0.22, 1, 0.36, 1). On scroll past the identity header, transition the full name into the short domain label over 280ms with the same easing; reverse when scrolling back.
SECTIONS: Identity header with stamp avatar, name and domain; compact navigation; long-form writing list. Avatar states: idle, illustration transition, keyboard focus.
IMPLEMENTATION: Use CSS for layout and a small React state/timer for illustration cycling; use IntersectionObserver for the identity collapse. Respect prefers-reduced-motion by showing one still illustration and disabling transitions. Provide visible focus rings and pause cycling when the page is hidden.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components and fonts, map colors to the closest existing tokens, and never copy logos, brand names, photos or illustrations from the original; use placeholders.
SUCCESS CHECK: - Avatar stays crisp and circular at desktop and mobile sizes.
- Illustration changes do not shift surrounding layout.
- Reduced-motion mode keeps the identity header fully usable.
