NFC digital linktree business card

Build me a self-contained "link in bio" page as ONE block of HTML that I can paste into an HTML/embed block on my own website (Ghost, WordPress, Squarespace, Wix, Webflow, anything that accepts custom HTML). It replaces Linktree, so it lives on my own domain and the traffic stays on my site. Step 1: interview me first Don't write any code yet. In ONE message, ask me for everything below, mark what's optional, and skip anything I already filled in at the bottom of this prompt. Then wait for my reply. - Name or @handle, plus a short line about what I post (my topics) - Profile photo: a public image link, not a file on my computer. If I don't have one, tell me how to get one from my site's media library. - Social accounts: platform + full link for each (YouTube, Instagram, TikTok, Discord, X, Facebook, LinkedIn, Threads, Twitch, Snapchat, Pinterest, Spotify, etc.) - Contact: my email, plus a phone number, WhatsApp or booking link ONLY if I want it shown publicly - Ways to support me: Stripe, Cash App, PayPal, Venmo, Ko-fi, Buy Me a Coffee, Patreon - Big buttons: shop, newsletter signup, website or blog, podcast, course, anything else I want to highlight - Whether I have more than one profile or brand (for example "Main" and "Alternative"). If yes, ask for a section name, topics, links and email for each one. - Colors or vibe I like. If I have no preference, use the warm palette described below. Step 2: build it this way Layout, top to bottom: 1. Header: round profile photo with a dark ring, my name or @handle in a serif font, and an optional one-line tagline. 2. One panel per section (for example Main, Alternative, Support me). Each panel is a rounded box with its own soft tint so the sections are easy to tell apart, a small pill label on top (uppercase, letter-spaced, muted gold background, centered), an optional topics line under the pill, then a centered row of icon buttons. 3. Icon buttons: rounded squares in each platform's brand color with a simplified white logo (inline SVG) and the platform name underneath. They must fit 4 per row on a 390px-wide phone with no sideways scrolling. If you can't draw a platform's logo accurately, use a brand-colored square with the platform's first letter instead of a wrong logo. 4. Under an icon row, an optional plain email line: "💌 Email: address" (mailto link, no underline). Show a phone or WhatsApp line the same way if I gave one. 5. "Support me" panel: same icon style for the payment links. 6. Below the panels, large feature cards for shop / newsletter / website: white rounded card, colored icon square on the left, bold title and short subtitle on the right, soft shadow, slight lift on hover. Look and feel: - Warm, grounded, not corporate: ivory/cream background gradient with a faint warm glow at the top and a very light paper-grain texture. Muted accents (deep sage green, mustard gold, clay rose) and dark charcoal text. - A serif display font for the name and Inter (or a similar clean sans) for everything else, both from Google Fonts. - Rounded corners, soft shadows, gentle hover lift, and respect prefers-reduced-motion. Rules for the code: - ONE block of HTML with its own <style>, no <html>, <head> or <body> tags, no JavaScript, and no libraries except the Google Fonts link. - Put every style under one uniquely named wrapper class (for example .my-links) so it can't clash with my site's CSS. - Use ONLY the links I gave you. Never invent or guess a URL, and leave out any button I didn't give a link for. Write & as &amp; inside URLs. - Clean up links: remove tracking bits like ?si=... or ?igsh=..., and add ?sub_confirmation=1 to the end of my YouTube channel link so the subscribe popup appears when someone taps it. - Add a short comment above each section so I can find and edit it later. Step 3: hand it over Give me the finished code in one code block, then: - Where to paste it (Ghost: + then HTML card. WordPress: Custom HTML block. Squarespace: Code block. Wix: Embed HTML.) - A checklist of anything I still need to swap in (like the photo link) so nothing goes live with a placeholder - An offer to adjust colors, order, spacing, or add another platform later My info (fill in what you have. Anything still in CAPS is blank, so ask me for it.) - Name / @handle: YOUR NAME OR @HANDLE - Topics / tagline: E.G. FOOD · TRAVEL · MONEY - Profile photo link: PUBLIC IMAGE URL - Email: YOUR EMAIL - Phone / WhatsApp (only if public): NUMBER OR SKIP - Social links, one per line: PLATFORM: FULL LINK - Support links, one per line: PLATFORM: FULL LINK - Shop / newsletter / other big buttons: LABEL | SHORT SUBTITLE | FULL LINK - Second profile or brand: SECTION NAME | TOPICS | LINKS AND EMAIL