first commit

2025-05-15 16:06:00 +01:00
commit e8cf8acbbc
129 changed files with 3796 additions and 0 deletions
--- a/projects/gang/index.html
+++ b/projects/gang/index.html
@ -0,0 +1,102 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+	<meta charset="utf-8" />
+	<title>Gang – Ailyaut's blog</title>
+    <link rel="icon" type="image/png" href="../../media/icons/favicon-16x16.png" sizes="16x16">
+	<link rel="stylesheet" href="../../style.css" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <meta property="og:title" content="Gang – Ailyaut's blog" />
+    <meta property="og:type" content="blog" />
+    <meta property="og:url" content="https://ailyaut.com/" />
+    <meta property="og:image" content="https://ailyaut.com/media/preview.png" />
+    <meta property="og:description" content="Hi! I'm Ailyaut, a 24-year-old everything-designer with a particular interest in open source and card games." />
+    <meta property="og:locale" content="en_US" />
+</head>
+
+<body>
+    <header>
+        <div id="header_box">
+            <div>
+                <a href="../../index.html" id="header_title">Ailyaut's blog</a>
+            </div>
+            <nav id="header_nav">
+                <a href="../../blog.html" class="nav_button">Blog</a>
+                <a href="../../gallery.html" class="nav_button">Gallery</a>
+                <a href="../../projects.html" class="nav_button_active">Projects</a>
+                <a href="../../about.html" class="nav_button">About</a>
+            </nav>
+        </div>
+    </header>
+
+    <main>
+        <div class="box" style="justify-content: space-between; gap: 2em;">
+            <div class="column" style="--custom_width: 60%;">
+                <h1>Gang</h1>
+                <p>A complete redesign of the famous card game "Gang of Four" in my own style, with a focus on being clean and accessible to colorblind people. The whole game was made using only open source software and printed by a small company in Alsace (France).</p>
+                <div class="spacer" style="--size: 1em"></div>
+                <img src="media/preview_cards.png" title="5 cards preview" alt="5 cards of the game. From left to right: a card back, the multicolor 1, the green phoenix, the yellow phoenix, and the red dragon." />
+                <div class="spacer" style="--size: 1em"></div>
+                <!-- <img src="media/7_boxes.jpg" title="7 game boxes" alt="7 boxes of my card game featuring a Chinese dragon whose long body stretches across several sides of the box." />
+                <div class="spacer" style="--size: 1em"></div> -->
+                <p>Unfortunately, I do not own the rights to this game, so I cannot sell it.<br>
+                    If you want to print a copy of this game, you can use the following PDF files. I can recommend <a target="_blank" href="https://jeuxdecartes.printeurope.fr/calculateur">Printeurope</a> to print the cards. It might cost you more than the official version of the game, but hey, it's fun.</p>
+                <h2>Files</h2>
+                <p>Please note that you are allowed to use these PDF files for personal use only, except for anything related to AI. Commercial use and AI training are not allowed.</p>
+                <a target="_blank" href="media/gang_cards.pdf" class="button" style="gap: 0.5em; width: fit-content; margin-bottom: 0.5em;">
+                    <img class="icon" src="../../media/icons/download.svg" />
+                    Cards<span class="light">PDF · 9,3MB</span>
+                </a>
+                <p class="light" style="margin-bottom: 1em;">Please note that a 3mm bleed is included in this file. The final dimensions dimensions of the cards should be 63*88mm.</p>
+                    
+                <a target="_blank" href="media/gang_box.pdf" class="button" style="gap: 0.5em; width: fit-content; margin-bottom: 0.5em;">
+                    <img class="icon" src="../../media/icons/download.svg" />
+                    Box<span class="light">PDF · 4,7MB</span>
+                </a>
+                <a target="_blank" href="media/gang_rules_web_FR.pdf" class="button" style="gap: 0.5em; width: fit-content; margin-bottom: 0.5em;">
+                    <img class="icon" src="../../media/icons/download.svg" />
+                    Game rules (French)<span class="light">PDF · 800KB</span>
+                </a>
+                <a target="_blank" href="media/gang_score_sheet_FR.pdf" class="button" style="gap: 0.5em; width: fit-content; margin-bottom: 1.5em;">
+                    <img class="icon" src="../../media/icons/download.svg" />
+                    Score sheets (French)<span class="light">PDF · 200KB</span>
+                </a>
+            </div>
+            <div class="column" style="--custom_width: 30%;">
+                <img style="border-radius: 1em;" src="thumb.png"/>
+                <h3 style="margin-bottom: 0.5em;">My role</h3>
+                <p style="margin-bottom: 0;">Illustration, graphic design, writing</p>
+                <h3>Software used</h3>
+                <p>Scribus, Krita, Inkscape</p>
+            </div>
+        </div>
+        <div class="spacer" style="--size: 2em"></div>
+        <a href="#" class="btt"><img class="bttimg" src="../../media/icons/arrow_upward.png"/></a>
+    </main>
+
+    <footer>
+        <div id="footer_box">
+            <div class="footer_item">
+                <p>Copyright © 2025 Ailyaut</p>
+            </div>
+            <div class="footer_item">
+                <a target="_blank" href="https://www.websitecarbon.com/website/ailyaut-robotfumeur-fr-index-html/" style="text-decoration: none;">
+                    <p style="color: black; background-color: var(--accent); padding: 0.2em 0.6em 0.2em 0.6em ; border-radius: 1em;">
+                        0.02g of CO₂/view
+                    </p>
+                </a>
+            </div>
+            <div class="footer_item" style="justify-content: flex-end; gap: 1.75em;">
+                <a rel="me" href="https://mastodon.online/@ailyaut" target="_blank"><img src="../../media/icons/mastodon.png" class="icon" alt="Mastodon" title="Mastodon"/></a>
+                <a href="https://www.youtube.com/@ailyaut" target="_blank"><img src="../../media/icons/youtube.png" class="icon" alt="YouTube" title="YouTube"/></a>
+                <a href="https://ailyaut.bandcamp.com/" target="_blank"><img src="../../media/icons/bandcamp.png" class="icon" alt="Bandcamp" title="Bandcamp"/></a>
+                <a href="https://codeberg.org/ailyaut" target="_blank"><img src="../../media/icons/git.png" class="icon" alt="Git" title="Git"/></a>
+                <a href="../../rss.xml"><img src="../../media/icons/rss.png" class="icon" alt="RSS feed" title="RSS feed"/></a>
+            </div>
+        </div>
+    </footer>
+</body>
--- a/projects/gang/media/7_boxes.jpg
+++ b/projects/gang/media/7_boxes.jpg
--- a/projects/gang/media/gang_box.pdf
+++ b/projects/gang/media/gang_box.pdf
--- a/projects/gang/media/gang_cards.pdf
+++ b/projects/gang/media/gang_cards.pdf
--- a/projects/gang/media/gang_rules_FR.pdf
+++ b/projects/gang/media/gang_rules_FR.pdf
--- a/projects/gang/media/gang_rules_web_FR.pdf
+++ b/projects/gang/media/gang_rules_web_FR.pdf
--- a/projects/gang/media/gang_score_sheet_FR.pdf
+++ b/projects/gang/media/gang_score_sheet_FR.pdf
--- a/projects/gang/media/preview_cards.png
+++ b/projects/gang/media/preview_cards.png
--- a/projects/gang/thumb.png
+++ b/projects/gang/thumb.png