Animated Portfolio Website Prompt

Create one complete, self-contained index.html for Mira Sen, a fictional frontend developer based in Bengaluru. Return only HTML. Put all CSS and JavaScript inline. Use no external images, fonts, dependencies, API keys, server or build step. Art direction: an editorial developer portfolio with midnight navy #101828, warm white #f7f5ef and lime #d4fa72. Use oversized system sans-serif headings, monospace metadata, a thin grid motif and small procedural SVG illustrations. Include a visible “Fictional portfolio concept” label. The hero reads “Interfaces with purpose. Details with personality.” Supporting copy: “I’m Mira, a frontend developer exploring accessible tools for everyday work.” Animate the headline into place once, then keep it still. Add restrained scroll reveals and a progress line without taking over scrolling. Build sections for selected work, skills, a learning timeline and contact. Feature three fictional projects: RouteMap, an accessible commute comparison prototype; Grain, a small-shop inventory dashboard; and QuietType, a distraction-free Markdown editor. Each card needs an inline SVG preview, a one-sentence problem statement and a working “Read case study” button. Each native case-study dialog must include the problem, intended users, three implementation decisions, an accessibility consideration and an honest limitation. Describe concept work without invented client endorsements or fabricated business metrics. Skills: semantic HTML, CSS, JavaScript, React, accessibility and interface testing. Timeline: January 2026, built a semantic HTML foundation; April 2026, shipped the RouteMap prototype; July 2026, explored component testing; October 2026, assembled this portfolio. Provide a functional light/dark theme toggle that respects system preference initially and remembers a manual choice when localStorage is available. Contact copy is “This is a demo portfolio. Copy the sample address to test the interaction.” A “Copy demo email” button copies mira.sen@example.com and reports success only after the clipboard operation succeeds; provide a selectable fallback on failure. Include a “Back to top” anchor. Make the mobile menu, theme toggle, project dialogs and contact action work with keyboard and touch. Dialogs must support Escape, sensible initial focus and focus restoration. Honor prefers-reduced-motion by removing entrance movement and displaying all content immediately. Keep every section readable without animation, with visible focus and no horizontal overflow.