Link-in-bio page on your own domain, free

Make a one-page link page for the person below, with their links grouped under headings: the page their social media bio links to, published at their own domain.

About them and their links (the example page's; the request replaces it):
Riley Hart, a freelance product designer and photographer in Bristol, UK. Designs screens for apps and the web, and photographs the colours of the city at weekends. The one link to open first: portfolio (12 app and web projects). Work: work with me (hello@example.com, replies within 2 working days), writing (one piece a month on interface design), talks (slides from 2026 design meetups). Things I made: weekend photos (a book of city colours), type experiments (a typeface in progress). Social: Instagram (photos), X (design notes), YouTube (screen recordings).

What goes on it (add or drop parts to fit the request):
- At the top: a mark with their initials (or their picture if the request gives its URL), their name, what they do, one or two sentences about them, and where or how they work, briefly.
- The one link they most want opened (if the request doesn't say, the first link it gives), as a large button in the accent color.
- The rest of the links as lists under headings such as "Work", "Things I made", and "Social": one link a row, each with its name and a few words on what's there. An email link (mailto:) only when the request gives the address.
- Last, a "Copy this page's link" button, and © with their name.
- Write the links in the HTML itself, not with a script. JavaScript only copies the link.

Facts:
- Use only the name, link addresses, and email address the request gives. The example above (the example page's person) isn't the person asking: never reuse its name, links, or email address. A missing name is "Your name" and a missing link address "#" (the only stand-ins).
- Copy each @handle, link address, and email address character for character, as the request writes it. Underscores, dots, digits, and whatever follows them are part of it: never cut, shorten, or tidy one up.
- A part the request gives nothing for (what they do, the lines about them, where they work, a group of links) is left out, heading and all: never a stand-in that tells them what to write ("Link name", "Write here"). With 3 links or fewer, one list with no headings.
- A style or color phrase, or a wish like "a shop: booking and socials", changes the look and the order only: it never adds a link or a heading the request doesn't give.
- No counts of past work, prices, or client names unless the request gives them.
- No home address or personal phone number (a shop's address and phone are fine).

Design (this page's DESIGN.md; follow it on every run):
- Pick the one look closest to the request. If it names a color, swap the accent for it.
  - A, white and hairlines (the default): background #FFFFFF, surface #F5F6F8, text #15171C, muted text #5A606B, lines #E3E5E9, accent #1F5FD1 (the large button's fill, with #FFFFFF text). 12px corners; the lists are divided by 1px rules. Font: Inter (400 and 600).
  - B, ink: background #101214, surface #1A1D21, text #F0F2F5, muted text #A3AAB5, lines #2A2F36, accent #8AB4FF (the large button's fill, with #101214 text). 12px corners. Font: Inter (400 and 600).
  - C, cream and one color (for a shop): background #F6F1E8, surface #FFFDF8, text #2A251E, muted text #6A6155, lines #E4DACB, accent #2F6B4F (the large button's fill, with #FFFFFF text). 16px corners. Headings in Fraunces (700), body in Inter (400 and 600).
- Keep the colors in CSS variables (--bg, --surface, --ink, --muted, --accent, --line). Text keeps at least 4.5:1 contrast with its background, swapped colors included.
- Type: name 22px, link names 16px (17px on the large button), descriptions 14px, headings 13px in capitals with a little letter spacing; body line height 1.6.
- Spacing on a 4px scale (4, 8, 12, 16, 20, 24, 32, 40, 64), 32px between groups.
- On a phone, one column at most 560px wide. From 960px wide, two columns: the name and the large button on the left (staying in view as the page scrolls), the lists on the right.
- A short page, with 3 links or fewer, puts the name and the links in the middle of the first screen (above the Convika bar at the foot), in one column on a computer too.
- Motion: things fade up in 0.4 s as they appear, and a row takes the surface color under a finger or pointer. Nothing moves under prefers-reduced-motion.
- Every link and button at least 44px tall and 44px wide (min-height: 44px; with Tailwind, min-h-[44px]), list rows at least 56px, its words saying where it goes (never "Details" or "Click here"), each button label on one line. No sideways scrolling.
- Avoid: links that are only an icon, social media logos as images, 7 or more links under one heading, gradient text, and anything fixed to the bottom of the screen (a Free page shows the Convika bar there).
- Keep the words short: one line for each link's description.

Write it as one HTML file with the CSS and JavaScript inside. Don't send anything people type anywhere, and don't use image files. Make it work on a phone held upright. Keep the bottom right of the screen clear: a Support button may show there.

That is the example. Keep how it works, its screens, and its feel, and change the content to fit what I want.
What I want: ___