I built this website with AI. Claude wrote the code and I was the client: I decided what the site should do, wrote the copy, supplied the photos and set up the domain, hosting and search engines myself.

I’ve been learning AI for a while and I really enjoy it. Building my own website turned out to be a great way to learn how to actually work with AI — and to pick up some SEO along the way. The rest of the site is in Czech.

100
desktop performance
PageSpeed Insights
100
accessibility, practices, SEO
on desktop and mobile
4
days
from the first commit to today
0
cookies
so no cookie banner

The brief

The site has two goals. Win sponsors — that’s why the Partnerships page matters most. And serve as my SEO portfolio, the project I use to learn how to get a website into search engines.

From the start I had a few rules the AI was not allowed to break:

  • Photos are never cropped. Every photo is shown whole, in its original aspect ratio, and credited to its photographer.
  • No made-up numbers. Results come only from the International Canoe Federation database and the Czech Canoe Federation.
  • No prices, and no promises I can’t keep.
  • The copy is in my voice. Whenever something sounded machine-written, I rewrote it.

How it went

  1. Design in Claude Design — look, colours, fonts and page layouts.
  2. Turning it into code — plain HTML, CSS and JavaScript. No framework, no libraries, no build tools.
  3. Responsive layout — the design was desktop-only, so we rebuilt it for phones and tablets.
  4. Deployment — first on Netlify, then moved to Cloudflare. Every push to GitHub deploys to the live site automatically.
  5. Code clean-up — one shared page skeleton, one stylesheet, one script, automatic formatting. Afterwards we compared the styles of every element at three screen widths to make sure nothing had changed.
  6. Speed, security and accessibility.
  7. Copy — I rewrote it in my own style so it wouldn’t sound like AI.
  8. Articles, FAQ and Bing.

SEO under the hood

Structured data

Search engines and AI assistants read a site better when they understand it. That’s why every page carries schema.org structured data — more than 10 types:

  • Person — who I am, my club, the national team, university, sponsor and social profiles
  • WebSite, ProfilePage, WebPage — what each page is
  • BlogPosting, CollectionPage — articles and their list
  • FAQPage — the FAQ on the Partnerships page
  • BreadcrumbList — where a page sits on the site
  • ImageObject — photos, including the photographer

Indexing

  • Google Search Console — domain property verified via DNS, sitemap submitted.
  • Bing Webmaster Tools — Bing’s index also powers search in ChatGPT and Copilot.
  • IndexNow — after every deploy the site reports changed pages to Bing, so there’s no waiting weeks for a crawler to find them.

Speed

On desktop the site scores full marks in all four categories. On mobile, performance sits around 90–95 — Google tests on a simulated slow phone and every run comes out a little different. Accessibility went from 96 to 100. What helped:

  • Film grain across the whole site used to be a live SVG filter the browser kept recalculating. I replaced it with a small 22 kB image — the render delay of the main photo dropped from 1.9 s to 0.07 s.
  • Photos in several sizes — a phone downloads a smaller version than a large monitor.
  • One-year caching for photos and fonts.
  • Fonts hosted on the site itself, not loaded from Google Fonts.
  • Text contrast of at least 4.5 : 1.

What holds mobile performance back is mainly the analytics script, and the fact that the site has no build step to minify the code. That’s a deliberate choice: the site stays simple and I can publish any change without extra tooling.

Measured on 25 September 2026: PageSpeed Insights report (opens in a new window).

Security and privacy

  • HTTPS with HSTS and DNSSEC — both the domain and the connection are secured.
  • Content Security Policy — the site may only load its own files; nothing foreign gets in.
  • Cookie-free analytics (Cloudflare Web Analytics) — no personal data, no cookie banner.

Accessibility

  • A “Skip to content” link for keyboard users.
  • Every control works with the keyboard.
  • If visitors turn off animations in their system settings, the site stays still.
  • Photo and link descriptions for screen readers.

What the site can do

  • The filter, chart and race map on the Results page are generated automatically from the results table. I add a new race once and everything updates.
  • A race lane — boats move at the speed of my personal best, 200 metres in 39.149 seconds.
  • A PDF media kit generated automatically from a source page styled like the site.
  • Logo placement drawings based on the real dimensions in my contract with the federation. The boat is traced from a photo of a racing canoe.

What I got out of it

I learned to work with AI the way you’d work with a developer: say clearly what I want, check the result and not give in when something is off. We redid the boat drawing on the Partnerships page several times. First it looked like a kayak, then I noticed the bow and stern were the wrong way round.

And I got hands-on with SEO — from structured data and speed to Search Console and Bing. That’s different from just reading about it.

Tools used

  • Design: Claude Design
  • Code: Claude (Anthropic) — HTML, CSS, JavaScript
  • Hosting: Cloudflare Workers, deployed from GitHub
  • Domain: Wedos, DNS at Cloudflare
  • Search engines: Google Search Console, Bing Webmaster Tools, IndexNow
  • Measurement: PageSpeed Insights, Cloudflare Web Analytics