ailyaut/ailyaut.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
ailyaut
2025-05-15 16:06:00 +01:00
commit e8cf8acbbc
129 changed files with 3796 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
projects/1999/thumb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

77
projects/camel_by_camel/index.html Normal file
View File

@@ -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>

BIN
projects/camel_by_camel/thumb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

79
projects/chapeau_champion/index.html Normal file
View File

@@ -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>

BIN
projects/chapeau_champion/thumb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

102
projects/gang/index.html Normal file
View File

@@ -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>

BIN
projects/gang/media/7_boxes.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 150 KiB

BIN
projects/gang/media/gang_box.pdf Normal file
View File

Binary file not shown.

BIN
projects/gang/media/gang_cards.pdf Normal file
View File

Binary file not shown.

BIN
projects/gang/media/gang_rules_FR.pdf Normal file
View File

Binary file not shown.

BIN
projects/gang/media/gang_rules_web_FR.pdf Normal file
View File

Binary file not shown.

BIN
projects/gang/media/gang_score_sheet_FR.pdf Normal file
View File

Binary file not shown.

BIN
projects/gang/media/preview_cards.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 456 KiB

BIN
projects/gang/thumb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

84
projects/hanafuda/index.html Normal file
View File

@@ -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>

BIN
projects/hanafuda/media/koikoi_2pages_FR.pdf Normal file
View File

Binary file not shown.

BIN
projects/hanafuda/thumb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

79
projects/kaya/index.html Normal file
View File

@@ -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>

BIN
projects/kaya/thumb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

79
projects/les_menestrels/index.html Normal file
View File

@@ -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>

BIN
projects/les_menestrels/thumb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

95
projects/moxxy/index.html Normal file
View File

@@ -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>

BIN
projects/moxxy/thumb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

77
projects/oummm/index.html Normal file
View File

@@ -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>

BIN
projects/oummm/thumb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

151
projects/patatotapopata/index.html Normal file
View File

@@ -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>

BIN
projects/patatotapopata/media/patatotapopata_blender_city.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 918 KiB

BIN
projects/patatotapopata/media/patatotapopata_character_concept.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

BIN
projects/patatotapopata/media/patatotapopata_city_before_after.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 452 KiB

BIN
projects/patatotapopata/media/patatotapopata_hairstyles.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 116 KiB

BIN
projects/patatotapopata/media/patatotapopata_mash_city.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 413 KiB

BIN
projects/patatotapopata/media/patatotapopata_retopology.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 260 KiB

BIN
projects/patatotapopata/media/patatotapopata_storyboard.pdf Normal file
View File

Binary file not shown.

BIN
projects/patatotapopata/media/patatotapopata_storyboard_full.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 436 KiB

BIN
projects/patatotapopata/media/patatotapopata_turn_a_pose.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 119 KiB

BIN
projects/patatotapopata/media/patatotapopata_unreal_city.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
projects/patatotapopata/thumb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
projects/patatotapopata/thumb_makingof.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

119
projects/pwgen/index.html Normal file
View File

@@ -0,0 +1,119 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>pwgen – 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="pwgen – 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>pwgen</h1>
<p class="light">Disclaimer 1: this is not <a target="_blank" href="https://manpages.debian.org/bullseye/pwgen/pwgen.1.en.html">pwgen</a>, sorry for the confusing name, I will change it.<br>
Disclaimer 2: I wrote this in 2023. What I consider "secure" has changed a lot since then.</p>
<p class="italic">'An easy to use secure password generator.'<br>– me in 2023</p>
<h2>Why?</h2>
<p>In 2022, a site on which I had an account was hacked. A lot of user information was stolen, including email addresses, IP addresses and passwords. Unfortunately I was the kind of person who always uses the same password on all sites, and that password had just been compromised.<br>
The obvious solution would have been to use a password manager, but I wasn't comfortable with the idea that all my passwords would be protected by one single master password.<br>
So I came up with a solution that allows me to always use extremely strong passwords, all unique, without having to memorize anything complicated.</p>
<h2>How does it work?</h2>
<p>The principle is ridiculously simple.</p>
<p>The application just creates a hash of what the user enters with the SHA-1 algorithm. Since the slightest change in input gives a completely different result, it is very easy to create unique passwords. For example, you can start with a very bad password, like “1234”, and then add the name of the service you are creating an account for, like Netflix.</p>
<p>The result of the following input: </p>
<p class="monospace">1234+netflix</p>
<p>will be:</p>
<p class="monospace">84b55c61cb905355057e2995c13ae833ba7d2850</p>
<p>Which is quite strong!</p>
<p>Now let’s say we want to create a password for Gmail.<br>
We can input the following: </p>
<p class="monospace">1234+gmail</p>
<p>which gives us:</p>
<p class="monospace">77b4f11c48a113adf628bf55510d5cbe5af1e15d</p>
<p>A completely different result, even though we started with the same simple password.<br>
Moreover, there is no need to worry about a password being compromised anymore: it is impossible to recover the original input from the hash, so the simple password “1234” can never be guessed by an attacker in order to deduce your other passwords. </p>
<h2>How would I remember such a long password?</h2>
<p>That’s the best part! You don’t!<br>
Each time you need to log into an account, you can launch the app and type your simple password, like “1234+gmail”. The output will be exactly the same as when you first generated it! This is one of the proprieties of a hash: a same input will always give the same output. </p>
<h2>Limitations</h2>
<p class="light">----- 2025 edit start -----</p>
<p>Hashes only use a very limited set of characters (1-9 and a-f), which makes it easier to brute force the password despite the string being 40 characters long if the attacker knows that the password is just a hash.</p>
<p>I am no cryptography expert, but I see two ways of attacking such a password:</p>
<ol>
<li>Guessing the input password using social engineering or other compromised passwords and then hashing it to try it (still more expensive than just trying passwords directly).</li>
<li>Brute forcing the final password directly, knowing that it has only a very limited set of characters.</li>
</ol>
<p>To improve on the current design, I could use each two-character sequence of the hash as a hex code for an ASCII character and create a new string that would be the addition of those ASCII characters.
This way, the password wouldn't look like a hash if it got exposed (so the use of this application wouldn't be as obvious, and the attack #1 wouldn't be attempted),
and it would also be computationally more expensive to try passwords by guessing the input string if there are more steps than just hashing (this would make attack #1 more difficult).
It also solves the problem of attack #2 by using a much wider set of characters.</p>
<p class="light">----- 2025 edit end -----</p>
<h2>Try it!</h2>
<p>You can try the current version for yourself!<br>
I made a GUI application for Android, Windows and Linux (X11) using Godot Engine.<br>
There are also 2 CLI versions in Rust and Golang, because I tried to learn these languages at some point.<br>
I decline any responsibility in case something bad happens with this app. Use it at your own risk.</p>
<p class="light">Downloads will be available later.</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;">Programming, UI</p>
<h3>Software used</h3>
<p>Godot Engine (for GUI version)</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>

BIN
projects/pwgen/thumb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

80
projects/rickroll/index.html Normal file
View File

@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Never Gonna Give You Up – 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="Never Gonna Give You Up – 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>Never Gonna Give You Up</h1>
<p>For April 1st 2023, I did a 3D reproduction of the famous "Never Gonna Give You Up" clip with a Splatoon version of Rick Astley.
I also edited the music to make it sound like a Splatoon character is singing.
And to make the parody perfect, I also <a target="_blank" href="https://ailyaut.bandcamp.com/track/rick-asquid-never-gonna-give-you-up-splatoon-cover">released the song on Bandcamp</a> with an album cover written in Splatoon language.
</p>
<iframe style="aspect-ratio: 16/9; border-radius: 1em;" src="https://www.youtube-nocookie.com/embed/fAEp-mdmtq4" 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;">3D animation, textures, lighting, rendering, graphic design, editing.</p>
<h3>Software used</h3>
<p>Reaper, Blender, Inkscape, Krita</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>

BIN
projects/rickroll/thumb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

128
projects/smoke/index.html Normal file
View File

@@ -0,0 +1,128 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Smoke – 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="Smoke – 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>Smoke</h1>
<p class="light">Disclaimer: I did this in 2 days in 2023 without knowing anything about cryptography and wrote most of the text at that time. I'm leaving this page online for the sole purpose of showing a project I've done in the past. I do not intend to continue working on it.</p>
<p>A secure, federated, end-to-end encrypted messaging app built with Godot Engine.<br>
<span class="italic">(or at least this is what I wanted it to be)</span>
</p>
<h2>Why?</h2>
<p>Why make a new messaging application when there are dozens of them?<br>
When I made this project, I thought there was no perfect messaging app, so I had to make one.
I didn't want to use proprietary applications (and still don't), and I felt that the open source options weren't good enough, Signal being centralized and XMPP being a hard sell for non-tech-enthusiasts.</p>
<p>Today (2025), I have a different opinion, and that is that there can't be a "perfect" messaging app because there are just too many different use cases for these. Signal is fantastic for everyday use, I love the independence that XMPP provides me, and I'd definitely use Briar if the situation called for it.</p>
<p>My goal was to create a secure federated messaging app with modern UI like Signal and that was extremely easy to set up for people who wished to host their own server. It also had to be open source. </p>
<p>I used Godot Engine because I was familiar with it.</p>
<h2>Sending encrypted messages</h2>
<p>Every message sent in the Smoke app is end-to-end encrypted with AES. Godot already had an implementation of the AES algorithm so I used it as-is.<br>
Every message created in the app is turned into a dictionary that looks like this: </p>
<p class="monospace">
<span style="color: #BF4F60;">var</span> message = {<br>
  <span style="color: var(--link);">"from":</span> from,  <span style="color: var(--light);">#the address of the sender (user1@example.com)</span><br>
  <span style="color: var(--link);">"to":</span> to,  <span style="color: var(--light);">#the address of the recipient (user2@example.com)</span><br>
  <span style="color: var(--link);">"type":</span> type,  <span style="color: var(--light);">#the message type (text, image, video, file, ...)</span><br>
  <span style="color: var(--link);">"time":</span> time,  <span style="color: var(--light);">#the time when the message was sent, in UNIX time</span><br>
  <span style="color: var(--link);">"data":</span> data  <span style="color: var(--light);">#the content of the message, which is encrypted</span><br>
}
</p>
<p>The “data” part is AES-encrypted with a symmetric key. For now, there is no key exchange algorithm so the key is the same for everyone, which is NOT secure
(also the fact that only the "data" part is encrypted makes all the metadata unencrypted, which is... not good).</p>
<p>For the UI part, I used WhatsApp’s dark mode colors. It doesn’t matter too much since the app is not to be released.<br>
This is what it looks like:</p>
<img style="height: 600px; width: 338px; margin-bottom: 1em;" src="media/smoke_screenshot_01.png" title="Smoke conversation" alt="A screenshot of a conversation in the Smoke app. Person A says 'hey', person B replies 'hello', and then person A asks 'How do you do?'" />
<p>It still needs work of course. The message bubble will need to show the hour the message was sent at, and there should be a “received” and “read” checkmark in the bottom-right corner. Sending images is also not supported for now.</p>
<p>After a message is sent or received, it is stored in plain text in a JSON file containing all your message log with the person you’re currently talking with. Each conversation is a different file, and the according file is loaded each time you enter a conversation. The goal for later will be to create a way to load only the last x messages of the log file and load older messages only when needed in order to speed things up. </p>
<h2>Managing your contact list</h2>
<p>The main screen of the app is a list of your conversations with all your contacts. You can add a new contact (and therefore a new conversation) with the + button in the bottom-right corner, which will send you to the ‘Contacts’ menu where you can add and delete contacts. Each time you add or delete a contact, a file in the JSON format is updated accordingly.</p>
<p>Here are the ‘Conversations’ and ‘Contacts’ menus: </p>
<div class="row" style="gap: 1em;">
<img style="height: 600px; width: 338px; margin-bottom: 1em;" src="media/smoke_screenshot_02.png" title="Smoke conversations list" alt="A screenshot of the conversation list in Smoke. There is only one conversation available, with a contact named 'Ailyaut'." />
<img style="height: 600px; width: 338px; margin-bottom: 1em;" src="media/smoke_screenshot_03.png" title="Smoke contact list" alt="A screenshot of the contact list. Only one person is in there." />
</div>
<h2>Logging in</h2>
<p>There is no real login system for now, the address you use on the login screen will determine your identity for the session.
No password is currently required. For later versions, the app will ask for a password, which will be hashed and sent to the server with the login.
From there, the credentials will be compared against those in the server database and that’s it. </p>
<img style="height: 600px; width: 338px; margin-bottom: 1em;" src="media/smoke_screenshot_04.png" title="Smoke login screen" alt="A screenshot of the login screen. It says 'Welcome!' in big letters." />
<h2>Hosting your own server</h2>
<p>One of my goals was to make it easy to self-host a Smoke server. This is why I also developed a server-side software for the messages to be sent through.
DNS records were a pain when I set up my XMPP server, so I wanted to avoid that as much as possible.
For this purpose, I made it so that when you login or register with an account, the domain part is converted into a “smoke” subdomain under the hood.
No need for SRV records and multiple subdomains, just enter your login credentials like this: </p>
<p class="monospace">name@example.com</p>
<p>And the app will transform it to:</p>
<p class="monospace">name@smoke.example.com</p>
<p>But the first one will still be displayed. The app will just know that it has to send messages to smoke.example.com. If you’re hosting the server, you will host it on smoke.example.com and never think about it again. </p>
<h2>Limitations</h2>
<p>The app is not complete, and it is also not secure. The encryption key is currently the same for everyone and there is no login system. This app should NOT be used for secure communication!</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;">Programming</p>
<h3>Software used</h3>
<p>Godot Engine</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>

BIN
projects/smoke/media/smoke_screenshot_01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
projects/smoke/media/smoke_screenshot_02.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
projects/smoke/media/smoke_screenshot_03.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
projects/smoke/media/smoke_screenshot_04.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
projects/smoke/thumb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

79
projects/thunderblight/index.html Normal file
View File

@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Thunderblight Ganon – 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="Thunderblight Ganon – 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>Thunderblight Ganon</h1>
<p>A metal cover of the Blight battle theme from The Legend of Zelda: Breath of the Wild.</p>
<p>When I choose a music to do a cover of, it's usually a music that I'm obsessed with (or my partner is) and I think turning it into metal would be kind of subversive. In this case, I did it for... I'm ashamed to say it... clout. Pure clout. The sequel to Breath of the Wild was about to be released so I thought it would be smart to do a Zelda cover.</p>
<p>The obvious choice if I wanted clout would have been a music of Tears of the Kingdom, but I feared the music might contain spoiler (I'm a gamer first!), so the closest thing was a Breath of the Wild music and so I just did that. And it's probably the cover I like the least. Lesson learned.</p>
<iframe style="aspect-ratio: 16/9; border-radius: 1em;" src="https://www.youtube-nocookie.com/embed/JRL2nBQ3iLU" 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, Krita, 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>

BIN
projects/thunderblight/thumb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB