Managing Content

StarryBio renders one profile page from the ordered sections and optional featured arrays in config/starrybio.config.ts. Edit the file, save, and use the live local reload from pnpm dev; run pnpm build before publishing the result.

Profile

Your profile header is always visible and requires a name, description, and image.

profile: {
  name: 'Morgan Lee',
  description: 'Designer, writer, and occasional photographer.',
  image: 'assets/images/morgan.jpg',
  layout: 'horizontal',
},

layout controls only the relationship between the image and profile text:

• vertical is the default stacked header.
• horizontal places the image and text side by side on wider displays, then collapses back to a stacked presentation on narrow screens.

Place a local image in public/ before naming it here. The rendered image always uses the profile name as its alt text, so use a recognizable name rather than a decorative label. See Assets and Generated Downloads for paths and remote images.

Sections

Use sections to group links into visible headings. Their array order is the page order.

sections: [
  {
    title: 'Work',
    description: 'Current projects and writing.',
    links: [/* links */],
  },
  {
    title: 'Elsewhere',
    links: [/* links */],
  },
],

title and links are required. description is optional. A section does not render if all its links are hidden and it has no description; this prevents an empty heading in a build.

The optional visibility fields work on a section as a whole:

{
  title: 'Seasonal',
  enabled: true,
  visibleFrom: '2026-11-20T00:00:00Z',
  visibleUntil: '2026-12-02T00:00:00Z',
  links: [/* ... */],
}

Visibility is decided at build time. Schedule and then deploy a fresh build when the window should change. Do not rely on a visitor leaving the tab open to receive a timed change. Configuration Reference explains the exact boundaries.

Standard links

Use a standard link for a destination a visitor should open.

{
  label: 'Portfolio',
  subtitle: 'Selected work',
  description: 'Case studies and recent experiments.',
  url: 'https://example.com/portfolio',
  icon: { simpleIcon: 'Figma' },
}

Field	Required	Effect
label	Yes	Main visible text.
url	Yes, unless this is a copy link	Destination.
subtitle	No	Smaller text beneath the label.
description	No	A second smaller text line.
icon	No	Local icon asset, inline SVG path/source, or Simple Icon configuration.
enabled, visibleFrom, visibleUntil	No	Build-time visibility controls.

External HTTP(S) links open in a new tab with noopener noreferrer. Root-relative, ordinary relative, hash, email, and telephone links stay in the current context. Use mailto:hello@example.com or tel:+15551234567 when appropriate.

Only the supported URL forms validate. A hash link such as #contact is allowed for a normal link, but it needs a matching target that you add by customizing the rendered page; the stock one-page profile does not create arbitrary anchor targets for you.

Copy-to-clipboard buttons

Use a copy link for a handle, email address, crypto address, invite code, or other text that visitors should copy rather than navigate to.

{
  label: 'Email',
  subtitle: 'Copy address',
  specialType: 'copy',
  copyValue: 'hello@example.com',
  icon: { simpleIcon: 'ProtonMail' },
}

copyValue is required whenever specialType: 'copy' is present. The control uses the Clipboard API when available and a browser fallback otherwise. It briefly reports either “Copied!” or “Copy failed.”

Treat the copied value as public: it is embedded in the delivered page so the browser can copy it. Do not use this feature for tokens, passwords, private invite links, or any value that must remain secret.

Featured cards

Featured cards are prominent visual links, useful for a new project, event, campaign, or portfolio piece.

featured: [
  {
    title: 'New photo book',
    description: 'Pre-order the first print run.',
    url: 'https://example.com/photo-book',
    image: 'assets/images/photo-book.jpg',
    badge: 'New',
    icon: { simpleIcon: 'BookStack' },
  },
],

title, description, and url are required. image, badge, and icon are optional. A remote or local image is decorative in the current component and therefore has empty alternative text; ensure the title and description convey the destination. Featured-card placement is controlled globally with layout.featuredPosition; see Appearance and Branding.

Like links and sections, featured cards accept enabled, visibleFrom, and visibleUntil.

Icons

An icon may be:

// A local file, a remote HTTP(S) asset, an SVG path string, or SVG source
icon: 'assets/icons/calendar.svg'

// A Simple Icons brand. Its slug is inferred when possible.
icon: { simpleIcon: 'GitHub' }

// A fully controlled Simple Icon.
icon: {
  simpleIcon: 'Node.js',
  slug: 'nodedotjs',
  color: '#5FA04E',
  darkColor: '#8BE28B',
  viewbox: '0 0 24 24',
  size: '24',
}

The build writes only configured Simple Icons to public/assets/icons/simple-icons/, using the project’s pinned simple-icons package. A wrong inferred name causes a build failure; supply the exact lowercase slug from Simple Icons to resolve it. The Simple Icons slug index lists the available slugs. color and darkColor accept strings or numbers; a leading # is optional. A darkColor is emitted as a prefers-color-scheme: dark icon style.

pnpm icons regenerates these icon files. They are generated build output and intentionally ignored by Git.

Content review checklist

Before deployment:

1. Open every link and test every mailto: or tel: link on a relevant device.
2. Click each copy button in a production-like browser context.
3. Confirm local image and icon files exist below public/ with pnpm validate.
4. Build at the current time if you use visibility windows, then confirm which entries made the build.
5. Verify desktop and phone presentation if you selected a grid or split-screen layout.

For metadata that describes this content when shared, continue with SEO and Analytics.