Compare commits
14 Commits
e8cf8acbbc
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 9e10e8fac3 | |||
| 9b671490f1 | |||
| ee717e3ac4 | |||
| fb5032ac52 | |||
| 25f317f356 | |||
| 0e2518ea4c | |||
| 2c704ce2a1 | |||
| d57c27c5c4 | |||
| 1434516341 | |||
| 2ad1434e08 | |||
| 4ebeff51bd | |||
| 65e101231f | |||
| 38cdf39a3a | |||
| 1dcc08ba90 |
3
.gitignore
vendored
3
.gitignore
vendored
@@ -1,5 +1,6 @@
|
||||
*.kra
|
||||
*.txt
|
||||
*.png~
|
||||
blog/md/draft
|
||||
media/icons/svg
|
||||
projects/*/*.svg
|
||||
projects/y_download
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<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: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" />
|
||||
</head>
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
<div class="column" style="width: 100%;">
|
||||
<h1>About</h1>
|
||||
<h2>About me</h2>
|
||||
<p>I'm Ailyaut (pronounced <span class="italic">ayo</span>), a 24-year-old designer from France.<br>
|
||||
<p>I'm Ailyaut (pronounced <span class="italic">ayo</span>), a 25-year-old designer from France.<br>
|
||||
I've got a bachelor's degree in 3D animation, and I consider myself a primarily visual artist, although I also enjoy writing music and code.<br>
|
||||
In my spare time, I create a mobile game (yet to be announced), make music that I post on YouTube and Bandcamp, and tinker with my Linux server. I'd also like to write a comic book, though I have only two pages so far.
|
||||
</p>
|
||||
@@ -47,14 +47,14 @@
|
||||
The purpose of this website is to showcase my work.<br>
|
||||
The website is written using only HTML and CSS. There's no JavaScript, no cookies, no tracking.<br>
|
||||
I also try to make it as light as possible in order to not burn our planet too much.<br>
|
||||
There is a repository for this website with the scripts I made to update it (it's probably horrendous code but I'm not a programmer).
|
||||
There is a <a target="_blank" href="https://git.robotfumeur.fr/ailyaut/ailyaut.com">repository</a> for this website with the scripts I made to update it (it's probably horrendous code but I'm not a programmer).
|
||||
</p>
|
||||
<h2>Copyright</h2>
|
||||
<p>
|
||||
Unless otherwise specified, you are not allowed to use any of my work (including but not limited to any written text, illustrations, 2D and 3D renders and animations) hosted on this website or any other, for any purposes, both personal or commercial, including purposes related to the training and/or development of artificial intelligence (AI) of any kind, to the extent permitted by applicable law.
|
||||
</p>
|
||||
<div class="spacer" style="--size: 2em;"></div>
|
||||
<h1>Contact</h1>
|
||||
<h1 id="contact">Contact</h1>
|
||||
<p>Replace the ౷ with an @ (the links are deliberately wrong as well).</p>
|
||||
<p>
|
||||
Email : <a href="mailto:ailyaut౷robotfumeur.fr">ailyaut౷robotfumeur.fr</a><br>
|
||||
|
||||
72
blog.html
72
blog.html
@@ -52,6 +52,40 @@
|
||||
<div class="row" style="gap: 2em">
|
||||
<!-- blog -->
|
||||
<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 class="column" style="--custom_width: 33%; gap: 1em">
|
||||
<a href="blog/a_new_dawn.html" class="card" style="text-decoration: none;">
|
||||
<img src="blog/media/2025/website_update.png
|
||||
" alt="A new dawn
|
||||
" title="A new dawn
|
||||
" class="card_image"/>
|
||||
<div class="box">
|
||||
<div class="column" style="width: 100%;">
|
||||
<h3 class="card_title">A new dawn
|
||||
</h3>
|
||||
<p class="card_text">
|
||||
If you’ve been following this blog since its beginnings in 2024, back when the URL was still ailyaut.robotfumeur.fr, then you’ve probably noticed that it hasn’t been updated much in the last year.
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div><div class="column" style="--custom_width: 33%; gap: 1em">
|
||||
<a href="blog/202405_moxxy_progress_report.html" class="card" style="text-decoration: none;">
|
||||
<img src="blog/media/2024/20240407_moxxy_progress.png
|
||||
" alt="Moxxy UI: May 2024 progress report
|
||||
@@ -64,40 +98,6 @@
|
||||
<p class="card_text">
|
||||
Let's start with a little announcement: from now on, I'll be publishing my .penpot file in the moxxy/design repository on Codeberg on a monthly basis, so that everyone can tinker with the interface to their heart's content! I should have done it from the start, but better late than never!
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div><div class="column" style="--custom_width: 33%; gap: 1em">
|
||||
<a href="blog/202404_moxxy_progress_report.html" class="card" style="text-decoration: none;">
|
||||
<img src="blog/media/2024/20240407_moxxy_progress.png
|
||||
" alt="Moxxy UI: April 2024 progress report
|
||||
" title="Moxxy UI: April 2024 progress report
|
||||
" class="card_image"/>
|
||||
<div class="box">
|
||||
<div class="column" style="width: 100%;">
|
||||
<h3 class="card_title">Moxxy UI: April 2024 progress report
|
||||
</h3>
|
||||
<p class="card_text">
|
||||
April has been a busy month, partly due to a Windows Defender Trojan alert that gave me a good excuse to wipe my entire disk and switch to Linux. So this post will be short and without any major news.
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div><div class="column" style="--custom_width: 33%; gap: 1em">
|
||||
<a href="blog/202403_moxxy_progress_report.html" class="card" style="text-decoration: none;">
|
||||
<img src="blog/media/2024/20240407_moxxy_progress.png
|
||||
" alt="Moxxy UI: March 2024 progress report
|
||||
" title="Moxxy UI: March 2024 progress report
|
||||
" class="card_image"/>
|
||||
<div class="box">
|
||||
<div class="column" style="width: 100%;">
|
||||
<h3 class="card_title">Moxxy UI: March 2024 progress report
|
||||
</h3>
|
||||
<p class="card_text">
|
||||
Although I haven't communicated much about it, I've been working on a new interface for Moxxy since October 2023. I created this blog mainly to present my work on this open source project.
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -110,7 +110,9 @@
|
||||
<div class="box">
|
||||
<div class="column" style="width: 100%;">
|
||||
<h2 id="all">All posts</h2>
|
||||
<hr><h3>2024</h3><p class="light">09/06 <a href="blog/202405_moxxy_progress_report.html">Moxxy UI: May 2024 progress report
|
||||
<hr><h3>2025</h3><p class="light">23/11 <a href="blog/gang_release.html">Release of Gang
|
||||
</a></p><p class="light">01/06 <a href="blog/a_new_dawn.html">A new dawn
|
||||
</a></p><hr><h3>2024</h3><p class="light">09/06 <a href="blog/202405_moxxy_progress_report.html">Moxxy UI: May 2024 progress report
|
||||
</a></p><p class="light">08/05 <a href="blog/202404_moxxy_progress_report.html">Moxxy UI: April 2024 progress report
|
||||
</a></p><p class="light">07/04 <a href="blog/202403_moxxy_progress_report.html">Moxxy UI: March 2024 progress report
|
||||
</a></p><p class="light">13/03 <a href="blog/hello_world.html">Hello world!
|
||||
|
||||
@@ -65,7 +65,7 @@ And to do that, I had to break the frame, i.e. the header and the system and nav
|
||||
<ul>
|
||||
<li>design of the text bubbles when you send a file and when you send your location</li>
|
||||
<li>design of the drop-down menus that appear when you use the various buttons on the chat screen</li>
|
||||
<li>design of the menu that appears when a chat bubble is long-pressed/li></li>
|
||||
<li>design of the menu that appears when a chat bubble is long-pressed</li>
|
||||
<li>design of message bubbles with errors (message not encrypted, sending error, etc.)</li>
|
||||
</ul>
|
||||
<p>If you have any remarks, suggestions, solutions or comments, I'd be delighted to hear from you by replying under the <a href="https://mastodon.online/@ailyaut/112587618079138456">Mastodon post</a>, or by sending them to me by email or XMPP!</p>
|
||||
|
||||
75
blog/a_new_dawn.html
Normal file
75
blog/a_new_dawn.html
Normal file
@@ -0,0 +1,75 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>A new dawn
|
||||
– 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="A new dawn
|
||||
– 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/blog/media/2025/website_update.png
|
||||
" />
|
||||
<meta property="og:description" content="If you’ve been following this blog since its beginnings in 2024, back when the URL was still ailyaut.robotfumeur.fr, then you’ve probably noticed that it hasn’t been updated much in the last year.
|
||||
" />
|
||||
<meta property="og:locale" content="en_US" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div id="header_box">
|
||||
<div>
|
||||
<a href="../index.html" id="header_title">Ailyaut's blog</a>
|
||||
</div>
|
||||
<nav id="header_nav">
|
||||
<a href="../blog.html" class="nav_button_active">Blog</a>
|
||||
<a href="../gallery.html" class="nav_button">Gallery</a>
|
||||
<a href="../projects.html" class="nav_button">Projects</a>
|
||||
<a href="../about.html" class="nav_button">About</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="box">
|
||||
<div class="column" style="--custom_width: 60%;">
|
||||
<h1>A new dawn
|
||||
</h1><p class="light">01/06/2025 · 2 min</p><div class="spacer" style="--size: 1em"></div><p>If you've been following this blog since its beginnings in 2024, back when the URL was still <a href="https://ailyaut.robotfumeur.fr">ailyaut.robotfumeur.fr</a>, then you've probably noticed that it hasn't been updated much in the last year.<br />
|
||||
My intent with this blog was to post at least once a month on Moxxy, but it took so much time to write the blog posts in HTML that I felt it just wasn't worth it.</p>
|
||||
<p>So I switched to WordPress.</p>
|
||||
<p>Just kidding, I wrote a big Python script that allows me to write the blog posts in Markdown, and then translates everything to HTML and updates all the necessary pages as well as the RSS feed. It might be overcomplicated, and it might be horrendous code, but it works.</p>
|
||||
<p>I am therefore starting this blog again, with a new, cleaner (and cooler) URL : <a href="https://ailyaut.com">ailyaut.com</a>.<br />
|
||||
I cleaned up the HTML and CSS, changed the colors and fonts (Space Grotesk is a cool font but it just feels overused now), and compressed all images so much that they are now blurry on mobile, all to achieve a <100KB homepage. Which is not that small but I'm an artist so I need images everywhere.<br />
|
||||
Oh, and I broke all the previous links. Sorry!</p>
|
||||
<p>I'm going to start sharing a lot of my works on this website, including updates on the Moxxy UI of course, and personal projects such as... a ready-to-print card game that I illustrated?? That's right, so stay tuned.</p>
|
||||
<p>:^)</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacer" style="--size: 2em"></div>
|
||||
<a href="#" class="btt"><img class="bttimg" src="../media/icons/arrow_upward.png"/></a>
|
||||
</main>
|
||||
<footer>
|
||||
<div id="footer_box">
|
||||
<div class="footer_item">
|
||||
<p>Copyright © 2025 Ailyaut</p>
|
||||
</div>
|
||||
<div class="footer_item">
|
||||
<a target="_blank" href="https://www.websitecarbon.com/website/ailyaut-robotfumeur-fr-index-html/" style="text-decoration: none;">
|
||||
<p style="color: black; background-color: var(--accent); padding: 0.2em 0.6em 0.2em 0.6em ; border-radius: 1em;">
|
||||
0.02g of CO₂/view
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="footer_item" style="justify-content: flex-end; gap: 1.75em;">
|
||||
<a rel="me" href="https://mastodon.online/@ailyaut" target="_blank"><img src="../media/icons/mastodon.png" class="icon" alt="Mastodon" title="Mastodon"/></a>
|
||||
<a href="https://www.youtube.com/@ailyaut" target="_blank"><img src="../media/icons/youtube.png" class="icon" alt="YouTube" title="YouTube"/></a>
|
||||
<a href="https://ailyaut.bandcamp.com/" target="_blank"><img src="../media/icons/bandcamp.png" class="icon" alt="Bandcamp" title="Bandcamp"/></a>
|
||||
<a href="https://codeberg.org/ailyaut" target="_blank"><img src="../media/icons/git.png" class="icon" alt="Git" title="Git"/></a>
|
||||
<a href="../rss.xml"><img src="../media/icons/rss.png" class="icon" alt="RSS feed" title="RSS feed"/></a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
91
blog/gang_release.html
Normal file
91
blog/gang_release.html
Normal file
@@ -0,0 +1,91 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Release of 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="Release of 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/projects/gang/thumb.png
|
||||
" />
|
||||
<meta property="og:description" content="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.
|
||||
" />
|
||||
<meta property="og:locale" content="en_US" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div id="header_box">
|
||||
<div>
|
||||
<a href="../index.html" id="header_title">Ailyaut's blog</a>
|
||||
</div>
|
||||
<nav id="header_nav">
|
||||
<a href="../blog.html" class="nav_button_active">Blog</a>
|
||||
<a href="../gallery.html" class="nav_button">Gallery</a>
|
||||
<a href="../projects.html" class="nav_button">Projects</a>
|
||||
<a href="../about.html" class="nav_button">About</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="box">
|
||||
<div class="column" style="--custom_width: 60%;">
|
||||
<h1>Release of Gang
|
||||
</h1><p class="light">23/11/2025 · 2 min</p><div class="spacer" style="--size: 1em"></div><p class="italic">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.</em></p>
|
||||
<img src="../projects/gang/media/gang_scene.png" style="margin-bottom: 2em; border-radius: 1em; max-width: 450px;" title="Gang game elements" alt="Realistic 3D view (like a photo) of all the elements of the Gang game arranged on a table. In the foreground, 4 cards are arranged in a disorganized fashion, as if they had simply been thrown onto the table. They are, from left to right, the multicolored 1, the dragon, the yellow phoenix and the green phoenix. A little further on, a pile of face-down cards can be seen, with the highest card at an angle, as well as the game's box, depicting a manga-style Chinese dragon, whose long red body runs around all sides of the box. Finally, in the background, a sheet of paper with the rules of the game printed on it sits on the table." />
|
||||
<p>In February, <a target="_blank" href="https://mastodon.online/@ailyaut/114038751290601262">I posted on Mastodon</a> about <span class="bold">Gang</span>, a complete redesign of the famous card game "Gang of Four" in my own style. </p>
|
||||
<p>It started as a gift idea for my family and friends, and as for a lot of gift ideas, I took it very seriously and spent 2 month redesigning the game from the ground up and finding suppliers who could print the project as professionally as possible. By the way, finding a good supplier was the hard part, so if you have a project that involves printing cards and you're based in Europe, I highly recommend <a href="https://jeuxdecartes.printeurope.fr/calculateur">Printeurope</a>. They're based in France, and they were very nice and easy to reach by phone. The quality was very good, and the only things I could complain about were my own mistakes. </p>
|
||||
<p>My family and friends loved it, and I am very proud of the result. However, I do not own the rights to the original game, so there's nothing I can do with it except... share it!</p>
|
||||
<p>I am releasing today all the necessary PDF files so you can print the game at home. I hope you enjoy it as much as my family and friends do!
|
||||
You can, of course, print it professionally with Printeurope, as I mentioned, or with any other service you see fit. <br>
|
||||
Just make sure <span class="bold">NOT</span> to sell it or use it for anything AI-related.<br>
|
||||
It's not an obligation, but I'd love it if you sent me an email or a message on Mastodon to tell me if you're enjoying Gang!</p>
|
||||
<p>In any case, please check the project page below to access all the files.</p>
|
||||
<!-- <a href="../projects/gang/index.html" class="button_active" style="width: fit-content">Project page</a> -->
|
||||
<div class="column" style="max-width: 376px; gap: 1em">
|
||||
<a href="../projects/gang/index.html" class="card" style="text-decoration: none;">
|
||||
<img src="../projects/gang/thumb.png" alt="Gang" title="Gang" class="card_image"/>
|
||||
<div class="box">
|
||||
<div class="column" style="width: 100%;">
|
||||
<h3 class="card_title">Gang</h3>
|
||||
<p class="card_text">
|
||||
A complete redesign of the famous card game "Gang of Four" in my own style, with a focus on being clean and accessible to colorblind people.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<p><br>:^)</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>
|
||||
@@ -42,7 +42,7 @@ Next time, I'd like to work on the following points:
|
||||
|
||||
- design of the text bubbles when you send a file and when you send your location
|
||||
- design of the drop-down menus that appear when you use the various buttons on the chat screen
|
||||
- design of the menu that appears when a chat bubble is long-pressed/li>
|
||||
- design of the menu that appears when a chat bubble is long-pressed
|
||||
- design of message bubbles with errors (message not encrypted, sending error, etc.)
|
||||
|
||||
If you have any remarks, suggestions, solutions or comments, I'd be delighted to hear from you by replying under the [Mastodon post](https://mastodon.online/@ailyaut/112587618079138456), or by sending them to me by email or XMPP!
|
||||
|
||||
20
blog/md/20250601+a_new_dawn.md
Normal file
20
blog/md/20250601+a_new_dawn.md
Normal file
@@ -0,0 +1,20 @@
|
||||
title = A new dawn
|
||||
timestamp = 1748773800
|
||||
preview = If you’ve been following this blog since its beginnings in 2024, back when the URL was still ailyaut.robotfumeur.fr, then you’ve probably noticed that it hasn’t been updated much in the last year.
|
||||
thumb = blog/media/2025/website_update.png
|
||||
+++
|
||||
|
||||
If you've been following this blog since its beginnings in 2024, back when the URL was still [ailyaut.robotfumeur.fr](https://ailyaut.robotfumeur.fr), then you've probably noticed that it hasn't been updated much in the last year.
|
||||
My intent with this blog was to post at least once a month on Moxxy, but it took so much time to write the blog posts in HTML that I felt it just wasn't worth it.
|
||||
|
||||
So I switched to WordPress.
|
||||
|
||||
Just kidding, I wrote a big Python script that allows me to write the blog posts in Markdown, and then translates everything to HTML and updates all the necessary pages as well as the RSS feed. It might be overcomplicated, and it might be horrendous code, but it works.
|
||||
|
||||
I am therefore starting this blog again, with a new, cleaner (and cooler) URL : [ailyaut.com](https://ailyaut.com).
|
||||
I cleaned up the HTML and CSS, changed the colors and fonts (Space Grotesk is a cool font but it just feels overused now), and compressed all images so much that they are now blurry on mobile, all to achieve a <100KB homepage. Which is not that small but I'm an artist so I need images everywhere.
|
||||
Oh, and I broke all the previous links. Sorry!
|
||||
|
||||
I'm going to start sharing a lot of my works on this website, including updates on the Moxxy UI of course, and personal projects such as... a ready-to-print card game that I illustrated?? That's right, so stay tuned.
|
||||
|
||||
:^)
|
||||
21
blog/md/20251123+gang_release.md
Normal file
21
blog/md/20251123+gang_release.md
Normal file
@@ -0,0 +1,21 @@
|
||||
title = Release of Gang
|
||||
timestamp = 1763915400
|
||||
preview = 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.
|
||||
thumb = projects/gang/thumb.png
|
||||
+++
|
||||
|
||||
_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._
|
||||
|
||||
In February, I posted on Mastodon about **Gang**, a complete redesign of the famous card game "Gang of Four" in my own style.
|
||||
|
||||
It started as a gift idea for my family and friends, and as for a lot of gift ideas, I took it very seriously and spent 2 month redesigning the game from the ground up and finding suppliers who could print the project as professionally as possible. By the way, finding a good supplier was the hard part, so if you have a project that involves printing cards and you're based in Europe, I highly recommend [Printeurope](https://jeuxdecartes.printeurope.fr/calculateur). They're based in France, and they were very nice and easy to reach by phone. The quality was very good, and the only things I could complain about were my own mistakes.
|
||||
|
||||
My family and friends loved it, and I am very proud of the result. However, I do not own the rights to the original game, so there's nothing I can do with it except... share it!
|
||||
|
||||
I am releasing today all the necessary PDF files so you can print the game at home. I hope you enjoy it as much as my family and friends do!
|
||||
You can, of course, print it professionally with Printeurope, as I mentioned, or with any other service you see fit.
|
||||
Just make sure NOT to sell it or use it for anything AI-related. It's not an obligation, but I'd love it if you sent me an email or a message on Mastodon to tell me if you're enjoying Gang!
|
||||
|
||||
In any case, please check the project page below to access all the files.
|
||||
|
||||
:^)
|
||||
BIN
blog/media/2025/website_update.png
Normal file
BIN
blog/media/2025/website_update.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
16
gallery.html
16
gallery.html
@@ -4,17 +4,17 @@
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Gallery – Ailyaut's blog</title>
|
||||
<title>3D / Gallery – Ailyaut's blog</title>
|
||||
<link rel="icon" type="image/png" href="media/icons/favicon-16x16.png" sizes="16x16">
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<meta property="og:title" content="Gallery – Ailyaut's blog" />
|
||||
<meta property="og:title" content="3D / Gallery – Ailyaut's blog" />
|
||||
<meta property="og:type" content="blog" />
|
||||
<meta property="og:url" content="https://ailyaut.com/" />
|
||||
<meta property="og:image" content="https://ailyaut.com/media/preview.png" />
|
||||
<meta property="og:description" content="Hi! I'm Ailyaut, a 24-year-old everything-designer with a particular interest in open source and card games." />
|
||||
<meta property="og: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" />
|
||||
</head>
|
||||
|
||||
@@ -37,17 +37,15 @@
|
||||
<div class="box">
|
||||
<div class="column" style="width: 100%;">
|
||||
<h1>Gallery</h1>
|
||||
<p class="light">This page is still under construction.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacer" style="--size: 1em;"></div>
|
||||
<div class="box">
|
||||
<div class="row" style="gap: 0.75em;">
|
||||
<div class="button_active">3D</div>
|
||||
<div class="button">Illustration</div>
|
||||
<div class="button">Graphic design</div>
|
||||
<div class="button">UI & webdesign</div>
|
||||
<div class="button">Animation</div>
|
||||
<a href="gallery.html" class="button_active">3D</a>
|
||||
<a href="gallery/illustration.html" class="button">Illustration</a>
|
||||
<a href="gallery/animation.html" class="button">Animation</a>
|
||||
<a href="gallery/music.html" class="button">Music</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacer" style="--size: 2em;"></div>
|
||||
|
||||
105
gallery/animation.html
Normal file
105
gallery/animation.html
Normal file
@@ -0,0 +1,105 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Animation / Gallery – Ailyaut's blog</title>
|
||||
<link rel="icon" type="image/png" href="../media/icons/favicon-16x16.png" sizes="16x16">
|
||||
<link rel="stylesheet" href="../style.css" />
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<meta property="og:title" content="Animation / Gallery – Ailyaut's blog" />
|
||||
<meta property="og:type" content="blog" />
|
||||
<meta property="og:url" content="https://ailyaut.com/" />
|
||||
<meta property="og:image" content="https://ailyaut.com/media/preview.png" />
|
||||
<meta property="og:description" content="Hi! I'm Ailyaut, a 25-year-old everything-designer with a particular interest in open source and card games." />
|
||||
<meta property="og:locale" content="en_US" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div id="header_box">
|
||||
<div>
|
||||
<a href="../index.html" id="header_title">Ailyaut's blog</a>
|
||||
</div>
|
||||
<nav id="header_nav">
|
||||
<a href="../blog.html" class="nav_button">Blog</a>
|
||||
<a href="../gallery.html" class="nav_button_active">Gallery</a>
|
||||
<a href="../projects.html" class="nav_button">Projects</a>
|
||||
<a href="../about.html" class="nav_button">About</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="box">
|
||||
<div class="column" style="width: 100%;">
|
||||
<h1>Gallery</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacer" style="--size: 1em;"></div>
|
||||
<div class="box">
|
||||
<div class="row" style="gap: 0.75em;">
|
||||
<a href="../gallery.html" class="button">3D</a>
|
||||
<a href="illustration.html" class="button">Illustration</a>
|
||||
<a href="animation.html" class="button_active">Animation</a>
|
||||
<a href="music.html" class="button">Music</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacer" style="--size: 2em;"></div>
|
||||
<div class="box">
|
||||
<div class="column" style="width: 100%;">
|
||||
<div class="row" style="gap: 1em;">
|
||||
<div class="column" style="--custom_width: 50%">
|
||||
<iframe class="gallery" style="aspect-ratio: 16/9;" 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>
|
||||
</div>
|
||||
<div class="column" style="--custom_width: 50%">
|
||||
<iframe class="gallery" style="aspect-ratio: 16/9;" 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>
|
||||
<div class="row" style="gap: 1em; margin-top: 1em;">
|
||||
<div class="column" style="--custom_width: 50%">
|
||||
<video class="gallery" controls="" autoplay="" muted="" loop=""><source src="animation/bar.mp4" type=video/mp4></video>
|
||||
</div>
|
||||
<div class="column" style="--custom_width: 50%">
|
||||
<video class="gallery" controls="" autoplay="" muted="" loop=""><source src="animation/tententrain.mp4" type=video/mp4></video>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="gap: 1em; margin-top: 1em;">
|
||||
<div class="column" style="--custom_width: 50%">
|
||||
<video class="gallery" controls="" autoplay="" muted="" loop=""><source src="animation/tentensky.mp4" type=video/mp4></video>
|
||||
</div>
|
||||
<div class="column" style="--custom_width: 50%">
|
||||
<video class="gallery" controls="" autoplay="" muted="" loop=""><source src="animation/lettheshowbegin.mp4" type=video/mp4></video>
|
||||
</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>
|
||||
BIN
gallery/animation/bar.mp4
Normal file
BIN
gallery/animation/bar.mp4
Normal file
Binary file not shown.
BIN
gallery/animation/lettheshowbegin.mp4
Normal file
BIN
gallery/animation/lettheshowbegin.mp4
Normal file
Binary file not shown.
BIN
gallery/animation/tentensky.mp4
Normal file
BIN
gallery/animation/tentensky.mp4
Normal file
Binary file not shown.
BIN
gallery/animation/tententrain.mp4
Normal file
BIN
gallery/animation/tententrain.mp4
Normal file
Binary file not shown.
106
gallery/illustration.html
Normal file
106
gallery/illustration.html
Normal file
@@ -0,0 +1,106 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Illustration / Gallery – Ailyaut's blog</title>
|
||||
<link rel="icon" type="image/png" href="../media/icons/favicon-16x16.png" sizes="16x16">
|
||||
<link rel="stylesheet" href="../style.css" />
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<meta property="og:title" content="Illustration / Gallery – Ailyaut's blog" />
|
||||
<meta property="og:type" content="blog" />
|
||||
<meta property="og:url" content="https://ailyaut.com/" />
|
||||
<meta property="og:image" content="https://ailyaut.com/media/preview.png" />
|
||||
<meta property="og:description" content="Hi! I'm Ailyaut, a 25-year-old everything-designer with a particular interest in open source and card games." />
|
||||
<meta property="og:locale" content="en_US" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div id="header_box">
|
||||
<div>
|
||||
<a href="../index.html" id="header_title">Ailyaut's blog</a>
|
||||
</div>
|
||||
<nav id="header_nav">
|
||||
<a href="../blog.html" class="nav_button">Blog</a>
|
||||
<a href="../gallery.html" class="nav_button_active">Gallery</a>
|
||||
<a href="../projects.html" class="nav_button">Projects</a>
|
||||
<a href="../about.html" class="nav_button">About</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="box">
|
||||
<div class="column" style="width: 100%;">
|
||||
<h1>Gallery</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacer" style="--size: 1em;"></div>
|
||||
<div class="box">
|
||||
<div class="row" style="gap: 0.75em;">
|
||||
<a href="../gallery.html" class="button">3D</a>
|
||||
<a href="illustration.html" class="button_active">Illustration</a>
|
||||
<a href="animation.html" class="button">Animation</a>
|
||||
<a href="music.html" class="button">Music</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacer" style="--size: 2em;"></div>
|
||||
<div class="box">
|
||||
<div class="column" style="width: 100%;">
|
||||
<div class="row" style="gap: 1em;">
|
||||
<div class="column" style="--custom_width: 25%">
|
||||
<img class="gallery" src="illustration/mars.png" title="Mars" />
|
||||
</div>
|
||||
<div class="column" style="--custom_width: 25%">
|
||||
<img class="gallery" src="illustration/jupiter.png" title="Jupiter" />
|
||||
</div>
|
||||
<div class="column" style="--custom_width: 25%">
|
||||
<img class="gallery" src="illustration/uranus.png" title="Uranus" />
|
||||
</div>
|
||||
<div class="column" style="--custom_width: 25%">
|
||||
<img class="gallery" src="illustration/iso.png" title="Iso" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="gap: 1em; margin-top: 1em;">
|
||||
<div class="column" style="--custom_width: 28.5%">
|
||||
<img class="gallery" src="illustration/canevas_2025.png" title="Canevas" />
|
||||
</div>
|
||||
<div class="column" style="--custom_width: 20.1%">
|
||||
<a target="_blank" href="illustration/leopard.jpg"><img class="gallery" src="illustration/thumb/leopard.png" title="BD Leopard" /></a>
|
||||
</div>
|
||||
<div class="column" style="--custom_width: 50.5%">
|
||||
<a target="_blank" href="illustration/thunderblight.png"><img class="gallery" src="illustration/thumb/thunderblight.png" title="Bassist Thunderblight Ganon" /></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>
|
||||
BIN
gallery/illustration/canevas_2025.png
Normal file
BIN
gallery/illustration/canevas_2025.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
gallery/illustration/iso.png
Normal file
BIN
gallery/illustration/iso.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
gallery/illustration/jupiter.png
Normal file
BIN
gallery/illustration/jupiter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
gallery/illustration/leopard.jpg
Normal file
BIN
gallery/illustration/leopard.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 859 KiB |
BIN
gallery/illustration/mars.png
Normal file
BIN
gallery/illustration/mars.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
gallery/illustration/thumb/leopard.png
Normal file
BIN
gallery/illustration/thumb/leopard.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
BIN
gallery/illustration/thumb/thunderblight.png
Normal file
BIN
gallery/illustration/thumb/thunderblight.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 292 KiB |
BIN
gallery/illustration/thunderblight.png
Normal file
BIN
gallery/illustration/thunderblight.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 MiB |
BIN
gallery/illustration/uranus.png
Normal file
BIN
gallery/illustration/uranus.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
102
gallery/music.html
Normal file
102
gallery/music.html
Normal file
@@ -0,0 +1,102 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Music / Gallery – Ailyaut's blog</title>
|
||||
<link rel="icon" type="image/png" href="../media/icons/favicon-16x16.png" sizes="16x16">
|
||||
<link rel="stylesheet" href="../style.css" />
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<meta property="og:title" content="Music / Gallery – Ailyaut's blog" />
|
||||
<meta property="og:type" content="blog" />
|
||||
<meta property="og:url" content="https://ailyaut.com/" />
|
||||
<meta property="og:image" content="https://ailyaut.com/media/preview.png" />
|
||||
<meta property="og:description" content="Hi! I'm Ailyaut, a 25-year-old everything-designer with a particular interest in open source and card games." />
|
||||
<meta property="og:locale" content="en_US" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div id="header_box">
|
||||
<div>
|
||||
<a href="../index.html" id="header_title">Ailyaut's blog</a>
|
||||
</div>
|
||||
<nav id="header_nav">
|
||||
<a href="../blog.html" class="nav_button">Blog</a>
|
||||
<a href="../gallery.html" class="nav_button_active">Gallery</a>
|
||||
<a href="../projects.html" class="nav_button">Projects</a>
|
||||
<a href="../about.html" class="nav_button">About</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="box">
|
||||
<div class="column" style="width: 100%;">
|
||||
<h1>Gallery</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacer" style="--size: 1em;"></div>
|
||||
<div class="box">
|
||||
<div class="row" style="gap: 0.75em;">
|
||||
<a href="../gallery.html" class="button">3D</a>
|
||||
<a href="illustration.html" class="button">Illustration</a>
|
||||
<a href="animation.html" class="button">Animation</a>
|
||||
<a href="music.html" class="button_active">Music</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacer" style="--size: 2em;"></div>
|
||||
<div class="box">
|
||||
<div class="column" style="width: 100%;">
|
||||
<div class="row" style="gap: 1em;">
|
||||
<div class="column" style="--custom_width: 33%">
|
||||
<iframe style="border: 0; min-width: 350px; min-height: 550px;" src="https://bandcamp.com/EmbeddedPlayer/track=696183895/size=large/bgcol=ffffff/linkcol=7137dc/tracklist=false/transparent=true/" seamless><a href="https://ailyaut.bandcamp.com/track/camel-by-camel-metal-cover-by-ailyaut-2">Camel by Camel (Metal cover by Ailyaut) by Ailyaut</a></iframe>
|
||||
</div>
|
||||
<div class="column" style="--custom_width: 33%">
|
||||
<iframe style="border: 0; min-width: 350px; min-height: 550px;" src="https://bandcamp.com/EmbeddedPlayer/track=2935215900/size=large/bgcol=ffffff/linkcol=7137dc/tracklist=false/transparent=true/" seamless><a href="https://ailyaut.bandcamp.com/track/oummm-le-dauphin-blanc-metal-cover-by-ailyaut">Oummm le dauphin blanc (Metal cover by Ailyaut) by Ailyaut</a></iframe>
|
||||
</div>
|
||||
<div class="column" style="--custom_width: 33%">
|
||||
<iframe style="border: 0; min-width: 350px; min-height: 550px;" src="https://bandcamp.com/EmbeddedPlayer/track=3370488760/size=large/bgcol=ffffff/linkcol=7137dc/tracklist=false/transparent=true/" seamless><a href="https://ailyaut.bandcamp.com/track/thunderblight-ganon-metal-cover-by-ailyaut">Thunderblight Ganon (Metal cover by Ailyaut) by Ailyaut</a></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="gap: 1em;">
|
||||
<div class="column" style="--custom_width: 33%">
|
||||
<iframe style="border: 0; min-width: 350px; min-height: 550px;" src="https://bandcamp.com/EmbeddedPlayer/track=1371748336/size=large/bgcol=ffffff/linkcol=7137dc/tracklist=false/transparent=true/" seamless><a href="https://ailyaut.bandcamp.com/track/les-m-nestrels-percussionnistes-metal-cover-by-ailyaut">Les ménestrels percussionnistes (metal cover by Ailyaut) by Ailyaut</a></iframe>
|
||||
</div>
|
||||
<div class="column" style="--custom_width: 33%">
|
||||
<iframe style="border: 0; min-width: 350px; min-height: 550px;" src="https://bandcamp.com/EmbeddedPlayer/track=2098400706/size=large/bgcol=ffffff/linkcol=7137dc/tracklist=false/transparent=true/" seamless><a href="https://ailyaut.bandcamp.com/track/miki-matsubara-stay-with-me-splatoon-cover">Miki Matsubara - Stay With Me (Splatoon cover) by Ailyaut</a></iframe>
|
||||
</div>
|
||||
<div class="column" style="--custom_width: 33%">
|
||||
</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>
|
||||
82
index.html
82
index.html
@@ -14,7 +14,7 @@
|
||||
<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: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>
|
||||
@@ -46,13 +46,13 @@
|
||||
</div>
|
||||
<div class="spacer" style="--size: 2em"></div>
|
||||
<div class="column" style="--custom_width:75%">
|
||||
<h1>Heyo!</h1>
|
||||
<p>I'm Ailyaut, a 24-year-old everything designer with a particular interest in open source and card games.<br>
|
||||
I have studied 3D animation and now work as a UI & product designer. I code sometimes.
|
||||
<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 24 ans qui s'intéresse particulièrement à l'open source et aux jeux de carte.
|
||||
J'ai étudié l'animation 3D et je travaille actuellement comme designer UI & produit. Je code même, parfois.
|
||||
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>
|
||||
@@ -64,7 +64,7 @@
|
||||
<div class="row align_vertical" style="justify-content: space-between; height: min-content;">
|
||||
<div class="row align_vertical" style="gap: 0.75em;">
|
||||
<h2 style="margin-bottom: 0; margin-top: 0;">Featured project</h2>
|
||||
<img class="icon" src="media/icons/verified.png">
|
||||
<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>
|
||||
@@ -98,6 +98,40 @@
|
||||
<div class="row" style="gap: 2em">
|
||||
<!-- blog -->
|
||||
<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 class="column" style="--custom_width: 33%; gap: 1em">
|
||||
<a href="blog/a_new_dawn.html" class="card" style="text-decoration: none;">
|
||||
<img src="blog/media/2025/website_update.png
|
||||
" alt="A new dawn
|
||||
" title="A new dawn
|
||||
" class="card_image"/>
|
||||
<div class="box">
|
||||
<div class="column" style="width: 100%;">
|
||||
<h3 class="card_title">A new dawn
|
||||
</h3>
|
||||
<p class="card_text">
|
||||
If you’ve been following this blog since its beginnings in 2024, back when the URL was still ailyaut.robotfumeur.fr, then you’ve probably noticed that it hasn’t been updated much in the last year.
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div><div class="column" style="--custom_width: 33%; gap: 1em">
|
||||
<a href="blog/202405_moxxy_progress_report.html" class="card" style="text-decoration: none;">
|
||||
<img src="blog/media/2024/20240407_moxxy_progress.png
|
||||
" alt="Moxxy UI: May 2024 progress report
|
||||
@@ -110,40 +144,6 @@
|
||||
<p class="card_text">
|
||||
Let's start with a little announcement: from now on, I'll be publishing my .penpot file in the moxxy/design repository on Codeberg on a monthly basis, so that everyone can tinker with the interface to their heart's content! I should have done it from the start, but better late than never!
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div><div class="column" style="--custom_width: 33%; gap: 1em">
|
||||
<a href="blog/202404_moxxy_progress_report.html" class="card" style="text-decoration: none;">
|
||||
<img src="blog/media/2024/20240407_moxxy_progress.png
|
||||
" alt="Moxxy UI: April 2024 progress report
|
||||
" title="Moxxy UI: April 2024 progress report
|
||||
" class="card_image"/>
|
||||
<div class="box">
|
||||
<div class="column" style="width: 100%;">
|
||||
<h3 class="card_title">Moxxy UI: April 2024 progress report
|
||||
</h3>
|
||||
<p class="card_text">
|
||||
April has been a busy month, partly due to a Windows Defender Trojan alert that gave me a good excuse to wipe my entire disk and switch to Linux. So this post will be short and without any major news.
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div><div class="column" style="--custom_width: 33%; gap: 1em">
|
||||
<a href="blog/202403_moxxy_progress_report.html" class="card" style="text-decoration: none;">
|
||||
<img src="blog/media/2024/20240407_moxxy_progress.png
|
||||
" alt="Moxxy UI: March 2024 progress report
|
||||
" title="Moxxy UI: March 2024 progress report
|
||||
" class="card_image"/>
|
||||
<div class="box">
|
||||
<div class="column" style="width: 100%;">
|
||||
<h3 class="card_title">Moxxy UI: March 2024 progress report
|
||||
</h3>
|
||||
<p class="card_text">
|
||||
Although I haven't communicated much about it, I've been working on a new interface for Moxxy since October 2023. I created this blog mainly to present my work on this open source project.
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 298 B |
1
media/icons/verified.svg
Normal file
1
media/icons/verified.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="m344-60-76-128-144-32 14-148-98-112 98-112-14-148 144-32 76-128 136 58 136-58 76 128 144 32-14 148 98 112-98 112 14 148-144 32-76 128-136-58-136 58Zm94-278 226-226-56-58-170 170-86-84-56 56 142 142Z"/></svg>
|
||||
|
After Width: | Height: | Size: 323 B |
@@ -14,7 +14,7 @@
|
||||
<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: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" />
|
||||
</head>
|
||||
|
||||
@@ -34,40 +34,32 @@
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="box">
|
||||
<h1>Projects</h1>
|
||||
</div>
|
||||
<!-- Tags -->
|
||||
<div class="spacer" style="--size: 1em;"></div>
|
||||
<div class="box">
|
||||
<div class="row" style="gap: 0.75em;">
|
||||
<a href="#animation" class="button">Animation</a>
|
||||
<a href="#ui" class="button">UI & webdesign</a>
|
||||
<a href="#games" class="button">Games</a>
|
||||
<a href="#apps" class="button">Apps & software</a>
|
||||
<a href="#music" class="button">Music</a>
|
||||
<div 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: 2em;"></div>
|
||||
<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/patatotapopata/index.html" class="card" style="text-decoration: none;">
|
||||
<img src="projects/patatotapopata/thumb_makingof.png" alt="The Making Of Patatotapopata" title="The Making Of Patatotapopata" class="card_image"/>
|
||||
<div class="box">
|
||||
<div class="column" style="width: 100%;">
|
||||
<h3 class="card_title" style="-webkit-line-clamp: 1; line-clamp: 1;">The Making Of Patatotapo pata</h3>
|
||||
<p class="card_text">
|
||||
All the steps of the making of Patatotapopata from the storyboard to the final cut.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div> -->
|
||||
<div class="column" style="--custom_width: 33%; gap: 1em">
|
||||
<a href="projects/rickroll/index.html" class="card" style="text-decoration: none;">
|
||||
<img src="projects/rickroll/thumb.png" alt="Never Gonna Give You Up (Splatoon version)" title="Never Gonna Give You Up (Splatoon version)" class="card_image"/>
|
||||
@@ -86,7 +78,7 @@
|
||||
<img src="projects/kaya/thumb.png" alt="Kaya sur la banquise" title="Kaya sur la banquise" class="card_image"/>
|
||||
<div class="box">
|
||||
<div class="column" style="width: 100%;">
|
||||
<h3 class="card_title">Kaya sur la banquise</h3>
|
||||
<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>
|
||||
@@ -99,7 +91,7 @@
|
||||
<img src="projects/patatotapopata/thumb.png" alt="Patatotapopata" title="Patatotapopata" class="card_image"/>
|
||||
<div class="box">
|
||||
<div class="column" style="width: 100%;">
|
||||
<h3 class="card_title">Patatotapopata</h3>
|
||||
<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>
|
||||
@@ -115,14 +107,28 @@
|
||||
<div class="box">
|
||||
<div class="column" style="width: 100%;">
|
||||
<div class="spacer" style="--size: 2em;"></div>
|
||||
<h2 id="ui">UI & webdesign</h2>
|
||||
<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</h3>
|
||||
<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>
|
||||
@@ -143,20 +149,7 @@
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<!-- <div class="column" style="--custom_width: 33%; gap: 1em">
|
||||
<a href="projects/yeepme_download/index.html" class="card" style="text-decoration: none;">
|
||||
<img src="projects/yeepme_download/thumb.png" alt="YEEP.ME Download Center" title="YEEP.ME Download Center" class="card_image"/>
|
||||
<div class="box">
|
||||
<div class="column" style="width: 100%;">
|
||||
<h3 class="card_title">Brand Download Center</h3>
|
||||
<p class="card_text">
|
||||
Redesign and simplified management for a website listing product manuals and documents.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div> -->
|
||||
<div class="column" style="--custom_width: 33%; gap: 1em"></div>
|
||||
<!-- <div class="column" style="--custom_width: 33%; gap: 1em"></div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -172,7 +165,7 @@
|
||||
<img src="projects/gang/thumb.png" alt="Gang" title="Gang" class="card_image"/>
|
||||
<div class="box">
|
||||
<div class="column" style="width: 100%;">
|
||||
<h3 class="card_title">Gang</h3>
|
||||
<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>
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<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: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" />
|
||||
</head>
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<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: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" />
|
||||
</head>
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<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: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" />
|
||||
</head>
|
||||
|
||||
@@ -39,12 +39,8 @@
|
||||
<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>
|
||||
<img src="media/gang_scene.png" style="margin-bottom: 2em; border-radius: 1em;" title="Gang game elements" alt="Realistic 3D view (like a photo) of all the elements of the Gang game arranged on a table. In the foreground, 4 cards are arranged in a disorganized fashion, as if they had simply been thrown onto the table. They are, from left to right, the multicolored 1, the dragon, the yellow phoenix and the green phoenix. A little further on, a pile of face-down cards can be seen, with the highest card at an angle, as well as the game's box, depicting a manga-style Chinese dragon, whose long red body runs around all sides of the box. Finally, in the background, a sheet of paper with the rules of the game printed on it sits on the table." />
|
||||
<p>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;">
|
||||
@@ -57,10 +53,18 @@
|
||||
<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_EN.pdf" class="button" style="gap: 0.5em; width: fit-content; margin-bottom: 0.5em;">
|
||||
<img class="icon" src="../../media/icons/download.svg" />
|
||||
Game rules (English)<span class="light">PDF · 800KB</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_EN.pdf" class="button" style="gap: 0.5em; width: fit-content; margin-bottom: 0.5em;">
|
||||
<img class="icon" src="../../media/icons/download.svg" />
|
||||
Score sheets (English)<span class="light">PDF · 200KB</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>
|
||||
|
||||
BIN
projects/gang/media/7_boxes.png
Normal file
BIN
projects/gang/media/7_boxes.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
BIN
projects/gang/media/box_3d.png
Normal file
BIN
projects/gang/media/box_3d.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
BIN
projects/gang/media/gang_rules_web_EN.pdf
Normal file
BIN
projects/gang/media/gang_rules_web_EN.pdf
Normal file
Binary file not shown.
BIN
projects/gang/media/gang_scene.png
Normal file
BIN
projects/gang/media/gang_scene.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 598 KiB |
BIN
projects/gang/media/gang_score_sheet_EN.pdf
Normal file
BIN
projects/gang/media/gang_score_sheet_EN.pdf
Normal file
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 456 KiB After Width: | Height: | Size: 118 KiB |
@@ -14,7 +14,7 @@
|
||||
<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: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" />
|
||||
</head>
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<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: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" />
|
||||
</head>
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<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: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" />
|
||||
</head>
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<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: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" />
|
||||
</head>
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<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: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" />
|
||||
</head>
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<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: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" />
|
||||
</head>
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<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: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" />
|
||||
</head>
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<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: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" />
|
||||
</head>
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<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: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" />
|
||||
</head>
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<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: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" />
|
||||
</head>
|
||||
|
||||
|
||||
218
projects/y_download/index.html
Normal file
218
projects/y_download/index.html
Normal file
@@ -0,0 +1,218 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>YEEP.ME Download Center – 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="YEEP.ME Download Center – 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" />
|
||||
</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">
|
||||
<div class="column">
|
||||
<p class="bold" style="color: var(--accent);">Case study</p>
|
||||
<h1>Redesigning the yeep.me Download Center</h1>
|
||||
<h3 style="margin-top: 0; color: var(--accent);">And making it easier to use and maintain.</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin: 2em 0 2.5em 0; max-width: 100%; overflow: hidden;">
|
||||
<img style="min-width: 100%; max-width: 149%;" src="media/banner.png">
|
||||
</div>
|
||||
|
||||
<div class="box" style="justify-content: space-between; gap: 2em;">
|
||||
<div class="column" style="--custom_width: 60%;">
|
||||
<h2 style="margin-top: 0;">Overview</h2>
|
||||
<p>As a Product & UI designer at Cibox, I undertook the redesign of the YEEP.ME Download Center website to make it easier for customers to find product documentation, to facilitate site maintenance, and to reduce the site's carbon footprint.</p>
|
||||
<div class="row" style="width: 100%;">
|
||||
<div class="column" style="--custom_width: 50%; margin-right: 2em;">
|
||||
<h3>Challenges</h3>
|
||||
<ul style="padding-left: 1em;">
|
||||
<li>Long product list and lack of search feature made the website hard to use</li>
|
||||
<li>Page by page approach made the website hard to maintain</li>
|
||||
<li>WordPress was deemed too heavy on the server, and the page had a high carbon footprint</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="column" style="--custom_width: 50%;">
|
||||
<h3>Solutions</h3>
|
||||
<ul style="padding-left: 1em;">
|
||||
<li>Introduced search & filter features, modernized UI</li>
|
||||
<li>Built an automated updating system to facilitate the maintenance</li>
|
||||
<li>Remade the website using only HTML, CSS and a pinch of JavaScript</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Key results</h3>
|
||||
<div class="row" style="width: 100%; gap: 3em;">
|
||||
<div class="column" style="width: min-content;">
|
||||
<h1 style="font-size: 3em; margin-bottom: 0;">-58%</h1>
|
||||
<p class="light" style="text-align: center;">carbon emissions</p>
|
||||
</div>
|
||||
<div class="column" style="width: min-content;">
|
||||
<h1 style="font-size: 3em; margin-bottom: 0;">50%</h1>
|
||||
<p class="light" style="text-align: center;">faster search</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="--custom_width: 30%;">
|
||||
<!-- <img style="border-radius: 1em;" src="thumb.png"/> -->
|
||||
<h3 style="margin-bottom: 0.5em; margin-top: 0;">Client</h3>
|
||||
<p style="margin-bottom: 0;">CIBOX INTER@CTIVE</p>
|
||||
<h3 style="margin-bottom: 0.5em;">Role</h3>
|
||||
<p style="margin-bottom: 0;">UI/UX Design, Visual Design, Programming, Deployment testing.</p>
|
||||
<h3>Tools</h3>
|
||||
<p>HTML, CSS, JavaScript, Python, JSON, Git</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="align_horizontal" style="background-color: var(--surface); width: 100%; padding: 2.5em 0 2em 0; margin-top: 2em;">
|
||||
<div class="box" style="justify-content: space-between; gap: 2em;">
|
||||
<div class="column" style="--custom_width: 60%;">
|
||||
<p class="bold" style="color: var(--accent); margin-bottom: 0;">BACKGROUND</p>
|
||||
<h2 style="margin-top: 0.25em;">What is yeep.me Download Center?</h2>
|
||||
<p>YEEP.ME is a brand of CIBOX INTER@CTIVE, an e-bike and e-scooter manufacturer.</p>
|
||||
<p>The <a target="_blank" href="https://download.yeep.me">YEEP.ME Download Center</a> is a website where YEEP.ME customers can find the documentation for their products, as well as confortmity certificates and warranty conditions.<br>
|
||||
It needs to be updated either when a new product is released or when a correction needs to be made to a document.
|
||||
</p>
|
||||
|
||||
<p class="bold" style="color: var(--accent); margin-top: 2em; margin-bottom: 0;">PROBLEMS</p>
|
||||
<h2 style="margin-top: 0.25em;">An endless product list</h2>
|
||||
<p>The website featured a landing page with a 3-column list of all the products of the brand that ever existed. The only way to search for a product was to scroll through the list and find it by name or picture. On mobile, the list became a single, long column, requiring even more scrolling.<br>
|
||||
The product pages featured a large table that allowed users to search the documentation in multiple languages. If there were more than three types of documents, the table had to be scrolled from left to right, even on desktop. Needless to say, the mobile experience was worse.
|
||||
</p>
|
||||
<p>Furthermore, maintaining the website was difficult. When adding a product, a new page had to be created by duplicating an existing one and editing the information. Then, the documentation had to be uploaded, and the PDF links had to be edited individually.
|
||||
Finally, the product had to be added to the list on the homepage, along with a link to the previously created product page. This whole process was long and tedious.</p>
|
||||
<p>Finally, the website was heavy on the server due to its use of WordPress, and its carbon footprint was enormous. <a target="_blank" href="https://digitalbeacon.co/">Beacon</a> graded it an F, with an astonishing 1.101g of carbon emitted per page view.</p>
|
||||
<p class="bold" style="color: var(--accent); margin-top: 2em; margin-bottom: 0;">GOALS</p>
|
||||
<h2 style="margin-top: 0.25em;">Less scrolling, faster everything</h2>
|
||||
<p>1. A faster, cleaner way to search for products, reducing curstomer frustration.</p>
|
||||
<p>2. Simpler maintenance. Adding documentation shouldn't be harder than a drag-and-drop.</p>
|
||||
<p>3. Lighter website = less carbon emissions and better performances.</p>
|
||||
</div>
|
||||
<div class="column" style="--custom_width: 30%; gap: 1em;">
|
||||
<img style="border-radius: 1em; border: 1px var(--outline) solid;" src="media/2024_home.png" />
|
||||
<p class="light" style="text-align: center;">The homepage in 2024, before redesign</p>
|
||||
<img style="border-radius: 1em; border: 1px var(--outline) solid;" src="media/2024_product_page.png" />
|
||||
<p class="light" style="text-align: center;">A product page in 2024, before redesign</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 style="text-align: center; margin: 2em 0 0.25em 0;">The solution</h1>
|
||||
<img style="width: 16em; margin-bottom: 4em;" src="media/wavy.svg">
|
||||
<div class="box" style="justify-content: space-between; gap: 2em;">
|
||||
<div class="column" style="--custom_width: 47.5%; justify-content: center;">
|
||||
<img style="border-radius: 1em; border: 1px var(--outline) solid;" src="media/2025_home.png" />
|
||||
</div>
|
||||
<div class="column" style="--custom_width: 47.5%; gap: 1em;">
|
||||
<h2 style="margin-top: 0;">Less clutter, more features.</h2>
|
||||
<h3 style="margin: 0;">A single line of products.</h3>
|
||||
<p>Product documentation is needed either right after buying a product or when a problem occurs. Since problems are usually unpredictable, the first line showcases the most recent products for quick access, which provides a great first experience for new customers.</p>
|
||||
<h3 style="margin: 0;">Search!</h3>
|
||||
<p>This was an obvious missing feature in the previous design, so I added it! This search box uses JavaScript to display all the products matching the searched character string in real time.</p>
|
||||
<h3 style="margin: 0;">Filters!</h3>
|
||||
<p>Sometimes you don't know the name of your product, so filtering by what you know might be useful. Static filtered pages also come in handy for users with JavaScript-blocking extensions, such as NoScript.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacer" style="--size: 6em"></div>
|
||||
<div class="box reverse" style="justify-content: space-between; gap: 2em;">
|
||||
<div class="column" style="--custom_width: 47.5%; gap: 1em;">
|
||||
<h2 style="margin-top: 0;">Same information, but clearer</h2>
|
||||
<h3 style="margin: 0;">A simple document list</h3>
|
||||
<p>Instead of a large (and mostly empty) table, the documents are now presented as a simple list, with only what's available for shorter scrolling and better readability in general.</p>
|
||||
<h3 style="margin: 0;">Localization</h3>
|
||||
<p>Since the brand sells in multiple countries, the website is now available in English and French, with the option to add more languages later.</p>
|
||||
</div>
|
||||
<div class="column" style="--custom_width: 47.5%; justify-content: center;">
|
||||
<img style="border-radius: 1em; border: 1px var(--outline) solid;" src="media/2025_product_page.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacer" style="--size: 6em"></div>
|
||||
<div class="box" style="justify-content: space-between; gap: 2em;">
|
||||
<div class="column" style="--custom_width: 47.5%; justify-content: center;">
|
||||
<img style="border-radius: 1em; border: 1px var(--outline) solid;" src="media/2025_code.png" />
|
||||
</div>
|
||||
<div class="column" style="--custom_width: 47.5%; gap: 1em;">
|
||||
<h2 style="margin-top: 0;">Custom solution</h2>
|
||||
<h3 style="margin: 0;">A static website generator</h3>
|
||||
<p>Since I had to get rid of WordPress for being too heavy, I went for bare HTML pages. Of course, I had no intention of creating hundreds of HTML pages by hand, so I wrote a Python script that scans all the products in a folder and then generates all the web pages with the correct information.</p>
|
||||
<h3 style="margin: 0;">Drag-and-drop page generation</h3>
|
||||
<p>Since there is no way to know if my future coworkers will have the necessary skills to edit HTML, I made it so that creating and editing a page is now only a matter of dropping files with the correct names in a folder, filling in product info, and pressing a button on a PHP web interface to update the website in a few seconds!</p>
|
||||
<h3 style="margin: 0;">Lighter on the planet!</h3>
|
||||
<p>Switching to HTML with minimal JavaScript halved the homepage size and the associated carbon emissions! The website now uses fewer server resources and is lighter on the planet!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="align_horizontal" style="background-color: var(--accent); width: 100%; padding: 2em 0 4em 0; margin-top: 4em; overflow-x: hidden;">
|
||||
<div class="box">
|
||||
<div class="column" style="width: 100%;">
|
||||
<h2 style="color: black;">Mobile & tablet</h2>
|
||||
<div class="row" style="gap: 1em;">
|
||||
<div class="column" style="--custom_width: 25%;"><img style="border-radius: 1em;" src="media/mobile_home.png" /></div>
|
||||
<div class="column" style="--custom_width: 25%;"><img style="border-radius: 1em;" src="media/mobile_product.png" /></div>
|
||||
<div class="column" style="--custom_width: 25%;"><img style="border-radius: 1em;" src="media/mobile_filter.png" /></div>
|
||||
<div class="column" style="--custom_width: 25%;"><img style="border-radius: 1em;" src="media/tablet_home.png" /></div>
|
||||
<div class="column" style="--custom_width: 25%;"><img style="border-radius: 1em;" src="media/tablet_filter.png" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<div class="column" style="width: 100%; margin-top: 2em;">
|
||||
<h2>Let's get in touch!</h2>
|
||||
<p>Want to collaborate or discuss a project?</p>
|
||||
<a href="../../about.html#contact" class="button" style="width: fit-content;">Contact me</a>
|
||||
</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/y_download/media/2024_home.png
Normal file
BIN
projects/y_download/media/2024_home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
BIN
projects/y_download/media/2024_product_page.png
Normal file
BIN
projects/y_download/media/2024_product_page.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
projects/y_download/media/2025_code.png
Normal file
BIN
projects/y_download/media/2025_code.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
projects/y_download/media/2025_home.png
Normal file
BIN
projects/y_download/media/2025_home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 175 KiB |
BIN
projects/y_download/media/2025_product_page.png
Normal file
BIN
projects/y_download/media/2025_product_page.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
BIN
projects/y_download/media/banner.png
Normal file
BIN
projects/y_download/media/banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 265 KiB |
BIN
projects/y_download/media/mobile_filter.png
Normal file
BIN
projects/y_download/media/mobile_filter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
projects/y_download/media/mobile_home.png
Normal file
BIN
projects/y_download/media/mobile_home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
projects/y_download/media/mobile_product.png
Normal file
BIN
projects/y_download/media/mobile_product.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
projects/y_download/media/tablet_filter.png
Normal file
BIN
projects/y_download/media/tablet_filter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
projects/y_download/media/tablet_home.png
Normal file
BIN
projects/y_download/media/tablet_home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
7
projects/y_download/media/wavy.svg
Normal file
7
projects/y_download/media/wavy.svg
Normal file
@@ -0,0 +1,7 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="14.614mm" height=".88636mm" version="1.1" viewBox="0 0 14.614 .88636" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="translate(-29.312 -61.906)" fill="none" stroke="#9b9bff" stroke-linecap="round" stroke-miterlimit="1e5" stroke-width=".26458">
|
||||
<path d="m36.619 62.349c-0.59788 0.59789-1.0089 0.18684-1.1958 0-0.18684-0.18684-0.59788-0.59788-1.1958 0-0.59788 0.59789-1.0089 0.18684-1.1958 0-0.18684-0.18684-0.59788-0.59788-1.1958 0-0.59788 0.59789-1.0089 0.18684-1.1958 0-0.18684-0.18684-0.59788-0.59788-1.1958 0" style="paint-order:stroke markers fill"/>
|
||||
<path d="m43.793 62.349c-0.59788 0.59789-1.0089 0.18684-1.1958 0-0.18684-0.18684-0.59788-0.59788-1.1958 0-0.59788 0.59789-1.0089 0.18684-1.1958 0-0.18684-0.18684-0.59788-0.59788-1.1958 0-0.59788 0.59789-1.0089 0.18684-1.1958 0-0.18684-0.18684-0.59788-0.59788-1.1958 0" style="paint-order:stroke markers fill"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 932 B |
BIN
projects/y_download/thumb.png
Normal file
BIN
projects/y_download/thumb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
28
rss.xml
28
rss.xml
@@ -11,6 +11,34 @@
|
||||
</image>
|
||||
<atom:link href="https://ailyaut.com/rss.xml" rel="self" type="application/rss+xml" />
|
||||
|
||||
<item>
|
||||
<title>Release of Gang
|
||||
</title>
|
||||
<link>https://ailyaut.com/blog/gang_release.html</link>
|
||||
<description>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.
|
||||
</description>
|
||||
<category>posts</category>
|
||||
|
||||
<guid>https://ailyaut.com/blog/gang_release.html</guid>
|
||||
<dc:creator>Ailyaut</dc:creator>
|
||||
<pubDate>Sun, 23 Nov 2025 17:30:00 +0100</pubDate>
|
||||
<image>https://ailyaut.com/projects/gang/thumb.png
|
||||
</image>
|
||||
</item>
|
||||
<item>
|
||||
<title>A new dawn
|
||||
</title>
|
||||
<link>https://ailyaut.com/blog/a_new_dawn.html</link>
|
||||
<description>If you’ve been following this blog since its beginnings in 2024, back when the URL was still ailyaut.robotfumeur.fr, then you’ve probably noticed that it hasn’t been updated much in the last year.
|
||||
</description>
|
||||
<category>posts</category>
|
||||
|
||||
<guid>https://ailyaut.com/blog/a_new_dawn.html</guid>
|
||||
<dc:creator>Ailyaut</dc:creator>
|
||||
<pubDate>Sun, 01 Jun 2025 12:30:00 +0200</pubDate>
|
||||
<image>https://ailyaut.com/blog/media/2025/website_update.png
|
||||
</image>
|
||||
</item>
|
||||
<item>
|
||||
<title>Moxxy UI: May 2024 progress report
|
||||
</title>
|
||||
|
||||
@@ -1,4 +1 @@
|
||||
cd ../..
|
||||
mv ailyaut.com.zip ailyaut.com_old.zip
|
||||
zip -r ailyaut.com.zip ailyaut.com
|
||||
bash export_ailyaut.com.sh
|
||||
bash ../../export_ailyaut.com.sh
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<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: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>
|
||||
@@ -46,13 +46,13 @@
|
||||
</div>
|
||||
<div class="spacer" style="--size: 2em"></div>
|
||||
<div class="column" style="--custom_width:75%">
|
||||
<h1>Heyo!</h1>
|
||||
<p>I'm Ailyaut, a 24-year-old everything-designer with a particular interest in open source and card games.<br>
|
||||
I have studied 3D animation and now work as a UI & product designer, sometimes programmer.
|
||||
<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 24 ans qui s'intéresse particulièrement à l'open source et aux jeux de carte.
|
||||
J'ai étudié l'animation 3D et je travaille actuellement comme designer UI & produit, et parfois comme programmeur.
|
||||
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>
|
||||
@@ -64,7 +64,7 @@
|
||||
<div class="row align_vertical" style="justify-content: space-between; height: min-content;">
|
||||
<div class="row align_vertical" style="gap: 0.75em;">
|
||||
<h2 style="margin-bottom: 0; margin-top: 0;">Featured project</h2>
|
||||
<img class="icon" src="media/icons/verified.png">
|
||||
<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>
|
||||
|
||||
@@ -119,6 +119,7 @@ a {
|
||||
|
||||
li {
|
||||
padding-left: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.link_title {
|
||||
@@ -164,6 +165,10 @@ hr {
|
||||
padding: 0 1.25em 0 1.25em;
|
||||
}
|
||||
|
||||
.reverse {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -193,6 +198,7 @@ hr {
|
||||
border: none;
|
||||
|
||||
.card_title, .card_text {color: black; transition: all 0.2s ease-out;}
|
||||
.verified {filter: brightness(0);}
|
||||
}
|
||||
|
||||
.spacer {
|
||||
@@ -206,6 +212,10 @@ hr {
|
||||
max-width: 1240px;
|
||||
}
|
||||
|
||||
.reverse {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.column {
|
||||
width: var(--custom_width);
|
||||
}
|
||||
@@ -254,6 +264,16 @@ hr {
|
||||
|
||||
.icon {
|
||||
filter: var(--icons);
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.verified {
|
||||
filter: var(--icons);
|
||||
position: relative;
|
||||
top: 0.15em;
|
||||
overflow: visible;
|
||||
margin-top: -99em;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.icon:hover, .icon:active {
|
||||
@@ -272,6 +292,7 @@ hr {
|
||||
}
|
||||
|
||||
.gallery {
|
||||
background-color: var(--surface);
|
||||
max-width: 100%;
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user