Build Your Own Developer Card with Astro and Tailwind CSS

Most developers maintain a portfolio site, a GitHub profile, and a LinkedIn page. A single, focused URL does something none of those do: show who you are in one screen. Your name, your role, where to find you, and your stack. No noise, no navigation, no filler. This guide walks through building a developer card from scratch with Astro, Tailwind CSS v4, and astro-icon. The end result is fully static, deploys anywhere, and stays easy to update. 💡 For a live reference, visit card.sami.codes . The example uses the same stack, with 15 switchable themes, social links, and a copy-to-clipboard embed button. The finished card includes: Name, role, and a short bio Clickable social icons for your platforms Tech stack badges rendered from a plain string array A theme switcher powered by CSS custom properties Copy Link and Embed buttons for sharing and embedding Why Astro? Astro builds to plain HTML by default. No client-side framework ships to the browser unless you opt in. For this type of projec