commit e8cf8acbbc1dd58567ade2caa1d1a1fe90ea4344 Author: ailyaut Date: Thu May 15 16:06:00 2025 +0100 first commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..5b010e7 --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +*.kra +blog/md/draft +media/icons/svg +projects/*/*.svg +projects/y_download diff --git a/README.md b/README.md new file mode 100644 index 0000000..dd10bb6 --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +The repository for ailyaut.com diff --git a/about.html b/about.html new file mode 100644 index 0000000..d363068 --- /dev/null +++ b/about.html @@ -0,0 +1,93 @@ + + + + + + + About – Ailyaut's blog + + + + + + + + + + + + + + +

+ Ailyaut's blog +

+ +

About

About me

I'm Ailyaut (pronounced ayo), a 24-year-old designer from France.
+ 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.
+ 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. +

About this website

+ The purpose of this website is to showcase my work.
+ The website is written using only HTML and CSS. There's no JavaScript, no cookies, no tracking.
+ I also try to make it as light as possible in order to not burn our planet too much.
+ 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). +

Copyright

+ 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. +

Contact

Replace the ౷ with an @ (the links are deliberately wrong as well).

+ Email : ailyaut౷robotfumeur.fr
+ XMPP : ailyaut౷robotfumeur.fr
+ Mastodon : @ailyaut@mastodon.online +

+ + +

+ + + diff --git a/blog.html b/blog.html new file mode 100644 index 0000000..56d66cb --- /dev/null +++ b/blog.html @@ -0,0 +1,147 @@ + + + + + + + Blog – Ailyaut's blog + + + + + + + + + + + + + + + +

+ Ailyaut's blog +

+ +

Blog

+ +

All posts

2024

09/06 Moxxy UI: May 2024 progress report +

08/05 Moxxy UI: April 2024 progress report +

07/04 Moxxy UI: March 2024 progress report +

13/03 Hello world! +

+ +

+ + + diff --git a/blog/202403_moxxy_progress_report.html b/blog/202403_moxxy_progress_report.html new file mode 100644 index 0000000..ea62c8b --- /dev/null +++ b/blog/202403_moxxy_progress_report.html @@ -0,0 +1,97 @@ + + + + + + + Moxxy UI: March 2024 progress report + – Ailyaut's blog + + + + + + + + + + + +

+ Ailyaut's blog +

+ +

Moxxy UI: March 2024 progress report +

07/04/2024 · 4 min

Although I haven't communicated much about it, I've been working on a new interface for Moxxy since October 2023. I created this blog mainly to present my work on this open source project.

My aim was to create an XMPP client interface that's more modern and easier to use than the ones that currently exist, because I find it very hard to recommend XMPP to my friends and family as things stand. Maybe I'm the one who's particularly bad at explaining, but the mere mention of "server" scares 9 out of 10 people away.

I chose to contribute to Moxxy because PapaTutuWawa, its developer, suggested it to me, and because Moxxy is written in Flutter, which is a language that is particularly well-suited to the creation of cross-platform applications (and I think that a cross-platform application would help enormously with the spread of XMPP to the general public).

So I started working on Inkscape in 2023, and came up with this.

2023 Moxxy UI in dark mode

2023 Moxxy UI in light mode

Unfortunately, Inkscape wasn't really suited to the task, and I ended up spending more time making documents to explain the designs than creating new ones. On the advice of a more experienced UI designer, I decided to use Penpot. Well, this designer had recommended Figma, but it didn't make sense to work on an open source project with a proprietary tool.

So here's the home screen I created using Penpot in January:

Moxxy UI on Penpot, first try

The result wasn't quite the same. It has to be said that I tried to correct a number of beginner's mistakes I'd made on Inkscape:

Instead of using the Open Sans font, I switched to Roboto (the default font on Android)
Instead of doing my designs in 1080x1920, I switched to 360x640, which is the standard format for mobile interface design.

I've also changed the colour of the interface. Well, I haven't really changed it, I've just changed the theme, because the aim is for users to be able to choose their own theme with Material You!

For my part, I switched to a light theme and green so as not to get too used to the dark theme and to check that the interface works well with several themes.

In February 2024, I got a new job! I'm now a graphic designer, 3D artist and... UI designer! I took advantage of this new role to delve deeper into the Material Design documentation, which is integrated directly into Flutter (if I've understood correctly).

That's when I realised that I'd made some new mistakes, particularly with the choice of colours. So I spent some time changing all my components and replacing them with the default Material Design components. Here's the result:

Moxxy UI in March

Background image by David Revoy - CC-BY 4.0

The interface now seems much cleaner and more rigorous.

I'm just worried that following the guidelines to the letter will make the design 'personality-less'. But that's a concern I'll save for later.

Now, the points I think need more work:

The colours are generally very calm and soothing. That's fine, but I'd like to give the design a bit more energy so that it catches the eye and makes people who don't use it want to use it. In my dreams, I'd like people to look over a user's shoulder when they're using Moxxy and think "Wow, that's a stylish app, I want the same one" (I've got a few ideas for that but I'll keep it for later, let's do something functional first).
The "chat" button doesn't stand out enough for my taste. But the theme colours are a bit limited and it's either that or a flashy green that clashes with the rest.
Although David Revoy's illustration is beautiful, I think the background behind the bubbles in the conversation looks very ugly. I was trying to keep the application 'immersive' by taking up the whole screen, but this is quite the opposite. The wallpaper is completely trapped between two rectangles, and you feel trapped by extension. I haven't found a solution to this yet, as I can't make the header transparent or semi-transparent for legibility reasons.

So that was my first progress report on the Moxxy interface! I plan (and hope) to do one every month, a bit like Thunderbird does with the K9-Mail transformation. It's both a good way of encouraging myself to work regularly and, I hope, drawing attention to this great project.

If you have any remarks, suggestions, solutions or comments, I'd be delighted to hear from you by replying under the Mastodon post, or by sending them to me by email or XMPP!

:^)

+ + \ No newline at end of file diff --git a/blog/202404_moxxy_progress_report.html b/blog/202404_moxxy_progress_report.html new file mode 100644 index 0000000..9429c2b --- /dev/null +++ b/blog/202404_moxxy_progress_report.html @@ -0,0 +1,88 @@ + + + + + + + Moxxy UI: April 2024 progress report + – Ailyaut's blog + + + + + + + + + + + +

+ Ailyaut's blog +

+ +

Moxxy UI: April 2024 progress report +

08/05/2024 · 2 min

April has been a busy month, partly due to a Windows Defender Trojan alert that gave me a good excuse to wipe my entire disk and switch to Linux. So this post will be short and without any major news.

One of the things I wanted to work on was color. The interface seemed dull overall, and the "Chat" button not very visible. +The best way to find out was to simulate real-life conditions! +So I added profile photos (by David Revoy), notifications and icons.

Simulation of the Home screen in use

Illustrations by David Revoy - CC-BY 4.0

All in all, it's not so dull!

I also took the opportunity to add the image preview feature created by PapaTutuWawa.

Closeup on the image preview feature

Illustrations by David Revoy - CC-BY 4.0

Regarding the "Chat" button, long story short, I struggled for hours because of a color palette incorrectly generated by the Material Theme Builder. The primaryContainer token that's recommended for this kind of button (a Floating Action Button) was flashy green, whereas when the palette was generated again with the same seed color, it was duller. I don't know if Google changed the code between the time I generated the first palette and today, but the difference is obvious. +Material palette comparison

Material palette comparison

Left: wrong palette / right: correct palette

Illustrations by David Revoy - CC-BY 4.0

Furthermore, I tried to enter the same seed color as my Android phone's theme in order to understand which tokens Google apps used in which situations, but the colors didn't match.

In short, it's a big mess, but at least I've been able to correct my color palette for the future.

So here's the current state of the main screen in light and dark.

Light and dark themes

Illustrations by David Revoy - CC-BY 4.0

I hope to have more time next month to do more than just change colors. In the meantime, if you have any feedback or suggestions on the UI, don't hesitate to send them to me via XMPP, email or in reply under the Mastodon post !

:^)

+ + \ No newline at end of file diff --git a/blog/202405_moxxy_progress_report.html b/blog/202405_moxxy_progress_report.html new file mode 100644 index 0000000..4abe9ea --- /dev/null +++ b/blog/202405_moxxy_progress_report.html @@ -0,0 +1,99 @@ + + + + + + + Moxxy UI: May 2024 progress report + – Ailyaut's blog + + + + + + + + + + + +

+ Ailyaut's blog +

+ +

Moxxy UI: May 2024 progress report +

09/06/2024 · 4 min

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!

The goals I had set myself in the preceding months were the following:

make the colors more vibrant
make the "Chat" button stand out more (Home screen)
fix the feeling of "imprisonment" that is caused by having a background image in the chat screen

The issue with the dull colors was resolved last month when I realised that the colour palette generated by the Material Theme Builder was wrong. So I corrected it and got back to colors that were brighter and easier to distinguish.

Before/after palette correction

before/after

Illustrations by David Revoy - CC-BY 4.0

This has also enabled the "Chat" button to stand out properly.

I then tackled the chat screen. Here I found that the header and the system and navigation bars enclosed the background in a rigid frame, making it impossible to imagine that the image exists beyond the borders of this frame. +Now, I admit that this is largely a matter of personal taste, but I attach a certain importance to the idea that it should be possible to imagine the interface beyond what the screen of our device lets us see. To put it simply, you could imagine an application as a house, and its various screens as rooms. The interface buttons are like doors, and the transition animations represent moving from one room to another. At the moment, the chat screen gives me the feeling of being in a windowless room, but with a pretty picture hanging on the wall. My aim is to turn this picture into a window. +And to do that, I had to break the frame, i.e. the header and the system and navigation bars of Android.

It wasn't possible to reduce the opacity of these bars or make them completely transparent for reasons of legibility. The solution I've found for the time being is a blur effect in the style of the css filter backdrop-filter: blur() which allows me to emphasise the existence of the background beyond the boundaries of the interface without hindering the reading of the information above it.

Before/after blur filter

Illustrations by David Revoy - CC-BY 4.0

I would have liked to add the blurred message bubbles, but it was already a lot of tinkering to get that effect on Penpot.

For the science, I tried to apply the same effect without a wallpaper. For a moment I thought I'd switched to iOS, but the Material Design 3 colours really give the impression that we're on to something else, halfway between flat design and glassmorphism. I'm not entirely sure how well it fits in with the rest of the interface, but I'm not closing the door on the idea just yet.

Chat screen with blurred header

Finally, I worked on the various elements that can be found in chat screens, trying to get away from what other apps might do, particularly WhatsApp.

Chat screen with different types of message bubbles

Illustrations by David Revoy - CC-BY 4.0

Next time, I'd like to work on the following points:

design of the text bubbles when you send a file and when you send your location
design of the drop-down menus that appear when you use the various buttons on the chat screen
design of the menu that appears when a chat bubble is long-pressed/li>
design of message bubbles with errors (message not encrypted, sending error, etc.)

If you have any remarks, suggestions, solutions or comments, I'd be delighted to hear from you by replying under the Mastodon post, or by sending them to me by email or XMPP!

:^)

+ + \ No newline at end of file diff --git a/blog/hello_world.html b/blog/hello_world.html new file mode 100644 index 0000000..0133636 --- /dev/null +++ b/blog/hello_world.html @@ -0,0 +1,81 @@ + + + + + + + Hello world! + – Ailyaut's blog + + + + + + + + + + + +

+ Ailyaut's blog +

+ +

Hello world! +

13/03/2024 · 2 min

Welcome!

I'm Ailyaut, and this is my blog! You can read more about who I am in the About section.

As an artist and a person who just creates things, be it music, design or software, I thought for a long time that the only way I could share my work was through social media.

But I hated it, and ended up not sharing anything.

A few years ago, I discovered the open source philosophy thanks to Blender.
+I admired Blender because it was software created by a brilliant and generous community, and it far surpassed all the proprietary software that was the "industry standard" (I still wonder how anyone can use Autodesk Maya when it crashes every 15 minutes).
+Soon after, I discovered Godot engine and started making a game. But wait, it was an online game so I needed to learn networking. So I installed Linux on an old laptop and had a small server in my living room. Soon all my friends hated me for forcing them to use Firefox (just kidding) (maybe).

Having benefited so much from open source, I wanted to give something back and eventually started contributing within my abilities as a UI designer for the Moxxy XMPP client.

Which brings me to the two reasons I started this blog:

I needed a way to share my creations without relying on social media or proprietary platforms
I wanted a space to show the work being done on Moxxy's UI, with the goal of making the process more "public" and getting feedback from potential users.

Thus, this blog was born.

:^)

+ + \ No newline at end of file diff --git a/blog/md/20240313+hello_world.md b/blog/md/20240313+hello_world.md new file mode 100644 index 0000000..b17bf6a --- /dev/null +++ b/blog/md/20240313+hello_world.md @@ -0,0 +1,28 @@ +title = Hello world! +timestamp = 1710363600 +preview = Welcome! I'm Ailyaut, and this is my blog! You can read more about who I am in the About section. +thumb = blog/media/2024/20240313_hello.png ++++ + +Welcome! + +I'm Ailyaut, and this is my blog! You can read more about who I am in the [About](../about.html) section. + +As an artist and a person who just creates things, be it music, design or software, I thought for a long time that the only way I could share my work was through social media. + +But I hated it, and ended up not sharing anything. + +A few years ago, I discovered the open source philosophy thanks to Blender. +I admired Blender because it was software created by a brilliant and generous community, and it far surpassed all the proprietary software that was the "industry standard" (I still wonder how anyone can use Autodesk Maya when it crashes every 15 minutes). +Soon after, I discovered Godot engine and started making a game. But wait, it was an online game so I needed to learn networking. So I installed Linux on an old laptop and had a small server in my living room. Soon all my friends hated me for forcing them to use Firefox (just kidding) (maybe). + +Having benefited so much from open source, I wanted to give something back and eventually started contributing within my abilities as a UI designer for the Moxxy XMPP client. + +Which brings me to the two reasons I started this blog: + +1. I needed a way to share my creations without relying on social media or proprietary platforms +2. I wanted a space to show the work being done on Moxxy's UI, with the goal of making the process more "public" and getting feedback from potential users. + +Thus, this blog was born. + +:^) diff --git a/blog/md/20240407+202403_moxxy_progress_report.md b/blog/md/20240407+202403_moxxy_progress_report.md new file mode 100644 index 0000000..f8ee9f0 --- /dev/null +++ b/blog/md/20240407+202403_moxxy_progress_report.md @@ -0,0 +1,58 @@ +title = Moxxy UI: March 2024 progress report +timestamp = 1712520000 +preview = Although I haven't communicated much about it, I've been working on a new interface for Moxxy since October 2023. I created this blog mainly to present my work on this open source project. +thumb = blog/media/2024/20240407_moxxy_progress.png ++++ + +Although I haven't communicated much about it, I've been working on a new interface for Moxxy since October 2023. I created this blog mainly to present my work on this open source project. + +My aim was to create an XMPP client interface that's more modern and easier to use than the ones that currently exist, because I find it very hard to recommend XMPP to my friends and family as things stand. Maybe I'm the one who's particularly bad at explaining, but the mere mention of "server" scares 9 out of 10 people away. + +I chose to contribute to Moxxy because PapaTutuWawa, its developer, suggested it to me, and because Moxxy is written in Flutter, which is a language that is particularly well-suited to the creation of cross-platform applications (and I think that a cross-platform application would help enormously with the spread of XMPP to the general public). + +So I started working on Inkscape in 2023, and came up with this. + +![2024-04_moxxy_2023_dark.webp](../media/2024/2024-04_moxxy_2023_dark.webp) + +![2024-04_moxxy_2023_light.webp](../media/2024/2024-04_moxxy_2023_light.webp) + +Unfortunately, Inkscape wasn't really suited to the task, and I ended up spending more time making documents to explain the designs than creating new ones. On the advice of a more experienced UI designer, I decided to use Penpot. Well, this designer had recommended Figma, but it didn't make sense to work on an open source project with a proprietary tool. + +So here's the home screen I created using Penpot in January: + +![2024-04_moxxy_january.webp](../media/2024/2024-04_moxxy_january.webp) + +Moxxy UI on Penpot, first try + +The result wasn't quite the same. It has to be said that I tried to correct a number of beginner's mistakes I'd made on Inkscape: + +- Instead of using the Open Sans font, I switched to Roboto (the default font on Android) +- Instead of doing my designs in 1080x1920, I switched to 360x640, which is the standard format for mobile interface design. + +I've also changed the colour of the interface. Well, I haven't really changed it, I've just changed the theme, because the aim is for users to be able to choose their own theme with Material You! + +For my part, I switched to a light theme and green so as not to get too used to the dark theme and to check that the interface works well with several themes. + +In February 2024, I got a new job! I'm now a graphic designer, 3D artist and... UI designer! I took advantage of this new role to delve deeper into the Material Design documentation, which is integrated directly into Flutter (if I've understood correctly). + +That's when I realised that I'd made some new mistakes, particularly with the choice of colours. So I spent some time changing all my components and replacing them with the default Material Design components. Here's the result: + +![2024-04_moxxy.webp](../media/2024/2024-04_moxxy.webp) + +Moxxy UI in March + +The interface now seems much cleaner and more rigorous. + +I'm just worried that following the guidelines to the letter will make the design 'personality-less'. But that's a concern I'll save for later. + +Now, the points I think need more work: + +- The colours are generally very calm and soothing. That's fine, but I'd like to give the design a bit more energy so that it catches the eye and makes people who don't use it want to use it. In my dreams, I'd like people to look over a user's shoulder when they're using Moxxy and think "Wow, that's a stylish app, I want the same one" (I've got a few ideas for that but I'll keep it for later, let's do something functional first). +- The "chat" button doesn't stand out enough for my taste. But the theme colours are a bit limited and it's either that or a flashy green that clashes with the rest. +- Although David Revoy's illustration is beautiful, I think the background behind the bubbles in the conversation looks very ugly. I was trying to keep the application 'immersive' by taking up the whole screen, but this is quite the opposite. The wallpaper is completely trapped between two rectangles, and you feel trapped by extension. I haven't found a solution to this yet, as I can't make the header transparent or semi-transparent for legibility reasons. + +So that was my first progress report on the Moxxy interface! I plan (and hope) to do one every month, a bit like Thunderbird does with the K9-Mail transformation. It's both a good way of encouraging myself to work regularly and, I hope, drawing attention to this great project. + +If you have any remarks, suggestions, solutions or comments, I'd be delighted to hear from you by replying under the [Mastodon post](https://mastodon.online/@ailyaut/112234413401118081), or by sending them to me by email or XMPP! + +:^) diff --git a/blog/md/20240508+202404_moxxy_progress_report.md b/blog/md/20240508+202404_moxxy_progress_report.md new file mode 100644 index 0000000..007d9b5 --- /dev/null +++ b/blog/md/20240508+202404_moxxy_progress_report.md @@ -0,0 +1,38 @@ +title = Moxxy UI: April 2024 progress report +timestamp = 1715198400 +preview = April has been a busy month, partly due to a Windows Defender Trojan alert that gave me a good excuse to wipe my entire disk and switch to Linux. So this post will be short and without any major news. +thumb = blog/media/2024/20240407_moxxy_progress.png ++++ + +April has been a busy month, partly due to a Windows Defender Trojan alert that gave me a good excuse to wipe my entire disk and switch to Linux. So this post will be short and without any major news. + +One of the things I wanted to work on was color. The interface seemed dull overall, and the "Chat" button not very visible. +The best way to find out was to simulate real-life conditions! +So I added profile photos (by David Revoy), notifications and icons. + +![](../media/2024/2024-05_moxxy_home_simulation.webp) + +All in all, it's not so dull! + +I also took the opportunity to add the image preview feature created by PapaTutuWawa. + +![](../media/2024/2024-05_moxxy_img_preview.webp) + +Regarding the "Chat" button, long story short, I struggled for hours because of a color palette incorrectly generated by the [Material Theme Builder](https://material-foundation.github.io/material-theme-builder/). The primaryContainer token that's recommended for this kind of button (a [Floating Action Button](https://m3.material.io/components/floating-action-button/overview)) was flashy green, whereas when the palette was generated again with the same seed color, it was duller. I don't know if Google changed the code between the time I generated the first palette and today, but the difference is obvious. +Material palette comparison + +![](../media/2024/2024-05_moxxy_palette_comparison.webp) + +Left: wrong palette / right: correct palette + +Furthermore, I tried to enter the same seed color as my Android phone's theme in order to understand which tokens Google apps used in which situations, but the colors didn't match. + +In short, it's a big mess, but at least I've been able to correct my color palette for the future. + +So here's the current state of the main screen in light and dark. + +![](../media/2024/2024-05_moxxy_light_and_dark.webp) + +I hope to have more time next month to do more than just change colors. In the meantime, if you have any feedback or suggestions on the UI, don't hesitate to send them to me via XMPP, email or in reply under the [Mastodon post](https://mastodon.online/@ailyaut/112405298331386817) ! + +:^) diff --git a/blog/md/20240609+202405_moxxy_progress_report.md b/blog/md/20240609+202405_moxxy_progress_report.md new file mode 100644 index 0000000..50ebc5a --- /dev/null +++ b/blog/md/20240609+202405_moxxy_progress_report.md @@ -0,0 +1,50 @@ +title = Moxxy UI: May 2024 progress report +timestamp = 1717963200 +preview = Let's start with a little announcement: from now on, I'll be publishing my .penpot file in the moxxy/design repository on Codeberg on a monthly basis, so that everyone can tinker with the interface to their heart's content! I should have done it from the start, but better late than never! +thumb = blog/media/2024/20240407_moxxy_progress.png ++++ + +Let's start with a little announcement: from now on, I'll be publishing my .penpot file in the [moxxy/design repository](https://codeberg.org/ailyaut/design/src/branch/master) on Codeberg on a monthly basis, so that everyone can tinker with the interface to their heart's content! I should have done it from the start, but better late than never! + +The goals I had set myself in the preceding months were the following: + +- make the colors more vibrant +- make the "Chat" button stand out more (Home screen) +- fix the feeling of "imprisonment" that is caused by having a background image in the chat screen + +The issue with the dull colors was resolved last month when I realised that the colour palette generated by the [Material Theme Builder](https://material-foundation.github.io/material-theme-builder/) was wrong. So I corrected it and got back to colors that were brighter and easier to distinguish. + +![](../media/2024/2024-05_moxxy_palette_comparison.webp) + +before/after + +This has also enabled the "Chat" button to stand out properly. + +I then tackled the chat screen. Here I found that the header and the system and navigation bars enclosed the background in a rigid frame, making it impossible to imagine that the image exists beyond the borders of this frame. +Now, I admit that this is largely a matter of personal taste, but I attach a certain importance to the idea that it should be possible to imagine the interface beyond what the screen of our device lets us see. To put it simply, you could imagine an application as a house, and its various screens as rooms. The interface buttons are like doors, and the transition animations represent moving from one room to another. At the moment, the chat screen gives me the feeling of being in a windowless room, but with a pretty picture hanging on the wall. My aim is to turn this picture into a window. +And to do that, I had to break the frame, i.e. the header and the system and navigation bars of Android. + +It wasn't possible to reduce the opacity of these bars or make them completely transparent for reasons of legibility. The solution I've found for the time being is a blur effect in the style of the css filter backdrop-filter: blur() which allows me to emphasise the existence of the background beyond the boundaries of the interface without hindering the reading of the information above it. + +![](../media/2024/2024-06_moxxy_bg_blur.webp) + +I would have liked to add the blurred message bubbles, but it was already a lot of tinkering to get that effect on Penpot. + +For the science, I tried to apply the same effect without a wallpaper. For a moment I thought I'd switched to iOS, but the Material Design 3 colours really give the impression that we're on to something else, halfway between flat design and glassmorphism. I'm not entirely sure how well it fits in with the rest of the interface, but I'm not closing the door on the idea just yet. + +![](../media/2024/2024-06_moxxy_chat_blur.webp) + +Finally, I worked on the various elements that can be found in chat screens, trying to get away from what other apps might do, particularly WhatsApp. + +![](../media/2024/2024-06_moxxy_chat_components.webp) + +Next time, I'd like to work on the following points: + +- design of the text bubbles when you send a file and when you send your location +- design of the drop-down menus that appear when you use the various buttons on the chat screen +- design of the menu that appears when a chat bubble is long-pressed/li> +- design of message bubbles with errors (message not encrypted, sending error, etc.) + +If you have any remarks, suggestions, solutions or comments, I'd be delighted to hear from you by replying under the [Mastodon post](https://mastodon.online/@ailyaut/112587618079138456), or by sending them to me by email or XMPP! + +:^) diff --git a/blog/media/2024/2024-04_moxxy.webp b/blog/media/2024/2024-04_moxxy.webp new file mode 100644 index 0000000..b2cdd1f Binary files /dev/null and b/blog/media/2024/2024-04_moxxy.webp differ diff --git a/blog/media/2024/2024-04_moxxy_2023_dark.webp b/blog/media/2024/2024-04_moxxy_2023_dark.webp new file mode 100644 index 0000000..38d98c6 Binary files /dev/null and b/blog/media/2024/2024-04_moxxy_2023_dark.webp differ diff --git a/blog/media/2024/2024-04_moxxy_2023_light.webp b/blog/media/2024/2024-04_moxxy_2023_light.webp new file mode 100644 index 0000000..0149780 Binary files /dev/null and b/blog/media/2024/2024-04_moxxy_2023_light.webp differ diff --git a/blog/media/2024/2024-04_moxxy_january.webp b/blog/media/2024/2024-04_moxxy_january.webp new file mode 100644 index 0000000..b50e0c3 Binary files /dev/null and b/blog/media/2024/2024-04_moxxy_january.webp differ diff --git a/blog/media/2024/2024-05_moxxy_home_simulation.webp b/blog/media/2024/2024-05_moxxy_home_simulation.webp new file mode 100644 index 0000000..dd5ed05 Binary files /dev/null and b/blog/media/2024/2024-05_moxxy_home_simulation.webp differ diff --git a/blog/media/2024/2024-05_moxxy_img_preview.webp b/blog/media/2024/2024-05_moxxy_img_preview.webp new file mode 100644 index 0000000..ece6843 Binary files /dev/null and b/blog/media/2024/2024-05_moxxy_img_preview.webp differ diff --git a/blog/media/2024/2024-05_moxxy_light_and_dark.webp b/blog/media/2024/2024-05_moxxy_light_and_dark.webp new file mode 100644 index 0000000..0fd47e7 Binary files /dev/null and b/blog/media/2024/2024-05_moxxy_light_and_dark.webp differ diff --git a/blog/media/2024/2024-05_moxxy_palette_comparison.webp b/blog/media/2024/2024-05_moxxy_palette_comparison.webp new file mode 100644 index 0000000..b6b77c9 Binary files /dev/null and b/blog/media/2024/2024-05_moxxy_palette_comparison.webp differ diff --git a/blog/media/2024/2024-06_moxxy_bg_blur.webp b/blog/media/2024/2024-06_moxxy_bg_blur.webp new file mode 100644 index 0000000..582a4e6 Binary files /dev/null and b/blog/media/2024/2024-06_moxxy_bg_blur.webp differ diff --git a/blog/media/2024/2024-06_moxxy_chat_blur.webp b/blog/media/2024/2024-06_moxxy_chat_blur.webp new file mode 100644 index 0000000..ae3dd82 Binary files /dev/null and b/blog/media/2024/2024-06_moxxy_chat_blur.webp differ diff --git a/blog/media/2024/2024-06_moxxy_chat_components.webp b/blog/media/2024/2024-06_moxxy_chat_components.webp new file mode 100644 index 0000000..f037980 Binary files /dev/null and b/blog/media/2024/2024-06_moxxy_chat_components.webp differ diff --git a/blog/media/2024/2024-06_moxxy_palette_comparison.webp b/blog/media/2024/2024-06_moxxy_palette_comparison.webp new file mode 100644 index 0000000..2e274c9 Binary files /dev/null and b/blog/media/2024/2024-06_moxxy_palette_comparison.webp differ diff --git a/blog/media/2024/20240313_hello.png b/blog/media/2024/20240313_hello.png new file mode 100644 index 0000000..58ade40 Binary files /dev/null and b/blog/media/2024/20240313_hello.png differ diff --git a/blog/media/2024/20240407_moxxy_progress.png b/blog/media/2024/20240407_moxxy_progress.png new file mode 100644 index 0000000..5a8065c Binary files /dev/null and b/blog/media/2024/20240407_moxxy_progress.png differ diff --git a/gallery.html b/gallery.html new file mode 100644 index 0000000..7ac1f4c --- /dev/null +++ b/gallery.html @@ -0,0 +1,112 @@ + + + + + + + Gallery – Ailyaut's blog + + + + + + + + + + + + + + +

+ Ailyaut's blog +

+ +

Gallery

This page is still under construction.

Illustration

Graphic design

UI & webdesign

Animation

+ +

+ + + diff --git a/gallery/3d/electronic_desert.png b/gallery/3d/electronic_desert.png new file mode 100644 index 0000000..09c80d9 Binary files /dev/null and b/gallery/3d/electronic_desert.png differ diff --git a/gallery/3d/fireball.png b/gallery/3d/fireball.png new file mode 100644 index 0000000..4388843 Binary files /dev/null and b/gallery/3d/fireball.png differ diff --git a/gallery/3d/hewa.png b/gallery/3d/hewa.png new file mode 100644 index 0000000..a2b313c Binary files /dev/null and b/gallery/3d/hewa.png differ diff --git a/gallery/3d/institut_du_monde_arabe.png b/gallery/3d/institut_du_monde_arabe.png new file mode 100644 index 0000000..e40b8a9 Binary files /dev/null and b/gallery/3d/institut_du_monde_arabe.png differ diff --git a/gallery/3d/mars_attacks_01.png b/gallery/3d/mars_attacks_01.png new file mode 100644 index 0000000..ba8ca72 Binary files /dev/null and b/gallery/3d/mars_attacks_01.png differ diff --git a/gallery/3d/mars_attacks_02.png b/gallery/3d/mars_attacks_02.png new file mode 100644 index 0000000..5e03f00 Binary files /dev/null and b/gallery/3d/mars_attacks_02.png differ diff --git a/gallery/3d/nebula.png b/gallery/3d/nebula.png new file mode 100644 index 0000000..01ab8ac Binary files /dev/null and b/gallery/3d/nebula.png differ diff --git a/gallery/3d/shrinkwrap.png b/gallery/3d/shrinkwrap.png new file mode 100644 index 0000000..4b9b397 Binary files /dev/null and b/gallery/3d/shrinkwrap.png differ diff --git a/gallery/3d/spaceship.png b/gallery/3d/spaceship.png new file mode 100644 index 0000000..3278dc4 Binary files /dev/null and b/gallery/3d/spaceship.png differ diff --git a/gallery/3d/tekkonkinkreet.jpg b/gallery/3d/tekkonkinkreet.jpg new file mode 100644 index 0000000..025eefa Binary files /dev/null and b/gallery/3d/tekkonkinkreet.jpg differ diff --git a/gallery/3d/thumb/electronic_desert.png b/gallery/3d/thumb/electronic_desert.png new file mode 100644 index 0000000..b1ef958 Binary files /dev/null and b/gallery/3d/thumb/electronic_desert.png differ diff --git a/gallery/3d/thumb/fireball.png b/gallery/3d/thumb/fireball.png new file mode 100644 index 0000000..17d9969 Binary files /dev/null and b/gallery/3d/thumb/fireball.png differ diff --git a/gallery/3d/thumb/hewa.png b/gallery/3d/thumb/hewa.png new file mode 100644 index 0000000..0fee9ac Binary files /dev/null and b/gallery/3d/thumb/hewa.png differ diff --git a/gallery/3d/thumb/institut_du_monde_arabe.png b/gallery/3d/thumb/institut_du_monde_arabe.png new file mode 100644 index 0000000..7875468 Binary files /dev/null and b/gallery/3d/thumb/institut_du_monde_arabe.png differ diff --git a/gallery/3d/thumb/mars_attacks_01.png b/gallery/3d/thumb/mars_attacks_01.png new file mode 100644 index 0000000..66f4102 Binary files /dev/null and b/gallery/3d/thumb/mars_attacks_01.png differ diff --git a/gallery/3d/thumb/mars_attacks_02.png b/gallery/3d/thumb/mars_attacks_02.png new file mode 100644 index 0000000..05fa246 Binary files /dev/null and b/gallery/3d/thumb/mars_attacks_02.png differ diff --git a/gallery/3d/thumb/nebula.png b/gallery/3d/thumb/nebula.png new file mode 100644 index 0000000..a88274e Binary files /dev/null and b/gallery/3d/thumb/nebula.png differ diff --git a/gallery/3d/thumb/shrinkwrap.png b/gallery/3d/thumb/shrinkwrap.png new file mode 100644 index 0000000..b40e512 Binary files /dev/null and b/gallery/3d/thumb/shrinkwrap.png differ diff --git a/gallery/3d/thumb/spaceship.png b/gallery/3d/thumb/spaceship.png new file mode 100644 index 0000000..deb1162 Binary files /dev/null and b/gallery/3d/thumb/spaceship.png differ diff --git a/gallery/3d/thumb/tekkonkinkreet.png b/gallery/3d/thumb/tekkonkinkreet.png new file mode 100644 index 0000000..a5df3af Binary files /dev/null and b/gallery/3d/thumb/tekkonkinkreet.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..a811e54 --- /dev/null +++ b/index.html @@ -0,0 +1,179 @@ + + + + + + + Ailyaut's blog + + + + + + + + + + + + + + + +

+ Ailyaut's blog +

+ +

Heyo!

I'm Ailyaut, a 24-year-old everything designer with a particular interest in open source and card games.
+ I have studied 3D animation and now work as a UI & product designer. I code sometimes. +

+ 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. +

+ + +

Featured project

All projects >

A red chinese dragon drawn in a manga style

Gang

A complete redesign of the famous card game "Gang of Four" in my own style, with a focus on being clean and accessible to colorblind people. + The whole game was made using only open source software and printed by a small company in Alsace (France). The PDF files are available for free printing.

Learn more >

+ + +

Blog

All posts >

+ +

Moxxy UI: May 2024 progress report +

+ +

Moxxy UI: April 2024 progress report +

+ +

Moxxy UI: March 2024 progress report +

+ 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. + +

+ +

+ + + diff --git a/media/ailyaut.png b/media/ailyaut.png new file mode 100644 index 0000000..734da3d Binary files /dev/null and b/media/ailyaut.png differ diff --git a/media/fonts/bricolagegrotesque.woff2 b/media/fonts/bricolagegrotesque.woff2 new file mode 100644 index 0000000..74edadb Binary files /dev/null and b/media/fonts/bricolagegrotesque.woff2 differ diff --git a/media/icons/arrow_upward.png b/media/icons/arrow_upward.png new file mode 100644 index 0000000..f348f9a Binary files /dev/null and b/media/icons/arrow_upward.png differ diff --git a/media/icons/bandcamp.png b/media/icons/bandcamp.png new file mode 100644 index 0000000..bfca1d9 Binary files /dev/null and b/media/icons/bandcamp.png differ diff --git a/media/icons/download.svg b/media/icons/download.svg new file mode 100644 index 0000000..4158264 --- /dev/null +++ b/media/icons/download.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/media/icons/favicon-16x16.png b/media/icons/favicon-16x16.png new file mode 100644 index 0000000..643bb92 Binary files /dev/null and b/media/icons/favicon-16x16.png differ diff --git a/media/icons/favicon-32x32.png b/media/icons/favicon-32x32.png new file mode 100644 index 0000000..0033ed6 Binary files /dev/null and b/media/icons/favicon-32x32.png differ diff --git a/media/icons/git.png b/media/icons/git.png new file mode 100644 index 0000000..f77aa43 Binary files /dev/null and b/media/icons/git.png differ diff --git a/media/icons/mastodon.png b/media/icons/mastodon.png new file mode 100644 index 0000000..3912884 Binary files /dev/null and b/media/icons/mastodon.png differ diff --git a/media/icons/rss.png b/media/icons/rss.png new file mode 100644 index 0000000..9e0842a Binary files /dev/null and b/media/icons/rss.png differ diff --git a/media/icons/verified.png b/media/icons/verified.png new file mode 100644 index 0000000..c4fde67 Binary files /dev/null and b/media/icons/verified.png differ diff --git a/media/icons/youtube.png b/media/icons/youtube.png new file mode 100644 index 0000000..9b4b322 Binary files /dev/null and b/media/icons/youtube.png differ diff --git a/media/preview.png b/media/preview.png new file mode 100644 index 0000000..9ddef6d Binary files /dev/null and b/media/preview.png differ diff --git a/media/preview.svg b/media/preview.svg new file mode 100644 index 0000000..d00b2ca --- /dev/null +++ b/media/preview.svg @@ -0,0 +1,86 @@ + + + + diff --git a/projects.html b/projects.html new file mode 100644 index 0000000..b328267 --- /dev/null +++ b/projects.html @@ -0,0 +1,355 @@ + + + + + + + Projects – Ailyaut's blog + + + + + + + + + + + + + + +

+ Ailyaut's blog +

+ +

Projects

+ +

+ Animation + UI & webdesign + Games + Apps & software + Music +

+ + +

Animation

+ +

Never Gonna Give You Up

+ A 3D animated Splatoon cover of the internet classic 'Never Gonna Give You Up'. +

+ +

Kaya sur la banquise

+ A puppet show telling the story of Kaya, a young inuit girl who seeks a magic flower. +

+ +

Patatotapopata

+ A 30 seconds 3D animated short film about choice, freedom and death. +

+ +

+ + +

UI & webdesign

+ +

Moxxy

+ A modern open source XMPP client for Android written in Flutter. +

+ +

1999

+ UI design for a fictional modern, open source and cross-platform XMPP client. +

+ +

+ + +

Games

+ +

Gang

+ 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. +

+ +

Hanafuda guides

+ A collection of short printable guides to learn how to play and memorize the cards. +

+ +

+ + +

Apps & Software

+ +

pwgen

+ A simple password generator using the properties of hash functions. +

+ +

Smoke

+ A simple federated messaging app prototype built with Godot Engine. +

+ +

+ + +

Music

+ +

Les ménestrels percussion nistes

+ A metal cover of 'Les ménestrels percussionnistes' by Roland Cristal. +

+ +

Thunderblight Ganon

+ A metal cover of the Blight battle theme from The Legend of Zelda: Breath of the Wild. +

+ +

Never Gonna Give You Up

+ A 3D animated Splatoon cover of the internet classic 'Never Gonna Give You Up'. +

+ +

Oummm le dauphin blanc

+ A metal cover of the opening song of the cartoon "Oum le dauphin". +

+ +

Chapeau Champion

+ Original theme song for a 48h-jam video game composed, performed and mixed in 6 hours. +

+ +

Camel by Camel

+ A metal cover of the italo disco song 'Camel by Camel' by Sandy Marton. +

+ +

+ + + diff --git a/projects/1999/thumb.png b/projects/1999/thumb.png new file mode 100644 index 0000000..06660bc Binary files /dev/null and b/projects/1999/thumb.png differ diff --git a/projects/camel_by_camel/index.html b/projects/camel_by_camel/index.html new file mode 100644 index 0000000..34ac51f --- /dev/null +++ b/projects/camel_by_camel/index.html @@ -0,0 +1,77 @@ + + + + + + + Camel by Camel – Ailyaut's blog + + + + + + + + + + + + + + +

+ Ailyaut's blog +

+ +

Camel by Camel

This is a metal cover of the pop song "Camel by Camel" by Sandy Marton. The song blew up on the internet in october 2021, and I released my cover in november 2021. My cover is still the most popular video on my channel today, by far.

+ + +

My role

Adaptation, performance, mixing, mastering, illustration

Software used

Reaper, Clip Studio Paint, Blender

+ + + diff --git a/projects/camel_by_camel/thumb.png b/projects/camel_by_camel/thumb.png new file mode 100644 index 0000000..395cfd5 Binary files /dev/null and b/projects/camel_by_camel/thumb.png differ diff --git a/projects/chapeau_champion/index.html b/projects/chapeau_champion/index.html new file mode 100644 index 0000000..91c808c --- /dev/null +++ b/projects/chapeau_champion/index.html @@ -0,0 +1,79 @@ + + + + + + + Chapeau Champion – Ailyaut's blog + + + + + + + + + + + + + + +

+ Ailyaut's blog +

+ +

Chapeau Champion

In October 2022, a friend of mine invited me to participate to a 48h game jam organized by the Rubika school. + With him and his team, we created a game in 48 hours called "Chapeau Champion". I was in charge of the character design, character animations, and the music which I composed, performed and mixed in 6 hours.

Unfortunately, I can't show anything of the game itself because it didn't work on my PC :^(

+ + +

My role

Music, sound design, character design, 2D animation

Software used

Reaper, Clip Studio Paint

+ + + diff --git a/projects/chapeau_champion/thumb.png b/projects/chapeau_champion/thumb.png new file mode 100644 index 0000000..2a04e10 Binary files /dev/null and b/projects/chapeau_champion/thumb.png differ diff --git a/projects/gang/index.html b/projects/gang/index.html new file mode 100644 index 0000000..5d7ba8d --- /dev/null +++ b/projects/gang/index.html @@ -0,0 +1,102 @@ + + + + + + + Gang – Ailyaut's blog + + + + + + + + + + + + + + +

+ Ailyaut's blog +

+ +

Gang

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).

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.

+ +

Unfortunately, I do not own the rights to this game, so I cannot sell it.
+ If you want to print a copy of this game, you can use the following PDF files. I can recommend Printeurope to print the cards. It might cost you more than the official version of the game, but hey, it's fun.

Files

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.

+ +

+ CardsPDF · 9,3MB + +

Please note that a 3mm bleed is included in this file. The final dimensions dimensions of the cards should be 63*88mm.

+ + +

+ BoxPDF · 4,7MB + + +

+ Game rules (French)PDF · 800KB + + +

+ Score sheets (French)PDF · 200KB + +

My role

Illustration, graphic design, writing

Software used

Scribus, Krita, Inkscape

+ + + diff --git a/projects/gang/media/7_boxes.jpg b/projects/gang/media/7_boxes.jpg new file mode 100644 index 0000000..59c1b7b Binary files /dev/null and b/projects/gang/media/7_boxes.jpg differ diff --git a/projects/gang/media/gang_box.pdf b/projects/gang/media/gang_box.pdf new file mode 100644 index 0000000..19683c1 Binary files /dev/null and b/projects/gang/media/gang_box.pdf differ diff --git a/projects/gang/media/gang_cards.pdf b/projects/gang/media/gang_cards.pdf new file mode 100644 index 0000000..9ebd6f5 Binary files /dev/null and b/projects/gang/media/gang_cards.pdf differ diff --git a/projects/gang/media/gang_rules_FR.pdf b/projects/gang/media/gang_rules_FR.pdf new file mode 100644 index 0000000..8cb230d Binary files /dev/null and b/projects/gang/media/gang_rules_FR.pdf differ diff --git a/projects/gang/media/gang_rules_web_FR.pdf b/projects/gang/media/gang_rules_web_FR.pdf new file mode 100644 index 0000000..7fa0c7b Binary files /dev/null and b/projects/gang/media/gang_rules_web_FR.pdf differ diff --git a/projects/gang/media/gang_score_sheet_FR.pdf b/projects/gang/media/gang_score_sheet_FR.pdf new file mode 100644 index 0000000..9d03174 Binary files /dev/null and b/projects/gang/media/gang_score_sheet_FR.pdf differ diff --git a/projects/gang/media/preview_cards.png b/projects/gang/media/preview_cards.png new file mode 100644 index 0000000..ae558d7 Binary files /dev/null and b/projects/gang/media/preview_cards.png differ diff --git a/projects/gang/thumb.png b/projects/gang/thumb.png new file mode 100644 index 0000000..4529c9e Binary files /dev/null and b/projects/gang/thumb.png differ diff --git a/projects/hanafuda/index.html b/projects/hanafuda/index.html new file mode 100644 index 0000000..0a47f21 --- /dev/null +++ b/projects/hanafuda/index.html @@ -0,0 +1,84 @@ + + + + + + + Hanafuda guides – Ailyaut's blog + + + + + + + + + + + + + + +

+ Ailyaut's blog +

+ +

Hanafuda guides

Last year, my partner gave me a hanafuda game as a present. + I was very excited, but I didn't know how to play! I searched for the game rules on the internet and learned that multiple games can be played with the hanafuda cards (or just hanafuda, because it already means 'flower cards'), the two most popular being Koi-koi and Hachi hachi.

I looked for the Koi-koi rules, but I came across different variants of the game, which made it quite difficult to understand how to play. But more importantly, I needed a way to memorize the cards.

Using my experience as a former board-game graphic designer, I made short printable guides to learn how to play Koi-koi and to memorize the cards. All the guides are licensed under CC BY-SA 4.0, so that everyone can use them, translate them if needed, and share their love for hanafuda.

Files

More guides will come, in more languages.

+ +

+ Koi-koi 2-pages (FR)PDF · 1,5MB + +

My role

Writing, graphic design

Software used

Scribus

+ + + diff --git a/projects/hanafuda/media/koikoi_2pages_FR.pdf b/projects/hanafuda/media/koikoi_2pages_FR.pdf new file mode 100644 index 0000000..88c9b9e Binary files /dev/null and b/projects/hanafuda/media/koikoi_2pages_FR.pdf differ diff --git a/projects/hanafuda/thumb.png b/projects/hanafuda/thumb.png new file mode 100644 index 0000000..8c0e7cc Binary files /dev/null and b/projects/hanafuda/thumb.png differ diff --git a/projects/kaya/index.html b/projects/kaya/index.html new file mode 100644 index 0000000..127314b --- /dev/null +++ b/projects/kaya/index.html @@ -0,0 +1,79 @@ + + + + + + + Kaya sur la banquise – Ailyaut's blog + + + + + + + + + + + + + + +

+ Ailyaut's blog +

+ +

Kaya sur la banquise

"Kaya sur la banquise" is an initiatory puppet show for young audiences created by La Coop des Marionnettes. + I had the honour of being responsible for the 2D and 3D backgrounds and animated sequences of this project. +

+ + +

My role

Art direction, storyboard, background design, 3D modeling, rigging, textures, 2D & 3D animation, lighting, rendering, compositing, editing.

Software used

Blender

+ + + diff --git a/projects/kaya/thumb.png b/projects/kaya/thumb.png new file mode 100644 index 0000000..2c16ec9 Binary files /dev/null and b/projects/kaya/thumb.png differ diff --git a/projects/les_menestrels/index.html b/projects/les_menestrels/index.html new file mode 100644 index 0000000..2810bbd --- /dev/null +++ b/projects/les_menestrels/index.html @@ -0,0 +1,79 @@ + + + + + + + Les ménestrels percussionnistes – Ailyaut's blog + + + + + + + + + + + + + + +

+ Ailyaut's blog +

+ +

Les ménestrels percussionnistes

For Christmas 2022 and 2023, one of my gifts to my partner was a metal cover of a song they liked. I would have liked to do the same in 2024, but metal covers usually take me 1-2 weeks of full time work, which was not possible as a now full time employee.

Anyway, I'm a fan of Roland Cristal and my partner especially liked "Les ménestrels percussionnistes" by him, so that was the song I chose for Christmas 2023. It was my first time singing and I did quite a poor job, but I think it is my best metal cover so far.

Did you notice the hidden "Take on me" in the solo?

+ + +

My role

Adaptation, performance, mixing, mastering, illustration

Software used

Reaper, Inkscape, Krita, Blender

+ + + diff --git a/projects/les_menestrels/thumb.png b/projects/les_menestrels/thumb.png new file mode 100644 index 0000000..40c0e0a Binary files /dev/null and b/projects/les_menestrels/thumb.png differ diff --git a/projects/moxxy/index.html b/projects/moxxy/index.html new file mode 100644 index 0000000..6f37e33 --- /dev/null +++ b/projects/moxxy/index.html @@ -0,0 +1,95 @@ + + + + + + + Moxxy – Ailyaut's blog + + + + + + + + + + + + + + +

+ Ailyaut's blog +

+ +

Moxxy

Moxxy is a modern open source XMPP client for Android.
+ In October 2023, I wrote a post on Mastodon to present 1999, an XMPP client project with similar goals, aiming to be easy to use and available on all major platforms.
+ Against my expectations, the post met with great success, and developers asked me to join their XMPP client project to help on the UI side. Among them was the developer of Moxxy.
+ I have been contributing to the project in my spare time ever since. +

This website was actually created to share my progress on the Moxxy interface, both to encourage me to work on it regularly and to get feedback from the community.

If you would like to see more, here is the latest post on Moxxy to date:

+ +

Moxxy UI: May 2024 progress report

+ +

My role

UI/UX design

Software used

Penpot

+ + + diff --git a/projects/moxxy/thumb.png b/projects/moxxy/thumb.png new file mode 100644 index 0000000..eaffa75 Binary files /dev/null and b/projects/moxxy/thumb.png differ diff --git a/projects/oummm/index.html b/projects/oummm/index.html new file mode 100644 index 0000000..0cbb563 --- /dev/null +++ b/projects/oummm/index.html @@ -0,0 +1,77 @@ + + + + + + + Oummm le dauphin blanc – Ailyaut's blog + + + + + + + + + + + + + + +

+ Ailyaut's blog +

+ +

Oummm le dauphin blanc

A metal cover that I did for Christmas 2022 as a gift to my partner.

+ + +

My role

Adaptation, performance, mixing, mastering, illustration

Software used

Reaper, Inkscape, Blender

+ + + diff --git a/projects/oummm/thumb.png b/projects/oummm/thumb.png new file mode 100644 index 0000000..8de3bad Binary files /dev/null and b/projects/oummm/thumb.png differ diff --git a/projects/patatotapopata/index.html b/projects/patatotapopata/index.html new file mode 100644 index 0000000..55e345b --- /dev/null +++ b/projects/patatotapopata/index.html @@ -0,0 +1,151 @@ + + + + + + + Patatotapopata – Ailyaut's blog + + + + + + + + + + + + + + +

+ Ailyaut's blog +

+ +

Patatotapopata

A 30 seconds 3D animated short film about choice, freedom and death.
+ This short film was my end of bachelor project.

'A young girl jumps off a building, but is given the opportunity to reevaluate her decision by seeing her own future. + She then finds herself transported to the end of time, where she must face the spirit of Jean-Paul Sartre.' +

+ +

Requirements

This short film was my end of bachelor project.
+ The assignment was to create a 40 seconds short film on the following subject:

“A messenger goes back in time to look for…”

The short film needed to have a maximum of one character and one environment, and every step had to be done by the student (no pre-made rig, animation, environment, …)

Character design
Storyboard
Animatic
Environment design
3D sculpt & retopology
Rigging
Animating, texturing, lighting, rendering, compositing
Conclusion

Character design

It is not usual to start with character design.
+ The truth is, when the subject was announced I just sketched a character in 30 minutes which I quite liked. I didn’t even have any story back then.
+ I was inspired by Little Witch Academia’s designs at the time and I originally wanted to animate a short-film in the same energetic style, with a lot of exaggerated movements, speed distortions and so on. + That’s not really what happened in the end, but fortunately, my character fit perfectly into the depressing atmosphere of the final story.

A rough black and white drawing of a young gothic girl with pale skin, long black hair with bangs, a black tutu, black and white striped tights and black boots. She also has cross earrings and ear piercings. She is seen from the left side, almost turning her back, but her head is turned towards the viewer and her eyes are looking to the right.

Four black and white drawings of the girl from the previous image, seen from the back, front, three-quarter and side.

Four black and white drawings of the girl from the previous image, each with a different hairstyle. The first has long hair and bangs, the second has space buns, the third has short pigtails, and the fourth has long, low braided pigtails in the style of Wednesday Addams.

I tried different hairstyles because the teachers were concerned that long hair would be too difficult to animate. I went with the long hair anyway.

Storyboard

The story and shots came to me in a daydream during a cloudy, depressing day.
+ At first, the teachers were afraid that my project was too ambitious: I had several environments, multiple characters in a way, and my main character had long hair which was difficult to animate. But I was convinced that I could do it, so nothing was changed.
+ Even though not all the shots were kept as they were in the final cut, the short film remains fairly faithful to the original idea.

Here is an overview of the 7 pages of the storyboard, in which we can clearly see the different steps with the colors being used:

Seven pages of storyboard. The shots are almost all the same as the ones in the movie.

Here you can read the full storyboard in detail (in french)

Read as PDF

Animatic

After the storyboard was done, I needed to turn it into an animatic to make sure the timing was good and the shots flowed well.

+ +

Environment design

The biggest challenge of this project was without a doubt the city. I tried a lot of different methods, including testing with MASH on Maya, or building sets with blueprints on Unreal Engine.
+ In the end I decided on a much more clever solution!

A 3D landscape with very low detail blue/gray buildings under a dark gray sky. All buildings are the same, but their height is different to give an impression of variety.

An attempt on Maya with MASH

A 3D landscape of low detail buildings with different colors. There are lots of kinds of buildings, but the rendering is not very realistic.

an attempt on Unreal Engine

A 3D view of six different realistic-looking buildings.

The solution I opted for in the end

The buildings seen up close are simple cubes with textured facade pictures, on which I extruded the windows and gave them a reflective texture. Then I stacked a few of them and scattered them in the background in a way that looks realistic.

As for the wide shot of the city in the introduction… it’s all Google Maps !
+ I captured my screen as I scrolled through the Tokyo metropolis in 3D view, then reproduced the mood of my film with compositing.

A wide aerial view of Tokyo, as if taken from a helicopter. It's actually a 3D view from Google Maps. The image is cut in two. On the left, the city appears to be sunny, the sky is bright and blue and the colors are vivid. On the right, the colors are sad and gray, the sky is greenish, and the atmosphere is depressing.

before compositing / after compositing

3D Sculpt & Retopology

The character was sculpted on Zbrush and retopologized in Maya (because it would be impossible to work with otherwise!)

A 3D view showing two versions of the girl character. On the left, the model is not very detailed and the 3D structure is messy. On the right, the model is much more detailed and the 3D structure is clear.

Rigging

The rigging demo starts at 1:14

+ +

Animating, texturing, lighting, rendering, compositing

For the animation, I did it on Maya because it is where I did my rigging, and then I exported it to Blender for the next steps.

For the textures, I used the Texture Paint feature of Blender to roughly see how it would look like on my UV projection, then I refined the drawing on Clip Studio Paint. And for the lighting and compositing, I did a breakdown of two different shots in my demo reel starting from 0:55

The rendering was done on Blender using Cycles with OptiX denoising.

+ +

Conclusion

Making a short film was a dream come true, and Patatotapopata was my first.
+ Being able to do each step myself was a great way to realize the difficulties and challenges faced at each position if it was a team effort.
+ By the way, I would love to do another one as a team next time!

My role

Scenario, storyboard, character & environment design, animatic, 3D modeling, rigging, 3D animation, textures, lighting, rendering, compositing, editing.

Software used

Maya, ZBrush, Blender, Clip Studio Paint, Unreal Engine (not used in the final project)

+ + + diff --git a/projects/patatotapopata/media/patatotapopata_blender_city.webp b/projects/patatotapopata/media/patatotapopata_blender_city.webp new file mode 100644 index 0000000..a717f5a Binary files /dev/null and b/projects/patatotapopata/media/patatotapopata_blender_city.webp differ diff --git a/projects/patatotapopata/media/patatotapopata_character_concept.webp b/projects/patatotapopata/media/patatotapopata_character_concept.webp new file mode 100644 index 0000000..80b63c6 Binary files /dev/null and b/projects/patatotapopata/media/patatotapopata_character_concept.webp differ diff --git a/projects/patatotapopata/media/patatotapopata_city_before_after.webp b/projects/patatotapopata/media/patatotapopata_city_before_after.webp new file mode 100644 index 0000000..77f1ff7 Binary files /dev/null and b/projects/patatotapopata/media/patatotapopata_city_before_after.webp differ diff --git a/projects/patatotapopata/media/patatotapopata_hairstyles.webp b/projects/patatotapopata/media/patatotapopata_hairstyles.webp new file mode 100644 index 0000000..de7b161 Binary files /dev/null and b/projects/patatotapopata/media/patatotapopata_hairstyles.webp differ diff --git a/projects/patatotapopata/media/patatotapopata_mash_city.png b/projects/patatotapopata/media/patatotapopata_mash_city.png new file mode 100644 index 0000000..9b9b541 Binary files /dev/null and b/projects/patatotapopata/media/patatotapopata_mash_city.png differ diff --git a/projects/patatotapopata/media/patatotapopata_retopology.webp b/projects/patatotapopata/media/patatotapopata_retopology.webp new file mode 100644 index 0000000..7db2e79 Binary files /dev/null and b/projects/patatotapopata/media/patatotapopata_retopology.webp differ diff --git a/projects/patatotapopata/media/patatotapopata_storyboard.pdf b/projects/patatotapopata/media/patatotapopata_storyboard.pdf new file mode 100644 index 0000000..53b6aea Binary files /dev/null and b/projects/patatotapopata/media/patatotapopata_storyboard.pdf differ diff --git a/projects/patatotapopata/media/patatotapopata_storyboard_full.webp b/projects/patatotapopata/media/patatotapopata_storyboard_full.webp new file mode 100644 index 0000000..ef9eecd Binary files /dev/null and b/projects/patatotapopata/media/patatotapopata_storyboard_full.webp differ diff --git a/projects/patatotapopata/media/patatotapopata_turn_a_pose.webp b/projects/patatotapopata/media/patatotapopata_turn_a_pose.webp new file mode 100644 index 0000000..267ebd0 Binary files /dev/null and b/projects/patatotapopata/media/patatotapopata_turn_a_pose.webp differ diff --git a/projects/patatotapopata/media/patatotapopata_unreal_city.png b/projects/patatotapopata/media/patatotapopata_unreal_city.png new file mode 100644 index 0000000..f68539b Binary files /dev/null and b/projects/patatotapopata/media/patatotapopata_unreal_city.png differ diff --git a/projects/patatotapopata/thumb.png b/projects/patatotapopata/thumb.png new file mode 100644 index 0000000..faa40cd Binary files /dev/null and b/projects/patatotapopata/thumb.png differ diff --git a/projects/patatotapopata/thumb_makingof.png b/projects/patatotapopata/thumb_makingof.png new file mode 100644 index 0000000..8c8bc10 Binary files /dev/null and b/projects/patatotapopata/thumb_makingof.png differ diff --git a/projects/pwgen/index.html b/projects/pwgen/index.html new file mode 100644 index 0000000..6557e01 --- /dev/null +++ b/projects/pwgen/index.html @@ -0,0 +1,119 @@ + + + + + + + pwgen – Ailyaut's blog + + + + + + + + + + + + + + +

+ Ailyaut's blog +

+ +

pwgen

Disclaimer 1: this is not pwgen, sorry for the confusing name, I will change it.
+ Disclaimer 2: I wrote this in 2023. What I consider "secure" has changed a lot since then.

'An easy to use secure password generator.'
– me in 2023

Why?

In 2022, a site on which I had an account was hacked. A lot of user information was stolen, including email addresses, IP addresses and passwords. Unfortunately I was the kind of person who always uses the same password on all sites, and that password had just been compromised.
+ The obvious solution would have been to use a password manager, but I wasn't comfortable with the idea that all my passwords would be protected by one single master password.
+ So I came up with a solution that allows me to always use extremely strong passwords, all unique, without having to memorize anything complicated.

How does it work?

The principle is ridiculously simple.

The application just creates a hash of what the user enters with the SHA-1 algorithm. Since the slightest change in input gives a completely different result, it is very easy to create unique passwords. For example, you can start with a very bad password, like “1234”, and then add the name of the service you are creating an account for, like Netflix.

The result of the following input:

1234+netflix

will be:

84b55c61cb905355057e2995c13ae833ba7d2850

Which is quite strong!

Now let’s say we want to create a password for Gmail.
+ We can input the following:

1234+gmail

which gives us:

77b4f11c48a113adf628bf55510d5cbe5af1e15d

A completely different result, even though we started with the same simple password.
+ Moreover, there is no need to worry about a password being compromised anymore: it is impossible to recover the original input from the hash, so the simple password “1234” can never be guessed by an attacker in order to deduce your other passwords.

How would I remember such a long password?

That’s the best part! You don’t!
+ Each time you need to log into an account, you can launch the app and type your simple password, like “1234+gmail”. The output will be exactly the same as when you first generated it! This is one of the proprieties of a hash: a same input will always give the same output.

Limitations

----- 2025 edit start -----

Hashes only use a very limited set of characters (1-9 and a-f), which makes it easier to brute force the password despite the string being 40 characters long if the attacker knows that the password is just a hash.

I am no cryptography expert, but I see two ways of attacking such a password:

Guessing the input password using social engineering or other compromised passwords and then hashing it to try it (still more expensive than just trying passwords directly).
Brute forcing the final password directly, knowing that it has only a very limited set of characters.

To improve on the current design, I could use each two-character sequence of the hash as a hex code for an ASCII character and create a new string that would be the addition of those ASCII characters. + This way, the password wouldn't look like a hash if it got exposed (so the use of this application wouldn't be as obvious, and the attack #1 wouldn't be attempted), + and it would also be computationally more expensive to try passwords by guessing the input string if there are more steps than just hashing (this would make attack #1 more difficult). + It also solves the problem of attack #2 by using a much wider set of characters.

----- 2025 edit end -----

Try it!

You can try the current version for yourself!
+ I made a GUI application for Android, Windows and Linux (X11) using Godot Engine.
+ There are also 2 CLI versions in Rust and Golang, because I tried to learn these languages at some point.
+ I decline any responsibility in case something bad happens with this app. Use it at your own risk.

Downloads will be available later.

+ +

My role

Programming, UI

Software used

Godot Engine (for GUI version)

+ + + diff --git a/projects/pwgen/thumb.png b/projects/pwgen/thumb.png new file mode 100644 index 0000000..e86f1e9 Binary files /dev/null and b/projects/pwgen/thumb.png differ diff --git a/projects/rickroll/index.html b/projects/rickroll/index.html new file mode 100644 index 0000000..f24107c --- /dev/null +++ b/projects/rickroll/index.html @@ -0,0 +1,80 @@ + + + + + + + Never Gonna Give You Up – Ailyaut's blog + + + + + + + + + + + + + + +

+ Ailyaut's blog +

+ +

Never Gonna Give You Up

For April 1st 2023, I did a 3D reproduction of the famous "Never Gonna Give You Up" clip with a Splatoon version of Rick Astley. + I also edited the music to make it sound like a Splatoon character is singing. + And to make the parody perfect, I also released the song on Bandcamp with an album cover written in Splatoon language. +

+ + +

My role

3D animation, textures, lighting, rendering, graphic design, editing.

Software used

Reaper, Blender, Inkscape, Krita

+ + + diff --git a/projects/rickroll/thumb.png b/projects/rickroll/thumb.png new file mode 100644 index 0000000..5eefcea Binary files /dev/null and b/projects/rickroll/thumb.png differ diff --git a/projects/smoke/index.html b/projects/smoke/index.html new file mode 100644 index 0000000..3d7c6bb --- /dev/null +++ b/projects/smoke/index.html @@ -0,0 +1,128 @@ + + + + + + + Smoke – Ailyaut's blog + + + + + + + + + + + + + + +

+ Ailyaut's blog +

+ +

Smoke

Disclaimer: I did this in 2 days in 2023 without knowing anything about cryptography and wrote most of the text at that time. I'm leaving this page online for the sole purpose of showing a project I've done in the past. I do not intend to continue working on it.

A secure, federated, end-to-end encrypted messaging app built with Godot Engine.
+ (or at least this is what I wanted it to be) +

Why?

Why make a new messaging application when there are dozens of them?
+ When I made this project, I thought there was no perfect messaging app, so I had to make one. + I didn't want to use proprietary applications (and still don't), and I felt that the open source options weren't good enough, Signal being centralized and XMPP being a hard sell for non-tech-enthusiasts.

Today (2025), I have a different opinion, and that is that there can't be a "perfect" messaging app because there are just too many different use cases for these. Signal is fantastic for everyday use, I love the independence that XMPP provides me, and I'd definitely use Briar if the situation called for it.

My goal was to create a secure federated messaging app with modern UI like Signal and that was extremely easy to set up for people who wished to host their own server. It also had to be open source.

I used Godot Engine because I was familiar with it.

Sending encrypted messages

Every message sent in the Smoke app is end-to-end encrypted with AES. Godot already had an implementation of the AES algorithm so I used it as-is.
+ Every message created in the app is turned into a dictionary that looks like this:

+ var message = {
+ "from": from, #the address of the sender (user1@example.com)
+ "to": to, #the address of the recipient (user2@example.com)
+ "type": type, #the message type (text, image, video, file, ...)
+ "time": time, #the time when the message was sent, in UNIX time
+ "data": data #the content of the message, which is encrypted
+ } +

The “data” part is AES-encrypted with a symmetric key. For now, there is no key exchange algorithm so the key is the same for everyone, which is NOT secure + (also the fact that only the "data" part is encrypted makes all the metadata unencrypted, which is... not good).

For the UI part, I used WhatsApp’s dark mode colors. It doesn’t matter too much since the app is not to be released.
+ This is what it looks like:

A screenshot of a conversation in the Smoke app. Person A says 'hey', person B replies 'hello', and then person A asks 'How do you do?'

It still needs work of course. The message bubble will need to show the hour the message was sent at, and there should be a “received” and “read” checkmark in the bottom-right corner. Sending images is also not supported for now.

After a message is sent or received, it is stored in plain text in a JSON file containing all your message log with the person you’re currently talking with. Each conversation is a different file, and the according file is loaded each time you enter a conversation. The goal for later will be to create a way to load only the last x messages of the log file and load older messages only when needed in order to speed things up.

Managing your contact list

The main screen of the app is a list of your conversations with all your contacts. You can add a new contact (and therefore a new conversation) with the + button in the bottom-right corner, which will send you to the ‘Contacts’ menu where you can add and delete contacts. Each time you add or delete a contact, a file in the JSON format is updated accordingly.

Here are the ‘Conversations’ and ‘Contacts’ menus:

A screenshot of the conversation list in Smoke. There is only one conversation available, with a contact named 'Ailyaut'.

A screenshot of the contact list. Only one person is in there.

Logging in

There is no real login system for now, the address you use on the login screen will determine your identity for the session. + No password is currently required. For later versions, the app will ask for a password, which will be hashed and sent to the server with the login. + From there, the credentials will be compared against those in the server database and that’s it.

A screenshot of the login screen. It says 'Welcome!' in big letters.

Hosting your own server

One of my goals was to make it easy to self-host a Smoke server. This is why I also developed a server-side software for the messages to be sent through. + DNS records were a pain when I set up my XMPP server, so I wanted to avoid that as much as possible. + For this purpose, I made it so that when you login or register with an account, the domain part is converted into a “smoke” subdomain under the hood. + No need for SRV records and multiple subdomains, just enter your login credentials like this:

name@example.com

And the app will transform it to:

name@smoke.example.com

But the first one will still be displayed. The app will just know that it has to send messages to smoke.example.com. If you’re hosting the server, you will host it on smoke.example.com and never think about it again.

Limitations

The app is not complete, and it is also not secure. The encryption key is currently the same for everyone and there is no login system. This app should NOT be used for secure communication!

+ +

My role

Programming

Software used

Godot Engine

+ + + diff --git a/projects/smoke/media/smoke_screenshot_01.png b/projects/smoke/media/smoke_screenshot_01.png new file mode 100644 index 0000000..de92cfb Binary files /dev/null and b/projects/smoke/media/smoke_screenshot_01.png differ diff --git a/projects/smoke/media/smoke_screenshot_02.png b/projects/smoke/media/smoke_screenshot_02.png new file mode 100644 index 0000000..bb029e3 Binary files /dev/null and b/projects/smoke/media/smoke_screenshot_02.png differ diff --git a/projects/smoke/media/smoke_screenshot_03.png b/projects/smoke/media/smoke_screenshot_03.png new file mode 100644 index 0000000..cf20920 Binary files /dev/null and b/projects/smoke/media/smoke_screenshot_03.png differ diff --git a/projects/smoke/media/smoke_screenshot_04.png b/projects/smoke/media/smoke_screenshot_04.png new file mode 100644 index 0000000..6651410 Binary files /dev/null and b/projects/smoke/media/smoke_screenshot_04.png differ diff --git a/projects/smoke/thumb.png b/projects/smoke/thumb.png new file mode 100644 index 0000000..34ef83b Binary files /dev/null and b/projects/smoke/thumb.png differ diff --git a/projects/thunderblight/index.html b/projects/thunderblight/index.html new file mode 100644 index 0000000..e084aad --- /dev/null +++ b/projects/thunderblight/index.html @@ -0,0 +1,79 @@ + + + + + + + Thunderblight Ganon – Ailyaut's blog + + + + + + + + + + + + + + +

+ Ailyaut's blog +

+ +

Thunderblight Ganon

A metal cover of the Blight battle theme from The Legend of Zelda: Breath of the Wild.

When I choose a music to do a cover of, it's usually a music that I'm obsessed with (or my partner is) and I think turning it into metal would be kind of subversive. In this case, I did it for... I'm ashamed to say it... clout. Pure clout. The sequel to Breath of the Wild was about to be released so I thought it would be smart to do a Zelda cover.

The obvious choice if I wanted clout would have been a music of Tears of the Kingdom, but I feared the music might contain spoiler (I'm a gamer first!), so the closest thing was a Breath of the Wild music and so I just did that. And it's probably the cover I like the least. Lesson learned.

+ + +

My role

Adaptation, performance, mixing, mastering, illustration

Software used

Reaper, Krita, Inkscape, Blender

+ + + diff --git a/projects/thunderblight/thumb.png b/projects/thunderblight/thumb.png new file mode 100644 index 0000000..542f94e Binary files /dev/null and b/projects/thunderblight/thumb.png differ diff --git a/rss.xml b/rss.xml new file mode 100644 index 0000000..fecc014 --- /dev/null +++ b/rss.xml @@ -0,0 +1,73 @@ + + + + + Ailyaut's Blog + https://ailyaut.com + + https://ailyaut.com/media/icons/favicon-32x32.png + Ailyaut's Blog + https://ailyaut.com + + + + + Moxxy UI: May 2024 progress report + + https://ailyaut.com/blog/202405_moxxy_progress_report.html + 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! + + posts + + https://ailyaut.com/blog/202405_moxxy_progress_report.html + Ailyaut + Sun, 09 Jun 2024 22:00:00 +0200 + https://ailyaut.com/blog/media/2024/20240407_moxxy_progress.png + + + + Moxxy UI: April 2024 progress report + + https://ailyaut.com/blog/202404_moxxy_progress_report.html + 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. + + posts + + https://ailyaut.com/blog/202404_moxxy_progress_report.html + Ailyaut + Wed, 08 May 2024 22:00:00 +0200 + https://ailyaut.com/blog/media/2024/20240407_moxxy_progress.png + + + + Moxxy UI: March 2024 progress report + + https://ailyaut.com/blog/202403_moxxy_progress_report.html + 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. + + posts + + https://ailyaut.com/blog/202403_moxxy_progress_report.html + Ailyaut + Sun, 07 Apr 2024 22:00:00 +0200 + https://ailyaut.com/blog/media/2024/20240407_moxxy_progress.png + + + + Hello world! + + https://ailyaut.com/blog/hello_world.html + Welcome! I'm Ailyaut, and this is my blog! You can read more about who I am in the About section. + + posts + + https://ailyaut.com/blog/hello_world.html + Ailyaut + Wed, 13 Mar 2024 22:00:00 +0100 + https://ailyaut.com/blog/media/2024/20240313_hello.png + + + + + + \ No newline at end of file diff --git a/scripts/export.sh b/scripts/export.sh new file mode 100644 index 0000000..6fca531 --- /dev/null +++ b/scripts/export.sh @@ -0,0 +1,4 @@ +cd ../.. +mv ailyaut.com.zip ailyaut.com_old.zip +zip -r ailyaut.com.zip ailyaut.com +bash export_ailyaut.com.sh diff --git a/scripts/markdown_to_html.py b/scripts/markdown_to_html.py new file mode 100644 index 0000000..b54ec06 --- /dev/null +++ b/scripts/markdown_to_html.py @@ -0,0 +1,206 @@ +import os +import time +import math +import markdown + +#templates +with open('templates/blog_post.html', 'r') as file: blog_post_temp = file.readlines() +with open('templates/head.html', 'r') as file: head_temp = file.readlines() +with open('templates/header.html', 'r') as file: header_temp = file.readlines() +with open('templates/footer.html', 'r') as file: footer_temp = file.readlines() + +with open('templates/blog.html', 'r') as file: blog_temp = file.readlines() +with open('templates/blog_card.html', 'r') as file: blog_card_temp = file.readlines() +with open('templates/blog_list.html', 'r') as file: blog_list_temp = file.readlines() +with open('templates/index.html', 'r') as file: index_temp = file.readlines() +with open('templates/rss.xml', 'r') as file: rss_temp = file.readlines() +with open('templates/rss_item.xml', 'r') as file: rss_item_temp = file.readlines() + +root = '../blog/' +posts = os.listdir(str(root + 'md/')) +posts.remove('draft') + +# unix_time = int(time.time()) +# rss_time = print(time.strftime("%a, %d %b %Y %H:%M:%S %z", time.localtime(unix_time))) + +# MD TO HTML ============================================================== +for post in posts: + #read file + path = str(root + 'md/' + post) + with open(path, 'r') as file: + text = file.readlines() + + #read metadata + for line in text: + if 'title = ' in line: title = line.replace('title = ', '') + if 'timestamp = ' in line: timestamp = line.replace('timestamp = ', '') + if 'preview = ' in line: preview = line.replace('preview = ', '') + if 'thumb = ' in line: thumb = line.replace('thumb = ', '') + if 'auto' in timestamp: + timestamp = str(int(time.time())) # !! should write this into the md file later + + #delete metadata before converting + index = 0 + for i in range(len(text)): + if '+++' in text[i]: + index = i + text = text[index+2:] #remove lines before '+++' and 2 more + + #convert to HTML + text = ''.join(text) + html = markdown.markdown(text) + + #add title, pubication date and reading time + date = str(time.strftime("%d/%m/%Y", time.localtime(int(timestamp)))) + word_count = len(text.split()) + reading_time = str(math.ceil(word_count / 200)) + insert = str('

' + title + '

' + '

' + date + ' · ' + reading_time + ' min

' + '

') + html = str(insert + html) + + #insert in template + head = head_temp.copy() + for i in range(len(head_temp)): + if '$title$' in head_temp[i]: head[i] = head[i].replace('$title$', title) + if '$preview$' in head_temp[i]: head[i] = head[i].replace('$preview$', preview) + if '$thumb$' in head_temp[i]: head[i] = head[i].replace('$thumb$', thumb) + header = header_temp.copy() + footer = footer_temp.copy() + blog = blog_post_temp.copy() + for i in range(len(blog_post_temp)): + if '$head.html$' in blog_post_temp[i]: blog[i] = blog[i].replace('$head.html$', ''.join(head)) + if '$header.html$' in blog_post_temp[i]: blog[i] = blog[i].replace('$header.html$', ''.join(header)) + if '$footer.html$' in blog_post_temp[i]: blog[i] = blog[i].replace('$footer.html$', ''.join(footer)) + if '$post$' in blog_post_temp[i]: blog[i] = blog[i].replace('$post$', ''.join(html)) + html = ''.join(blog) + + #export to HTML file + output_filename = post[:-3] #remove .md extension + index = 0 + for i in range(len(output_filename)): + if output_filename[i] == '+': + index = i + output_filename = output_filename[index+1:] #remove date from filename for cleaner URL + output_path = str(root + output_filename + '.html') + if not os.path.isfile(output_path): #check that file doesn't exist to prevent overwriting it + print('CREATE\t', output_path) + with open(output_path, 'w') as output: + output.write(html) + output.close() + else: print('SKIP\t',output_path) + +# GEN LIST ============================================================== +post_list = [] + +for post in posts: + #read file + path = str(root + 'md/' + post) + with open(path, 'r') as file: + text = file.readlines() + + #read metadata + for line in text: + if 'title = ' in line: title = line.replace('title = ', '') + if 'timestamp = ' in line: timestamp = line.replace('timestamp = ', '') + if 'preview = ' in line: preview = line.replace('preview = ', '') + if 'thumb = ' in line: thumb = line.replace('thumb = ', '') + if 'auto' in timestamp: + timestamp = str(int(time.time())) + + output_filename = post[:-3] #remove .md extension + index = 0 + for i in range(len(output_filename)): + if output_filename[i] == '+': + index = i + output_filename = output_filename[index+1:] #remove date from filename for cleaner URL + url = str('blog/' + output_filename + '.html') + + #fill post_list dict + post_list.append([title, timestamp, preview, thumb, url]) + +# GEN PAGES =============================================================== + +#create blog cards +latest_posts = post_list[-3:] +latest_posts.reverse() + +latest_posts_cards = '' + +for post in latest_posts: + blog_card = blog_card_temp.copy() + title = post[0] + timestamp = post[1] + preview = post[2] + thumb = post[3] + url = post[4] + for i in range(len(blog_card_temp)): + if '$title$' in blog_card_temp[i]: blog_card[i] = blog_card[i].replace('$title$', title) + if '$preview$' in blog_card_temp[i]: blog_card[i] = blog_card[i].replace('$preview$', preview) + if '$thumb$' in blog_card_temp[i]: blog_card[i] = blog_card[i].replace('$thumb$', thumb) + if '$url$' in blog_card_temp[i]: blog_card[i] = blog_card[i].replace('$url$', url) + latest_posts_cards = str(latest_posts_cards + ''.join(blog_card)) + +#replace in index +index = index_temp.copy() +for i in range(len(index_temp)): + if '$blog_card$' in index_temp[i]: index[i] = index[i].replace('$blog_card$', latest_posts_cards) +index = ''.join(index) +with open('../index.html', 'w') as output: + output.write(index) + output.close() + +#replace in rss +post_list.reverse() +rss_items = '' + +for post in post_list: + rss_item = rss_item_temp.copy() + title = post[0] + timestamp = post[1] + preview = post[2] + thumb = post[3] + url = post[4] + for i in range(len(rss_item_temp)): + if '$title$' in rss_item[i]: rss_item[i] = rss_item[i].replace('$title$', title) + if '$preview$' in rss_item[i]: rss_item[i] = rss_item[i].replace('$preview$', preview) + if '$thumb$' in rss_item[i]: rss_item[i] = rss_item[i].replace('$thumb$', thumb) + if '$url$' in rss_item[i]: rss_item[i] = rss_item[i].replace('$url$', url) + if '$date$' in rss_item[i]: rss_item[i] = rss_item[i].replace('$date$', time.strftime("%a, %d %b %Y %H:%M:%S %z", time.localtime(int(timestamp)))) + rss_items = str(rss_items + ''.join(rss_item)) + +rss = rss_temp.copy() +for i in range(len(rss_temp)): + if '$items$' in rss_temp[i]: rss[i] = rss[i].replace('$items$', rss_items) +with open('../rss.xml', 'w') as output: + output.writelines(rss) + output.close() + +#replace in blog +year = '0000' +blog_post_list = '' + +for post in post_list: #replace blog list + blog_list = blog_list_temp.copy() + title = post[0] + timestamp = post[1] + preview = post[2] + thumb = post[3] + url = post[4] + + blog_list[0] = blog_list[0].replace('$title$', title) + blog_list[0] = blog_list[0].replace('$date$', time.strftime("%d/%m", time.localtime(int(timestamp)))) + blog_list[0] = blog_list[0].replace('$url$', url) + + if time.strftime("%Y", time.localtime(int(timestamp))) != year: + year = time.strftime("%Y", time.localtime(int(timestamp))) + blog_post_list = str(blog_post_list + '

' + year + '

') + + blog_post_list = str(blog_post_list + ''.join(blog_list)) + +blog = blog_temp.copy() +for i in range(len(blog_temp)): + if '$blog_card$' in blog_temp[i]: blog[i] = blog[i].replace('$blog_card$', latest_posts_cards) + if '$blog_list$' in blog_temp[i]: blog[i] = blog[i].replace('$blog_list$', blog_post_list) +blog = ''.join(blog) +with open('../blog.html', 'w') as output: + output.write(blog) + output.close() diff --git a/scripts/minify_css.py b/scripts/minify_css.py new file mode 100644 index 0000000..1e7f55b --- /dev/null +++ b/scripts/minify_css.py @@ -0,0 +1,20 @@ +import os + +with open( '../style_expanded.css' , 'r' ) as file: + css = file.read() + +css = css.replace('\n', '') +css = css.replace('\t', '') +css = css.replace(' ', ' ') +css = css.replace(' ', ' ') +css = css.replace(' ', ' ') +css = css.replace(' { ', '{') +css = css.replace(' } ', '}') +css = css.replace('; ', ';') +css = css.replace(', ', ',') +css = css.replace(': ', ':') +css = css.replace(' (', '(') + +with open('../style.css', 'w') as output: + output.write(css) + output.close() \ No newline at end of file diff --git a/scripts/templates/blog.html b/scripts/templates/blog.html new file mode 100644 index 0000000..c272393 --- /dev/null +++ b/scripts/templates/blog.html @@ -0,0 +1,92 @@ + + + + + + + Blog – Ailyaut's blog + + + + + + + + + + + + + + + +

+ Ailyaut's blog +

+ +

Blog

+ +

All posts

+ $blog_list$ +

+ +

+ + + diff --git a/scripts/templates/blog_card.html b/scripts/templates/blog_card.html new file mode 100644 index 0000000..dc6ff2c --- /dev/null +++ b/scripts/templates/blog_card.html @@ -0,0 +1,13 @@ +

+ +

$title$

+ $preview$ +

+ +

\ No newline at end of file diff --git a/scripts/templates/blog_list.html b/scripts/templates/blog_list.html new file mode 100644 index 0000000..4434d29 --- /dev/null +++ b/scripts/templates/blog_list.html @@ -0,0 +1 @@ +

$date$ $title$

\ No newline at end of file diff --git a/scripts/templates/blog_post.html b/scripts/templates/blog_post.html new file mode 100644 index 0000000..0116ec6 --- /dev/null +++ b/scripts/templates/blog_post.html @@ -0,0 +1,14 @@ +$head.html$ + +$header.html$ +

+ $post$ +

+$footer.html$ + \ No newline at end of file diff --git a/scripts/templates/footer.html b/scripts/templates/footer.html new file mode 100644 index 0000000..7dfe818 --- /dev/null +++ b/scripts/templates/footer.html @@ -0,0 +1,21 @@ + \ No newline at end of file diff --git a/scripts/templates/head.html b/scripts/templates/head.html new file mode 100644 index 0000000..4b596a2 --- /dev/null +++ b/scripts/templates/head.html @@ -0,0 +1,17 @@ + + + + + + + $title$ – Ailyaut's blog + + + + + + + + + + \ No newline at end of file diff --git a/scripts/templates/header.html b/scripts/templates/header.html new file mode 100644 index 0000000..01cb022 --- /dev/null +++ b/scripts/templates/header.html @@ -0,0 +1,13 @@ +

+ Ailyaut's blog +

+ +

\ No newline at end of file diff --git a/scripts/templates/index.html b/scripts/templates/index.html new file mode 100644 index 0000000..9ccd80f --- /dev/null +++ b/scripts/templates/index.html @@ -0,0 +1,128 @@ + + + + + + + Ailyaut's blog + + + + + + + + + + + + + + + +

+ Ailyaut's blog +

+ +

Heyo!

I'm Ailyaut, a 24-year-old everything-designer with a particular interest in open source and card games.
+ I have studied 3D animation and now work as a UI & product designer, sometimes programmer. +

+ + +

Featured project

All projects >

Gang

Learn more >

+ + +

Blog

All posts >

+ + $blog_card$ +

+ + + diff --git a/scripts/templates/rss.xml b/scripts/templates/rss.xml new file mode 100644 index 0000000..f6c1b3f --- /dev/null +++ b/scripts/templates/rss.xml @@ -0,0 +1,17 @@ + + + + + Ailyaut's Blog + https://ailyaut.com + + https://ailyaut.com/media/icons/favicon-32x32.png + Ailyaut's Blog + https://ailyaut.com + + + + $items$ + + + \ No newline at end of file diff --git a/scripts/templates/rss_item.xml b/scripts/templates/rss_item.xml new file mode 100644 index 0000000..990388f --- /dev/null +++ b/scripts/templates/rss_item.xml @@ -0,0 +1,12 @@ + + $title$ + https://ailyaut.com/$url$ + $preview$ + posts + + https://ailyaut.com/$url$ + Ailyaut + $date$ + https://ailyaut.com/$thumb$ + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..84129ac --- /dev/null +++ b/style.css @@ -0,0 +1 @@ +:root{--accent:#9b9bff;--background:white;--onBackground:black;--surface:#f4f4f4;--outline:#e0e0e0;--light:#666666;--link:#0069C2;--icons:none;--inverseIcons:invert();}@media(prefers-color-scheme:dark){:root{--accent:#9b9bff;--background:black;--onBackground:white;--surface:#202020;--outline:#3a3a3a;--light:#AAAAAA;--link:#8CB4FF;--icons:invert();--inverseIcons:none;}.button:hover,.button:active{.icon{filter:var(--inverseIcons);transition:all 0.2s ease;}}}@font-face{font-family:"title";src:url("media/fonts/bricolagegrotesque.woff2")format("woff2");}html{box-sizing:border-box;scroll-behavior:smooth;}*,*::before,*::after{box-sizing:inherit;}body{background-color:var(--background);margin:0;}main{margin-top:6em;margin-bottom:2em;display:flex;flex-direction:column;align-items:center;min-height:calc(100vh - 18em);}/* TEXT */h1,h2,h3{font-family:'title',sans-serif;font-weight:400;color:var(--onBackground);}h1{ font-size:2.5em;margin-bottom:0.25em;margin-top:0;}h2{ font-size:2em;margin-bottom:0.5em;}h3{font-size:1.6em;margin-bottom:0.5em;}p,ol,ul,li,.bold,.light,.credit,.monospace{font-family:system-ui,sans-serif;font-weight:400;font-size:1em;line-height:1.5em;margin-top:0;color:var(--onBackground);flex-wrap:wrap;}a{color:var(--link);}.bold{font-weight:800;}.italic{font-style:italic;}.light,.credit{color:var(--light);}.credit{font-style:italic;}.monospace{font-family:ui-monospace,monospace;background-color:var(--surface);border:1px solid var(--outline);border-radius:0.5em;padding:0.5em;}li{padding-left:0.5em;}.link_title{text-decoration:underline 4px var(--accent);transition:all 0.2s ease-out;}.link_title:hover{margin-right:0.5em;transition:all 0.2s ease-out;}hr{width:100%;border:none;border-top:solid 2px var(--outline);}.card_title,.card_text{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2; line-clamp:2;-webkit-box-orient:vertical;margin-top:0.5em;margin-bottom:0;transition:all 0.2s ease-out;}.card_text{color:var(--light);margin-bottom:1em}/* CONTAINERS */.box,.card,.column{display:flex;flex-direction:column;width:100%;}.box{padding:0 1.25em 0 1.25em;}.row{display:flex;flex-direction:row;flex-wrap:wrap;width:100%;height:var(--custom_height);}.card{padding:0;position:relative;bottom:0;left:0;filter:drop-shadow(0 0 0 var(--surface));background-color:var(--surface);border-radius:1.5em;border:1px solid var(--outline);transition:all 0.2s ease-out;}.card:hover,.card:active{bottom:1em;left:1em;filter:drop-shadow(-1em 1em 0 var(--accent));background-color:var(--accent);transition:all 0.2s ease-out;border:none;.card_title,.card_text {color:black;transition:all 0.2s ease-out;}}.spacer{width:var(--size);height:var(--size);}@media(min-width:768px){.box{flex-direction:row;max-width:1240px;}.column{width:var(--custom_width);}.row{flex-wrap:nowrap;}}/* ALIGNMENT */.align_left,.align_horizontal,.align_right{display:flex;flex-direction:column;width:100%}.align_top,.align_vertical,.align_bottom{display:flex;flex-direction:row;height:100%;}.align_left,.align_top{align-items:flex-start;}.align_horizontal,.align_vertical{align-items:center;}.align_right,.align_bottom{align-items:flex-end;}/* MEDIA */#portrait{max-width:min(100%,200px);max-height:200px;border-radius:100%;}.image_custom{max-width:min(var(--custom_size),90%);max-height:var(--custom_size);}.icon{filter:var(--icons);}.icon:hover,.icon:active{opacity:0.75;filter:opacity(0.75);-webkit-filter:opacity(0.75);filter:var(--icons);}.card_image{width:100vw;max-width:100%;aspect-ratio:16/10;border-radius:1.5em 1.5em 0 0;object-fit:cover;}.gallery{max-width:100%;border-radius:1em;}/* HEADER & FOOTER */header,footer{display:flex;flex-direction:column;align-items:center;}#header_box,#footer_box{display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:100%;height:5em;padding:0 1.5em 0 1.5em;}#header_box{gap:1em;margin:1em 3em 0 3em;}#footer_box{margin:0 3em 4em 3em;}#header_title{font-family:'title',sans-serif;font-size:1.8em;font-weight:400;text-decoration:none;color:var(--onBackground);transition:all 0.1s ease;}#header_title:hover,#header_title:active{color:var(--accent);transition:all 0.1s ease;}#header_nav{display:flex;flex-direction:row;justify-content:flex-end;background-color:var(--surface);border:solid var(--outline) 1px;border-radius:5em;padding:0.5em 0.6em 0.5em 0.6em;gap:0.25em;}.nav_button,.nav_button_active,.button,.button_active{display:flex;flex-direction:row;align-items:center;font-family:'title',sans-serif;font-size:1em;font-weight:400;text-decoration:none;color:var(--onBackground);background-color:color-mix(in srgb,var(--onBackground),transparent 100%);padding:0.5em 0.8em 0.5em 0.8em;border-radius:1.5em;transition:all 0.2s ease;}.nav_button_active{color:black;background-color:var(--accent);}.nav_button:hover{background-color:color-mix(in srgb,var(--onBackground),transparent 92%);transition:all 0.2s ease;}.footer_item{display:flex;flex-direction:row;justify-content:center;}@media(min-width:922px){#header_box,#footer_box{flex-direction:row;align-items:center;max-width:1240px;margin:0 3em 0 3em;gap:0;}#header_nav{gap:0.5em;}.nav_button,.nav_button_active{font-size:1.2em;}}/* BUTTON */.button,.button_active{font-family:system-ui,sans-serif;background-color:var(--surface);padding:0.6em 1em 0.6em 1em;}.button:hover,.button:active,.button_active{background-color:var(--accent);color:black;transition:all 0.2s ease;.light{color:black;transition:all 0.2s ease;}}.btt{--offset:50px;bottom:2em;right:2em;position:sticky;place-self:end;padding:0.8em 0.9em 0.7em 0.9em;background-color:var(--accent);border-radius:3em;transition:all 0.1s ease;}.btt:hover,.btt:active{background-color:var(--onBackground);transition:all 0.1s ease;.bttimg{filter:var(--inverseIcons);}} \ No newline at end of file diff --git a/style_expanded.css b/style_expanded.css new file mode 100644 index 0000000..1ff2f79 --- /dev/null +++ b/style_expanded.css @@ -0,0 +1,417 @@ +:root { + --accent: #9b9bff; + --background: white; + --onBackground: black; + --surface: #f4f4f4; + --outline: #e0e0e0; + --light: #666666; + --link: #0069C2; + --icons: none; + --inverseIcons: invert(); +} + +@media (prefers-color-scheme: dark) { + :root { + --accent: #9b9bff; + --background: black; + --onBackground: white; + --surface: #202020; + --outline: #3a3a3a; + --light: #AAAAAA; + --link: #8CB4FF; + --icons: invert(); + --inverseIcons: none; + } + + .button:hover, .button:active { + .icon { filter: var(--inverseIcons); transition: all 0.2s ease; } + } +} + +@font-face { + font-family: "title"; + src: url("media/fonts/bricolagegrotesque.woff2")format("woff2"); +} + +html { + box-sizing: border-box; + scroll-behavior: smooth; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +body { + background-color: var(--background); + margin: 0; +} + +main { + margin-top: 6em; + margin-bottom: 2em; + display: flex; + flex-direction: column; + align-items: center; + min-height: calc(100vh - 18em); +} + +/* TEXT */ +h1, h2, h3 { + font-family: 'title', sans-serif; + font-weight: 400; + color: var(--onBackground); +} + +h1{ + font-size: 2.5em; + margin-bottom: 0.25em; + margin-top: 0; +} + +h2{ + font-size: 2em; + margin-bottom: 0.5em; +} + +h3 { + font-size: 1.6em; + margin-bottom: 0.5em; +} + +p, ol, ul, li, .bold, .light, .credit, .monospace { + font-family: system-ui, sans-serif; + font-weight: 400; + font-size: 1em; + line-height: 1.5em; + margin-top: 0; + color: var(--onBackground); + flex-wrap: wrap; +} + +a { + color: var(--link); +} + +.bold { + font-weight: 800; +} + +.italic { + font-style: italic; +} + +.light, .credit { + color: var(--light); +} + +.credit { + font-style: italic; +} + +.monospace { + font-family: ui-monospace, monospace; + background-color: var(--surface); + border: 1px solid var(--outline); + border-radius: 0.5em; + padding: 0.5em; +} + +li { + padding-left: 0.5em; +} + +.link_title { + text-decoration: underline 4px var(--accent); + transition: all 0.2s ease-out; +} + +.link_title:hover { + margin-right: 0.5em; + transition: all 0.2s ease-out; +} + +hr { + width: 100%; + border: none; + border-top: solid 2px var(--outline); +} + +.card_title, .card_text { + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 2; + line-clamp: 2; + -webkit-box-orient: vertical; + margin-top: 0.5em; + margin-bottom: 0; + transition: all 0.2s ease-out; +} + +.card_text { + color: var(--light); + margin-bottom: 1em +} + +/* CONTAINERS */ +.box, .card, .column { + display: flex; + flex-direction: column; + width: 100%; +} + +.box { + padding: 0 1.25em 0 1.25em; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 100%; + height: var(--custom_height); +} + +.card { + padding: 0; + position: relative; + bottom: 0; + left: 0; + filter: drop-shadow(0 0 0 var(--surface)); + background-color: var(--surface); + border-radius: 1.5em; + border: 1px solid var(--outline); + transition: all 0.2s ease-out; +} + +.card:hover, .card:active { + bottom: 1em; + left: 1em; + filter: drop-shadow(-1em 1em 0 var(--accent)); + background-color: var(--accent); + transition: all 0.2s ease-out; + border: none; + + .card_title, .card_text {color: black; transition: all 0.2s ease-out;} +} + +.spacer { + width: var(--size); + height: var(--size); +} + +@media (min-width: 768px) { + .box { + flex-direction: row; + max-width: 1240px; + } + + .column { + width: var(--custom_width); + } + + .row { + flex-wrap: nowrap; + } +} + +/* ALIGNMENT */ +.align_left, .align_horizontal, .align_right { + display: flex; + flex-direction: column; + width: 100% +} + +.align_top, .align_vertical, .align_bottom { + display: flex; + flex-direction: row; + height: 100%; +} + +.align_left, .align_top { + align-items: flex-start; +} + +.align_horizontal, .align_vertical { + align-items: center; +} + +.align_right, .align_bottom { + align-items: flex-end; +} + +/* MEDIA */ +#portrait { + max-width: min(100%, 200px); + max-height: 200px; + border-radius: 100%; +} + +.image_custom { + max-width: min(var(--custom_size), 90%); + max-height: var(--custom_size); +} + +.icon { + filter: var(--icons); +} + +.icon:hover, .icon:active { + opacity: 0.75; + filter: opacity(0.75); + -webkit-filter: opacity(0.75); + filter: var(--icons); +} + +.card_image { + width: 100vw; + max-width: 100%; + aspect-ratio: 16/10; + border-radius: 1.5em 1.5em 0 0; + object-fit: cover; +} + +.gallery { + max-width: 100%; + border-radius: 1em; +} + +/* HEADER & FOOTER */ +header, footer { + display: flex; + flex-direction: column; + align-items: center; +} + +#header_box, #footer_box { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + width: 100%; + height: 5em; + padding: 0 1.5em 0 1.5em; +} + +#header_box { + gap: 1em; + margin: 1em 3em 0 3em; +} + +#footer_box { + margin: 0 3em 4em 3em; +} + +#header_title { + font-family: 'title', sans-serif; + font-size: 1.8em; + font-weight: 400; + text-decoration: none; + color: var(--onBackground); + transition: all 0.1s ease; +} + +#header_title:hover, #header_title:active { + color: var(--accent); + transition: all 0.1s ease; +} + +#header_nav { + display: flex; + flex-direction: row; + justify-content: flex-end; + background-color: var(--surface); + border: solid var(--outline) 1px; + border-radius: 5em; + padding: 0.5em 0.6em 0.5em 0.6em; + gap: 0.25em; +} + +.nav_button, .nav_button_active, .button, .button_active { + display: flex; + flex-direction: row; + align-items: center; + + font-family: 'title', sans-serif; + font-size: 1em; + font-weight: 400; + text-decoration: none; + color: var(--onBackground); + + background-color: color-mix(in srgb, var(--onBackground), transparent 100%); + padding: 0.5em 0.8em 0.5em 0.8em; + border-radius: 1.5em; + + transition: all 0.2s ease; +} + +.nav_button_active { + color: black; + background-color: var(--accent); +} + +.nav_button:hover { + background-color: color-mix(in srgb, var(--onBackground), transparent 92%); + transition: all 0.2s ease; +} + +.footer_item { + display: flex; + flex-direction: row; + justify-content: center; +} + +@media (min-width: 922px) { + #header_box, #footer_box { + flex-direction: row; + align-items: center; + max-width: 1240px; + margin: 0 3em 0 3em; + gap: 0; + } + + #header_nav { + gap: 0.5em; + } + + .nav_button, .nav_button_active { + font-size: 1.2em; + } +} + +/* BUTTON */ +.button, .button_active { + font-family: system-ui, sans-serif; + background-color: var(--surface); + padding: 0.6em 1em 0.6em 1em; +} + +.button:hover, .button:active, .button_active { + background-color: var(--accent); + color: black; + transition: all 0.2s ease; + + .light { color: black; transition: all 0.2s ease; } +} + + + +.btt { + --offset: 50px; + bottom: 2em; + right: 2em; + position: sticky; + place-self: end; + padding: 0.8em 0.9em 0.7em 0.9em; + background-color: var(--accent); + border-radius: 3em; + transition: all 0.1s ease; +} + +.btt:hover, .btt:active { + background-color: var(--onBackground); + transition: all 0.1s ease; + .bttimg { + filter: var(--inverseIcons); + } +} \ No newline at end of file

About

About me

About this website

Copyright

Contact

Blog

Recent posts

Moxxy UI: May 2024 progress report +

Moxxy UI: April 2024 progress report +

Moxxy UI: March 2024 progress report +

All posts

2024

Moxxy UI: March 2024 progress report +

Moxxy UI: April 2024 progress report +

Moxxy UI: May 2024 progress report +

Hello world! +

Gallery

Heyo!

Featured project

Gang

Blog

Moxxy UI: May 2024 progress report +

Moxxy UI: April 2024 progress report +

Moxxy UI: March 2024 progress report +

Projects

Animation

Never Gonna Give You Up

Kaya sur la banquise

Patatotapopata

UI & webdesign

Moxxy

1999

Games

Gang

Hanafuda guides

Apps & Software

pwgen

Smoke

Music

Les ménestrels percussion nistes

Thunderblight Ganon

Never Gonna Give You Up

Oummm le dauphin blanc

Chapeau Champion

Camel by Camel

Camel by Camel

My role

Software used

Chapeau Champion

My role

Software used

Gang

Files

My role

Software used

Hanafuda guides

Files

My role

Software used

Kaya sur la banquise

My role

Software used

Les ménestrels percussionnistes

My role

Software used

Moxxy

Moxxy UI: May 2024 progress report

My role

Software used

Oummm le dauphin blanc

My role

Software used

Patatotapopata

Requirements

Table of contents

Character design

Storyboard

Animatic

Environment design

3D Sculpt & Retopology