first commit

2025-05-15 16:06:00 +01:00 · 2025-05-15 16:06:00 +01:00 · e8cf8acbbc
commit e8cf8acbbc
129 changed files with 3796 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,5 @@
+*.kra
+blog/md/draft
+media/icons/svg
+projects/*/*.svg
+projects/y_download
--- a/README.md
+++ b/README.md
@ -0,0 +1 @@
+The repository for ailyaut.com
--- a/about.html
+++ b/about.html
@ -0,0 +1,93 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+	<meta charset="utf-8" />
+	<title>About – Ailyaut's blog</title>
+    <link rel="icon" type="image/png" href="media/icons/favicon-16x16.png" sizes="16x16">
+	<link rel="stylesheet" href="style.css" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <meta property="og:title" content="About – Ailyaut's blog" />
+    <meta property="og:type" content="blog" />
+    <meta property="og:url" content="https://ailyaut.com/" />
+    <meta property="og:image" content="https://ailyaut.com/media/preview.png" />
+    <meta property="og:description" content="Hi! I'm Ailyaut, a 24-year-old everything-designer with a particular interest in open source and card games." />
+    <meta property="og:locale" content="en_US" />
+</head>
+
+<body>
+    <header>
+        <div id="header_box">
+            <div>
+                <a href="index.html" id="header_title">Ailyaut's blog</a>
+            </div>
+            <nav id="header_nav">
+                <a href="blog.html" class="nav_button">Blog</a>
+                <a href="gallery.html" class="nav_button">Gallery</a>
+                <a href="projects.html" class="nav_button">Projects</a>
+                <a href="about.html" class="nav_button_active">About</a>
+            </nav>
+        </div>
+    </header>
+
+    <main>
+        <div class="box">
+            <div class="column" style="width: 100%;">
+                <h1>About</h1>
+                <h2>About me</h2>
+                <p>I'm Ailyaut (pronounced <span class="italic">ayo</span>), a 24-year-old designer from France.<br>
+                    I've got a bachelor's degree in 3D animation, and I consider myself a primarily visual artist, although I also enjoy writing music and code.<br>
+                    In my spare time, I create a mobile game (yet to be announced), make music that I post on YouTube and Bandcamp, and tinker with my Linux server. I'd also like to write a comic book, though I have only two pages so far.
+                </p>
+                <h2>About this website</h2>
+                <p>
+                    The purpose of this website is to showcase my work.<br>
+                    The website is written using only HTML and CSS. There's no JavaScript, no cookies, no tracking.<br>
+                    I also try to make it as light as possible in order to not burn our planet too much.<br>
+                    There is a repository for this website with the scripts I made to update it (it's probably horrendous code but I'm not a programmer).
+                </p>
+                <h2>Copyright</h2>
+                <p>
+                    Unless otherwise specified, you are not allowed to use any of my work (including but not limited to any written text, illustrations, 2D and 3D renders and animations) hosted on this website or any other, for any purposes, both personal or commercial, including purposes related to the training and/or development of artificial intelligence (AI) of any kind, to the extent permitted by applicable law. 
+                </p>
+                <div class="spacer" style="--size: 2em;"></div>
+                <h1>Contact</h1>
+                <p>Replace the ౷ with an @ (the links are deliberately wrong as well).</p>
+                <p>
+                    Email : <a href="mailto:ailyaut౷robotfumeur.fr">ailyaut౷robotfumeur.fr</a><br>
+                    XMPP : <a href="xmpp:ailyaut౷robotfumeur.fr">ailyaut౷robotfumeur.fr</a><br>
+                    Mastodon : <a target="_blank" href="https://mastodon.online/@ailyaut">@ailyaut@mastodon.online</a>
+                </p>
+            </div>
+            
+
+        </div>
+        <div class="spacer" style="--size: 2em"></div>
+        <a href="#" class="btt"><img class="bttimg" src="media/icons/arrow_upward.png"/></a>
+    </main>
+
+    <footer>
+        <div id="footer_box">
+            <div class="footer_item">
+                <p>Copyright © 2025 Ailyaut</p>
+            </div>
+            <div class="footer_item">
+                <a target="_blank" href="https://www.websitecarbon.com/website/ailyaut-robotfumeur-fr-index-html/" style="text-decoration: none;">
+                    <p style="color: black; background-color: var(--accent); padding: 0.2em 0.6em 0.2em 0.6em ; border-radius: 1em;">
+                        0.02g of CO₂/view
+                    </p>
+                </a>
+            </div>
+            <div class="footer_item" style="justify-content: flex-end; gap: 1.75em;">
+                <a rel="me" href="https://mastodon.online/@ailyaut" target="_blank"><img src="media/icons/mastodon.png" class="icon" alt="Mastodon" title="Mastodon"/></a>
+                <a href="https://www.youtube.com/@ailyaut" target="_blank"><img src="media/icons/youtube.png" class="icon" alt="YouTube" title="YouTube"/></a>
+                <a href="https://ailyaut.bandcamp.com/" target="_blank"><img src="media/icons/bandcamp.png" class="icon" alt="Bandcamp" title="Bandcamp"/></a>
+                <a href="https://codeberg.org/ailyaut" target="_blank"><img src="media/icons/git.png" class="icon" alt="Git" title="Git"/></a>
+                <a href="rss.xml"><img src="media/icons/rss.png" class="icon" alt="RSS feed" title="RSS feed"/></a>
+            </div>
+        </div>
+    </footer>
+</body>
--- a/blog.html
+++ b/blog.html
@ -0,0 +1,147 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+	<meta charset="utf-8" />
+	<title>Blog – Ailyaut's blog</title>
+    <link rel="icon" type="image/png" href="media/icons/favicon-16x16.png" sizes="16x16">
+	<link rel="stylesheet" href="style.css" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <meta property="og:title" content="Blog – Ailyaut's blog" />
+    <meta property="og:type" content="blog" />
+    <meta property="og:url" content="https://ailyaut.com/" />
+    <meta property="og:image" content="https://ailyaut.com/media/preview.png" />
+    <meta property="og:description" content="Hi! I'm Ailyaut, a 24-year-old everything-designer with a particular interest in open source and card games." />
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:locale:alternate" content="fr_FR" />
+</head>
+
+<body>
+    <header>
+        <div id="header_box">
+            <div>
+                <a href="index.html" id="header_title">Ailyaut's blog</a>
+            </div>
+            <nav id="header_nav">
+                <a href="blog.html" class="nav_button_active">Blog</a>
+                <a href="gallery.html" class="nav_button">Gallery</a>
+                <a href="projects.html" class="nav_button">Projects</a>
+                <a href="about.html" class="nav_button">About</a>
+            </nav>
+        </div>
+    </header>
+
+    <main>
+        <div class="box">
+            <h1>Blog</h1>
+        </div>
+        <!-- Blog -->
+        <div class="spacer" style="--size: 1em;"></div>
+        <div class="box">
+            <div class="column" style="width: 100%;">
+                <div class="row align_vertical" style="justify-content: space-between; height: min-content;">
+                    <div class="row align_vertical" style="gap: 0.75em;">
+                        <h2 style="margin-bottom: 0; margin-top: 0;">Recent posts</h2>
+                        <a href="rss.xml" style="position: relative; top: 0.2em;"><img class="icon" src="media/icons/rss.png"></a>
+                    </div>
+                </div>
+                <div class="spacer" style="--size: 1em"></div>
+                <div class="row" style="gap: 2em">
+                    <!-- blog -->
+                    <div class="column" style="--custom_width: 33%; gap: 1em">
+    <a href="blog/202405_moxxy_progress_report.html" class="card" style="text-decoration: none;">
+        <img src="blog/media/2024/20240407_moxxy_progress.png
+" alt="Moxxy UI: May 2024 progress report
+" title="Moxxy UI: May 2024 progress report
+" class="card_image"/>
+        <div class="box">
+            <div class="column" style="width: 100%;">
+                <h3 class="card_title">Moxxy UI: May 2024 progress report
+</h3>
+                <p class="card_text">
+                    Let's start with a little announcement: from now on, I'll be publishing my .penpot file in the moxxy/design repository on Codeberg on a monthly basis, so that everyone can tinker with the interface to their heart's content! I should have done it from the start, but better late than never! 
+
+                </p>
+            </div>
+        </div>
+    </a>
+</div><div class="column" style="--custom_width: 33%; gap: 1em">
+    <a href="blog/202404_moxxy_progress_report.html" class="card" style="text-decoration: none;">
+        <img src="blog/media/2024/20240407_moxxy_progress.png
+" alt="Moxxy UI: April 2024 progress report
+" title="Moxxy UI: April 2024 progress report
+" class="card_image"/>
+        <div class="box">
+            <div class="column" style="width: 100%;">
+                <h3 class="card_title">Moxxy UI: April 2024 progress report
+</h3>
+                <p class="card_text">
+                    April has been a busy month, partly due to a Windows Defender Trojan alert that gave me a good excuse to wipe my entire disk and switch to Linux. So this post will be short and without any major news. 
+
+                </p>
+            </div>
+        </div>
+    </a>
+</div><div class="column" style="--custom_width: 33%; gap: 1em">
+    <a href="blog/202403_moxxy_progress_report.html" class="card" style="text-decoration: none;">
+        <img src="blog/media/2024/20240407_moxxy_progress.png
+" alt="Moxxy UI: March 2024 progress report
+" title="Moxxy UI: March 2024 progress report
+" class="card_image"/>
+        <div class="box">
+            <div class="column" style="width: 100%;">
+                <h3 class="card_title">Moxxy UI: March 2024 progress report
+</h3>
+                <p class="card_text">
+                    Although I haven't communicated much about it, I've been working on a new interface for Moxxy since October 2023. I created this blog mainly to present my work on this open source project.
+
+                </p>
+            </div>
+        </div>
+    </a>
+</div>
+                </div>
+            </div>
+        </div>
+        <div class="spacer" style="--size: 2em;"></div>
+        <div class="box">
+            <div class="column" style="width: 100%;">
+                <h2 id="all">All posts</h2>
+                <hr><h3>2024</h3><p class="light">09/06&emsp;<a href="blog/202405_moxxy_progress_report.html">Moxxy UI: May 2024 progress report
+</a></p><p class="light">08/05&emsp;<a href="blog/202404_moxxy_progress_report.html">Moxxy UI: April 2024 progress report
+</a></p><p class="light">07/04&emsp;<a href="blog/202403_moxxy_progress_report.html">Moxxy UI: March 2024 progress report
+</a></p><p class="light">13/03&emsp;<a href="blog/hello_world.html">Hello world!
+</a></p>
+            </div>
+
+        </div>
+        
+        <div class="spacer" style="--size: 2em"></div>
+        <a href="#" class="btt"><img class="bttimg" src="media/icons/arrow_upward.png"/></a>
+    </main>
+
+    <footer>
+        <div id="footer_box">
+            <div class="footer_item">
+                <p>Copyright © 2025 Ailyaut</p>
+            </div>
+            <div class="footer_item">
+                <a target="_blank" href="https://www.websitecarbon.com/website/ailyaut-robotfumeur-fr-index-html/" style="text-decoration: none;">
+                    <p style="color: black; background-color: var(--accent); padding: 0.2em 0.6em 0.2em 0.6em ; border-radius: 1em;">
+                        0.02g of CO₂/view
+                    </p>
+                </a>
+            </div>
+            <div class="footer_item" style="justify-content: flex-end; gap: 1.75em;">
+                <a rel="me" href="https://mastodon.online/@ailyaut" target="_blank"><img src="media/icons/mastodon.png" class="icon" alt="Mastodon" title="Mastodon"/></a>
+                <a href="https://www.youtube.com/@ailyaut" target="_blank"><img src="media/icons/youtube.png" class="icon" alt="YouTube" title="YouTube"/></a>
+                <a href="https://ailyaut.bandcamp.com/" target="_blank"><img src="media/icons/bandcamp.png" class="icon" alt="Bandcamp" title="Bandcamp"/></a>
+                <a href="https://codeberg.org/ailyaut" target="_blank"><img src="media/icons/git.png" class="icon" alt="Git" title="Git"/></a>
+                <a href="rss.xml"><img src="media/icons/rss.png" class="icon" alt="RSS feed" title="RSS feed"/></a>
+            </div>
+        </div>
+    </footer>
+</body>
--- a/blog/202403_moxxy_progress_report.html
+++ b/blog/202403_moxxy_progress_report.html
@ -0,0 +1,97 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+	<meta charset="utf-8" />
+	<title>Moxxy UI: March 2024 progress report
+ – Ailyaut's blog</title>
+    <link rel="icon" type="image/png" href="../media/icons/favicon-16x16.png" sizes="16x16">
+	<link rel="stylesheet" href="../style.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta property="og:title" content="Moxxy UI: March 2024 progress report
+ – Ailyaut's blog" />
+    <meta property="og:type" content="blog" />
+    <meta property="og:url" content="https://ailyaut.robotfumeur.fr/" />
+    <meta property="og:image" content="blog/media/2024/20240407_moxxy_progress.png
+" />
+    <meta property="og:description" content="y aim was to create an XMPP client interface that's more modern and easier to use than the ones that currently exist, because I find it very hard to recommend XMPP to my friends and family as things stand. Maybe I'm the one who's particularly bad at explaining, but the mere mention of "server" scares 9 out of 10 people away.
+" />
+    <meta property="og:locale" content="en_US" />
+</head>
+<body>
+    <header>
+        <div id="header_box">
+            <div>
+                <a href="../index.html" id="header_title">Ailyaut's blog</a>
+            </div>
+            <nav id="header_nav">
+                <a href="../blog.html" class="nav_button_active">Blog</a>
+                <a href="../gallery.html" class="nav_button">Gallery</a>
+                <a href="../projects.html" class="nav_button">Projects</a>
+                <a href="../about.html" class="nav_button">About</a>
+            </nav>
+        </div>
+    </header>
+    <main>
+        <div class="box">
+            <div class="column" style="--custom_width: 60%;">
+                <h1>Moxxy UI: March 2024 progress report
+</h1><p class="light">07/04/2024 · 4 min</p><div class="spacer" style="--size: 1em"></div><p>Although I haven't communicated much about it, I've been working on a new interface for Moxxy since October 2023. I created this blog mainly to present my work on this open source project.</p>
+<p>My aim was to create an XMPP client interface that's more modern and easier to use than the ones that currently exist, because I find it very hard to recommend XMPP to my friends and family as things stand. Maybe I'm the one who's particularly bad at explaining, but the mere mention of "server" scares 9 out of 10 people away.</p>
+<p>I chose to contribute to Moxxy because PapaTutuWawa, its developer, suggested it to me, and because Moxxy is written in Flutter, which is a language that is particularly well-suited to the creation of cross-platform applications (and I think that a cross-platform application would help enormously with the spread of XMPP to the general public).</p>
+<p>So I started working on Inkscape in 2023, and came up with this.</p>
+<p><img style="width: 100%;" alt="2023 Moxxy UI in dark mode" title="2023 Moxxy UI in dark mode" src="media/2024/2024-04_moxxy_2023_dark.webp" /></p>
+<p><img style="width: 100%;" alt="2023 Moxxy UI in light mode" title="2023 Moxxy UI in light mode" src="media/2024/2024-04_moxxy_2023_light.webp" /></p>
+<p>Unfortunately, Inkscape wasn't really suited to the task, and I ended up spending more time making documents to explain the designs than creating new ones. On the advice of a more experienced UI designer, I decided to use Penpot. Well, this designer had recommended Figma, but it didn't make sense to work on an open source project with a proprietary tool.</p>
+<p>So here's the home screen I created using Penpot in January:</p>
+<p><img style="width: 14em; max-width: 60%; border-radius: 0.5em;" alt="Moxxy UI on Penpot, first try" title="Moxxy UI on Penpot, first try" src="media/2024/2024-04_moxxy_january.webp" /></p>
+<p>The result wasn't quite the same. It has to be said that I tried to correct a number of beginner's mistakes I'd made on Inkscape:</p>
+<ul>
+<li>Instead of using the Open Sans font, I switched to Roboto (the default font on Android)</li>
+<li>Instead of doing my designs in 1080x1920, I switched to 360x640, which is the standard format for mobile interface design.</li>
+</ul>
+<p>I've also changed the colour of the interface. Well, I haven't really changed it, I've just changed the theme, because the aim is for users to be able to choose their own theme with Material You!</p>
+<p>For my part, I switched to a light theme and green so as not to get too used to the dark theme and to check that the interface works well with several themes.</p>
+<p>In February 2024, I got a new job! I'm now a graphic designer, 3D artist and... UI designer! I took advantage of this new role to delve deeper into the Material Design documentation, which is integrated directly into Flutter (if I've understood correctly).</p>
+<p>That's when I realised that I'd made some new mistakes, particularly with the choice of colours. So I spent some time changing all my components and replacing them with the default Material Design components. Here's the result:</p>
+<p><img style="width: 100%;" alt="Moxxy UI in March" title="Moxxy UI in March" src="media/2024/2024-04_moxxy.webp" /></p>
+<p class="credit">Background image by David Revoy - CC-BY 4.0</p>
+<p>The interface now seems much cleaner and more rigorous.</p>
+<p>I'm just worried that following the guidelines to the letter will make the design 'personality-less'. But that's a concern I'll save for later.</p>
+<p>Now, the points I think need more work:</p>
+<ul>
+<li>The colours are generally very calm and soothing. That's fine, but I'd like to give the design a bit more energy so that it catches the eye and makes people who don't use it want to use it. In my dreams, I'd like people to look over a user's shoulder when they're using Moxxy and think "Wow, that's a stylish app, I want the same one" (I've got a few ideas for that but I'll keep it for later, let's do something functional first).</li>
+<li>The "chat" button doesn't stand out enough for my taste. But the theme colours are a bit limited and it's either that or a flashy green that clashes with the rest.</li>
+<li>Although David Revoy's illustration is beautiful, I think the background behind the bubbles in the conversation looks very ugly. I was trying to keep the application 'immersive' by taking up the whole screen, but this is quite the opposite. The wallpaper is completely trapped between two rectangles, and you feel trapped by extension. I haven't found a solution to this yet, as I can't make the header transparent or semi-transparent for legibility reasons.</li>
+</ul>
+<p>So that was my first progress report on the Moxxy interface! I plan (and hope) to do one every month, a bit like Thunderbird does with the K9-Mail transformation. It's both a good way of encouraging myself to work regularly and, I hope, drawing attention to this great project.</p>
+<p>If you have any remarks, suggestions, solutions or comments, I'd be delighted to hear from you by replying under the <a href="https://mastodon.online/@ailyaut/112234413401118081">Mastodon post</a>, or by sending them to me by email or XMPP!</p>
+<p>:^)</p>
+            </div>
+        </div>
+        <div class="spacer" style="--size: 2em"></div>
+        <a href="#" class="btt"><img class="bttimg" src="../media/icons/arrow_upward.png"/></a>
+    </main>
+    <footer>
+        <div id="footer_box">
+            <div class="footer_item">
+                <p>Copyright © 2025 Ailyaut</p>
+            </div>
+            <div class="footer_item">
+                <a target="_blank" href="https://www.websitecarbon.com/website/ailyaut-robotfumeur-fr-index-html/" style="text-decoration: none;">
+                    <p style="color: black; background-color: var(--accent); padding: 0.2em 0.6em 0.2em 0.6em ; border-radius: 1em;">
+                        0.02g of CO₂/view
+                    </p>
+                </a>
+            </div>
+            <div class="footer_item" style="justify-content: flex-end; gap: 1.75em;">
+                <a rel="me" href="https://mastodon.online/@ailyaut" target="_blank"><img src="../media/icons/mastodon.png" class="icon" alt="Mastodon" title="Mastodon"/></a>
+                <a href="https://www.youtube.com/@ailyaut" target="_blank"><img src="../media/icons/youtube.png" class="icon" alt="YouTube" title="YouTube"/></a>
+                <a href="https://ailyaut.bandcamp.com/" target="_blank"><img src="../media/icons/bandcamp.png" class="icon" alt="Bandcamp" title="Bandcamp"/></a>
+                <a href="https://codeberg.org/ailyaut" target="_blank"><img src="../media/icons/git.png" class="icon" alt="Git" title="Git"/></a>
+                <a href="../rss.xml"><img src="../media/icons/rss.png" class="icon" alt="RSS feed" title="RSS feed"/></a>
+            </div>
+        </div>
+    </footer>
+</body>
--- a/blog/202404_moxxy_progress_report.html
+++ b/blog/202404_moxxy_progress_report.html
@ -0,0 +1,88 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+	<meta charset="utf-8" />
+	<title>Moxxy UI: April 2024 progress report
+ – Ailyaut's blog</title>
+    <link rel="icon" type="image/png" href="../media/icons/favicon-16x16.png" sizes="16x16">
+	<link rel="stylesheet" href="../style.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta property="og:title" content="Moxxy UI: April 2024 progress report
+ – Ailyaut's blog" />
+    <meta property="og:type" content="blog" />
+    <meta property="og:url" content="https://ailyaut.robotfumeur.fr/" />
+    <meta property="og:image" content="blog/media/2024/20240407_moxxy_progress.png
+" />
+    <meta property="og:description" content="April has been a busy month, partly due to a Windows Defender Trojan alert that gave me a good excuse to wipe my entire disk and switch to Linux. So this post will be short and without any major news. 
+" />
+    <meta property="og:locale" content="en_US" />
+</head>
+<body>
+    <header>
+        <div id="header_box">
+            <div>
+                <a href="../index.html" id="header_title">Ailyaut's blog</a>
+            </div>
+            <nav id="header_nav">
+                <a href="../blog.html" class="nav_button_active">Blog</a>
+                <a href="../gallery.html" class="nav_button">Gallery</a>
+                <a href="../projects.html" class="nav_button">Projects</a>
+                <a href="../about.html" class="nav_button">About</a>
+            </nav>
+        </div>
+    </header>
+    <main>
+        <div class="box">
+            <div class="column" style="--custom_width: 60%;">
+                <h1>Moxxy UI: April 2024 progress report
+</h1><p class="light">08/05/2024 · 2 min</p><div class="spacer" style="--size: 1em"></div><p>April has been a busy month, partly due to a Windows Defender Trojan alert that gave me a good excuse to wipe my entire disk and switch to Linux. So this post will be short and without any major news.</p>
+<p>One of the things I wanted to work on was color. The interface seemed dull overall, and the "Chat" button not very visible.
+The best way to find out was to simulate real-life conditions!
+So I added profile photos (by David Revoy), notifications and icons.</p>
+<p><img style="width: 14em; max-width: 60%;" alt="Simulation of the Home screen in use" title="Simulation of the Home screen in use" src="media/2024/2024-05_moxxy_home_simulation.webp" /></p>
+<p class="credit">Illustrations by David Revoy - CC-BY 4.0</p>
+<p>All in all, it's not so dull!</p>
+<p>I also took the opportunity to add the image preview feature created by PapaTutuWawa.</p>
+<p><img style="width: 22em; max-width: 100%;" alt="Closeup on the image preview feature" title="Closeup on the image preview feature" src="media/2024/2024-05_moxxy_img_preview.webp" /></p>
+<p class="credit">Illustrations by David Revoy - CC-BY 4.0</p>
+<p>Regarding the "Chat" button, long story short, I struggled for hours because of a color palette incorrectly generated by the <a href="https://material-foundation.github.io/material-theme-builder/">Material Theme Builder</a>. The primaryContainer token that's recommended for this kind of button (a <a href="https://m3.material.io/components/floating-action-button/overview">Floating Action Button</a>) was flashy green, whereas when the palette was generated again with the same seed color, it was duller. I don't know if Google changed the code between the time I generated the first palette and today, but the difference is obvious.
+Material palette comparison</p>
+<p><img style="width: 30em; max-width: 100%;" alt="Material palette comparison" title="Material palette comparison" src="media/2024/2024-05_moxxy_palette_comparison.webp" /></p>
+<p class="light">Left: wrong palette / right: correct palette</p>
+<p class="credit">Illustrations by David Revoy - CC-BY 4.0</p>
+<p>Furthermore, I tried to enter the same seed color as my Android phone's theme in order to understand which tokens Google apps used in which situations, but the colors didn't match.</p>
+<p>In short, it's a big mess, but at least I've been able to correct my color palette for the future.</p>
+<p>So here's the current state of the main screen in light and dark.</p>
+<p><img style="width: 30em; max-width: 100%;" alt="Light and dark themes" title="Light and dark themes" src="media/2024/2024-05_moxxy_light_and_dark.webp" /></p>
+<p class="credit">Illustrations by David Revoy - CC-BY 4.0</p>
+<p>I hope to have more time next month to do more than just change colors. In the meantime, if you have any feedback or suggestions on the UI, don't hesitate to send them to me via XMPP, email or in reply under the <a href="https://mastodon.online/@ailyaut/112405298331386817">Mastodon post</a> !</p>
+<p>:^)</p>
+            </div>
+        </div>
+        <div class="spacer" style="--size: 2em"></div>
+        <a href="#" class="btt"><img class="bttimg" src="../media/icons/arrow_upward.png"/></a>
+    </main>
+    <footer>
+        <div id="footer_box">
+            <div class="footer_item">
+                <p>Copyright © 2025 Ailyaut</p>
+            </div>
+            <div class="footer_item">
+                <a target="_blank" href="https://www.websitecarbon.com/website/ailyaut-robotfumeur-fr-index-html/" style="text-decoration: none;">
+                    <p style="color: black; background-color: var(--accent); padding: 0.2em 0.6em 0.2em 0.6em ; border-radius: 1em;">
+                        0.02g of CO₂/view
+                    </p>
+                </a>
+            </div>
+            <div class="footer_item" style="justify-content: flex-end; gap: 1.75em;">
+                <a rel="me" href="https://mastodon.online/@ailyaut" target="_blank"><img src="../media/icons/mastodon.png" class="icon" alt="Mastodon" title="Mastodon"/></a>
+                <a href="https://www.youtube.com/@ailyaut" target="_blank"><img src="../media/icons/youtube.png" class="icon" alt="YouTube" title="YouTube"/></a>
+                <a href="https://ailyaut.bandcamp.com/" target="_blank"><img src="../media/icons/bandcamp.png" class="icon" alt="Bandcamp" title="Bandcamp"/></a>
+                <a href="https://codeberg.org/ailyaut" target="_blank"><img src="../media/icons/git.png" class="icon" alt="Git" title="Git"/></a>
+                <a href="../rss.xml"><img src="../media/icons/rss.png" class="icon" alt="RSS feed" title="RSS feed"/></a>
+            </div>
+        </div>
+    </footer>
+</body>
--- a/blog/202405_moxxy_progress_report.html
+++ b/blog/202405_moxxy_progress_report.html
@ -0,0 +1,99 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+	<meta charset="utf-8" />
+	<title>Moxxy UI: May 2024 progress report
+ – Ailyaut's blog</title>
+    <link rel="icon" type="image/png" href="../media/icons/favicon-16x16.png" sizes="16x16">
+	<link rel="stylesheet" href="../style.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta property="og:title" content="Moxxy UI: May 2024 progress report
+ – Ailyaut's blog" />
+    <meta property="og:type" content="blog" />
+    <meta property="og:url" content="https://ailyaut.robotfumeur.fr/" />
+    <meta property="og:image" content="blog/media/2024/20240407_moxxy_progress.png
+" />
+    <meta property="og:description" content="Let's start with a little announcement: from now on, I'll be publishing my .penpot file in the moxxy/design repository on Codeberg on a monthly basis, so that everyone can tinker with the interface to their heart's content! I should have done it from the start, but better late than never! 
+" />
+    <meta property="og:locale" content="en_US" />
+</head>
+<body>
+    <header>
+        <div id="header_box">
+            <div>
+                <a href="../index.html" id="header_title">Ailyaut's blog</a>
+            </div>
+            <nav id="header_nav">
+                <a href="../blog.html" class="nav_button_active">Blog</a>
+                <a href="../gallery.html" class="nav_button">Gallery</a>
+                <a href="../projects.html" class="nav_button">Projects</a>
+                <a href="../about.html" class="nav_button">About</a>
+            </nav>
+        </div>
+    </header>
+    <main>
+        <div class="box">
+            <div class="column" style="--custom_width: 60%;">
+                <h1>Moxxy UI: May 2024 progress report
+</h1><p class="light">09/06/2024 · 4 min</p><div class="spacer" style="--size: 1em"></div><p>Let's start with a little announcement: from now on, I'll be publishing my .penpot file in the <a href="https://codeberg.org/ailyaut/design/src/branch/master">moxxy/design repository</a> on Codeberg on a monthly basis, so that everyone can tinker with the interface to their heart's content! I should have done it from the start, but better late than never!</p>
+<p>The goals I had set myself in the preceding months were the following:</p>
+<ul>
+<li>make the colors more vibrant</li>
+<li>make the "Chat" button stand out more (Home screen)</li>
+<li>fix the feeling of "imprisonment" that is caused by having a background image in the chat screen</li>
+</ul>
+<p>The issue with the dull colors was resolved last month when I realised that the colour palette generated by the <a href="https://material-foundation.github.io/material-theme-builder/">Material Theme Builder</a> was wrong. So I corrected it and got back to colors that were brighter and easier to distinguish.</p>
+<p><img style="width: 30em; max-width: 100%;" alt="Before/after palette correction" title="Before/after palette correction" src="media/2024/2024-05_moxxy_palette_comparison.webp" /></p>
+<p class="light">before/after</p>
+<p class="credit">Illustrations by David Revoy - CC-BY 4.0</p>
+<p>This has also enabled the "Chat" button to stand out properly.</p>
+<p>I then tackled the chat screen. Here I found that the header and the system and navigation bars enclosed the background in a rigid frame, making it impossible to imagine that the image exists beyond the borders of this frame.
+Now, I admit that this is largely a matter of personal taste, but I attach a certain importance to the idea that it should be possible to imagine the interface beyond what the screen of our device lets us see. To put it simply, you could imagine an application as a house, and its various screens as rooms. The interface buttons are like doors, and the transition animations represent moving from one room to another. At the moment, the chat screen gives me the feeling of being in a windowless room, but with a pretty picture hanging on the wall. My aim is to turn this picture into a window.
+And to do that, I had to break the frame, i.e. the header and the system and navigation bars of Android.</p>
+<p>It wasn't possible to reduce the opacity of these bars or make them completely transparent for reasons of legibility. The solution I've found for the time being is a blur effect in the style of the css filter backdrop-filter: blur() which allows me to emphasise the existence of the background beyond the boundaries of the interface without hindering the reading of the information above it.</p>
+<p><img style="width: 30em; max-width: 100%;" alt="Before/after blur filter" title="Before/after blur filter" src="media/2024/2024-06_moxxy_bg_blur.webp" /></p>
+<p class="credit">Illustrations by David Revoy - CC-BY 4.0</p>
+<p class="light">I would have liked to add the blurred message bubbles, but it was already a lot of tinkering to get that effect on Penpot.</p>
+<p>For the science, I tried to apply the same effect without a wallpaper. For a moment I thought I'd switched to iOS, but the Material Design 3 colours really give the impression that we're on to something else, halfway between flat design and glassmorphism. I'm not entirely sure how well it fits in with the rest of the interface, but I'm not closing the door on the idea just yet.</p>
+<p><img style="width: 30em; max-width: 100%;" alt="Chat screen with blurred header" title="Chat screen with blurred header" src="media/2024/2024-06_moxxy_chat_blur.webp" /></p>
+<p>Finally, I worked on the various elements that can be found in chat screens, trying to get away from what other apps might do, particularly WhatsApp.</p>
+<p><img style="width: 14em; max-width: 60%;" alt="Chat screen with different types of message bubbles" title="Chat screen with different types of message bubbles" src="media/2024/2024-06_moxxy_chat_components.webp" /></p>
+<p class="credit">Illustrations by David Revoy - CC-BY 4.0</p>
+<p>Next time, I'd like to work on the following points:</p>
+<ul>
+<li>design of the text bubbles when you send a file and when you send your location</li>
+<li>design of the drop-down menus that appear when you use the various buttons on the chat screen</li>
+<li>design of the menu that appears when a chat bubble is long-pressed/li&gt;</li>
+<li>design of message bubbles with errors (message not encrypted, sending error, etc.)</li>
+</ul>
+<p>If you have any remarks, suggestions, solutions or comments, I'd be delighted to hear from you by replying under the <a href="https://mastodon.online/@ailyaut/112587618079138456">Mastodon post</a>, or by sending them to me by email or XMPP!</p>
+<p>:^)</p>
+            </div>
+        </div>
+        <div class="spacer" style="--size: 2em"></div>
+        <a href="#" class="btt"><img class="bttimg" src="../media/icons/arrow_upward.png"/></a>
+    </main>
+    <footer>
+        <div id="footer_box">
+            <div class="footer_item">
+                <p>Copyright © 2025 Ailyaut</p>
+            </div>
+            <div class="footer_item">
+                <a target="_blank" href="https://www.websitecarbon.com/website/ailyaut-robotfumeur-fr-index-html/" style="text-decoration: none;">
+                    <p style="color: black; background-color: var(--accent); padding: 0.2em 0.6em 0.2em 0.6em ; border-radius: 1em;">
+                        0.02g of CO₂/view
+                    </p>
+                </a>
+            </div>
+            <div class="footer_item" style="justify-content: flex-end; gap: 1.75em;">
+                <a rel="me" href="https://mastodon.online/@ailyaut" target="_blank"><img src="../media/icons/mastodon.png" class="icon" alt="Mastodon" title="Mastodon"/></a>
+                <a href="https://www.youtube.com/@ailyaut" target="_blank"><img src="../media/icons/youtube.png" class="icon" alt="YouTube" title="YouTube"/></a>
+                <a href="https://ailyaut.bandcamp.com/" target="_blank"><img src="../media/icons/bandcamp.png" class="icon" alt="Bandcamp" title="Bandcamp"/></a>
+                <a href="https://codeberg.org/ailyaut" target="_blank"><img src="../media/icons/git.png" class="icon" alt="Git" title="Git"/></a>
+                <a href="../rss.xml"><img src="../media/icons/rss.png" class="icon" alt="RSS feed" title="RSS feed"/></a>
+            </div>
+        </div>
+    </footer>
+</body>
--- a/blog/hello_world.html
+++ b/blog/hello_world.html
@ -0,0 +1,81 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+	<meta charset="utf-8" />
+	<title>Hello world!
+ – Ailyaut's blog</title>
+    <link rel="icon" type="image/png" href="../media/icons/favicon-16x16.png" sizes="16x16">
+	<link rel="stylesheet" href="../style.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta property="og:title" content="Hello world!
+ – Ailyaut's blog" />
+    <meta property="og:type" content="blog" />
+    <meta property="og:url" content="https://ailyaut.robotfumeur.fr/" />
+    <meta property="og:image" content="blog/media/2024/20240313_hello.png
+" />
+    <meta property="og:description" content="Welcome! I'm Ailyaut, and this is my blog! You can read more about who I am in the About section.
+" />
+    <meta property="og:locale" content="en_US" />
+</head>
+<body>
+    <header>
+        <div id="header_box">
+            <div>
+                <a href="../index.html" id="header_title">Ailyaut's blog</a>
+            </div>
+            <nav id="header_nav">
+                <a href="../blog.html" class="nav_button_active">Blog</a>
+                <a href="../gallery.html" class="nav_button">Gallery</a>
+                <a href="../projects.html" class="nav_button">Projects</a>
+                <a href="../about.html" class="nav_button">About</a>
+            </nav>
+        </div>
+    </header>
+    <main>
+        <div class="box">
+            <div class="column" style="--custom_width: 60%;">
+                <h1>Hello world!
+</h1><p class="light">13/03/2024 · 2 min</p><div class="spacer" style="--size: 1em"></div><p>Welcome!</p>
+<p>I'm Ailyaut, and this is my blog! You can read more about who I am in the <a href="../about.html">About</a> section.</p>
+<p>As an artist and a person who just creates things, be it music, design or software, I thought for a long time that the only way I could share my work was through social media.</p>
+<p>But I hated it, and ended up not sharing anything.</p>
+<p>A few years ago, I discovered the open source philosophy thanks to Blender.<br />
+I admired Blender because it was software created by a brilliant and generous community, and it far surpassed all the proprietary software that was the "industry standard" (I still wonder how anyone can use Autodesk Maya when it crashes every 15 minutes).<br />
+Soon after, I discovered Godot engine and started making a game. But wait, it was an online game so I needed to learn networking. So I installed Linux on an old laptop and had a small server in my living room. Soon all my friends hated me for forcing them to use Firefox (just kidding) (maybe).</p>
+<p>Having benefited so much from open source, I wanted to give something back and eventually started contributing within my abilities as a UI designer for the Moxxy XMPP client.</p>
+<p>Which brings me to the two reasons I started this blog:</p>
+<ol>
+<li>I needed a way to share my creations without relying on social media or proprietary platforms</li>
+<li>I wanted a space to show the work being done on Moxxy's UI, with the goal of making the process more "public" and getting feedback from potential users.</li>
+</ol>
+<p>Thus, this blog was born.</p>
+<p>:^) </p>
+            </div>
+        </div>
+        <div class="spacer" style="--size: 2em"></div>
+        <a href="#" class="btt"><img class="bttimg" src="../media/icons/arrow_upward.png"/></a>
+    </main>
+    <footer>
+        <div id="footer_box">
+            <div class="footer_item">
+                <p>Copyright © 2025 Ailyaut</p>
+            </div>
+            <div class="footer_item">
+                <a target="_blank" href="https://www.websitecarbon.com/website/ailyaut-robotfumeur-fr-index-html/" style="text-decoration: none;">
+                    <p style="color: black; background-color: var(--accent); padding: 0.2em 0.6em 0.2em 0.6em ; border-radius: 1em;">
+                        0.02g of CO₂/view
+                    </p>
+                </a>
+            </div>
+            <div class="footer_item" style="justify-content: flex-end; gap: 1.75em;">
+                <a rel="me" href="https://mastodon.online/@ailyaut" target="_blank"><img src="../media/icons/mastodon.png" class="icon" alt="Mastodon" title="Mastodon"/></a>
+                <a href="https://www.youtube.com/@ailyaut" target="_blank"><img src="../media/icons/youtube.png" class="icon" alt="YouTube" title="YouTube"/></a>
+                <a href="https://ailyaut.bandcamp.com/" target="_blank"><img src="../media/icons/bandcamp.png" class="icon" alt="Bandcamp" title="Bandcamp"/></a>
+                <a href="https://codeberg.org/ailyaut" target="_blank"><img src="../media/icons/git.png" class="icon" alt="Git" title="Git"/></a>
+                <a href="../rss.xml"><img src="../media/icons/rss.png" class="icon" alt="RSS feed" title="RSS feed"/></a>
+            </div>
+        </div>
+    </footer>
+</body>
--- a/blog/md/20240313+hello_world.md
+++ b/blog/md/20240313+hello_world.md
@ -0,0 +1,28 @@
+title = Hello world!
+timestamp = 1710363600
+preview = Welcome! I'm Ailyaut, and this is my blog! You can read more about who I am in the About section.
+thumb = blog/media/2024/20240313_hello.png
+++
+
+Welcome!
+
+I'm Ailyaut, and this is my blog! You can read more about who I am in the [About](../about.html) section.
+
+As an artist and a person who just creates things, be it music, design or software, I thought for a long time that the only way I could share my work was through social media.
+
+But I hated it, and ended up not sharing anything.
+
+A few years ago, I discovered the open source philosophy thanks to Blender.  
+I admired Blender because it was software created by a brilliant and generous community, and it far surpassed all the proprietary software that was the "industry standard" (I still wonder how anyone can use Autodesk Maya when it crashes every 15 minutes).  
+Soon after, I discovered Godot engine and started making a game. But wait, it was an online game so I needed to learn networking. So I installed Linux on an old laptop and had a small server in my living room. Soon all my friends hated me for forcing them to use Firefox (just kidding) (maybe).
+
+Having benefited so much from open source, I wanted to give something back and eventually started contributing within my abilities as a UI designer for the Moxxy XMPP client.
+
+Which brings me to the two reasons I started this blog:
+
+1. I needed a way to share my creations without relying on social media or proprietary platforms
+2. I wanted a space to show the work being done on Moxxy's UI, with the goal of making the process more "public" and getting feedback from potential users.
+
+Thus, this blog was born.
+
+:^) 
--- a/blog/md/20240407+202403_moxxy_progress_report.md
+++ b/blog/md/20240407+202403_moxxy_progress_report.md
@ -0,0 +1,58 @@
+title = Moxxy UI: March 2024 progress report
+timestamp = 1712520000
+preview = Although I haven't communicated much about it, I've been working on a new interface for Moxxy since October 2023. I created this blog mainly to present my work on this open source project.
+thumb = blog/media/2024/20240407_moxxy_progress.png
+++
+
+Although I haven't communicated much about it, I've been working on a new interface for Moxxy since October 2023. I created this blog mainly to present my work on this open source project.
+
+My aim was to create an XMPP client interface that's more modern and easier to use than the ones that currently exist, because I find it very hard to recommend XMPP to my friends and family as things stand. Maybe I'm the one who's particularly bad at explaining, but the mere mention of "server" scares 9 out of 10 people away.
+
+I chose to contribute to Moxxy because PapaTutuWawa, its developer, suggested it to me, and because Moxxy is written in Flutter, which is a language that is particularly well-suited to the creation of cross-platform applications (and I think that a cross-platform application would help enormously with the spread of XMPP to the general public).
+
+So I started working on Inkscape in 2023, and came up with this.
+
+![2024-04_moxxy_2023_dark.webp](../media/2024/2024-04_moxxy_2023_dark.webp)
+
+![2024-04_moxxy_2023_light.webp](../media/2024/2024-04_moxxy_2023_light.webp)
+
+Unfortunately, Inkscape wasn't really suited to the task, and I ended up spending more time making documents to explain the designs than creating new ones. On the advice of a more experienced UI designer, I decided to use Penpot. Well, this designer had recommended Figma, but it didn't make sense to work on an open source project with a proprietary tool.
+
+So here's the home screen I created using Penpot in January:
+
+![2024-04_moxxy_january.webp](../media/2024/2024-04_moxxy_january.webp)
+
+Moxxy UI on Penpot, first try
+
+The result wasn't quite the same. It has to be said that I tried to correct a number of beginner's mistakes I'd made on Inkscape:
+
+- Instead of using the Open Sans font, I switched to Roboto (the default font on Android)
+- Instead of doing my designs in 1080x1920, I switched to 360x640, which is the standard format for mobile interface design.
+
+I've also changed the colour of the interface. Well, I haven't really changed it, I've just changed the theme, because the aim is for users to be able to choose their own theme with Material You!
+
+For my part, I switched to a light theme and green so as not to get too used to the dark theme and to check that the interface works well with several themes.
+
+In February 2024, I got a new job! I'm now a graphic designer, 3D artist and... UI designer! I took advantage of this new role to delve deeper into the Material Design documentation, which is integrated directly into Flutter (if I've understood correctly).
+
+That's when I realised that I'd made some new mistakes, particularly with the choice of colours. So I spent some time changing all my components and replacing them with the default Material Design components. Here's the result:
+
+![2024-04_moxxy.webp](../media/2024/2024-04_moxxy.webp)
+
+Moxxy UI in March
+
+The interface now seems much cleaner and more rigorous.
+
+I'm just worried that following the guidelines to the letter will make the design 'personality-less'. But that's a concern I'll save for later.
+
+Now, the points I think need more work:
+
+- The colours are generally very calm and soothing. That's fine, but I'd like to give the design a bit more energy so that it catches the eye and makes people who don't use it want to use it. In my dreams, I'd like people to look over a user's shoulder when they're using Moxxy and think "Wow, that's a stylish app, I want the same one" (I've got a few ideas for that but I'll keep it for later, let's do something functional first).
+- The "chat" button doesn't stand out enough for my taste. But the theme colours are a bit limited and it's either that or a flashy green that clashes with the rest.
+- Although David Revoy's illustration is beautiful, I think the background behind the bubbles in the conversation looks very ugly. I was trying to keep the application 'immersive' by taking up the whole screen, but this is quite the opposite. The wallpaper is completely trapped between two rectangles, and you feel trapped by extension. I haven't found a solution to this yet, as I can't make the header transparent or semi-transparent for legibility reasons.
+
+So that was my first progress report on the Moxxy interface! I plan (and hope) to do one every month, a bit like Thunderbird does with the K9-Mail transformation. It's both a good way of encouraging myself to work regularly and, I hope, drawing attention to this great project.
+
+If you have any remarks, suggestions, solutions or comments, I'd be delighted to hear from you by replying under the [Mastodon post](https://mastodon.online/@ailyaut/112234413401118081), or by sending them to me by email or XMPP!
+
+:^)
--- a/blog/md/20240508+202404_moxxy_progress_report.md
+++ b/blog/md/20240508+202404_moxxy_progress_report.md
@ -0,0 +1,38 @@
+title = Moxxy UI: April 2024 progress report
+timestamp = 1715198400
+preview = April has been a busy month, partly due to a Windows Defender Trojan alert that gave me a good excuse to wipe my entire disk and switch to Linux. So this post will be short and without any major news. 
+thumb = blog/media/2024/20240407_moxxy_progress.png
+++
+
+April has been a busy month, partly due to a Windows Defender Trojan alert that gave me a good excuse to wipe my entire disk and switch to Linux. So this post will be short and without any major news.
+
+One of the things I wanted to work on was color. The interface seemed dull overall, and the "Chat" button not very visible.
+The best way to find out was to simulate real-life conditions!
+So I added profile photos (by David Revoy), notifications and icons.
+
+![](../media/2024/2024-05_moxxy_home_simulation.webp)
+
+All in all, it's not so dull!
+
+I also took the opportunity to add the image preview feature created by PapaTutuWawa.
+
+![](../media/2024/2024-05_moxxy_img_preview.webp)
+
+Regarding the "Chat" button, long story short, I struggled for hours because of a color palette incorrectly generated by the [Material Theme Builder](https://material-foundation.github.io/material-theme-builder/). The primaryContainer token that's recommended for this kind of button (a [Floating Action Button](https://m3.material.io/components/floating-action-button/overview)) was flashy green, whereas when the palette was generated again with the same seed color, it was duller. I don't know if Google changed the code between the time I generated the first palette and today, but the difference is obvious.
+Material palette comparison
+
+![](../media/2024/2024-05_moxxy_palette_comparison.webp)
+
+Left: wrong palette / right: correct palette
+
+Furthermore, I tried to enter the same seed color as my Android phone's theme in order to understand which tokens Google apps used in which situations, but the colors didn't match.
+
+In short, it's a big mess, but at least I've been able to correct my color palette for the future.
+
+So here's the current state of the main screen in light and dark.
+
+![](../media/2024/2024-05_moxxy_light_and_dark.webp)
+
+I hope to have more time next month to do more than just change colors. In the meantime, if you have any feedback or suggestions on the UI, don't hesitate to send them to me via XMPP, email or in reply under the [Mastodon post](https://mastodon.online/@ailyaut/112405298331386817) !
+
+:^)
--- a/blog/md/20240609+202405_moxxy_progress_report.md
+++ b/blog/md/20240609+202405_moxxy_progress_report.md
@ -0,0 +1,50 @@
+title = Moxxy UI: May 2024 progress report
+timestamp = 1717963200
+preview = Let's start with a little announcement: from now on, I'll be publishing my .penpot file in the moxxy/design repository on Codeberg on a monthly basis, so that everyone can tinker with the interface to their heart's content! I should have done it from the start, but better late than never! 
+thumb = blog/media/2024/20240407_moxxy_progress.png
+++
+
+Let's start with a little announcement: from now on, I'll be publishing my .penpot file in the [moxxy/design repository](https://codeberg.org/ailyaut/design/src/branch/master) on Codeberg on a monthly basis, so that everyone can tinker with the interface to their heart's content! I should have done it from the start, but better late than never!
+
+The goals I had set myself in the preceding months were the following:
+
+- make the colors more vibrant
+- make the "Chat" button stand out more (Home screen)
+- fix the feeling of "imprisonment" that is caused by having a background image in the chat screen
+
+The issue with the dull colors was resolved last month when I realised that the colour palette generated by the [Material Theme Builder](https://material-foundation.github.io/material-theme-builder/) was wrong. So I corrected it and got back to colors that were brighter and easier to distinguish.
+
+![](../media/2024/2024-05_moxxy_palette_comparison.webp)
+
+before/after
+
+This has also enabled the "Chat" button to stand out properly.
+
+I then tackled the chat screen. Here I found that the header and the system and navigation bars enclosed the background in a rigid frame, making it impossible to imagine that the image exists beyond the borders of this frame.
+Now, I admit that this is largely a matter of personal taste, but I attach a certain importance to the idea that it should be possible to imagine the interface beyond what the screen of our device lets us see. To put it simply, you could imagine an application as a house, and its various screens as rooms. The interface buttons are like doors, and the transition animations represent moving from one room to another. At the moment, the chat screen gives me the feeling of being in a windowless room, but with a pretty picture hanging on the wall. My aim is to turn this picture into a window.
+And to do that, I had to break the frame, i.e. the header and the system and navigation bars of Android.
+
+It wasn't possible to reduce the opacity of these bars or make them completely transparent for reasons of legibility. The solution I've found for the time being is a blur effect in the style of the css filter backdrop-filter: blur() which allows me to emphasise the existence of the background beyond the boundaries of the interface without hindering the reading of the information above it.
+
+![](../media/2024/2024-06_moxxy_bg_blur.webp)
+
+I would have liked to add the blurred message bubbles, but it was already a lot of tinkering to get that effect on Penpot.
+
+For the science, I tried to apply the same effect without a wallpaper. For a moment I thought I'd switched to iOS, but the Material Design 3 colours really give the impression that we're on to something else, halfway between flat design and glassmorphism. I'm not entirely sure how well it fits in with the rest of the interface, but I'm not closing the door on the idea just yet.
+
+![](../media/2024/2024-06_moxxy_chat_blur.webp)
+
+Finally, I worked on the various elements that can be found in chat screens, trying to get away from what other apps might do, particularly WhatsApp.
+
+![](../media/2024/2024-06_moxxy_chat_components.webp)
+
+Next time, I'd like to work on the following points:
+
+- design of the text bubbles when you send a file and when you send your location
+- design of the drop-down menus that appear when you use the various buttons on the chat screen
+- design of the menu that appears when a chat bubble is long-pressed/li>
+- design of message bubbles with errors (message not encrypted, sending error, etc.)
+
+If you have any remarks, suggestions, solutions or comments, I'd be delighted to hear from you by replying under the [Mastodon post](https://mastodon.online/@ailyaut/112587618079138456), or by sending them to me by email or XMPP!
+
+:^)
--- a/blog/media/2024/2024-04_moxxy.webp
+++ b/blog/media/2024/2024-04_moxxy.webp
--- a/blog/media/2024/2024-04_moxxy_2023_dark.webp
+++ b/blog/media/2024/2024-04_moxxy_2023_dark.webp
--- a/blog/media/2024/2024-04_moxxy_2023_light.webp
+++ b/blog/media/2024/2024-04_moxxy_2023_light.webp
--- a/blog/media/2024/2024-04_moxxy_january.webp
+++ b/blog/media/2024/2024-04_moxxy_january.webp
--- a/blog/media/2024/2024-05_moxxy_home_simulation.webp
+++ b/blog/media/2024/2024-05_moxxy_home_simulation.webp
--- a/blog/media/2024/2024-05_moxxy_img_preview.webp
+++ b/blog/media/2024/2024-05_moxxy_img_preview.webp
--- a/blog/media/2024/2024-05_moxxy_light_and_dark.webp
+++ b/blog/media/2024/2024-05_moxxy_light_and_dark.webp
--- a/blog/media/2024/2024-05_moxxy_palette_comparison.webp
+++ b/blog/media/2024/2024-05_moxxy_palette_comparison.webp
--- a/blog/media/2024/2024-06_moxxy_bg_blur.webp
+++ b/blog/media/2024/2024-06_moxxy_bg_blur.webp
--- a/blog/media/2024/2024-06_moxxy_chat_blur.webp
+++ b/blog/media/2024/2024-06_moxxy_chat_blur.webp
--- a/blog/media/2024/2024-06_moxxy_chat_components.webp
+++ b/blog/media/2024/2024-06_moxxy_chat_components.webp
--- a/blog/media/2024/2024-06_moxxy_palette_comparison.webp
+++ b/blog/media/2024/2024-06_moxxy_palette_comparison.webp
--- a/blog/media/2024/20240313_hello.png
+++ b/blog/media/2024/20240313_hello.png
--- a/blog/media/2024/20240407_moxxy_progress.png
+++ b/blog/media/2024/20240407_moxxy_progress.png
--- a/gallery.html
+++ b/gallery.html
@ -0,0 +1,112 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+	<meta charset="utf-8" />
+	<title>Gallery – Ailyaut's blog</title>
+    <link rel="icon" type="image/png" href="media/icons/favicon-16x16.png" sizes="16x16">
+	<link rel="stylesheet" href="style.css" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <meta property="og:title" content="Gallery – Ailyaut's blog" />
+    <meta property="og:type" content="blog" />
+    <meta property="og:url" content="https://ailyaut.com/" />
+    <meta property="og:image" content="https://ailyaut.com/media/preview.png" />
+    <meta property="og:description" content="Hi! I'm Ailyaut, a 24-year-old everything-designer with a particular interest in open source and card games." />
+    <meta property="og:locale" content="en_US" />
+</head>
+
+<body>
+    <header>
+        <div id="header_box">
+            <div>
+                <a href="index.html" id="header_title">Ailyaut's blog</a>
+            </div>
+            <nav id="header_nav">
+                <a href="blog.html" class="nav_button">Blog</a>
+                <a href="gallery.html" class="nav_button_active">Gallery</a>
+                <a href="projects.html" class="nav_button">Projects</a>
+                <a href="about.html" class="nav_button">About</a>
+            </nav>
+        </div>
+    </header>
+
+    <main>
+        <div class="box">
+            <div class="column" style="width: 100%;">
+                <h1>Gallery</h1>
+                <p class="light">This page is still under construction.</p>
+            </div>
+        </div>
+        <div class="spacer" style="--size: 1em;"></div>
+        <div class="box">
+            <div class="row" style="gap: 0.75em;">
+                <div class="button_active">3D</div>
+                <div class="button">Illustration</div>
+                <div class="button">Graphic design</div>
+                <div class="button">UI & webdesign</div>
+                <div class="button">Animation</div>
+            </div>
+        </div>
+        <div class="spacer" style="--size: 2em;"></div>
+        <div class="box">
+            <div class="column" style="width: 100%;">
+                <div class="row" style="gap: 1em;">
+                    <div class="column" style="--custom_width: 70.5%">
+                        <a target="_blank" href="gallery/3d/spaceship.png"><img class="gallery" src="gallery/3d/thumb/spaceship.png" title="Flying through the Abandoned Spaceship" /></a>
+                    </div>
+                    <div class="column" style="--custom_width: 30%">
+                        <a target="_blank" href="gallery/3d/tekkonkinkreet.jpg"><img class="gallery" src="gallery/3d/thumb/tekkonkinkreet.png" title="Tekkonkinkreet building with painted texture" /></a>
+                    </div>
+                </div>
+                <div class="row" style="gap: 1em; margin-top: 0.75em;">
+                    <div class="column" style="--custom_width: 30%">
+                        <a target="_blank" href="gallery/3d/hewa.png"><img class="gallery" src="gallery/3d/thumb/hewa.png" title="Vase in the style of @hewa" /></a>
+                    </div>
+                    <div class="column" style="--custom_width: 70.5%">
+                        <a target="_blank" href="gallery/3d/electronic_desert.png"><img class="gallery" src="gallery/3d/thumb/electronic_desert.png" title="Electronic desert" /></a>
+                    </div>
+                </div>
+                <div class="row" style="gap: 1em; margin-top: 0.75em;">
+                    <a target="_blank" href="gallery/3d/mars_attacks_01.png"><img class="gallery" src="gallery/3d/thumb/mars_attacks_01.png" title="The set of Mars Attacks n°1" /></a>
+                    <a target="_blank" href="gallery/3d/mars_attacks_02.png"><img class="gallery" src="gallery/3d/thumb/mars_attacks_02.png" title="The set of Mars Attacks n°2" /></a>
+                </div>
+                <div class="row" style="gap: 1em; margin-top: 0.75em;">
+                    <div class="column" style="--custom_width: 36%">
+                        <a target="_blank" href="gallery/3d/shrinkwrap.png"><img class="gallery" src="gallery/3d/thumb/shrinkwrap.png" title="A tea cup kart wrapped in plastic" /></a>
+                    </div>
+                    <div class="column" style="--custom_width: 64%">
+                        <a target="_blank" href="gallery/3d/nebula.png"><img class="gallery" src="gallery/3d/thumb/nebula.png" title="Procedural nebula" /></a>
+                    </div>
+                </div>
+                
+            </div>
+        </div>
+        <div class="spacer" style="--size: 2em"></div>
+        <a href="#" class="btt"><img class="bttimg" src="media/icons/arrow_upward.png"/></a>
+    </main>
+
+    <footer>
+        <div id="footer_box">
+            <div class="footer_item">
+                <p>Copyright © 2025 Ailyaut</p>
+            </div>
+            <div class="footer_item">
+                <a target="_blank" href="https://www.websitecarbon.com/website/ailyaut-robotfumeur-fr-index-html/" style="text-decoration: none;">
+                    <p style="color: black; background-color: var(--accent); padding: 0.2em 0.6em 0.2em 0.6em ; border-radius: 1em;">
+                        0.02g of CO₂/view
+                    </p>
+                </a>
+            </div>
+            <div class="footer_item" style="justify-content: flex-end; gap: 1.75em;">
+                <a rel="me" href="https://mastodon.online/@ailyaut" target="_blank"><img src="media/icons/mastodon.png" class="icon" alt="Mastodon" title="Mastodon"/></a>
+                <a href="https://www.youtube.com/@ailyaut" target="_blank"><img src="media/icons/youtube.png" class="icon" alt="YouTube" title="YouTube"/></a>
+                <a href="https://ailyaut.bandcamp.com/" target="_blank"><img src="media/icons/bandcamp.png" class="icon" alt="Bandcamp" title="Bandcamp"/></a>
+                <a href="https://codeberg.org/ailyaut" target="_blank"><img src="media/icons/git.png" class="icon" alt="Git" title="Git"/></a>
+                <a href="rss.xml"><img src="media/icons/rss.png" class="icon" alt="RSS feed" title="RSS feed"/></a>
+            </div>
+        </div>
+    </footer>
+</body>
--- a/gallery/3d/electronic_desert.png
+++ b/gallery/3d/electronic_desert.png
--- a/gallery/3d/fireball.png
+++ b/gallery/3d/fireball.png
--- a/gallery/3d/hewa.png
+++ b/gallery/3d/hewa.png
--- a/gallery/3d/institut_du_monde_arabe.png
+++ b/gallery/3d/institut_du_monde_arabe.png
--- a/gallery/3d/mars_attacks_01.png
+++ b/gallery/3d/mars_attacks_01.png
--- a/gallery/3d/mars_attacks_02.png
+++ b/gallery/3d/mars_attacks_02.png
--- a/gallery/3d/nebula.png
+++ b/gallery/3d/nebula.png
--- a/gallery/3d/shrinkwrap.png
+++ b/gallery/3d/shrinkwrap.png
--- a/gallery/3d/spaceship.png
+++ b/gallery/3d/spaceship.png
--- a/gallery/3d/tekkonkinkreet.jpg
+++ b/gallery/3d/tekkonkinkreet.jpg
--- a/gallery/3d/thumb/electronic_desert.png
+++ b/gallery/3d/thumb/electronic_desert.png
--- a/gallery/3d/thumb/fireball.png
+++ b/gallery/3d/thumb/fireball.png
--- a/gallery/3d/thumb/hewa.png
+++ b/gallery/3d/thumb/hewa.png
--- a/gallery/3d/thumb/institut_du_monde_arabe.png
+++ b/gallery/3d/thumb/institut_du_monde_arabe.png
--- a/gallery/3d/thumb/mars_attacks_01.png
+++ b/gallery/3d/thumb/mars_attacks_01.png
--- a/gallery/3d/thumb/mars_attacks_02.png
+++ b/gallery/3d/thumb/mars_attacks_02.png
--- a/gallery/3d/thumb/nebula.png
+++ b/gallery/3d/thumb/nebula.png
--- a/gallery/3d/thumb/shrinkwrap.png
+++ b/gallery/3d/thumb/shrinkwrap.png
--- a/gallery/3d/thumb/spaceship.png
+++ b/gallery/3d/thumb/spaceship.png
--- a/gallery/3d/thumb/tekkonkinkreet.png
+++ b/gallery/3d/thumb/tekkonkinkreet.png
--- a/index.html
+++ b/index.html
@ -0,0 +1,179 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+	<meta charset="utf-8" />
+	<title>Ailyaut's blog</title>
+    <link rel="icon" type="image/png" href="media/icons/favicon-16x16.png" sizes="16x16">
+	<link rel="stylesheet" href="style.css" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <meta property="og:title" content="Ailyaut's blog" />
+    <meta property="og:type" content="blog" />
+    <meta property="og:url" content="https://ailyaut.com/" />
+    <meta property="og:image" content="https://ailyaut.com/media/preview.png" />
+    <meta property="og:description" content="Hi! I'm Ailyaut, a 24-year-old everything-designer with a particular interest in open source and card games." />
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:locale:alternate" content="fr_FR" />
+</head>
+
+<body>
+    <header>
+        <div id="header_box">
+            <div>
+                <a href="index.html" id="header_title">Ailyaut's blog</a>
+            </div>
+            <nav id="header_nav">
+                <a href="blog.html" class="nav_button">Blog</a>
+                <a href="gallery.html" class="nav_button">Gallery</a>
+                <a href="projects.html" class="nav_button">Projects</a>
+                <a href="about.html" class="nav_button">About</a>
+            </nav>
+        </div>
+    </header>
+
+    <main>
+        <!-- intro -->
+        <div class="box">
+            <div class="column" style="--custom_width:25%">
+                <div class="align_vertical">
+                    <div class="align_horizontal">
+                        <img src="media/ailyaut.png" alt="Ailyaut" title="Ailyaut" id="portrait"/>
+                    </div>
+                </div>
+            </div>
+            <div class="spacer" style="--size: 2em"></div>
+            <div class="column" style="--custom_width:75%">
+                <h1>Heyo!</h1>
+                <p>I'm Ailyaut, a 24-year-old everything designer with a particular interest in open source and card games.<br>
+                    I have studied 3D animation and now work as a UI & product designer. I code sometimes.
+                </p>
+                <p class="light" style="margin-bottom: 0;">
+                    Je m'appelle Ailyaut, je suis un designer touche-à-tout de 24 ans qui s'intéresse particulièrement à l'open source et aux jeux de carte.
+                    J'ai étudié l'animation 3D et je travaille actuellement comme designer UI & produit. Je code même, parfois.
+                </p>
+            </div>
+        </div>
+        
+        <!-- Featured project -->
+        <div class="spacer" style="--size: 6em"></div>
+        <div class="box">
+            <div class="column" style="width: 100%;">
+                <div class="row align_vertical" style="justify-content: space-between; height: min-content;">
+                    <div class="row align_vertical" style="gap: 0.75em;">
+                        <h2 style="margin-bottom: 0; margin-top: 0;">Featured project</h2>
+                        <img class="icon" src="media/icons/verified.png">
+                    </div>
+                    <p style="min-width: max-content; position: relative; top: 0.75em;"><a href="projects.html" class="light">All projects ></a></p>
+                </div>
+                <div class="spacer" style="--size: 1em"></div>
+                <div class="row" style="background-color: var(--surface); border-radius: 2em; padding: 1.25em; gap: 2em; border: 1px solid var(--outline);">
+                    <div class="column" style="max-width: 400px; width: 100%;">
+                        <img src="projects/gang/thumb.png" style="border-radius: 1.5em;" title="Gang" alt="A red chinese dragon drawn in a manga style";/>
+                    </div>
+                    <div class="column">
+                        <h2 style="margin-top: 0;">Gang</h2>
+                        <p>A complete redesign of the famous card game "Gang of Four" in my own style, with a focus on being clean and accessible to colorblind people.
+                            The whole game was made using only open source software and printed by a small company in Alsace (France). The PDF files are available for free printing.</p>
+                        <p><a href="projects/gang/index.html">Learn more ></a></p>
+                    </div>
+                </div>
+            </div>  
+        </div>
+        
+        <!-- Blog -->
+        <div class="spacer" style="--size: 4em"></div>
+        <div class="box">
+            <div class="column" style="width: 100%;">
+                <div class="row align_vertical" style="justify-content: space-between; height: min-content;">
+                    <div class="row align_vertical" style="gap: 0.75em;">
+                        <h2 style="margin-bottom: 0; margin-top: 0;">Blog</h2>
+                        <a href="rss.xml" style="position: relative; top: 0.2em;"><img class="icon" src="media/icons/rss.png"></a>
+                    </div>
+                    <p style="min-width: max-content; position: relative; top: 0.75em;"><a href="blog.html" class="light">All posts ></a></p>
+                </div>
+                <div class="spacer" style="--size: 1em"></div>
+                <div class="row" style="gap: 2em">
+                    <!-- blog -->
+                    <div class="column" style="--custom_width: 33%; gap: 1em">
+    <a href="blog/202405_moxxy_progress_report.html" class="card" style="text-decoration: none;">
+        <img src="blog/media/2024/20240407_moxxy_progress.png
+" alt="Moxxy UI: May 2024 progress report
+" title="Moxxy UI: May 2024 progress report
+" class="card_image"/>
+        <div class="box">
+            <div class="column" style="width: 100%;">
+                <h3 class="card_title">Moxxy UI: May 2024 progress report
+</h3>
+                <p class="card_text">
+                    Let's start with a little announcement: from now on, I'll be publishing my .penpot file in the moxxy/design repository on Codeberg on a monthly basis, so that everyone can tinker with the interface to their heart's content! I should have done it from the start, but better late than never! 
+
+                </p>
+            </div>
+        </div>
+    </a>
+</div><div class="column" style="--custom_width: 33%; gap: 1em">
+    <a href="blog/202404_moxxy_progress_report.html" class="card" style="text-decoration: none;">
+        <img src="blog/media/2024/20240407_moxxy_progress.png
+" alt="Moxxy UI: April 2024 progress report
+" title="Moxxy UI: April 2024 progress report
+" class="card_image"/>
+        <div class="box">
+            <div class="column" style="width: 100%;">
+                <h3 class="card_title">Moxxy UI: April 2024 progress report
+</h3>
+                <p class="card_text">
+                    April has been a busy month, partly due to a Windows Defender Trojan alert that gave me a good excuse to wipe my entire disk and switch to Linux. So this post will be short and without any major news. 
+
+                </p>
+            </div>
+        </div>
+    </a>
+</div><div class="column" style="--custom_width: 33%; gap: 1em">
+    <a href="blog/202403_moxxy_progress_report.html" class="card" style="text-decoration: none;">
+        <img src="blog/media/2024/20240407_moxxy_progress.png
+" alt="Moxxy UI: March 2024 progress report
+" title="Moxxy UI: March 2024 progress report
+" class="card_image"/>
+        <div class="box">
+            <div class="column" style="width: 100%;">
+                <h3 class="card_title">Moxxy UI: March 2024 progress report
+</h3>
+                <p class="card_text">
+                    Although I haven't communicated much about it, I've been working on a new interface for Moxxy since October 2023. I created this blog mainly to present my work on this open source project.
+
+                </p>
+            </div>
+        </div>
+    </a>
+</div>
+                </div>
+            </div>
+        </div>
+      <div class="spacer" style="--size: 4em"></div>
+    </main>
+
+    <footer>
+        <div id="footer_box">
+            <div class="footer_item">
+                <p>Copyright © 2025 Ailyaut</p>
+            </div>
+            <div class="footer_item">
+                <a target="_blank" href="https://www.websitecarbon.com/website/ailyaut-robotfumeur-fr-index-html/" style="text-decoration: none;">
+                    <p style="color: black; background-color: var(--accent); padding: 0.2em 0.6em 0.2em 0.6em ; border-radius: 1em;">
+                        0.02g of CO₂/view
+                    </p>
+                </a>
+            </div>
+            <div class="footer_item" style="justify-content: flex-end; gap: 1.75em;">
+                <a rel="me" href="https://mastodon.online/@ailyaut" target="_blank"><img src="media/icons/mastodon.png" class="icon" alt="Mastodon" title="Mastodon"/></a>
+                <a href="https://www.youtube.com/@ailyaut" target="_blank"><img src="media/icons/youtube.png" class="icon" alt="YouTube" title="YouTube"/></a>
+                <a href="https://ailyaut.bandcamp.com/" target="_blank"><img src="media/icons/bandcamp.png" class="icon" alt="Bandcamp" title="Bandcamp"/></a>
+                <a href="https://codeberg.org/ailyaut" target="_blank"><img src="media/icons/git.png" class="icon" alt="Git" title="Git"/></a>
+                <a href="rss.xml"><img src="media/icons/rss.png" class="icon" alt="RSS feed" title="RSS feed"/></a>
+            </div>
+        </div>
+    </footer>
+</body>
--- a/media/ailyaut.png
+++ b/media/ailyaut.png
--- a/media/fonts/bricolagegrotesque.woff2
+++ b/media/fonts/bricolagegrotesque.woff2
--- a/media/icons/arrow_upward.png
+++ b/media/icons/arrow_upward.png
--- a/media/icons/bandcamp.png
+++ b/media/icons/bandcamp.png
--- a/media/icons/download.svg
+++ b/media/icons/download.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"/></svg>
--- a/media/icons/favicon-16x16.png
+++ b/media/icons/favicon-16x16.png
--- a/media/icons/favicon-32x32.png
+++ b/media/icons/favicon-32x32.png
--- a/media/icons/git.png
+++ b/media/icons/git.png
--- a/media/icons/mastodon.png
+++ b/media/icons/mastodon.png
--- a/media/icons/rss.png
+++ b/media/icons/rss.png
--- a/media/icons/verified.png
+++ b/media/icons/verified.png
--- a/media/icons/youtube.png
+++ b/media/icons/youtube.png
--- a/media/preview.png
+++ b/media/preview.png
--- a/media/preview.svg
+++ b/media/preview.svg
@ -0,0 +1,86 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="211.66667mm"
+   height="119.0625mm"
+   viewBox="0 0 211.66667 119.0625"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+   sodipodi:docname="preview_feb.svg"
+   inkscape:export-filename="preview_feb.png"
+   inkscape:export-xdpi="48"
+   inkscape:export-ydpi="48"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showguides="false"
+     inkscape:zoom="0.70710678"
+     inkscape:cx="427.0925"
+     inkscape:cy="127.98633"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" /><defs
+     id="defs1"><mask
+       maskUnits="userSpaceOnUse"
+       id="mask1"><circle
+         style="fill:#ffffff;fill-opacity:1;stroke-width:0.649999;stroke-linecap:round;paint-order:stroke markers fill"
+         id="circle1"
+         cx="31.978594"
+         cy="50.47752"
+         r="7.9375" /></mask></defs><g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-98.876572,-39.205482)"><rect
+       style="fill:#ffc833;fill-opacity:1;stroke-width:0.65;stroke-linecap:round;paint-order:stroke markers fill"
+       id="rect3"
+       width="211.66667"
+       height="119.0625"
+       x="98.876572"
+       y="39.205482" /><rect
+       style="fill:#ffc833;fill-opacity:1;stroke-width:0.65;stroke-linecap:round;paint-order:stroke markers fill"
+       id="rect1-0"
+       width="211.66667"
+       height="119.06251"
+       x="98.876579"
+       y="39.205482" /><text
+       xml:space="preserve"
+       style="font-size:23.9889px;line-height:0.8;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono';text-align:end;letter-spacing:0px;writing-mode:lr-tb;direction:ltr;text-anchor:end;fill:#000000;fill-opacity:1;stroke-width:0.65;stroke-linecap:round;paint-order:stroke markers fill"
+       x="111.14478"
+       y="69.75322"
+       id="text1-3"><tspan
+         sodipodi:role="line"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:23.9889px;font-family:'Bricolage Grotesque';-inkscape-font-specification:'Bricolage Grotesque Bold';text-align:start;letter-spacing:0px;text-anchor:start;fill:#000000;fill-opacity:1;stroke-width:0.65"
+         x="111.14478"
+         y="69.75322"
+         id="tspan2-06">Ailyaut's </tspan><tspan
+         sodipodi:role="line"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:23.9889px;font-family:'Bricolage Grotesque';-inkscape-font-specification:'Bricolage Grotesque Bold';text-align:start;letter-spacing:0px;text-anchor:start;fill:#000000;fill-opacity:1;stroke-width:0.65"
+         x="111.14478"
+         y="90.297325"
+         id="tspan3">blog</tspan></text><image
+       width="105.83334"
+       height="169.87799"
+       preserveAspectRatio="none"
+       xlink:href="../../../Game/spell/art/mars_hq_export.png"
+       id="image1-19"
+       x="204.7099"
+       y="14.863815"
+       style="stroke-width:3.75668" /></g></svg>
--- a/projects.html
+++ b/projects.html
@ -0,0 +1,355 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+	<meta charset="utf-8" />
+	<title>Projects – Ailyaut's blog</title>
+    <link rel="icon" type="image/png" href="media/icons/favicon-16x16.png" sizes="16x16">
+	<link rel="stylesheet" href="style.css" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <meta property="og:title" content="Projects – Ailyaut's blog" />
+    <meta property="og:type" content="blog" />
+    <meta property="og:url" content="https://ailyaut.com/" />
+    <meta property="og:image" content="https://ailyaut.com/media/preview.png" />
+    <meta property="og:description" content="Hi! I'm Ailyaut, a 24-year-old everything-designer with a particular interest in open source and card games." />
+    <meta property="og:locale" content="en_US" />
+</head>
+
+<body>
+    <header>
+        <div id="header_box">
+            <div>
+                <a href="index.html" id="header_title">Ailyaut's blog</a>
+            </div>
+            <nav id="header_nav">
+                <a href="blog.html" class="nav_button">Blog</a>
+                <a href="gallery.html" class="nav_button">Gallery</a>
+                <a href="projects.html" class="nav_button_active">Projects</a>
+                <a href="about.html" class="nav_button">About</a>
+            </nav>
+        </div>
+    </header>
+
+    <main>
+        <div class="box">
+            <h1>Projects</h1>
+        </div>
+        <!-- Tags -->
+        <div class="spacer" style="--size: 1em;"></div>
+        <div class="box">
+            <div class="row" style="gap: 0.75em;">
+                <a href="#animation" class="button">Animation</a>
+                <a href="#ui" class="button">UI & webdesign</a>
+                <a href="#games" class="button">Games</a>
+                <a href="#apps" class="button">Apps & software</a>
+                <a href="#music" class="button">Music</a>
+            </div>
+        </div>
+
+        <!-- Animation -->
+        <div class="box">
+            <div class="column" style="width: 100%;">
+                <div class="spacer" style="--size: 2em;"></div>
+                <h2 id="animation">Animation</h2>
+                <div class="row" style="gap: 2em">
+                    <!-- <div class="column" style="--custom_width: 33%; gap: 1em">
+                        <a href="projects/patatotapopata/index.html" class="card" style="text-decoration: none;">
+                            <img src="projects/patatotapopata/thumb_makingof.png" alt="The Making Of Patatotapopata" title="The Making Of Patatotapopata" class="card_image"/>
+                            <div class="box">
+                                <div class="column" style="width: 100%;">
+                                    <h3 class="card_title" style="-webkit-line-clamp: 1; line-clamp: 1;">The Making Of Patatotapo pata</h3>
+                                    <p class="card_text">
+                                        All the steps of the making of Patatotapopata from the storyboard to the final cut. 
+                                    </p>
+                                </div>
+                            </div>
+                        </a>
+                    </div> -->
+                    <div class="column" style="--custom_width: 33%; gap: 1em">
+                        <a href="projects/rickroll/index.html" class="card" style="text-decoration: none;">
+                            <img src="projects/rickroll/thumb.png" alt="Never Gonna Give You Up (Splatoon version)" title="Never Gonna Give You Up (Splatoon version)" class="card_image"/>
+                            <div class="box">
+                                <div class="column" style="width: 100%;">
+                                    <h3 class="card_title" style="-webkit-line-clamp: 1; line-clamp: 1;">Never Gonna Give You Up</h3>
+                                    <p class="card_text">
+                                        A 3D animated Splatoon cover of the internet classic 'Never Gonna Give You Up'.
+                                    </p>
+                                </div>
+                            </div>
+                        </a>
+                    </div>
+                    <div class="column" style="--custom_width: 33%; gap: 1em">
+                        <a href="projects/kaya/index.html" class="card" style="text-decoration: none;">
+                            <img src="projects/kaya/thumb.png" alt="Kaya sur la banquise" title="Kaya sur la banquise" class="card_image"/>
+                            <div class="box">
+                                <div class="column" style="width: 100%;">
+                                    <h3 class="card_title">Kaya sur la banquise</h3>
+                                    <p class="card_text">
+                                        A puppet show telling the story of Kaya, a young inuit girl who seeks a magic flower.
+                                    </p>
+                                </div>
+                            </div>
+                        </a>
+                    </div>
+                    <div class="column" style="--custom_width: 33%; gap: 1em">
+                        <a href="projects/patatotapopata/index.html" class="card" style="text-decoration: none;">
+                            <img src="projects/patatotapopata/thumb.png" alt="Patatotapopata" title="Patatotapopata" class="card_image"/>
+                            <div class="box">
+                                <div class="column" style="width: 100%;">
+                                    <h3 class="card_title">Patatotapopata</h3>
+                                    <p class="card_text">
+                                        A 30 seconds 3D animated short film about choice, freedom and death.
+                                    </p>
+                                </div>
+                            </div>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- UI & Webdesign -->
+        <div class="box">
+            <div class="column" style="width: 100%;">
+                <div class="spacer" style="--size: 2em;"></div>
+                <h2 id="ui">UI & webdesign</h2>
+                <div class="row" style="gap: 2em">
+                    <div class="column" style="--custom_width: 33%; gap: 1em">
+                        <a href="projects/moxxy/index.html" class="card" style="text-decoration: none;">
+                            <img src="projects/moxxy/thumb.png" alt="Moxxy" title="Moxxy" class="card_image"/>
+                            <div class="box">
+                                <div class="column" style="width: 100%;">
+                                    <h3 class="card_title">Moxxy</h3>
+                                    <p class="card_text">
+                                        A modern open source XMPP client for Android written in Flutter.
+                                    </p>
+                                </div>
+                            </div>
+                        </a>
+                    </div>
+                    <div class="column" style="--custom_width: 33%; gap: 1em">
+                        <a target="_blank" href="https://1999.robotfumeur.fr" class="card" style="text-decoration: none;">
+                            <img src="projects/1999/thumb.png" alt="1999" title="1999" class="card_image"/>
+                            <div class="box">
+                                <div class="column" style="width: 100%;">
+                                    <h3 class="card_title">1999</h3>
+                                    <p class="card_text">
+                                        UI design for a fictional modern, open source and cross-platform XMPP client.
+                                    </p>
+                                </div>
+                            </div>
+                        </a>
+                    </div>
+                    <!-- <div class="column" style="--custom_width: 33%; gap: 1em">
+                        <a href="projects/yeepme_download/index.html" class="card" style="text-decoration: none;">
+                            <img src="projects/yeepme_download/thumb.png" alt="YEEP.ME Download Center" title="YEEP.ME Download Center" class="card_image"/>
+                            <div class="box">
+                                <div class="column" style="width: 100%;">
+                                    <h3 class="card_title">Brand Download Center</h3>
+                                    <p class="card_text">
+                                        Redesign and simplified management for a website listing product manuals and documents.
+                                    </p>
+                                </div>
+                            </div>
+                        </a>
+                    </div> -->
+                    <div class="column" style="--custom_width: 33%; gap: 1em"></div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Games -->
+        <div class="box">
+            <div class="column" style="width: 100%;">
+                <div class="spacer" style="--size: 2em;"></div>
+                <h2 id="games">Games</h2>
+                <div class="row" style="gap: 2em">
+                    <div class="column" style="--custom_width: 33%; gap: 1em">
+                        <a href="projects/gang/index.html" class="card" style="text-decoration: none;">
+                            <img src="projects/gang/thumb.png" alt="Gang" title="Gang" class="card_image"/>
+                            <div class="box">
+                                <div class="column" style="width: 100%;">
+                                    <h3 class="card_title">Gang</h3>
+                                    <p class="card_text">
+                                        A complete redesign of the famous card game "Gang of Four" in my own style, with a focus on being clean and accessible to colorblind people. 
+                                    </p>
+                                </div>
+                            </div>
+                        </a>
+                    </div>
+                    <div class="column" style="--custom_width: 33%; gap: 1em">
+                        <a href="projects/hanafuda/index.html" class="card" style="text-decoration: none;">
+                            <img src="projects/hanafuda/thumb.png" alt="Hanafuda guides" title="Hanafuda guides" class="card_image"/>
+                            <div class="box">
+                                <div class="column" style="width: 100%;">
+                                    <h3 class="card_title">Hanafuda guides</h3>
+                                    <p class="card_text">
+                                        A collection of short printable guides to learn how to play and memorize the cards. 
+                                    </p>
+                                </div>
+                            </div>
+                        </a>
+                    </div>
+                    <div class="column" style="--custom_width: 33%; gap: 1em"></div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Apps & Software -->
+        <div class="box">
+            <div class="column" style="width: 100%;">
+                <div class="spacer" style="--size: 2em;"></div>
+                <h2 id="apps">Apps & Software</h2>
+                <div class="row" style="gap: 2em">
+                    <div class="column" style="--custom_width: 33%; gap: 1em">
+                        <a href="projects/pwgen/index.html" class="card" style="text-decoration: none;">
+                            <img src="projects/pwgen/thumb.png" alt="pwgen" title="pwgen" class="card_image"/>
+                            <div class="box">
+                                <div class="column" style="width: 100%;">
+                                    <h3 class="card_title">pwgen</h3>
+                                    <p class="card_text">
+                                        A simple password generator using the properties of hash functions.
+                                    </p>
+                                </div>
+                            </div>
+                        </a>
+                    </div>
+                    <div class="column" style="--custom_width: 33%; gap: 1em">
+                        <a href="projects/smoke/index.html" class="card" style="text-decoration: none;">
+                            <img src="projects/smoke/thumb.png" alt="Smoke" title="Smoke" class="card_image"/>
+                            <div class="box">
+                                <div class="column" style="width: 100%;">
+                                    <h3 class="card_title">Smoke</h3>
+                                    <p class="card_text">
+                                        A simple federated messaging app prototype built with Godot Engine.
+                                    </p>
+                                </div>
+                            </div>
+                        </a>
+                    </div>
+                    <div class="column" style="--custom_width: 33%; gap: 1em"></div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Music -->
+        <div class="box">
+            <div class="column" style="width: 100%;">
+                <div class="spacer" style="--size: 2em;"></div>
+                <h2 id="music">Music</h2>
+                <div class="row" style="gap: 2em">
+                    <div class="column" style="--custom_width: 33%; gap: 1em">
+                        <a href="projects/les_menestrels/index.html" class="card" style="text-decoration: none;">
+                            <img src="projects/les_menestrels/thumb.png" alt="Les ménestrels percussionnistes" title="Les ménestrels percussionnistes" class="card_image"/>
+                            <div class="box">
+                                <div class="column" style="width: 100%;">
+                                    <h3 class="card_title" style="-webkit-line-clamp: 1; line-clamp: 1;">Les ménestrels percussion nistes</h3>
+                                    <p class="card_text">
+                                        A metal cover of 'Les ménestrels percussionnistes' by Roland Cristal.
+                                    </p>
+                                </div>
+                            </div>
+                        </a>
+                    </div>
+                    <div class="column" style="--custom_width: 33%; gap: 1em">
+                        <a href="projects/thunderblight/index.html" class="card" style="text-decoration: none;">
+                            <img src="projects/thunderblight/thumb.png" alt="Thunderblight Ganon" title="Thunderblight Ganon" class="card_image"/>
+                            <div class="box">
+                                <div class="column" style="width: 100%;">
+                                    <h3 class="card_title">Thunderblight Ganon</h3>
+                                    <p class="card_text">
+                                        A metal cover of the Blight battle theme from The Legend of Zelda: Breath of the Wild.
+                                    </p>
+                                </div>
+                            </div>
+                        </a>
+                    </div>
+                    <div class="column" style="--custom_width: 33%; gap: 1em">
+                        <a href="projects/rickroll/index.html" class="card" style="text-decoration: none;">
+                            <img src="projects/rickroll/thumb.png" alt="Never Gonna Give You Up (Splatoon version)" title="Never Gonna Give You Up (Splatoon version)" class="card_image"/>
+                            <div class="box">
+                                <div class="column" style="width: 100%;">
+                                    <h3 class="card_title" style="-webkit-line-clamp: 1; line-clamp: 1;">Never Gonna Give You Up</h3>
+                                    <p class="card_text">
+                                        A 3D animated Splatoon cover of the internet classic 'Never Gonna Give You Up'.
+                                    </p>
+                                </div>
+                            </div>
+                        </a>
+                    </div>
+                </div>
+                <!-- Column n°2 -->
+                <div class="spacer" style="--size: 2em;"></div>
+                <div class="row" style="gap: 2em">
+                    <div class="column" style="--custom_width: 33%; gap: 1em">
+                        <a href="projects/oummm/index.html" class="card" style="text-decoration: none;">
+                            <img src="projects/oummm/thumb.png" alt="Oummm le dauphin blanc" title="Oummm le dauphin blanc" class="card_image"/>
+                            <div class="box">
+                                <div class="column" style="width: 100%;">
+                                    <h3 class="card_title">Oummm le dauphin blanc</h3>
+                                    <p class="card_text">
+                                        A metal cover of the opening song of the cartoon "Oum le dauphin".
+                                    </p>
+                                </div>
+                            </div>
+                        </a>
+                    </div>
+                    <div class="column" style="--custom_width: 33%; gap: 1em">
+                        <a href="projects/chapeau_champion/index.html" class="card" style="text-decoration: none;">
+                            <img src="projects/chapeau_champion/thumb.png" alt="Chapeau Champion" title="Chapeau Champion" class="card_image"/>
+                            <div class="box">
+                                <div class="column" style="width: 100%;">
+                                    <h3 class="card_title">Chapeau Champion</h3>
+                                    <p class="card_text">
+                                        Original theme song for a 48h-jam video game composed, performed and mixed in 6 hours. 
+                                    </p>
+                                </div>
+                            </div>
+                        </a>
+                    </div>
+                    <div class="column" style="--custom_width: 33%; gap: 1em">
+                        <a href="projects/camel_by_camel/index.html" class="card" style="text-decoration: none;">
+                            <img src="projects/camel_by_camel/thumb.png" alt="Camel by Camel" title="Camel by Camel" class="card_image"/>
+                            <div class="box">
+                                <div class="column" style="width: 100%;">
+                                    <h3 class="card_title">Camel by Camel</h3>
+                                    <p class="card_text">
+                                        A metal cover of the italo disco song 'Camel by Camel' by Sandy Marton.
+                                    </p>
+                                </div>
+                            </div>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>        
+
+        <div class="spacer" style="--size: 2em"></div>
+        <a href="#" class="btt"><img class="bttimg" src="media/icons/arrow_upward.png"/></a>
+    </main>
+
+    <footer>
+        <div id="footer_box">
+            <div class="footer_item">
+                <p>Copyright © 2025 Ailyaut</p>
+            </div>
+            <div class="footer_item">
+                <a target="_blank" href="https://www.websitecarbon.com/website/ailyaut-robotfumeur-fr-index-html/" style="text-decoration: none;">
+                    <p style="color: black; background-color: var(--accent); padding: 0.2em 0.6em 0.2em 0.6em ; border-radius: 1em;">
+                        0.02g of CO₂/view
+                    </p>
+                </a>
+            </div>
+            <div class="footer_item" style="justify-content: flex-end; gap: 1.75em;">
+                <a rel="me" href="https://mastodon.online/@ailyaut" target="_blank"><img src="media/icons/mastodon.png" class="icon" alt="Mastodon" title="Mastodon"/></a>
+                <a href="https://www.youtube.com/@ailyaut" target="_blank"><img src="media/icons/youtube.png" class="icon" alt="YouTube" title="YouTube"/></a>
+                <a href="https://ailyaut.bandcamp.com/" target="_blank"><img src="media/icons/bandcamp.png" class="icon" alt="Bandcamp" title="Bandcamp"/></a>
+                <a href="https://codeberg.org/ailyaut" target="_blank"><img src="media/icons/git.png" class="icon" alt="Git" title="Git"/></a>
+                <a href="rss.xml"><img src="media/icons/rss.png" class="icon" alt="RSS feed" title="RSS feed"/></a>
+            </div>
+        </div>
+    </footer>
+</body>
--- a/projects/1999/thumb.png
+++ b/projects/1999/thumb.png
--- a/projects/camel_by_camel/index.html
+++ b/projects/camel_by_camel/index.html
@ -0,0 +1,77 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+	<meta charset="utf-8" />
+	<title>Camel by Camel – Ailyaut's blog</title>
+    <link rel="icon" type="image/png" href="../../media/icons/favicon-16x16.png" sizes="16x16">
+	<link rel="stylesheet" href="../../style.css" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <meta property="og:title" content="Camel by Camel – Ailyaut's blog" />
+    <meta property="og:type" content="blog" />
+    <meta property="og:url" content="https://ailyaut.com/" />
+    <meta property="og:image" content="https://ailyaut.com/media/preview.png" />
+    <meta property="og:description" content="Hi! I'm Ailyaut, a 24-year-old everything-designer with a particular interest in open source and card games." />
+    <meta property="og:locale" content="en_US" />
+</head>
+
+<body>
+    <header>
+        <div id="header_box">
+            <div>
+                <a href="../../index.html" id="header_title">Ailyaut's blog</a>
+            </div>
+            <nav id="header_nav">
+                <a href="../../blog.html" class="nav_button">Blog</a>
+                <a href="../../gallery.html" class="nav_button">Gallery</a>
+                <a href="../../projects.html" class="nav_button_active">Projects</a>
+                <a href="../../about.html" class="nav_button">About</a>
+            </nav>
+        </div>
+    </header>
+
+    <main>
+        <div class="box" style="justify-content: space-between; gap: 2em;">
+            <div class="column" style="--custom_width: 60%;">
+                <h1>Camel by Camel</h1>
+                <p>This is a metal cover of the pop song "Camel by Camel" by Sandy Marton. The song blew up on the internet in october 2021, and I released my cover in november 2021. My cover is still the most popular video on my channel today, by far. </p>
+                <iframe style="aspect-ratio: 16/9; border-radius: 1em;" src="https://www.youtube-nocookie.com/embed/f6dJsp5hMo4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+            </div>
+            <div class="column" style="--custom_width: 30%;">
+                <img style="border-radius: 1em;" src="thumb.png"/>
+                <h3 style="margin-bottom: 0.5em;">My role</h3>
+                <p style="margin-bottom: 0;">Adaptation, performance, mixing, mastering, illustration</p>
+                <h3>Software used</h3>
+                <p>Reaper, Clip Studio Paint, Blender</p>
+            </div>
+        </div>
+        <div class="spacer" style="--size: 2em"></div>
+        <a href="#" class="btt"><img class="bttimg" src="../../media/icons/arrow_upward.png"/></a>
+    </main>
+
+    <footer>
+        <div id="footer_box">
+            <div class="footer_item">
+                <p>Copyright © 2025 Ailyaut</p>
+            </div>
+            <div class="footer_item">
+                <a target="_blank" href="https://www.websitecarbon.com/website/ailyaut-robotfumeur-fr-index-html/" style="text-decoration: none;">
+                    <p style="color: black; background-color: var(--accent); padding: 0.2em 0.6em 0.2em 0.6em ; border-radius: 1em;">
+                        0.02g of CO₂/view
+                    </p>
+                </a>
+            </div>
+            <div class="footer_item" style="justify-content: flex-end; gap: 1.75em;">
+                <a rel="me" href="https://mastodon.online/@ailyaut" target="_blank"><img src="../../media/icons/mastodon.png" class="icon" alt="Mastodon" title="Mastodon"/></a>
+                <a href="https://www.youtube.com/@ailyaut" target="_blank"><img src="../../media/icons/youtube.png" class="icon" alt="YouTube" title="YouTube"/></a>
+                <a href="https://ailyaut.bandcamp.com/" target="_blank"><img src="../../media/icons/bandcamp.png" class="icon" alt="Bandcamp" title="Bandcamp"/></a>
+                <a href="https://codeberg.org/ailyaut" target="_blank"><img src="../../media/icons/git.png" class="icon" alt="Git" title="Git"/></a>
+                <a href="../../rss.xml"><img src="../../media/icons/rss.png" class="icon" alt="RSS feed" title="RSS feed"/></a>
+            </div>
+        </div>
+    </footer>
+</body>
--- a/projects/camel_by_camel/thumb.png
+++ b/projects/camel_by_camel/thumb.png
--- a/projects/chapeau_champion/index.html
+++ b/projects/chapeau_champion/index.html
@ -0,0 +1,79 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+	<meta charset="utf-8" />
+	<title>Chapeau Champion – Ailyaut's blog</title>
+    <link rel="icon" type="image/png" href="../../media/icons/favicon-16x16.png" sizes="16x16">
+	<link rel="stylesheet" href="../../style.css" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <meta property="og:title" content="Chapeau Champion – Ailyaut's blog" />
+    <meta property="og:type" content="blog" />
+    <meta property="og:url" content="https://ailyaut.com/" />
+    <meta property="og:image" content="https://ailyaut.com/media/preview.png" />
+    <meta property="og:description" content="Hi! I'm Ailyaut, a 24-year-old everything-designer with a particular interest in open source and card games." />
+    <meta property="og:locale" content="en_US" />
+</head>
+
+<body>
+    <header>
+        <div id="header_box">
+            <div>
+                <a href="../../index.html" id="header_title">Ailyaut's blog</a>
+            </div>
+            <nav id="header_nav">
+                <a href="../../blog.html" class="nav_button">Blog</a>
+                <a href="../../gallery.html" class="nav_button">Gallery</a>
+                <a href="../../projects.html" class="nav_button_active">Projects</a>
+                <a href="../../about.html" class="nav_button">About</a>
+            </nav>
+        </div>
+    </header>
+
+    <main>
+        <div class="box" style="justify-content: space-between; gap: 2em;">
+            <div class="column" style="--custom_width: 60%;">
+                <h1>Chapeau Champion</h1>
+                <p>In October 2022, a friend of mine invited me to participate to a 48h game jam organized by the Rubika school.
+                    With him and his team, we created a game in 48 hours called "Chapeau Champion". I was in charge of the character design, character animations, and the music which I composed, performed and mixed in 6 hours. </p>
+                <p>Unfortunately, I can't show anything of the game itself because it didn't work on my PC :^(</p>
+                <iframe style="aspect-ratio: 16/9; border-radius: 1em;" src="https://www.youtube-nocookie.com/embed/5ztSrVTXcnw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+            </div>
+            <div class="column" style="--custom_width: 30%;">
+                <img style="border-radius: 1em;" src="thumb.png"/>
+                <h3 style="margin-bottom: 0.5em;">My role</h3>
+                <p style="margin-bottom: 0;">Music, sound design, character design, 2D animation</p>
+                <h3>Software used</h3>
+                <p>Reaper, Clip Studio Paint</p>
+            </div>
+        </div>
+        <div class="spacer" style="--size: 2em"></div>
+        <a href="#" class="btt"><img class="bttimg" src="../../media/icons/arrow_upward.png"/></a>
+    </main>
+
+    <footer>
+        <div id="footer_box">
+            <div class="footer_item">
+                <p>Copyright © 2025 Ailyaut</p>
+            </div>
+            <div class="footer_item">
+                <a target="_blank" href="https://www.websitecarbon.com/website/ailyaut-robotfumeur-fr-index-html/" style="text-decoration: none;">
+                    <p style="color: black; background-color: var(--accent); padding: 0.2em 0.6em 0.2em 0.6em ; border-radius: 1em;">
+                        0.02g of CO₂/view
+                    </p>
+                </a>
+            </div>
+            <div class="footer_item" style="justify-content: flex-end; gap: 1.75em;">
+                <a rel="me" href="https://mastodon.online/@ailyaut" target="_blank"><img src="../../media/icons/mastodon.png" class="icon" alt="Mastodon" title="Mastodon"/></a>
+                <a href="https://www.youtube.com/@ailyaut" target="_blank"><img src="../../media/icons/youtube.png" class="icon" alt="YouTube" title="YouTube"/></a>
+                <a href="https://ailyaut.bandcamp.com/" target="_blank"><img src="../../media/icons/bandcamp.png" class="icon" alt="Bandcamp" title="Bandcamp"/></a>
+                <a href="https://codeberg.org/ailyaut" target="_blank"><img src="../../media/icons/git.png" class="icon" alt="Git" title="Git"/></a>
+                <a href="../../rss.xml"><img src="../../media/icons/rss.png" class="icon" alt="RSS feed" title="RSS feed"/></a>
+            </div>
+        </div>
+    </footer>
+</body>
--- a/projects/chapeau_champion/thumb.png
+++ b/projects/chapeau_champion/thumb.png
--- a/projects/gang/index.html
+++ b/projects/gang/index.html
@ -0,0 +1,102 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+	<meta charset="utf-8" />
+	<title>Gang – Ailyaut's blog</title>
+    <link rel="icon" type="image/png" href="../../media/icons/favicon-16x16.png" sizes="16x16">
+	<link rel="stylesheet" href="../../style.css" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <meta property="og:title" content="Gang – Ailyaut's blog" />
+    <meta property="og:type" content="blog" />
+    <meta property="og:url" content="https://ailyaut.com/" />
+    <meta property="og:image" content="https://ailyaut.com/media/preview.png" />
+    <meta property="og:description" content="Hi! I'm Ailyaut, a 24-year-old everything-designer with a particular interest in open source and card games." />
+    <meta property="og:locale" content="en_US" />
+</head>
+
+<body>
+    <header>
+        <div id="header_box">
+            <div>
+                <a href="../../index.html" id="header_title">Ailyaut's blog</a>
+            </div>
+            <nav id="header_nav">
+                <a href="../../blog.html" class="nav_button">Blog</a>
+                <a href="../../gallery.html" class="nav_button">Gallery</a>
+                <a href="../../projects.html" class="nav_button_active">Projects</a>
+                <a href="../../about.html" class="nav_button">About</a>
+            </nav>
+        </div>
+    </header>
+
+    <main>
+        <div class="box" style="justify-content: space-between; gap: 2em;">
+            <div class="column" style="--custom_width: 60%;">
+                <h1>Gang</h1>
+                <p>A complete redesign of the famous card game "Gang of Four" in my own style, with a focus on being clean and accessible to colorblind people. The whole game was made using only open source software and printed by a small company in Alsace (France).</p>
+                <div class="spacer" style="--size: 1em"></div>
+                <img src="media/preview_cards.png" title="5 cards preview" alt="5 cards of the game. From left to right: a card back, the multicolor 1, the green phoenix, the yellow phoenix, and the red dragon." />
+                <div class="spacer" style="--size: 1em"></div>
+                <!-- <img src="media/7_boxes.jpg" title="7 game boxes" alt="7 boxes of my card game featuring a Chinese dragon whose long body stretches across several sides of the box." />
+                <div class="spacer" style="--size: 1em"></div> -->
+                <p>Unfortunately, I do not own the rights to this game, so I cannot sell it.<br>
+                    If you want to print a copy of this game, you can use the following PDF files. I can recommend <a target="_blank" href="https://jeuxdecartes.printeurope.fr/calculateur">Printeurope</a> to print the cards. It might cost you more than the official version of the game, but hey, it's fun.</p>
+                <h2>Files</h2>
+                <p>Please note that you are allowed to use these PDF files for personal use only, except for anything related to AI. Commercial use and AI training are not allowed.</p>
+                <a target="_blank" href="media/gang_cards.pdf" class="button" style="gap: 0.5em; width: fit-content; margin-bottom: 0.5em;">
+                    <img class="icon" src="../../media/icons/download.svg" />
+                    Cards<span class="light">PDF · 9,3MB</span>
+                </a>
+                <p class="light" style="margin-bottom: 1em;">Please note that a 3mm bleed is included in this file. The final dimensions dimensions of the cards should be 63*88mm.</p>
+                    
+                <a target="_blank" href="media/gang_box.pdf" class="button" style="gap: 0.5em; width: fit-content; margin-bottom: 0.5em;">
+                    <img class="icon" src="../../media/icons/download.svg" />
+                    Box<span class="light">PDF · 4,7MB</span>
+                </a>
+                <a target="_blank" href="media/gang_rules_web_FR.pdf" class="button" style="gap: 0.5em; width: fit-content; margin-bottom: 0.5em;">
+                    <img class="icon" src="../../media/icons/download.svg" />
+                    Game rules (French)<span class="light">PDF · 800KB</span>
+                </a>
+                <a target="_blank" href="media/gang_score_sheet_FR.pdf" class="button" style="gap: 0.5em; width: fit-content; margin-bottom: 1.5em;">
+                    <img class="icon" src="../../media/icons/download.svg" />
+                    Score sheets (French)<span class="light">PDF · 200KB</span>
+                </a>
+            </div>
+            <div class="column" style="--custom_width: 30%;">
+                <img style="border-radius: 1em;" src="thumb.png"/>
+                <h3 style="margin-bottom: 0.5em;">My role</h3>
+                <p style="margin-bottom: 0;">Illustration, graphic design, writing</p>
+                <h3>Software used</h3>
+                <p>Scribus, Krita, Inkscape</p>
+            </div>
+        </div>
+        <div class="spacer" style="--size: 2em"></div>
+        <a href="#" class="btt"><img class="bttimg" src="../../media/icons/arrow_upward.png"/></a>
+    </main>
+
+    <footer>
+        <div id="footer_box">
+            <div class="footer_item">
+                <p>Copyright © 2025 Ailyaut</p>
+            </div>
+            <div class="footer_item">
+                <a target="_blank" href="https://www.websitecarbon.com/website/ailyaut-robotfumeur-fr-index-html/" style="text-decoration: none;">
+                    <p style="color: black; background-color: var(--accent); padding: 0.2em 0.6em 0.2em 0.6em ; border-radius: 1em;">
+                        0.02g of CO₂/view
+                    </p>
+                </a>
+            </div>
+            <div class="footer_item" style="justify-content: flex-end; gap: 1.75em;">
+                <a rel="me" href="https://mastodon.online/@ailyaut" target="_blank"><img src="../../media/icons/mastodon.png" class="icon" alt="Mastodon" title="Mastodon"/></a>
+                <a href="https://www.youtube.com/@ailyaut" target="_blank"><img src="../../media/icons/youtube.png" class="icon" alt="YouTube" title="YouTube"/></a>
+                <a href="https://ailyaut.bandcamp.com/" target="_blank"><img src="../../media/icons/bandcamp.png" class="icon" alt="Bandcamp" title="Bandcamp"/></a>
+                <a href="https://codeberg.org/ailyaut" target="_blank"><img src="../../media/icons/git.png" class="icon" alt="Git" title="Git"/></a>
+                <a href="../../rss.xml"><img src="../../media/icons/rss.png" class="icon" alt="RSS feed" title="RSS feed"/></a>
+            </div>
+        </div>
+    </footer>
+</body>
--- a/projects/gang/media/7_boxes.jpg
+++ b/projects/gang/media/7_boxes.jpg
--- a/projects/gang/media/gang_box.pdf
+++ b/projects/gang/media/gang_box.pdf
--- a/projects/gang/media/gang_cards.pdf
+++ b/projects/gang/media/gang_cards.pdf
--- a/projects/gang/media/gang_rules_FR.pdf
+++ b/projects/gang/media/gang_rules_FR.pdf
--- a/projects/gang/media/gang_rules_web_FR.pdf
+++ b/projects/gang/media/gang_rules_web_FR.pdf
--- a/projects/gang/media/gang_score_sheet_FR.pdf
+++ b/projects/gang/media/gang_score_sheet_FR.pdf
--- a/projects/gang/media/preview_cards.png
+++ b/projects/gang/media/preview_cards.png
--- a/projects/gang/thumb.png
+++ b/projects/gang/thumb.png
--- a/projects/hanafuda/index.html
+++ b/projects/hanafuda/index.html
@ -0,0 +1,84 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+	<meta charset="utf-8" />
+	<title>Hanafuda guides – Ailyaut's blog</title>
+    <link rel="icon" type="image/png" href="../../media/icons/favicon-16x16.png" sizes="16x16">
+	<link rel="stylesheet" href="../../style.css" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <meta property="og:title" content="Hanafuda guides – Ailyaut's blog" />
+    <meta property="og:type" content="blog" />
+    <meta property="og:url" content="https://ailyaut.com/" />
+    <meta property="og:image" content="https://ailyaut.com/media/preview.png" />
+    <meta property="og:description" content="Hi! I'm Ailyaut, a 24-year-old everything-designer with a particular interest in open source and card games." />
+    <meta property="og:locale" content="en_US" />
+</head>
+
+<body>
+    <header>
+        <div id="header_box">
+            <div>
+                <a href="../../index.html" id="header_title">Ailyaut's blog</a>
+            </div>
+            <nav id="header_nav">
+                <a href="../../blog.html" class="nav_button">Blog</a>
+                <a href="../../gallery.html" class="nav_button">Gallery</a>
+                <a href="../../projects.html" class="nav_button_active">Projects</a>
+                <a href="../../about.html" class="nav_button">About</a>
+            </nav>
+        </div>
+    </header>
+
+    <main>
+        <div class="box" style="justify-content: space-between; gap: 2em;">
+            <div class="column" style="--custom_width: 60%;">
+                <h1>Hanafuda guides</h1>
+                <p>Last year, my partner gave me a hanafuda game as a present.  
+                    I was very excited, but I didn't know how to play! I searched for the game rules on the internet and learned that multiple games can be played with the hanafuda cards (or just hanafuda, because it already means 'flower cards'), the two most popular being Koi-koi and Hachi hachi.</p>                    
+                <p>I looked for the Koi-koi rules, but I came across different variants of the game, which made it quite difficult to understand how to play. But more importantly, I needed a way to memorize the cards.</p>     
+                <p>Using my experience as a former board-game graphic designer, I made short printable guides to learn how to play Koi-koi and to memorize the cards. All the guides are licensed under CC BY-SA 4.0, so that everyone can use them, translate them if needed, and share their love for hanafuda.</p>
+                <h2>Files</h2>
+                <p class="light">More guides will come, in more languages.</p>
+                <a target="_blank" href="media/koikoi_2pages_FR.pdf" class="button" style="gap: 0.5em; width: fit-content; margin-bottom: 1.5em;">
+                    <img class="icon" src="../../media/icons/download.svg" />
+                    Koi-koi 2-pages (FR)<span class="light">PDF · 1,5MB</span>
+                </a>
+            </div>
+            <div class="column" style="--custom_width: 30%;">
+                <img style="border-radius: 1em;" src="thumb.png"/>
+                <h3 style="margin-bottom: 0.5em;">My role</h3>
+                <p style="margin-bottom: 0;">Writing, graphic design</p>
+                <h3>Software used</h3>
+                <p>Scribus</p>
+            </div>
+        </div>
+        <div class="spacer" style="--size: 2em"></div>
+        <a href="#" class="btt"><img class="bttimg" src="../../media/icons/arrow_upward.png"/></a>
+    </main>
+
+    <footer>
+        <div id="footer_box">
+            <div class="footer_item">
+                <p>Copyright © 2025 Ailyaut</p>
+            </div>
+            <div class="footer_item">
+                <a target="_blank" href="https://www.websitecarbon.com/website/ailyaut-robotfumeur-fr-index-html/" style="text-decoration: none;">
+                    <p style="color: black; background-color: var(--accent); padding: 0.2em 0.6em 0.2em 0.6em ; border-radius: 1em;">
+                        0.02g of CO₂/view
+                    </p>
+                </a>
+            </div>
+            <div class="footer_item" style="justify-content: flex-end; gap: 1.75em;">
+                <a rel="me" href="https://mastodon.online/@ailyaut" target="_blank"><img src="../../media/icons/mastodon.png" class="icon" alt="Mastodon" title="Mastodon"/></a>
+                <a href="https://www.youtube.com/@ailyaut" target="_blank"><img src="../../media/icons/youtube.png" class="icon" alt="YouTube" title="YouTube"/></a>
+                <a href="https://ailyaut.bandcamp.com/" target="_blank"><img src="../../media/icons/bandcamp.png" class="icon" alt="Bandcamp" title="Bandcamp"/></a>
+                <a href="https://codeberg.org/ailyaut" target="_blank"><img src="../../media/icons/git.png" class="icon" alt="Git" title="Git"/></a>
+                <a href="../../rss.xml"><img src="../../media/icons/rss.png" class="icon" alt="RSS feed" title="RSS feed"/></a>
+            </div>
+        </div>
+    </footer>
+</body>
--- a/projects/hanafuda/media/koikoi_2pages_FR.pdf
+++ b/projects/hanafuda/media/koikoi_2pages_FR.pdf
--- a/projects/hanafuda/thumb.png
+++ b/projects/hanafuda/thumb.png
--- a/projects/kaya/index.html
+++ b/projects/kaya/index.html
@ -0,0 +1,79 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+	<meta charset="utf-8" />
+	<title>Kaya sur la banquise – Ailyaut's blog</title>
+    <link rel="icon" type="image/png" href="../../media/icons/favicon-16x16.png" sizes="16x16">
+	<link rel="stylesheet" href="../../style.css" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <meta property="og:title" content="Kaya sur la banquise – Ailyaut's blog" />
+    <meta property="og:type" content="blog" />
+    <meta property="og:url" content="https://ailyaut.com/" />
+    <meta property="og:image" content="https://ailyaut.com/media/preview.png" />
+    <meta property="og:description" content="Hi! I'm Ailyaut, a 24-year-old everything-designer with a particular interest in open source and card games." />
+    <meta property="og:locale" content="en_US" />
+</head>
+
+<body>
+    <header>
+        <div id="header_box">
+            <div>
+                <a href="../../index.html" id="header_title">Ailyaut's blog</a>
+            </div>
+            <nav id="header_nav">
+                <a href="../../blog.html" class="nav_button">Blog</a>
+                <a href="../../gallery.html" class="nav_button">Gallery</a>
+                <a href="../../projects.html" class="nav_button_active">Projects</a>
+                <a href="../../about.html" class="nav_button">About</a>
+            </nav>
+        </div>
+    </header>
+
+    <main>
+        <div class="box" style="justify-content: space-between; gap: 2em;">
+            <div class="column" style="--custom_width: 60%;">
+                <h1>Kaya sur la banquise</h1>
+                <p>"Kaya sur la banquise" is an initiatory puppet show for young audiences created by La Coop des Marionnettes.
+                    I had the honour of being responsible for the 2D and 3D backgrounds and animated sequences of this project. 
+                </p>
+                <iframe style="aspect-ratio: 16/9; border-radius: 1em;" src="https://www.youtube-nocookie.com/embed/rYQrJ6SIXcY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+            </div>
+            <div class="column" style="--custom_width: 30%;">
+                <img style="border-radius: 1em;" src="thumb.png"/>
+                <h3 style="margin-bottom: 0.5em;">My role</h3>
+                <p style="margin-bottom: 0;">Art direction, storyboard, background design, 3D modeling, rigging, textures, 2D & 3D animation, lighting, rendering, compositing, editing.</p>
+                <h3>Software used</h3>
+                <p>Blender</p>
+            </div>
+        </div>
+        <div class="spacer" style="--size: 2em"></div>
+        <a href="#" class="btt"><img class="bttimg" src="../../media/icons/arrow_upward.png"/></a>
+    </main>
+
+    <footer>
+        <div id="footer_box">
+            <div class="footer_item">
+                <p>Copyright © 2025 Ailyaut</p>
+            </div>
+            <div class="footer_item">
+                <a target="_blank" href="https://www.websitecarbon.com/website/ailyaut-robotfumeur-fr-index-html/" style="text-decoration: none;">
+                    <p style="color: black; background-color: var(--accent); padding: 0.2em 0.6em 0.2em 0.6em ; border-radius: 1em;">
+                        0.02g of CO₂/view
+                    </p>
+                </a>
+            </div>
+            <div class="footer_item" style="justify-content: flex-end; gap: 1.75em;">
+                <a rel="me" href="https://mastodon.online/@ailyaut" target="_blank"><img src="../../media/icons/mastodon.png" class="icon" alt="Mastodon" title="Mastodon"/></a>
+                <a href="https://www.youtube.com/@ailyaut" target="_blank"><img src="../../media/icons/youtube.png" class="icon" alt="YouTube" title="YouTube"/></a>
+                <a href="https://ailyaut.bandcamp.com/" target="_blank"><img src="../../media/icons/bandcamp.png" class="icon" alt="Bandcamp" title="Bandcamp"/></a>
+                <a href="https://codeberg.org/ailyaut" target="_blank"><img src="../../media/icons/git.png" class="icon" alt="Git" title="Git"/></a>
+                <a href="../../rss.xml"><img src="../../media/icons/rss.png" class="icon" alt="RSS feed" title="RSS feed"/></a>
+            </div>
+        </div>
+    </footer>
+</body>
--- a/projects/kaya/thumb.png
+++ b/projects/kaya/thumb.png
--- a/projects/les_menestrels/index.html
+++ b/projects/les_menestrels/index.html
@ -0,0 +1,79 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+	<meta charset="utf-8" />
+	<title>Les ménestrels percussionnistes – Ailyaut's blog</title>
+    <link rel="icon" type="image/png" href="../../media/icons/favicon-16x16.png" sizes="16x16">
+	<link rel="stylesheet" href="../../style.css" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <meta property="og:title" content="Les ménestrels percussionnistes – Ailyaut's blog" />
+    <meta property="og:type" content="blog" />
+    <meta property="og:url" content="https://ailyaut.com/" />
+    <meta property="og:image" content="https://ailyaut.com/media/preview.png" />
+    <meta property="og:description" content="Hi! I'm Ailyaut, a 24-year-old everything-designer with a particular interest in open source and card games." />
+    <meta property="og:locale" content="en_US" />
+</head>
+
+<body>
+    <header>
+        <div id="header_box">
+            <div>
+                <a href="../../index.html" id="header_title">Ailyaut's blog</a>
+            </div>
+            <nav id="header_nav">
+                <a href="../../blog.html" class="nav_button">Blog</a>
+                <a href="../../gallery.html" class="nav_button">Gallery</a>
+                <a href="../../projects.html" class="nav_button_active">Projects</a>
+                <a href="../../about.html" class="nav_button">About</a>
+            </nav>
+        </div>
+    </header>
+
+    <main>
+        <div class="box" style="justify-content: space-between; gap: 2em;">
+            <div class="column" style="--custom_width: 60%;">
+                <h1>Les ménestrels percussionnistes</h1>
+                <p>For Christmas 2022 and 2023, one of my gifts to my partner was a metal cover of a song they liked. I would have liked to do the same in 2024, but metal covers usually take me 1-2 weeks of full time work, which was not possible as a now full time employee.</p>
+                <p>Anyway, I'm a fan of Roland Cristal and my partner especially liked "Les ménestrels percussionnistes" by him, so that was the song I chose for Christmas 2023. It was my first time singing and I did quite a poor job, but I think it is my best metal cover so far.</p>
+                <p>Did you notice the hidden "Take on me" in the solo?</p>
+                <iframe style="aspect-ratio: 16/9; border-radius: 1em;" src="https://www.youtube-nocookie.com/embed/2Y19TV8e_zo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+            </div>
+            <div class="column" style="--custom_width: 30%;">
+                <img style="border-radius: 1em;" src="thumb.png"/>
+                <h3 style="margin-bottom: 0.5em;">My role</h3>
+                <p style="margin-bottom: 0;">Adaptation, performance, mixing, mastering, illustration</p>
+                <h3>Software used</h3>
+                <p>Reaper, Inkscape, Krita, Blender</p>
+            </div>
+        </div>
+        <div class="spacer" style="--size: 2em"></div>
+        <a href="#" class="btt"><img class="bttimg" src="../../media/icons/arrow_upward.png"/></a>
+    </main>
+
+    <footer>
+        <div id="footer_box">
+            <div class="footer_item">
+                <p>Copyright © 2025 Ailyaut</p>
+            </div>
+            <div class="footer_item">
+                <a target="_blank" href="https://www.websitecarbon.com/website/ailyaut-robotfumeur-fr-index-html/" style="text-decoration: none;">
+                    <p style="color: black; background-color: var(--accent); padding: 0.2em 0.6em 0.2em 0.6em ; border-radius: 1em;">
+                        0.02g of CO₂/view
+                    </p>
+                </a>
+            </div>
+            <div class="footer_item" style="justify-content: flex-end; gap: 1.75em;">
+                <a rel="me" href="https://mastodon.online/@ailyaut" target="_blank"><img src="../../media/icons/mastodon.png" class="icon" alt="Mastodon" title="Mastodon"/></a>
+                <a href="https://www.youtube.com/@ailyaut" target="_blank"><img src="../../media/icons/youtube.png" class="icon" alt="YouTube" title="YouTube"/></a>
+                <a href="https://ailyaut.bandcamp.com/" target="_blank"><img src="../../media/icons/bandcamp.png" class="icon" alt="Bandcamp" title="Bandcamp"/></a>
+                <a href="https://codeberg.org/ailyaut" target="_blank"><img src="../../media/icons/git.png" class="icon" alt="Git" title="Git"/></a>
+                <a href="../../rss.xml"><img src="../../media/icons/rss.png" class="icon" alt="RSS feed" title="RSS feed"/></a>
+            </div>
+        </div>
+    </footer>
+</body>
--- a/projects/les_menestrels/thumb.png
+++ b/projects/les_menestrels/thumb.png
--- a/projects/moxxy/index.html
+++ b/projects/moxxy/index.html
@ -0,0 +1,95 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+	<meta charset="utf-8" />
+	<title>Moxxy – Ailyaut's blog</title>
+    <link rel="icon" type="image/png" href="../../media/icons/favicon-16x16.png" sizes="16x16">
+	<link rel="stylesheet" href="../../style.css" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <meta property="og:title" content="Moxxy – Ailyaut's blog" />
+    <meta property="og:type" content="blog" />
+    <meta property="og:url" content="https://ailyaut.com/" />
+    <meta property="og:image" content="https://ailyaut.com/media/preview.png" />
+    <meta property="og:description" content="Hi! I'm Ailyaut, a 24-year-old everything-designer with a particular interest in open source and card games." />
+    <meta property="og:locale" content="en_US" />
+</head>
+
+<body>
+    <header>
+        <div id="header_box">
+            <div>
+                <a href="../../index.html" id="header_title">Ailyaut's blog</a>
+            </div>
+            <nav id="header_nav">
+                <a href="../../blog.html" class="nav_button">Blog</a>
+                <a href="../../gallery.html" class="nav_button">Gallery</a>
+                <a href="../../projects.html" class="nav_button_active">Projects</a>
+                <a href="../../about.html" class="nav_button">About</a>
+            </nav>
+        </div>
+    </header>
+
+    <main>
+        <div class="box" style="justify-content: space-between; gap: 2em;">
+            <div class="column" style="--custom_width: 60%;">
+                <h1>Moxxy</h1>
+                <p>Moxxy is a modern open source XMPP client for Android.<br>
+                    In October 2023, I wrote a <a target="_blank" href="https://mastodon.online/@ailyaut/111172106792795090">post</a> on Mastodon to present <a target="_blank" href="https://1999.robotfumeur.fr">1999</a>, an XMPP client project with similar goals, aiming to be easy to use and available on all major platforms.<br>
+                    Against my expectations, the post met with great success, and developers asked me to join their XMPP client project to help on the UI side. Among them was the developer of Moxxy.<br>
+                    I have been contributing to the project in my spare time ever since.
+                </p>
+                <p>This website was actually created to share my progress on the Moxxy interface, both to encourage me to work on it regularly and to get feedback from the community.</p>
+                <p>If you would like to see more, here is the latest post on Moxxy to date:</p>
+                <div class="spacer" style="--size: 1em;"></div>
+                <div class="column" style="max-width: 376px; gap: 1em">
+                    <a href="../../blog/202405_moxxy_progress_report.html" class="card" style="text-decoration: none;">
+                        <img src="../../blog/media/2024/20240407_moxxy_progress.png" alt="Moxxy UI: May 2024 progress report" title="Moxxy UI: May 2024 progress report" class="card_image"/>
+                        <div class="box">
+                            <div class="column" style="width: 100%;">
+                                <h3 class="card_title">Moxxy UI: May 2024 progress report</h3>
+                                <p class="card_text">
+                                    Let's start with a little announcement: from now on, I'll be publishing my .penpot file in the moxxy/design repository on Codeberg on a monthly basis, so that everyone can tinker with the interface to their heart's content! I should have done it from the start, but better late than never! 
+                                </p>
+                            </div>
+                        </div>
+                    </a>
+                </div>
+            </div>
+            <div class="column" style="--custom_width: 30%;">
+                <img style="border-radius: 1em;" src="thumb.png"/>
+                <h3 style="margin-bottom: 0.5em;">My role</h3>
+                <p style="margin-bottom: 0;">UI/UX design</p>
+                <h3>Software used</h3>
+                <p>Penpot</p>
+            </div>
+        </div>
+        <div class="spacer" style="--size: 2em"></div>
+        <a href="#" class="btt"><img class="bttimg" src="../../media/icons/arrow_upward.png"/></a>
+    </main>
+
+    <footer>
+        <div id="footer_box">
+            <div class="footer_item">
+                <p>Copyright © 2025 Ailyaut</p>
+            </div>
+            <div class="footer_item">
+                <a target="_blank" href="https://www.websitecarbon.com/website/ailyaut-robotfumeur-fr-index-html/" style="text-decoration: none;">
+                    <p style="color: black; background-color: var(--accent); padding: 0.2em 0.6em 0.2em 0.6em ; border-radius: 1em;">
+                        0.02g of CO₂/view
+                    </p>
+                </a>
+            </div>
+            <div class="footer_item" style="justify-content: flex-end; gap: 1.75em;">
+                <a rel="me" href="https://mastodon.online/@ailyaut" target="_blank"><img src="../../media/icons/mastodon.png" class="icon" alt="Mastodon" title="Mastodon"/></a>
+                <a href="https://www.youtube.com/@ailyaut" target="_blank"><img src="../../media/icons/youtube.png" class="icon" alt="YouTube" title="YouTube"/></a>
+                <a href="https://ailyaut.bandcamp.com/" target="_blank"><img src="../../media/icons/bandcamp.png" class="icon" alt="Bandcamp" title="Bandcamp"/></a>
+                <a href="https://codeberg.org/ailyaut" target="_blank"><img src="../../media/icons/git.png" class="icon" alt="Git" title="Git"/></a>
+                <a href="../../rss.xml"><img src="../../media/icons/rss.png" class="icon" alt="RSS feed" title="RSS feed"/></a>
+            </div>
+        </div>
+    </footer>
+</body>
--- a/projects/moxxy/thumb.png
+++ b/projects/moxxy/thumb.png
--- a/projects/oummm/index.html
+++ b/projects/oummm/index.html
@ -0,0 +1,77 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+	<meta charset="utf-8" />
+	<title>Oummm le dauphin blanc – Ailyaut's blog</title>
+    <link rel="icon" type="image/png" href="../../media/icons/favicon-16x16.png" sizes="16x16">
+	<link rel="stylesheet" href="../../style.css" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <meta property="og:title" content="Oummm le dauphin blanc – Ailyaut's blog" />
+    <meta property="og:type" content="blog" />
+    <meta property="og:url" content="https://ailyaut.com/" />
+    <meta property="og:image" content="https://ailyaut.com/media/preview.png" />
+    <meta property="og:description" content="Hi! I'm Ailyaut, a 24-year-old everything-designer with a particular interest in open source and card games." />
+    <meta property="og:locale" content="en_US" />
+</head>
+
+<body>
+    <header>
+        <div id="header_box">
+            <div>
+                <a href="../../index.html" id="header_title">Ailyaut's blog</a>
+            </div>
+            <nav id="header_nav">
+                <a href="../../blog.html" class="nav_button">Blog</a>
+                <a href="../../gallery.html" class="nav_button">Gallery</a>
+                <a href="../../projects.html" class="nav_button_active">Projects</a>
+                <a href="../../about.html" class="nav_button">About</a>
+            </nav>
+        </div>
+    </header>
+
+    <main>
+        <div class="box" style="justify-content: space-between; gap: 2em;">
+            <div class="column" style="--custom_width: 60%;">
+                <h1>Oummm le dauphin blanc</h1>
+                <p>A metal cover that I did for Christmas 2022 as a gift to my partner.</p>
+                <iframe style="aspect-ratio: 16/9; border-radius: 1em;" src="https://www.youtube-nocookie.com/embed/ssibyZz-s_w" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+            </div>
+            <div class="column" style="--custom_width: 30%;">
+                <img style="border-radius: 1em;" src="thumb.png"/>
+                <h3 style="margin-bottom: 0.5em;">My role</h3>
+                <p style="margin-bottom: 0;">Adaptation, performance, mixing, mastering, illustration</p>
+                <h3>Software used</h3>
+                <p>Reaper, Inkscape, Blender</p>
+            </div>
+        </div>
+        <div class="spacer" style="--size: 2em"></div>
+        <a href="#" class="btt"><img class="bttimg" src="../../media/icons/arrow_upward.png"/></a>
+    </main>
+
+    <footer>
+        <div id="footer_box">
+            <div class="footer_item">
+                <p>Copyright © 2025 Ailyaut</p>
+            </div>
+            <div class="footer_item">
+                <a target="_blank" href="https://www.websitecarbon.com/website/ailyaut-robotfumeur-fr-index-html/" style="text-decoration: none;">
+                    <p style="color: black; background-color: var(--accent); padding: 0.2em 0.6em 0.2em 0.6em ; border-radius: 1em;">
+                        0.02g of CO₂/view
+                    </p>
+                </a>
+            </div>
+            <div class="footer_item" style="justify-content: flex-end; gap: 1.75em;">
+                <a rel="me" href="https://mastodon.online/@ailyaut" target="_blank"><img src="../../media/icons/mastodon.png" class="icon" alt="Mastodon" title="Mastodon"/></a>
+                <a href="https://www.youtube.com/@ailyaut" target="_blank"><img src="../../media/icons/youtube.png" class="icon" alt="YouTube" title="YouTube"/></a>
+                <a href="https://ailyaut.bandcamp.com/" target="_blank"><img src="../../media/icons/bandcamp.png" class="icon" alt="Bandcamp" title="Bandcamp"/></a>
+                <a href="https://codeberg.org/ailyaut" target="_blank"><img src="../../media/icons/git.png" class="icon" alt="Git" title="Git"/></a>
+                <a href="../../rss.xml"><img src="../../media/icons/rss.png" class="icon" alt="RSS feed" title="RSS feed"/></a>
+            </div>
+        </div>
+    </footer>
+</body>
--- a/projects/oummm/thumb.png
+++ b/projects/oummm/thumb.png
--- a/projects/patatotapopata/index.html
+++ b/projects/patatotapopata/index.html
@ -0,0 +1,151 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+	<meta charset="utf-8" />
+	<title>Patatotapopata – Ailyaut's blog</title>
+    <link rel="icon" type="image/png" href="../../media/icons/favicon-16x16.png" sizes="16x16">
+	<link rel="stylesheet" href="../../style.css" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <meta property="og:title" content="Patatotapopata – Ailyaut's blog" />
+    <meta property="og:type" content="blog" />
+    <meta property="og:url" content="https://ailyaut.com/" />
+    <meta property="og:image" content="https://ailyaut.com/media/preview.png" />
+    <meta property="og:description" content="Hi! I'm Ailyaut, a 24-year-old everything-designer with a particular interest in open source and card games." />
+    <meta property="og:locale" content="en_US" />
+</head>
+
+<body>
+    <header>
+        <div id="header_box">
+            <div>
+                <a href="../../index.html" id="header_title">Ailyaut's blog</a>
+            </div>
+            <nav id="header_nav">
+                <a href="../../blog.html" class="nav_button">Blog</a>
+                <a href="../../gallery.html" class="nav_button">Gallery</a>
+                <a href="../../projects.html" class="nav_button_active">Projects</a>
+                <a href="../../about.html" class="nav_button">About</a>
+            </nav>
+        </div>
+    </header>
+
+    <main>
+        <div class="box" style="justify-content: space-between; gap: 2em;">
+            <div class="column" style="--custom_width: 60%;">
+                <h1>Patatotapopata</h1>
+                <p>A 30 seconds 3D animated short film about choice, freedom and death.<br>
+                     This short film was my end of bachelor project.</p>
+                <p class="italic light">'A young girl jumps off a building, but is given the opportunity to reevaluate her decision by seeing her own future.
+                    She then finds herself transported to the end of time, where she must face the spirit of Jean-Paul Sartre.'
+                </p>
+                <iframe style="aspect-ratio: 16/9; border-radius: 1em;" src="https://www.youtube-nocookie.com/embed/BWbewoul1n8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+                <h2>Requirements</h2>
+                <p>This short film was my end of bachelor project.<br>
+                    The assignment was to create a 40 seconds short film on the following subject:</p>
+                <p class="italic">“A messenger goes back in time to look for…”</p>
+                <p>The short film needed to have a maximum of one character and one environment, and every step had to be done by the student (no pre-made rig, animation, environment, …) </p>
+                <h2>Table of contents</h2>
+                <ul>
+                    <li><a href="#charadesign">Character design</a></li>
+                    <li><a href="#storyboard">Storyboard</a></li>
+                    <li><a href="#animatic">Animatic</a></li>
+                    <li><a href="#environment">Environment design</a></li>
+                    <li><a href="#3d">3D sculpt & retopology</a></li>
+                    <li><a href="#rigging">Rigging</a></li>
+                    <li><a href="#animation">Animating, texturing, lighting, rendering, compositing</a></li>
+                    <li><a href="#conclusion">Conclusion</a></li>
+                </ul>
+                <h2 id="charadesign">Character design</h2>
+                <p>It is not usual to start with character design.<br>
+                    The truth is, when the subject was announced I just sketched a character in 30 minutes which I quite liked. I didn’t even have any story back then.<br>
+                    I was inspired by Little Witch Academia’s designs at the time and I originally wanted to animate a short-film in the same energetic style, with a lot of exaggerated movements, speed distortions and so on. 
+                    That’s not really what happened in the end, but fortunately, my character fit perfectly into the depressing atmosphere of the final story. </p>
+                <img style="border-radius: 1em; margin-bottom: 1em;" src="media/patatotapopata_character_concept.webp" title="Character concept" alt="A rough black and white drawing of a young gothic girl with pale skin, long black hair with bangs, a black tutu, black and white striped tights and black boots. She also has cross earrings and ear piercings. She is seen from the left side, almost turning her back, but her head is turned towards the viewer and her eyes are looking to the right." />
+                <img style="border-radius: 1em; margin-bottom: 1em;" src="media/patatotapopata_turn_a_pose.webp" title="Character turn in A-pose" alt="Four black and white drawings of the girl from the previous image, seen from the back, front, three-quarter and side." />
+                <img style="border-radius: 1em; margin-bottom: 1em;" src="media/patatotapopata_hairstyles.webp" title="Hairstyle tests" alt="Four black and white drawings of the girl from the previous image, each with a different hairstyle. The first has long hair and bangs, the second has space buns, the third has short pigtails, and the fourth has long, low braided pigtails in the style of Wednesday Addams." />
+                <p class="italic">I tried different hairstyles because the teachers were concerned that long hair would be too difficult to animate. I went with the long hair anyway.</p>
+                <h2 id="storyboard">Storyboard</h2>
+                <p>The story and shots came to me in a daydream during a cloudy, depressing day.<br>
+                    At first, the teachers were afraid that my project was too ambitious: I had several environments, multiple characters in a way, and my main character had long hair which was difficult to animate. But I was convinced that I could do it, so nothing was changed.<br>
+                    Even though not all the shots were kept as they were in the final cut, the short film remains fairly faithful to the original idea. </p>
+                <p>Here is an overview of the 7 pages of the storyboard, in which we can clearly see the different steps with the colors being used: </p>
+                <img style="margin-bottom: 1em;" src="media/patatotapopata_storyboard_full.webp" title="Storyboard" alt="Seven pages of storyboard. The shots are almost all the same as the ones in the movie." />
+                <p>Here you can read the full storyboard in detail (in french)</p>
+                <p><a target="_blank" href="media/patatotapopata_storyboard.pdf">Read as PDF</a></p>
+                <h2 id="animatic">Animatic</h2>
+                <p>After the storyboard was done, I needed to turn it into an animatic to make sure the timing was good and the shots flowed well.</p>
+                <iframe style="aspect-ratio: 16/9; border-radius: 1em; margin-bottom: 1em;" src="https://player.vimeo.com/video/486123369?h=0bb881ef44" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
+                <h2 id="environment">Environment design</h2>
+                <p>The biggest challenge of this project was without a doubt the city. I tried a lot of different methods, including testing with MASH on Maya, or building sets with blueprints on Unreal Engine.<br>
+                    In the end I decided on a much more clever solution! </p>
+                <div class="row" style="gap: 1em;">
+                    <div class="column" style="--custom_width: calc(50% - 0.5em)">
+                        <img style="border-radius: 1em; margin-bottom: 1em;" src="media/patatotapopata_mash_city.png" title="MASH city attempt" alt="A 3D landscape with very low detail blue/gray buildings under a dark gray sky. All buildings are the same, but their height is different to give an impression of variety." />
+                        <p class="italic" style="text-align: center;">An attempt on Maya with MASH</p>
+                    </div>
+                    <div class="column" style="--custom_width: calc(50% - 0.5em);">
+                        <img style="border-radius: 1em; margin-bottom: 1em;" src="media/patatotapopata_unreal_city.png" title="Unreal Engine city attempt" alt="A 3D landscape of low detail buildings with different colors. There are lots of kinds of buildings, but the rendering is not very realistic." />
+                        <p class="italic" style="text-align: center;">an attempt on Unreal Engine</p>
+                    </div>
+                </div>
+                <img style="border-radius: 1em; margin-bottom: 1em;" src="media/patatotapopata_blender_city.webp" title="Blender city attempt" alt="A 3D view of six different realistic-looking buildings." />
+                <p class="italic" style="text-align: center;">The solution I opted for in the end</p>
+                <p>The buildings seen up close are simple cubes with textured facade pictures, on which I extruded the windows and gave them a reflective texture. Then I stacked a few of them and scattered them in the background in a way that looks realistic. </p>
+                <p>As for the wide shot of the city in the introduction… it’s all Google Maps !<br>
+                    I captured my screen as I scrolled through the Tokyo metropolis in 3D view, then reproduced the mood of my film with compositing. </p>
+                <img style="border-radius: 1em; margin-bottom: 1em;" src="media/patatotapopata_city_before_after.webp" title="Compositing before/after" alt="A wide aerial view of Tokyo, as if taken from a helicopter. It's actually a 3D view from Google Maps. The image is cut in two. On the left, the city appears to be sunny, the sky is bright and blue and the colors are vivid. On the right, the colors are sad and gray, the sky is greenish, and the atmosphere is depressing." />
+                <p class="italic" style="text-align: center;">before compositing / after compositing</p>
+                <h2 id="3d">3D Sculpt & Retopology</h2>
+                <p>The character was sculpted on Zbrush and retopologized in Maya (because it would be impossible to work with otherwise!) </p>
+                <img style="border-radius: 1em; margin-bottom: 1em;" src="media/patatotapopata_retopology.webp" title="Retopology before/after" alt="A 3D view showing two versions of the girl character. On the left, the model is not very detailed and the 3D structure is messy. On the right, the model is much more detailed and the 3D structure is clear." />
+                <h2 id="rigging">Rigging</h2>
+                <p>The rigging demo starts at 1:14</p>
+                <iframe style="aspect-ratio: 16/9; border-radius: 1em; margin-bottom: 1em;" src="https://player.vimeo.com/video/815290865#t=1m14s" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
+                <h2 id="animation">Animating, texturing, lighting, rendering, compositing</h2>
+                <p>For the animation, I did it on Maya because it is where I did my rigging, and then I exported it to Blender for the next steps. </p>
+                <p>For the textures, I used the Texture Paint feature of Blender to roughly see how it would look like on my UV projection, then I refined the drawing on Clip Studio Paint. And for the lighting and compositing, I did a breakdown of two different shots in my demo reel starting from 0:55 </p>
+                <p>The rendering was done on Blender using Cycles with OptiX denoising. </p>
+                <iframe style="aspect-ratio: 16/9; border-radius: 1em; margin-bottom: 1em;" src="https://player.vimeo.com/video/815290865#t=0m55s" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
+                <h2 id="conclusion">Conclusion</h2>
+                <p>Making a short film was a dream come true, and Patatotapopata was my first.<br>
+                    Being able to do each step myself was a great way to realize the difficulties and challenges faced at each position if it was a team effort.<br>
+                    By the way, I would love to do another one as a team next time! </p>
+            </div>
+            <div class="column" style="--custom_width: 30%;">
+                <img style="border-radius: 1em;" src="thumb.png"/>
+                <h3 style="margin-bottom: 0.5em;">My role</h3>
+                <p style="margin-bottom: 0;">Scenario, storyboard, character & environment design, animatic, 3D modeling, rigging, 3D animation, textures, lighting, rendering, compositing, editing.</p>
+                <h3>Software used</h3>
+                <p>Maya, ZBrush, Blender, Clip Studio Paint, Unreal Engine (not used in the final project)</p>
+            </div>
+        </div>
+        <div class="spacer" style="--size: 2em"></div>
+        <a href="#" class="btt"><img class="bttimg" src="../../media/icons/arrow_upward.png"/></a>
+    </main>
+
+    <footer>
+        <div id="footer_box">
+            <div class="footer_item">
+                <p>Copyright © 2025 Ailyaut</p>
+            </div>
+            <div class="footer_item">
+                <a target="_blank" href="https://www.websitecarbon.com/website/ailyaut-robotfumeur-fr-index-html/" style="text-decoration: none;">
+                    <p style="color: black; background-color: var(--accent); padding: 0.2em 0.6em 0.2em 0.6em ; border-radius: 1em;">
+                        0.02g of CO₂/view
+                    </p>
+                </a>
+            </div>
+            <div class="footer_item" style="justify-content: flex-end; gap: 1.75em;">
+                <a rel="me" href="https://mastodon.online/@ailyaut" target="_blank"><img src="../../media/icons/mastodon.png" class="icon" alt="Mastodon" title="Mastodon"/></a>
+                <a href="https://www.youtube.com/@ailyaut" target="_blank"><img src="../../media/icons/youtube.png" class="icon" alt="YouTube" title="YouTube"/></a>
+                <a href="https://ailyaut.bandcamp.com/" target="_blank"><img src="../../media/icons/bandcamp.png" class="icon" alt="Bandcamp" title="Bandcamp"/></a>
+                <a href="https://codeberg.org/ailyaut" target="_blank"><img src="../../media/icons/git.png" class="icon" alt="Git" title="Git"/></a>
+                <a href="../../rss.xml"><img src="../../media/icons/rss.png" class="icon" alt="RSS feed" title="RSS feed"/></a>
+            </div>
+        </div>
+    </footer>
+</body>
--- a/projects/patatotapopata/media/patatotapopata_blender_city.webp
+++ b/projects/patatotapopata/media/patatotapopata_blender_city.webp
--- a/projects/patatotapopata/media/patatotapopata_character_concept.webp
+++ b/projects/patatotapopata/media/patatotapopata_character_concept.webp
--- a/projects/patatotapopata/media/patatotapopata_city_before_after.webp
+++ b/projects/patatotapopata/media/patatotapopata_city_before_after.webp
--- a/projects/patatotapopata/media/patatotapopata_hairstyles.webp
+++ b/projects/patatotapopata/media/patatotapopata_hairstyles.webp
--- a/projects/patatotapopata/media/patatotapopata_mash_city.png
+++ b/projects/patatotapopata/media/patatotapopata_mash_city.png
--- a/projects/patatotapopata/media/patatotapopata_retopology.webp
+++ b/projects/patatotapopata/media/patatotapopata_retopology.webp
--- a/projects/patatotapopata/media/patatotapopata_storyboard.pdf
+++ b/projects/patatotapopata/media/patatotapopata_storyboard.pdf
--- a/projects/patatotapopata/media/patatotapopata_storyboard_full.webp
+++ b/projects/patatotapopata/media/patatotapopata_storyboard_full.webp
--- a/projects/patatotapopata/media/patatotapopata_turn_a_pose.webp
+++ b/projects/patatotapopata/media/patatotapopata_turn_a_pose.webp
--- a/projects/patatotapopata/media/patatotapopata_unreal_city.png
+++ b/projects/patatotapopata/media/patatotapopata_unreal_city.png
--- a/projects/patatotapopata/thumb.png
+++ b/projects/patatotapopata/thumb.png
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"/></svg>`