Hello world: a new SoBra, built with AI

Published Web & frontend Braindump

SoBra has a new brand, a new website and, for the first time, a blog. I made all of it together with AI. Here's how that works.

The new logo

The logo is a hand-lettered SoBra with a sweeping line underneath. At the end of that line sits an orange dot, the only bit of colour.

On sobra.be that dot does almost everything. It drops into the logo as the page loads, becomes your cursor, and snaps back in when you bring it close to its spot. If your device asks for reduced motion, you see the end result straight away.

How I work with AI

I brainstorm and plan mostly with OpenAI. Claude (Opus 5.5) does the building and the design.

Claude gets clear instructions in Markdown files as context. On top of that I've written my own skills (SKILL.md files) on how I like to work and what matters to me: how I write, how I think, what I pay attention to. That takes most of the work off my hands, both building the site and writing the copy. This post was made the same way.

I'm still the puppet master. I decide what happens and define what's good and what isn't. I set how things are written, from tone of voice to technical writing style. Then I let AI finish the tasks and show me the result. The review is mine.

Why this way

I don't need a CMS. A post is a folder of text files, and the build turns it into a page in three languages. The site stays very small, and everything is optimised the way I'd do it by hand.

So I spend less time on my own website and more on client work.

Under the hood

The site runs without a framework: plain HTML, SCSS with cascade layers and a handful of small JavaScript modules, bundled with Vite. A few of the techniques in it:

  • View Transitions for moving between pages: an orb in the dot's colour grows from wherever you click.
  • Scroll-driven animations in CSS, so text lights up as you scroll, without JavaScript.
  • An HDR video trick from superwhite by dtinth, to show something whiter than white on an HDR screen.

There are a few secrets on the site too. I won't tell you where.

What's coming here

Nostrabramus will hold short pieces on AI, the web and SEO, and things I come across online. Always with the sources, in Dutch, English and French. Why it's called that, you can read in Why is this blog called Nostrabramus?.