/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function LinkInBio() { // Brutalist design profile data const profileData = { name: "Alex Rivera", bio: "Designer & Developer exploring digital minimalism", profileImage: "bi-person-circle", // Bootstrap icon links: [ { title: "Portfolio", url: "#", icon: "bi-grid-3x3-gap" }, { title: "GitHub", url: "https://github.com/username", icon: "bi-github" }, { title: "LinkedIn", url: "#", icon: "bi-linkedin" }, { title: "X/Twitter", url: "#", icon: "bi-twitter-x" } ], backgroundColor: "#000000", textColor: "#FFFFFF", accentColor: "#FFFFFF" }; return (

{profileData.name}

{profileData.bio}

{profileData.links.map((link, index) => ( { e.currentTarget.style.backgroundColor = profileData.textColor; e.currentTarget.style.color = profileData.backgroundColor; }} onMouseOut={(e) => { e.currentTarget.style.backgroundColor = 'transparent'; e.currentTarget.style.color = profileData.textColor; }} > {link.title} ))}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Alex Rivera | Link in Bio

`, { headers: { "content-type": "text/html" } }); }

linkinbio_25_2_5

Version 1