← Back to site
Blog

How This Website Was Built

This website is vibecoded and was built with Claude. Here's the full story - how, why, and what I'd do differently next time.

Last updated: September 10, 2026

How it started

It was originally meant to be a small test - I wanted to see whether Claude could build a functional website based on an existing example. It turned out to work pretty well, so I kept going until it became this entire site.

Where the design came from

The overall look and structure were inspired by michalvojtyla.sk - I only borrowed the general design direction, not the actual content, text, or code. Michal gave me written permission to use his site as a reference.

How the site came together

Instead of writing code, I told Claude in chat what the site should contain and how it should behave. Claude generated and edited the actual code directly - HTML, CSS, and JavaScript - and I could preview and test each version immediately.

Every follow-up change - new copy, a new section, a bug fix, a legal tweak - was sent as a chat message, and Claude edited the relevant files directly. Before bigger changes went live, Claude ran an automated check (HTML structure, broken links, duplicate IDs) to catch errors early.

What the site can do

No backend. Plain static HTML, CSS, and JavaScript - no CMS, no database.

Five languages (SK/EN/CS/DE/PL) with a language switch that keeps the current page and the selected theme. Each language has its own URL (e.g. /en, /de) via a server-side rewrite, not just a query parameter.

Dark/light mode, synced consistently across the whole site and all languages.

Full-text search across the entire site, separate for each language, running directly in the browser with no server involved.

SEO & GEO optimization. Language alternates (hreflang) on every page, a sitemap.xml, structured data (JSON-LD) for search engines and AI assistants, a dedicated llms.txt file, and branded social-share preview images for each language.

Contact form via FormSubmit.co - sends real emails without needing a custom backend.

Accessibility. Skip-to-content link, semantic HTML, aria-labels on interactive controls, keyboard navigation in search results, visible focus states, descriptive alt text.

Privacy & legal. Cookie banner, terms of service, GDPR clauses, explicit consent before any meeting is recorded or transcribed (via Fireflies), no external fonts or CDNs - the site loads no font files from third-party servers, so a visitor's browser never sends their IP address to one.

Performance. Caching and compression (gzip/deflate) configured directly on the server, no external libraries or frameworks slowing down page loads.

Hosting and size

The site runs on Websupport.sk, the largest domain and hosting provider in Slovakia (part of Loopia Group, which is owned by the Nordic investment firm Axcel). Since it's pure static files, it would run on virtually any host, including free options like GitHub Pages or Netlify.

The site has 110 HTML pages - 22 unique pages across 5 languages (SK/EN/CS/DE/PL). Total site size is just under 4.4 MB, including the photo, two PDF contracts, branded preview images for each language, and the search index (almost 1 MB) for all five language versions.

What I'd do differently

I'd pick a few websites I actually like and have Claude generate several design directions based on them, then choose one from those instead of settling on the first approach.

How long it took

A few hours. It could genuinely be done much faster - part of that time went into writing and fine-tuning copy, adjusting small details, and figuring out everything needed to make it actually work properly.

Ongoing development

The site is never really "done" - I keep refining it: new sections, copy, legal details, and small design tweaks. Always the same way - through a conversation with Claude, without writing code by hand. The full history of changes is public in the changelog.

I've also packaged the process I use to build this site into a downloadable Claude Skill - it can build a similar website from scratch, step by step. Whenever I find and fix a real bug on the live site (like a header alignment issue), I fold the same fix back into that skill, so it doesn't repeat on any other site built with it.

Can you just copy it?

Feel free to borrow the process and the technical approach - that's not anyone's exclusive idea. The specific content (my name, photo, testimonials, pricing) obviously isn't yours to copy. And if a particular site's design inspires you, make sure it's not a direct copy of someone else's work - in my case that was cleared with Michal's written permission, and yours should be too.

Working on something similar - a website, or AI in your company more broadly? Get in touch.