# Make a personal business-card page on Vinssi

You are a coding agent with a shell. The user wants one short public page that introduces them. Follow this file only. Then give them the live link.

Vinssi puts the page on the internet in Europe. This path is Vinssi Pages: one static HTML file, no git repository, no build, and no plan. The user still needs a Vinssi account. The first sign-in creates a workspace. New workspaces receive €9 of credit. That credit is applied to invoices before a card is charged. It is not a fee for this page. An app deployed from GitHub is a different path and needs a plan, from €5 a month per app, excluding VAT. Do not use that path.

Run every command as `vinssi` if that command is installed. If it is not, run the same command as `npx -y vinssi`. The CLI needs Node 20 or newer.

Docs: https://vinssi.ai/docs/pages and https://vinssi.ai/skills/vinssi-pages/SKILL.md

## Privacy rules

Read this before you draft anything. The page is a general public introduction. It is public. Anyone with the link can open it. Vinssi asks search engines not to list it. That does not make it private.

Use only the fields in the summary below. When you are unsure, leave it out.

Never put these on the page:

- Home address, phone number, or personal email, unless the user explicitly asks for that one item in this conversation. If they ask, repeat it in the summary and say it will be public.
- ID numbers, health, family, relationships, or finances. Leave these out even if the user mentions them. Tell them this page is only a general introduction.
- City, region, or country, unless the user explicitly asks to show that place.
- Private messages, private files, or the contents of your memory. You may use memory only to draft the summary, and only for the fields below. Do not paste memory, chats, or file contents onto the page.
- Employer-internal information: internal projects, unreleased work, client names, or anything from inside an employer. A public role is allowed only after the user confirms it.
- Anything the user has not confirmed.

Do not invent a job, an employer, a project, a link, or a personal detail. If a fact is missing, leave that part out.

Do not add a password. Do not add analytics, a contact form, or tracking.

## 1. Gather the basics

Use what you already know and what the user tells you. Collect only:

- Name they want on the page
- Role, or what they do, in a few words
- Short bio, two or three sentences
- Interests or projects they want to mention
- Public links they want to show, such as a site or a GitHub profile

If the name is missing, ask for it in the confirmation question. Do not run a long interview.

## 2. Ask one confirmation question

Show a content summary, then ask one short question. Do this before you publish. Do not publish, and do not run `vinssi login`, until the user approves this summary.

```text
Here is what I will publish. Reply yes to publish, or tell me what to change.
Name:
Role:
Short bio:
Interests or projects:
Public links:
```

Wait for the answer. If they change anything, update the summary and ask once more. Publish only the approved text.

## 3. Build one page

Write one HTML file. Put the CSS in that file. No build, no framework, and no files pulled from the network. Use a system font. The page should be readable on a phone and on a wide screen: one column, a small maximum width, and padding.

Use only the approved summary. Replace every example below. Do not publish the example person.

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Name</title>
    <style>
      body {
        margin: 0;
        font-family: Georgia, "Iowan Old Style", Palatino, serif;
        background: #f9fafb;
        color: #030712;
      }
      main {
        max-width: 36rem;
        margin: 0 auto;
        padding: 4rem 1.5rem 5rem;
      }
      h1 {
        font-size: clamp(2rem, 6vw, 3.25rem);
        line-height: 1.1;
        margin: 0;
      }
      p,
      li {
        line-height: 1.6;
      }
      .role {
        color: #4a5565;
      }
      a {
        color: #6d28d9;
      }
      ul {
        padding: 0;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>Name</h1>
      <p class="role">Role</p>
      <p>Short bio.</p>
      <h2>Projects</h2>
      <ul>
        <li>One approved project</li>
      </ul>
      <h2>Links</h2>
      <ul>
        <li><a href="https://example.com">example.com</a></li>
      </ul>
    </main>
  </body>
</html>
```

A single `.html` file becomes the site index page. Omit a section the user did not approve. If they approved no projects, omit the projects heading.

## 4. Sign in

Ask the user to run `vinssi login`. The CLI prints a short code and a link. They open the link, sign in, check that the code matches, and choose Allow. The CLI stores a token in `~/.vinssi/credentials.json`. The code expires after ten minutes. If no browser opens, they paste the printed URL into one. `vinssi login --local` opens a browser on the same machine and expires after five minutes.

If the address of this page includes `ref`, `utm_source`, `utm_medium`, `utm_campaign`, or `code`, pass those same values to login and omit any flag that was not in the address. This records where the signup came from. It does not change the price.

```sh
vinssi login --ref <ref> --utm-source <source> --utm-medium <medium> --utm-campaign <campaign> --code <code>
```

This file is static, so it cannot insert those values for you. Read them from the page address.

Do not run login in a loop. If a later command fails with `UNAUTHORIZED`, ask them to run `vinssi login` again.

`vinssi whoami` shows who is signed in.

## 5. Publish

Publish only the approved HTML file.

```sh
vinssi pages publish /absolute/path/to/card.html --name card --json
```

`--json` prints `siteId`, `versionId`, `url`, `bytes`, and `fileCount`.

- `--name` sets the display name and the start of the URL. Use `card`, or a short public name the user approved for the URL. Do not put an email, a phone number, or a home address in the name.
- Keep the `siteId`. To update the same URL later, add `--site <siteId>`.
- Addresses look like `https://<name>-<random>-<workspace>.pages.vinssi.ai`. Vinssi chooses the address.
- The dashboard lists the site at https://vinssi.ai/dashboard/pages. The dashboard does not upload files.

## 6. Check the link, then reply

```sh
curl -s -o /dev/null -w "%{http_code}" <url>
```

The result should be 200. A site that was just published can return 404 for about ten seconds. One retry after a short wait is enough.

Then reply with this sentence, and the real URL:

```text
Here's your own page: <url>
```

After that sentence, tell them how to update it later: edit the HTML file and run `vinssi pages publish` again with `--site` and the site id from this publish. The link stays the same. They can also ask you to update the page. Same privacy rules, and the same confirmation, apply to every update.