--- title: "How I built ekioo.com in 2 days with Claude" description: "Technical retrospective on building ekioo.com: a full Blazor site, bilingual, with blog, projects, SEO and animations — pair-coded with an AI agent." date: 2026-04-12T12:00:00+02:00 tags: ["Ekioo", "AI", "Blazor", ".NET", "Behind the scenes"] --- ## An idea that had been lingering for a long time I had wanted **a place of my own** for years. A site that pulls everything together: the projects I'm working on, the POCs I experiment with, the articles I write, the things I learn. A central hub that tells the story of what I do, instead of bits scattered across GitHub, itch.io, LinkedIn, and hard drives collecting dust. But as always, there was **too much to do on the side**. A game to build, clients, work projects, kids, days that never last long enough. Every time the idea came back up, it went right back into the "someday, maybe" pile. And then recently, I looked back. I saw the pile of projects, prototypes, and small tools I'd accumulated over the years — many of them interesting, almost all of them forgotten in some corner. It felt like a waste to leave all that lifeless. These works could be worth something — not just for me, but for the people who might find ideas, answers, or simply a different take on a problem in them. So I decided to **dust it all off**. To take each project, each POC, each half-abandoned experiment — and turn them into something useful. Into **a shareable source of knowledge**. That's what this site is meant to become: a place where I bring my work back to life, where I tell what I learned building it, and where it can be useful to others. But for that to happen, I first needed the site itself. And that's where it gets interesting. --- ## Two days, zero lines of code This website you're reading didn't exist three days ago. The domain was purchased, the idea was there, but not a single line of code. Two days later, ekioo.com is in production: 11 pages, 8 projects, a blog, a contact form, bilingual content, animations, a sitemap, SEO meta tags, and raw markdown content exposed for AI agents. I built everything in tandem with **Claude**. Here's how it went, from a technical perspective. --- ## The setup: Blazor Server, no template No template, no starter kit. I started from an empty `dotnet new blazorserver` and built each piece by hand — or rather, by describing what I wanted and letting Claude code. The final stack: - **.NET 10** with **Blazor Server** - **Markdig** for Markdown rendering - **YamlDotNet** for YAML frontmatter parsing - **Brevo** (formerly Sendinblue) for contact emails - **Vanilla JS** for the particle animation - **Pure CSS** — no framework, no Tailwind The whole thing is **~2,800 lines of code** (C#, Razor, CSS, JS). Compact, readable, and every file has a clear responsibility. --- ## The workflow with Claude The rhythm looked like this: 1. **I describe what I want** — in plain language, in product terms, not code. "I want a projects page that lists my projects from markdown files with YAML frontmatter." 2. **Claude explores the existing code** — it reads files, understands the patterns already in place, and proposes an implementation consistent with the rest. 3. **It codes** — the Razor component, the C# service, the CSS, and the markdown content. 4. **I review and adjust** — sometimes it's right on the first try, sometimes I correct the direction. What changes compared to coding alone: **iteration speed**. When I say "add a mention system in comments with `@agent:claude`", I don't have to write the parser, the model, the endpoint AND the UI rendering. Claude does it all in one go, and I can focus on product direction. --- ## The architecture in brief ### Markdown content All content (blog + projects) is stored in `.md` files with YAML frontmatter: ```yaml --- title: "My article" description: "SEO description" date: 2026-04-06T14:00:00+02:00 tags: ["Tag1", "Tag2"] --- ``` A `MarkdownService` parses the YAML, converts the body to HTML via Markdig, and returns typed models. The system is simple — no database for content, just files on disk. ### Bilingual from day one Every piece of content exists in two versions: `article.md` (French) and `article.en.md` (English). The language detection middleware follows three levels of fallback: 1. Query string (`?lang=en`) 2. Cookie (persists 365 days) 3. Browser `Accept-Language` header If the browser isn't French, the site automatically switches to English. UI translations (navigation, labels, buttons) live in a `LocalizationService` with a dictionary of 50+ keys. ### Custom design system The CSS is 923 lines — a complete dark theme design system with CSS variables, reusable components (cards, tags, timeline, pricing), and clean responsive breakpoints. No framework, no utility classes — just readable CSS with a coherent palette. The gold accent (`#d6b86a`) on navy background (`#0a0a1a`) is the kind of choice you make in 5 seconds that sets the tone for the entire site. ### Particle animation A 134-line JS canvas that draws golden particles connected to each other. It's subtle, follows the mouse, adapts to DPI and mobile, and survives Blazor navigations (which re-render the DOM). A small visual detail that takes the site from "template" to "identity". ### Homemade anti-spam The contact form uses a dual mechanism: - **Honeypot** — an invisible field that bots fill in - **Cryptographic token** — an XOR checksum encoded in base64 with a timestamp. If the form is submitted in less than 3 seconds or more than an hour after loading, it's rejected. No CAPTCHA, no external dependency. --- ## What happened on day two Day one was structure: layout, pages, content, design system. Day two was depth: - **3 complete blog articles** (Todo, Dispatcher, this devlog) with EN versions - **3 hand-crafted SVG diagrams** illustrating the dispatcher architecture - **A Todo project page** with embedded video - **A dynamic sitemap** reading dates from frontmatter - **Localized SEO meta descriptions** on all pages - **A raw markdown endpoint** (`/content/blog/{slug}.md`) so AI agents can read content directly - **A second sitemap** (`/sitemap-content.xml`) indexing markdown content - **Umami analytics** integrated in one line - **A CLAUDE.md** documenting project conventions All of this, in one day, as a pair (me + Claude). --- ## The SVG diagrams One point worth mentioning: the diagrams in the dispatcher article are hand-written SVGs — not generated by Mermaid or Draw.io. Claude produced the SVGs directly in code, using the site's design system (same colors, same border-radius, same font). It took a few iterations — the first draft had misaligned arrows and overlapping blocks. But after 2-3 corrections, the diagrams are clean and visually integrated. This is the kind of task I would never have done manually for a blog post. Too time-consuming. With Claude, it became reasonable. --- ## What I learned ### The agent isn't a code generator The temptation is to treat Claude as a smart copy-paste tool. What works better is giving it the project context, letting it explore the existing code, and describing intent rather than implementation. It adapts to existing patterns — naming, structure, style — and produces consistent code. ### Review remains essential Claude makes mistakes. Misnamed API fields (I discovered `assignedTo` wasn't `assigneeHandle` when half the tickets failed to create). SVGs with arrows crossing over blocks. Miscalculated positions. Human review catches these errors in real-time, and iteration is fast. ### Speed changes the nature of work When you can ship a complete site in two days, you think differently. You don't ask "is it worth building this page?" — you build it. You don't ask "do I have time for a sitemap?" — you do it. Friction disappears, and you focus on what you want the product to be. --- ## The result **~2,800 lines of code**. **11 pages**. **8 projects**. **Bilingual blog**. **SEO**. **Analytics**. **Contact**. **Animations**. **Markdown content exposed for AI agents**. Two days. I'm not saying it's perfect. There are corners to polish, content to enrich, features to add. But the site is in production, it does what it needs to do, and it was built at a speed that would have been unthinkable a year ago. That's what working with an agent looks like. --- ## Follow the development The site will keep evolving. If you want to follow future articles — or discuss how I use AI in my projects — join me on **Discord**. **→ [Join the Discord](https://discord.gg/4MVPfw9wTQ)**