⌨️ Keycap Portfolio Hero — Interactive SVG Template

A playful, fully vector hero section for personal portfolios. 3D keycaps drop in, type out the word, and a big ENTER key turns into your contact screen. Built entirely with the SVGator MCP, from a prompt written in Notion.

🎬 What happens on screen • 🪂 Intro: 9 keycaps drop one by one (80 ms stagger) with overshoot, bounce and squash-and-stretch. Shadows fade in as each key lands. • ⌨️ Typing: each key presses in order, P-O-R-T-F-O-L-I-O, with a light flash on the keycap. • 🖍️ Highlight: the name gets a highlighter-style wipe, from left to right. • 🌊 Idle loop: keys breathe ±3px, side cards float, the badge dot pulses and the ticker scrolls in a seamless linear loop. • 💗 CTA hint: a soft ring pulses around ENTER to invite the click. • ↵ Click ENTER: a strong press sends an ink burst across the screen, and a "Let's talk." contact screen appears with your email, buttons, socials and tiny "HI!" keycaps. • ← Back returns to the hero (Esc works too).

🔁 Reusability (proof of change) The same template was re-skinned with a completely different set of content: • 01 · Your Name · PORTFOLIO · "Let's Talk" · pink accent • 02 · Mika Tanaka · MAKE MAGIC · "Hire me" · lime accent Same structure and same animations. Only the content changed: name, 9 key letters and colors, CTA, ticker, cards, contact copy and brand colors. The highlight resizes to fit the new name.

✏️ Editable & named • 🔤 All text is live text: badge, headline, name, subheadline, ENTER label, ticker, card tags, email, buttons and socials. • 🏷️ Every layer has a clear name: badge, headline, highlight, key_P … key_ENTER, ticker, tools-card, skills-card, contact-*. • 🎨 Each keycap is its own group (shadow › cap › press › body with side / top / shine / letter), so you can recolor or re-letter it in seconds.

🤖 Built with the SVGator MCP

📝 I wrote the full brief in Notion: layout, keycap style, animations and naming.

🧠 Notion AI turned it into a structured SVGator project through the MCP: shapes, groups, keyframes and easing curves.

🔍 Each version was exported, checked frame by frame and refined through the MCP until it felt polished.

🔁 Variant B was generated from the same template by swapping only the content. No manual drawing in the editor: the whole scene, timeline and variants came from the MCP.

🛠️ Specs • 📐 1440×900, fully vector, light file size • 🔠 DM Serif Display + Poppins (embedded on export) • ⏱️ 15.4 s timeline: intro, idle loop, transition • 🖱️ Interactive click via the SVGator Player API (HTML embed) • 🌐 Ready to embed on any portfolio or landing page