Build a Modern Link-in-Bio Micro Website With Dark Mode, QR Codes, and Local Analytics

The outcome must be a real usable site, not a mockup.

Core requirements
• Create a single-page link hub with:
• Profile avatar circle (use CSS placeholder if no image)
• Display name + short bio
• A clean list of buttons for links (8–12 example links)
• Social icons row (simple SVG icons inline, no external libraries)
• Optional “Featured” section for one highlighted link
• Add a theme switcher:
• Light mode and dark mode
• Smooth transitions
• Save preference in localStorage
• Add a “Copy Link” button that copies the page URL and shows a small toast “Copied”
• Add a QR code modal:
• Clicking “QR” opens a modal showing a QR code for the page URL
• Use a tiny embedded JS QR generator (write it in the file, no external libs) or a simple QR algorithm implementation
• Add basic analytics without a backend:
• Track clicks per link locally (localStorage)
• Provide a small “Stats” drawer that shows top clicked links
• Include a “Reset stats” button

Design & UX (must be high quality)
• Mobile-first, centered card layout
• Modern rounded buttons with subtle shadows
• Soft gradient background (subtle, not loud)
• Micro-interactions:
• Button hover/press states
• Gentle card lift on hover (desktop)
• Toast animation for copy
• Modal open/close fade
• Accessibility:
• Keyboard navigable
• Visible focus states
• Good contrast

Technical constraints
• Output as a single HTML file with embedded CSS and JS
• No external libraries or CDNs
• Code must be clean and commented
• Must work offline

Content customization

At the top of the code, create a clearly marked CONFIG section where the user can edit:
• Name
• Bio
• Links (title + url)
• Theme colors (2 palettes)
• Featured link

The finished app should feel like:
“Linktree, but cleaner, faster, and yours.”