Dev Link-in-bio

Everything on the page — name, status, links, projects, the graph, the stack, the terminal's words — is in src/content.ts. Its types (src/core/model.ts) explain every field, and your editor flags anything missing or misspelt.

• Links: one { label, hint, href, icon } per button. Icons: github, pen, play, file, calendar, mail, at, rss, globe (add your own as path data in src/core/icons.ts).
• Projects: name, description, href, language (known languages get their usual colour), stars, forks.
• Contribution graph: activity: { weeks, seed } draws a believable graph ending today; change the seed for another one. For your real numbers, add counts (one number per day, oldest first) and until: "YYYY-MM-DD" (the last day).
• Avatar: your initials on a gradient made from your name — nothing to set.
• Status: available: false turns the green pulse into a calm grey dot.
• Terminal: boot lines are typed out on first view; banner is ASCII art shown above them (empty for none); quick picks the one-tap commands under the screen.

The download is static files: index.html, dev-link-in-bio.css and dev-link-in-bio.js, which draws the page from your content into <div data-dev-link-in-bio></div>. Edit src/content.ts, then rebuild the script:

Also update the <title> and <meta> tags at the top of index.html by hand — they are what link previews and search engines read. To wire markup you add yourself, call DevLinkInBio.init(container); it returns a function that undoes it.

The download is a complete Vite + React 19 + TypeScript project:

• src/content.ts — the content, shared with the HTML build.
• src/app/sections/ — one component per section; src/app/ui/ — atoms and molecules they share.
• src/core/ — the behaviour (tabs, terminal, graph, copy, theme…), the same code the HTML build runs, attached with the useBehaviour hook.
• src/dev-link-in-bio.css — the one stylesheet both builds use.

App.tsx starts with "use client", so it also drops into a Next.js App Router page.

Each command is a small pure function in src/core/terminal/commands.ts that turns the content into lines of text, links and clickable commands. To add one: add its name to CommandName in src/core/model.ts, write the function and add it to COMMANDS (and LISTED_COMMANDS to show it in help), and describe it in terminal.commands in content.ts.

#terminal at the end of the address opens the terminal first — handy for a "try the terminal" link.

Everything is a custom property on :root, at the top of dev-link-in-bio.css. Colours are written as light-dark(light, dark), so one line covers both themes.

Theme: data-theme="light" or "dark" on <html> fixes the starting theme; without it the visitor's system decides. The toggle (and the terminal's theme command) remembers a visitor's choice in localStorage (dev-link-in-bio-theme).

Both builds are static files: upload the HTML folder, or the React project's dist/ after npm run build, to Netlify, Vercel, Cloudflare Pages, GitHub Pages or any web host. Then put the link in your bio.