My personal site

bentossell.com. It’s what I’m doing now and what I did before, and it’s where the things I build end up: bentossell.com/devices, bentossell.com/council-spend, and the rest.

bentossell.com

Every version of my site has been a bit of a toy. The last one was a terminal: you typed commands to find out about me, and there were games in it. Space invaders, snake, tetris.

~/repos/bentossell/index.html

In August I wanted something new. I’d been looking at ryOS and Alana Goyal’s Notes, two personal sites that work like little operating systems, and I wanted mine to be as unique. My first idea was to make it look like an agent app. Each thread could hold something different: about me, my investments, products I like.

How I got the first version, with mock content and my notes drawn over it, is on Prototyping.

By the evening it worked. So I asked Droid for more:

It went for it. Skins to make it look like different agent apps, a command palette, a terminal in the sidebar, a pet dog, and /grill-me.

~/repos/bentossell-agent/index.html

By about 10pm I had a long list of things the site could become.

I slept on it and hated the whole thing.

It was too complicated for a personal site. If I made it look like a real agent, I would want to make it a real agent. There would always be another button, interaction or easter egg to add.

After all those versions of the agent one, I knew what I wanted, so I drew it in tldraw. A file tree, with my notes in the margin. I’d seen a personal site by Daniel White that used a file tree as a timeline: what he’s doing now and what he did before, as nested items.

My instructions asked for three versions of any design, so I got three (Prototyping). They were the same page at three different widths, with the notes moved about.

I’d drawn a v2 in the same file, without the hover arrows. That was the one I wanted:

I didn’t need three versions this time, because I’d already drawn it. Then it was small rounds on how it felt: what’s open when you land, where the tree lines stop.

bentossell.com

I wanted to change what’s on the site without trawling through a bunch of code.

# [@bentossell](https://x.com/bentossell)

a self-taught internet builder (i can't code). i make sites and apps with agents all day and explain how it works as i'm learning.

<!-- expand-annotation: expand -->

## Now

- [bens bites](https://bensbites.com)
<!-- always-expanded -->
- building
  - [agent words](https://bentossell.com/words/) — a visual dictionary
  - [design words](https://bensbites.com/design-words) — a visual dictionary of design
  - [mascot](https://bentossell.com/mascot/) — animate your own mascot
  - [devices](https://bentossell.com/devices/) — drag through 50 years of devices
  - [realtime-tokens](https://bentossell.com/realtime-tokens/) — live OpenRouter model traffic
  - [token activity](https://bentossell.com/token-activity/) — every token my agents use, by day
  - [bg-gone](https://bentossell.com/bg-gone/) — remove image backgrounds in your browser
- investor
  …

Markdown is plain text with a small amount of formatting. A heading starts with a #, for example. The page reads the file and draws the tree from it. Every heading, every branch, every link. Then:

Yes, once it’s published again. Changing the file on my laptop changes my copy. The site changes when the new copy goes up.

That’s why the building list was there. For a month, putting something new on my site was one more line in content.md.

The site was on a here.now address. I wanted it on bentossell.com:

The agent used Chrome to add the domain in here.now. here.now said which records it needed, and the agent changed them in Vercel, where my domain lives. A domain such as bentossell.com is a memorable address. DNS records tell browsers which server should answer when someone visits it:

It took about 20 minutes to settle, which is normal when an address starts pointing somewhere new. I checked whether here.now needed the project on GitHub. It didn’t. The agent published the files straight from the folder on my laptop.

The day before, I’d moved the domain to Vercel, so all my domains are in one place. I was sure it was on Squarespace. It was on Cloudflare, and Squarespace was an old link to a site I don’t use. I’d told the agent to look first and not change anything, so it found that out before it touched anything.

The new site was deliberately more basic, so small details made a bigger difference. I drew a little mascot in the same tldraw file, and now he walks along the top of the page. How he got there is on Mascot.

A week later, here.now’s analytics showed a lot of missing pages:

Most were bots trying addresses like /wp-admin, looking for a WordPress site to break into. Nothing to fix there. The real ones were old links to my blog and the little icon browsers ask for. It fixed those. Then I asked for a fun 404 page, with the mascot on it:

bentossell.com/nothing-here

My site is static. Everything shown on the page is in the files. A dynamic site pulls information from somewhere else, such as an API or database.

I only needed something dynamic once, for the picture that shows up when someone shares a link to realtime-tokens. Its numbers change every five minutes, so a fixed picture would be out of date by the time anyone saw it:

bentossell.com/realtime-tokens

The homepage keeps one fixed picture. The token page gets a small service on Vercel that draws a new one when X or Slack asks for it. Everything else stays static.

I was happy with the tree, and I left it alone for a month.

Then I started building this course, and I really liked its style. So I wanted my site to look more like it. This time I used Emil’s prototype skill (Prototyping):

These weren’t the same page at three widths. I got four, each with its own way of showing my history and my portfolio:

localhost:4188/proto/redesign/

PromptExplorerCanvasWall

I didn’t pick one. I took a bit from each:

Then a night of rounds on the mascot, and it went live the next morning. That’s the site at the top of this page. It’s so easy to have an idea for a new version of something and have it made.

Before any of this, in July, I tried making the site a tldraw canvas: my desk, with polaroids and sticky notes, and you’d zoom around it. I didn’t love it: “the direction is broadly correct but execution is poor, it looks very basic.” I never went back.

• I wanted something new, so I prototyped my site as an agent app, then asked Droid to 100x it.
• I slept on it and hated the whole thing. Too complicated for a personal site.
• So I drew what I wanted in tldraw. Three versions looked like dogshit, so one version from my v2 drawing.
• Then all the content into one markdown file I can edit, and onto bentossell.com.
• Then little things: the mascot, a 404 page, a share image that changes for realtime-tokens.
• A month later I redesigned it again. Four versions, and I took a bit from each.