180 lines
8.9 KiB
HTML
180 lines
8.9 KiB
HTML
<!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 25-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>Heya!</h1>
|
|
<p>I'm Ailyaut, a 25-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 lead designer, sometimes programmer.
|
|
</p>
|
|
<p class="light" style="margin-bottom: 0;">
|
|
Je m'appelle Ailyaut, je suis un designer touche-à-tout de 25 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 lead designer, et parfois comme programmeur.
|
|
</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.svg">
|
|
</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/moxxy_becomes_expressive.html" class="card" style="text-decoration: none;">
|
|
<img src="blog/media/2026/moxxy_ui.png
|
|
" alt="Moxxy becomes expressive
|
|
" title="Moxxy becomes expressive
|
|
" class="card_image"/>
|
|
<div class="box">
|
|
<div class="column" style="width: 100%;">
|
|
<h3 class="card_title">Moxxy becomes expressive
|
|
</h3>
|
|
<p class="card_text">
|
|
A lot has happened since I last worked on Moxxy, the most important for us today being the release of Material 3 Expressive. I personally love the direction Google is taking by making the UI fun for users (and designers!) while still focusing on and improving ease of use and readability.
|
|
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div><div class="column" style="--custom_width: 33%; gap: 1em">
|
|
<a href="blog/hshwd_release.html" class="card" style="text-decoration: none;">
|
|
<img src="projects/hshwd/thumb.png
|
|
" alt="Release of hshwd
|
|
" title="Release of hshwd
|
|
" class="card_image"/>
|
|
<div class="box">
|
|
<div class="column" style="width: 100%;">
|
|
<h3 class="card_title">Release of hshwd
|
|
</h3>
|
|
<p class="card_text">
|
|
hshwd is an open-source offline tool that generates strong, unique passwords from weak ones in a deterministic way, using the properties of hash functions.
|
|
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div><div class="column" style="--custom_width: 33%; gap: 1em">
|
|
<a href="blog/gang_release.html" class="card" style="text-decoration: none;">
|
|
<img src="projects/gang/thumb.png
|
|
" alt="Release of Gang
|
|
" title="Release of Gang
|
|
" class="card_image"/>
|
|
<div class="box">
|
|
<div class="column" style="width: 100%;">
|
|
<h3 class="card_title">Release of Gang
|
|
</h3>
|
|
<p class="card_text">
|
|
TL;DR: I made a card game, and now I'm releasing all the necessary files so you can print it! You can use them however you like, as long as it's for personal use only. No commercial or AI-related use.
|
|
|
|
</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 © 2026 Ailyaut</p>
|
|
</div>
|
|
<div class="footer_item">
|
|
<a target="_blank" href="https://digitalbeacon.co/report/ailyaut-com" 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.01g 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>
|