Design, code and AI, in one workflow

• Visual direction is one of the game's main criteria. I aimed for a calm, wooden mood with light sound effects and soft music, plus a discreet layer of technology so the screen doesn't feel static.
• After researching the technical tooling, I chose Godot, driven with Claude Code. The design system will be useful when I develop the next levels.
• My backlog is synchronized between Claude, GitHub and Notion. Agents maintain it automatically and I can still edit it by hand, as in an agile setup where each agent has its own tasks and tickets.
• No marketing planned: it's a learning project with no financial cost. A light monetization is planned for the next release.

• I wanted a static site that I can edit without effort. No CMS, no online portfolio builder: I keep control of everything. Text, images and projects live in YAML files that Astro templates read. To add or hide a project, I simply edit a text file. Stack: Astro 5 with static output, Tailwind CSS 3, and GitHub Pages for deployment.
• I set the agent's rules and constraints in a rulebook of about 120 lines, trimmed from 4.3k to 1.6k tokens in the latest refactoring.

• Most tracking apps chase performance or looks, which can be a problem for individuals. Everyone should keep control of their goals and personal data. Data entered by hand is hard to use effectively. Between two consultations, supporting patients can also be difficult.

• Competitive review of the Play Store and the App Store. I compared the available environments and the AI-compatible tools for building a mobile game.
• Playing the physical puzzle showed me that the rules are simple but hard to guess. Like chess: you see the squares, not the legal moves. The game has to teach them. A physical puzzle is handled in three dimensions, while a fixed screen flattens the experience and shortens how long people stay with it. The game needs elements that keep players engaged longer.

• I ran a benchmark of senior portfolios and kept watch on what French and American tech companies expect.
• I tested my Figma mockups with 7 different people, on mobile, desktop and tablet. Professionals from different sectors (design, ergonomics, etc.) reviewed the wording and copy to check that the text was understandable. The conclusion: lean more on my methodology and technique than on the final visual result.

• A rules sheet in the settings, and a visual aid showing legal moves that can be switched off.
• A three-step onboarding explains the goal and the three rules. It can be replayed from the settings, and it runs on a simulation board so it doesn't spoil the start of the solution.
• Reflective pause: you can move the pegs freely along two axes and throw them, with sound effects. It doesn't count as a move, and the peg returns on its own.

• I listed the pages, their content and the features, then generated wireframes from that. From the wireframes I drew up the list of components for the UI kit.

Game screenPause and quitSettingsTeaser

• I gathered the Material Design 3 library, Android's design system, on GitHub so my agents can read it. For the visual direction, I started from royalty-free textures and reworked them with tokens that translate wood species into an interface language. I laid these textures over Material 3's native components: raw wood with a thin high-tech layer. The UI kit is tailored to Android, highly customized and consistent across the whole interface.

• I produced the wireframes and high-fidelity mockups in Figma, along with the design system, the UI kit and the tokens. The site is mobile first, but designed to be responsive for presentations on a laptop. Components are therefore built for every device (mobile, tablet, desktop).

Home

1 / 6

• The design tokens are Figma variables, in two collections: Primitive (123 variables) and Semantic (71). Semantic tokens point to primitives, and both feed the tokens file that the code reads.

tokens.js → tailwind.config.mjs → component

// 1. src/styles/tokens.js
const primitives = {
  color: {
    gray: { 300: "#d1d5dc" },
    "accent-action": { 400: "#7f98fa" },
  },
};

const semantic = {
  colors: {
    "stroke-primary": primitives.color["accent-action"][400],
    "stroke-neutral-primary": primitives.color.gray[300],
  },
};

// 2. tailwind.config.mjs
colors: {
  ...tokens.semantic.colors,
},

// 3. Footer.astro
<button class="border border-stroke-neutral-primary rounded-full">

Code excerpt of the exported design tokens, shown on purpose.

• Godot, driven mostly with Claude Code at first, then with DeepSeek and Gemini.
• One screen at a time, with stops and before and after captures. I validate on a real phone before moving to the next screen. I wrote no application code by hand. My technical work was auditing and checking.

• My Claude Code agent reads the repository in real time and follows my constraint files, my context and my skills. A skill formats my project writing as YAML. The agent only structures the text, which stays editable by hand at any time.

• Automated tests cover the game rules, layout, font sizes and touch targets. People close to me tested the game before release, to check that the rules were understood, the interface was easy to use and the visual style worked.
• Contrast is computed from the tokens: the exceptions I accepted are decided and documented. I ran captures through a color-blindness simulation. Pegs also differ by shape, shadow and an engraved symbol.

• On the Play Store since November 10, 2026, in early access and open to everyone.
• The next release will include monetization through AdMob. It builds on the puzzle's retry loop, without pushing players or getting in the way of the game.

Google Play listing

• GitHub lets me push the site to production on my own domain. Separate branches let me test before releasing to the main branch, which is tied to my domain. On the SEO side: canonical URLs, language alternates, Open Graph and structured data.
• After testing several analytics tools, I kept Umami: it is lighter and does not collect private data, so it suits a low-traffic portfolio better.
• Over six months (May to November 2026), 75% of visits arrive directly, probably through the UTM links in my résumés, and 17% through organic search. Since the site was translated into French in July 2026, France went from 6% to 20% of traffic. The United States stay around 50%.