349 lines
20 KiB
HTML
349 lines
20 KiB
HTML
<!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 align_bottom" style="justify-content: space-between; flex-wrap: wrap; gap: 1em;">
|
||
<div class="column">
|
||
<h1>Projects</h1>
|
||
<div class="spacer" style="--size: 1em;"></div>
|
||
<div class="row" style="gap: 0.75em; margin-bottom: 1em;">
|
||
<a href="#animation" class="button">Animation</a>
|
||
<a href="#ui" class="button">UI/UX & 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>
|
||
<div class="column" style="--custom_width: 35%; background-color: var(--accent); border-radius: 1.25em; padding: 1em 1em 0 1em;">
|
||
<h3 style="color: black; margin-top: 0; margin-bottom: 0.5em">Are you a recruiter?</h3>
|
||
<p style="color: black;">
|
||
Projects you might find interesting on this page are marked with a <img class="verified" style="filter: brightness(0); top: 0.35em;" src="media/icons/verified.svg" />
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Animation -->
|
||
<div class="box">
|
||
<div class="column" style="width: 100%;">
|
||
<div class="spacer" style="--size: 1em;"></div>
|
||
<h2 id="animation">Animation</h2>
|
||
<div class="row" style="gap: 2em">
|
||
<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 <img class="verified" src="media/icons/verified.svg" /></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 <img class="verified" src="media/icons/verified.svg" /></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/UX & webdesign</h2>
|
||
<div class="row" style="gap: 2em">
|
||
<div class="column" style="--custom_width: 33%; gap: 1em">
|
||
<a href="projects/y_download/index.html" class="card" style="text-decoration: none; position: relative;">
|
||
<img src="projects/y_download/thumb.png" alt="Moxxy" title="Moxxy" class="card_image"/>
|
||
<p style="background-color: #ff9; color: black; padding: 0.25em 0.75em 0.25em 0.75em; border-radius: 0.75em; position: absolute; top: 0.75em; left: 0.75em; font-weight: 700;">Case study</p>
|
||
<div class="box">
|
||
<div class="column" style="width: 100%;">
|
||
<h3 class="card_title">Y Download Center <img class="verified" src="media/icons/verified.svg" /></h3>
|
||
<p class="card_text">
|
||
<span style="font-weight: 700;">Case study. </span>Redesigning the Y Download Center to make it easier to use and maintain.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<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 <img class="verified" src="media/icons/verified.svg" /></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"></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 <img class="verified" src="media/icons/verified.svg" /></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>
|