129 lines
6.7 KiB
HTML
129 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Ailyaut's blog</title>
|
|
<link rel="icon" type="image/png" href="media/icons/favicon-16x16.png" sizes="16x16">
|
|
<link rel="stylesheet" href="style.css" />
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<meta property="og:title" content="Ailyaut's blog" />
|
|
<meta property="og:type" content="blog" />
|
|
<meta property="og:url" content="https://ailyaut.com/" />
|
|
<meta property="og:image" content="https://ailyaut.com/media/preview.png" />
|
|
<meta property="og:description" content="Hi! I'm Ailyaut, a 24-year-old everything-designer with a particular interest in open source and card games." />
|
|
<meta property="og:locale" content="en_US" />
|
|
<meta property="og:locale:alternate" content="fr_FR" />
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<div id="header_box">
|
|
<div>
|
|
<a href="index.html" id="header_title">Ailyaut's blog</a>
|
|
</div>
|
|
<nav id="header_nav">
|
|
<a href="blog.html" class="nav_button">Blog</a>
|
|
<a href="gallery.html" class="nav_button">Gallery</a>
|
|
<a href="projects.html" class="nav_button">Projects</a>
|
|
<a href="about.html" class="nav_button">About</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- intro -->
|
|
<div class="box">
|
|
<div class="column" style="--custom_width:25%">
|
|
<div class="align_vertical">
|
|
<div class="align_horizontal">
|
|
<img src="media/ailyaut.png" alt="Ailyaut" title="Ailyaut" id="portrait"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="spacer" style="--size: 2em"></div>
|
|
<div class="column" style="--custom_width:75%">
|
|
<h1>Heyo!</h1>
|
|
<p>I'm Ailyaut, a 24-year-old everything-designer with a particular interest in open source and card games.<br>
|
|
I have studied 3D animation and now work as a UI & product designer, sometimes programmer.
|
|
</p>
|
|
<p class="light" style="margin-bottom: 0;">
|
|
Je m'appelle Ailyaut, je suis un designer touche-à-tout de 24 ans qui s'intéresse particulièrement à l'open source et aux jeux de carte.
|
|
J'ai étudié l'animation 3D et je travaille actuellement comme designer UI & produit, et parfois comme programmeur.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Featured project -->
|
|
<div class="spacer" style="--size: 6em"></div>
|
|
<div class="box">
|
|
<div class="column" style="width: 100%;">
|
|
<div class="row align_vertical" style="justify-content: space-between; height: min-content;">
|
|
<div class="row align_vertical" style="gap: 0.75em;">
|
|
<h2 style="margin-bottom: 0; margin-top: 0;">Featured project</h2>
|
|
<img class="icon" src="media/icons/verified.svg">
|
|
</div>
|
|
<p style="min-width: max-content; position: relative; top: 0.75em;"><a href="projects.html" class="light">All projects ></a></p>
|
|
</div>
|
|
<div class="spacer" style="--size: 1em"></div>
|
|
<div class="row" style="background-color: var(--surface); border-radius: 2em; padding: 1.25em; gap: 2em; border: 1px solid var(--outline);">
|
|
<div class="column" style="max-width: 400px; width: 100%;">
|
|
<img src="projects/gang/thumb.png" style="border-radius: 1.5em;" title="Gang" alt="A red chinese dragon drawn in a manga style";/>
|
|
</div>
|
|
<div class="column">
|
|
<h2 style="margin-top: 0;">Gang</h2>
|
|
<p>A complete redesign of the famous card game "Gang of Four" in my own style, with a focus on being clean and accessible to colorblind people.
|
|
The whole game was made using only open source software and printed by a small company in Alsace (France). The PDF files are available for free printing.</p>
|
|
<p><a href="projects/gang/index.html">Learn more ></a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Blog -->
|
|
<div class="spacer" style="--size: 4em"></div>
|
|
<div class="box">
|
|
<div class="column" style="width: 100%;">
|
|
<div class="row align_vertical" style="justify-content: space-between; height: min-content;">
|
|
<div class="row align_vertical" style="gap: 0.75em;">
|
|
<h2 style="margin-bottom: 0; margin-top: 0;">Blog</h2>
|
|
<a href="rss.xml" style="position: relative; top: 0.2em;"><img class="icon" src="media/icons/rss.png"></a>
|
|
</div>
|
|
<p style="min-width: max-content; position: relative; top: 0.75em;"><a href="blog.html" class="light">All posts ></a></p>
|
|
</div>
|
|
<div class="spacer" style="--size: 1em"></div>
|
|
<div class="row" style="gap: 2em">
|
|
<!-- blog -->
|
|
$blog_card$
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="spacer" style="--size: 4em"></div>
|
|
</main>
|
|
|
|
<footer>
|
|
<div id="footer_box">
|
|
<div class="footer_item">
|
|
<p>Copyright © 2025 Ailyaut</p>
|
|
</div>
|
|
<div class="footer_item">
|
|
<a target="_blank" href="https://www.websitecarbon.com/website/ailyaut-robotfumeur-fr-index-html/" style="text-decoration: none;">
|
|
<p style="color: black; background-color: var(--accent); padding: 0.2em 0.6em 0.2em 0.6em ; border-radius: 1em;">
|
|
0.02g of CO₂/view
|
|
</p>
|
|
</a>
|
|
</div>
|
|
<div class="footer_item" style="justify-content: flex-end; gap: 1.75em;">
|
|
<a rel="me" href="https://mastodon.online/@ailyaut" target="_blank"><img src="media/icons/mastodon.png" class="icon" alt="Mastodon" title="Mastodon"/></a>
|
|
<a href="https://www.youtube.com/@ailyaut" target="_blank"><img src="media/icons/youtube.png" class="icon" alt="YouTube" title="YouTube"/></a>
|
|
<a href="https://ailyaut.bandcamp.com/" target="_blank"><img src="media/icons/bandcamp.png" class="icon" alt="Bandcamp" title="Bandcamp"/></a>
|
|
<a href="https://codeberg.org/ailyaut" target="_blank"><img src="media/icons/git.png" class="icon" alt="Git" title="Git"/></a>
|
|
<a href="rss.xml"><img src="media/icons/rss.png" class="icon" alt="RSS feed" title="RSS feed"/></a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</body>
|