In this article I will explain how the site is built (Astro, Keystatic and Cloudflare Workers), why I chose each brick, and what I would reuse for a client. Everything here works for any small multilingual site.<\/p>\n\n\n\n
Quick numbers before we start :<\/p>\n\n\n\n
- \n
- First commit on 5 July 2026, first full version the same day<\/li>\n\n
- 99 commits until the end of September<\/li>\n\n
- About 40 static pages, in English, French and Japanese<\/li>\n\n
- Running cost : almost zero, static files on Cloudflare are free so I only pay the domain<\/li>\n<\/ul>\n\n\n\n
Features I wanted<\/h2>\n\n\n\n
- \n
- Three languages : English, French and Japanese, because my clients are in Japan and in France<\/li>\n\n
- Two faces : an engineering side (SaaS, websites, electronics, infrastructure) and a creative side (videos, photos, making)<\/li>\n\n
- Fast, with no server to maintain<\/li>\n\n
- Editable without code, through a CMS<\/li>\n\n
- Easy to find on Google from day one<\/li>\n<\/ul>\n\n\n\n
Two sides, one pamphlet<\/h2>\n\n\n\n
The site has two sides, Engineering and Creative, and a tab on the edge of the screen swipes from one to the other. I didn’t want two separate websites, because in my point of view it is the same work : engineering is what I build, and the creative side is how I tell it.<\/p>\n\n\n\n
The layout is like an open pamphlet : creative is the left leaf, engineering the right one, and the whole page is mirrored with only two CSS variables (
--side-align<\/code> and--side-dir<\/code>). Each side has its own ink, Prussian blue for engineering and vermilion for creative, on a washi paper background. Headings use the Fraunces font, straight on engineering and italic on creative.<\/p>\n\n\n\n![\"Creative](\"https:\/\/chauquest.com\/wp-content\/uploads\/2026\/10\/eymeric-me-creative-side-1024x640.jpg\")
The creative side : the same page mirrored, vermilion instead of blue, italic headings, and the Engineering tab now on the right edge.<\/figcaption><\/figure>\n\n\n\n My first version computed the creative colour from the blue, taking the opposite on the colour wheel. It was mathematically perfect and it looked… generated. So I picked both inks by hand and checked their contrast for accessibility (WCAG AA), in light and dark mode.<\/p>\n\n\n\n
The stack<\/h2>\n\n\n\n
Before the details, here is the whole picture :<\/p>\n\n\n\n
![\"Diagram](\"https:\/\/chauquest.com\/wp-content\/uploads\/2026\/10\/eymeric-me-architecture-1024x320.png\")
The whole workflow : the CMS stays on my laptop, Cloudflare only gets static files.<\/figcaption><\/figure>\n\n\n\n Astro, fully static<\/h3>\n\n\n\n
The site is built with Astro<\/a> in
output: 'static'<\/code> mode : the build gives a folder of HTML files and nothing runs on a server. There is only one piece of React on the whole site, the toggle between the two sides. Everything else is plain HTML and CSS.<\/p>\n\n\n\nPros :<\/strong> fast, nothing to update or secure, any static host works<\/p>\n\n\n\n
Cons :<\/strong> every change needs a rebuild and a deploy<\/p>\n\n\n\n
Keystatic on Cloudflare Workers : run the CMS only in dev<\/h3>\n\n\n\n
This is the magic sauce of the project ! Keystatic<\/a> is a CMS that writes Markdown and JSON files directly into the Git repository. I open
\/keystatic<\/code> locally, edit a project, commit, push, and Cloudflare rebuilds the site.<\/p>\n\n\n\n![\"Keystatic](\"https:\/\/chauquest.com\/wp-content\/uploads\/2026\/10\/keystatic-admin-co2-monitor-1024x640.jpg\")
Keystatic running on my laptop, editing the CO2 monitor project. Saving writes an MDX file in the repository, nothing else.<\/figcaption><\/figure>\n\n\n\n At first I wanted the CMS online, with GitHub storage and a server adapter on Cloudflare. It doesn’t work : Keystatic’s admin expects a Node runtime, and a Cloudflare Worker only emulates part of Node through the
nodejs_compat<\/code> flag. And even if it worked, I needed a GitHub App and three secrets just to log in to an admin page that only I use. So I flipped the problem. The CMS is loaded only when I runastro dev<\/code>, and the production build ships no CMS at all. It’s a tiny Astro integration :<\/p>\n\n\n\n\/\/ astro.config.mjs (simplified)\nfunction keystaticDevOnly() {\n const ks = keystatic();\n return {\n name: 'keystatic-dev-only',\n hooks: {\n 'astro:config:setup': (params) => {\n if (params.command !== 'dev') return; \/\/ production build : no CMS at all\n return ks.hooks['astro:config:setup']?.(params);\n },\n },\n };\n}<\/code><\/pre>\n\n\n\nPros :<\/strong> there is no admin page in production, so nothing to hack and nothing to patch<\/p>\n\n\n\n
Cons :<\/strong> I can only edit from a computer with the repository and Node installed. For a portfolio that only I edit, it’s totally fine. For a client who wants to edit from their phone, it’s not.<\/p>\n\n\n\n
Cloudflare for hosting<\/h3>\n\n\n\n
The
dist\/<\/code> folder is served by Cloudflare as static assets. The whole Wrangler config fits in a few lines :<\/p>\n\n\n\n{\n \"name\": \"freelance-landing-page\",\n \"compatibility_date\": \"2026-07-13\",\n \"assets\": { \"directory\": \".\/dist\" } \/\/ the only thing Cloudflare needs to know\n}<\/code><\/pre>\n\n\n\nRedirects (for example
\/<\/code> to\/en\/engineering\/<\/code>) are plain 301 in a_redirects<\/code> file.<\/p>\n\n\n\nDesign tokens, checked by grep<\/h3>\n\n\n\n
All colours are tokens in three CSS files : primitive, then semantic, then one theme per side. Components are not allowed to use a colour value directly, and I check it with a single grep in
package.json<\/code> :<\/p>\n\n\n\nnpm run tokens:check\n# runs : grep -rIE '#[0-9a-fA-F]{3,6}|rgb\\(|hsl\\(' src\/components src\/layouts src\/pages<\/code><\/pre>\n\n\n\nIt’s really simple, but thanks to it a palette change only means editing the token files.<\/p>\n\n\n\n
Three languages<\/h2>\n\n\n\n
Each project exists three times, in
content\/projects\/en\/<\/code>,fr\/<\/code> andja\/<\/code>, with the same file name. Thanks to that, the language switcher always finds the twin page, and so does Google.<\/p>\n\n\n\n![\"Japanese](\"https:\/\/chauquest.com\/wp-content\/uploads\/2026\/10\/eymeric-me-japanese-mobile-473x1024.jpg\")
The Japanese version on a phone : same page, same file name, different folder.<\/figcaption><\/figure>\n\n\n\n Visitors land on the English version and pick their language in the header. The site never redirects you based on your browser language, which is also what Google recommends for multilingual sites.<\/p>\n\n\n\n
How Google understands the site<\/h2>\n\n\n\n
For a portfolio, SEO is mainly two questions : does Google know that the three versions of a page are the same page, and does it know who is behind the site ?<\/p>\n\n\n\n
For the languages, every page declares its own address and its twins in the other languages (the hreflang tags, plus
x-default<\/code> for the English fallback). The sitemap repeats the same links. So Google sees one page in three languages, not three copies of the same content.<\/p>\n\n\n\nFor the person behind it, each page carries structured data (JSON-LD). It’s a small block of code that visitors never see, and it tells Google “this is a person, an engineer in Sendai, here are the services and here are the projects”. It’s the same information as on the page, just written for machines.<\/p>\n\n\n\n
The sitemap also gives the date of the last real edit of each page, taken from Git. So when I update an old project, Google knows it changed.<\/p>\n\n\n\n
And the most basic lesson : write the words your clients search. My first version never said “freelance” anywhere, on a freelance website ^^ Now it’s the first word of the page.<\/p>\n\n\n\n
Built with an AI pair programmer<\/h2>\n\n\n\n
Full disclosure : most of the 99 commits were written with Claude Code. In my point of view it is still a tool rather than a game changer. It types fast, but the architecture, the review of every change and catching the mistakes were still my job.<\/p>\n\n\n\n
Result<\/h2>\n\n\n\n
Today eymeric.me<\/a> has 7 engineering projects (the newest one is recherche-maison<\/a>), 1 creative project and 3 services, in three languages. Some of the projects come from this blog : the CO2 monitor<\/a>, the Taiko controller<\/a> and the Formula Student TSAL<\/a> now have their own page there, written for clients instead of makers.<\/p>\n\n\n\n
![\"CO2](\"https:\/\/chauquest.com\/wp-content\/uploads\/2026\/10\/eymeric-me-co2-monitor-project-1024x640.jpg\")
The CO2 monitor from this blog, rewritten as a project page for clients.<\/figcaption><\/figure>\n\n\n\n One last detail I like : my quotes and invoices are signed PDFs, and eymeric.me\/gpg<\/a> hosts the public key, so a client can check that a document really comes from me.<\/p>\n\n\n\n
Lighthouse scores<\/h3>\n\n\n\n
I ran Lighthouse (version 13.5) on the home page and on a project page, three times each on mobile and on desktop. Here are the medians :<\/p>\n\n\n\n
![\"Lighthouse](\"https:\/\/chauquest.com\/wp-content\/uploads\/2026\/10\/eymeric-me-lighthouse-mobile-1024x198.png\")
Lighthouse on the home page, mobile, the median of three runs.<\/figcaption><\/figure>\n\n\n\n