diff --git a/gallery.html b/gallery.html index 3571fc4..a2ce758 100644 --- a/gallery.html +++ b/gallery.html @@ -4,13 +4,13 @@ - Gallery – Ailyaut's blog + 3D / Gallery – Ailyaut's blog - + @@ -37,17 +37,15 @@

Gallery

-

This page is still under construction.

-
3D
-
Illustration
-
Graphic design
-
UI & webdesign
-
Animation
+ 3D + Illustration + Animation + Music
diff --git a/gallery/animation.html b/gallery/animation.html new file mode 100644 index 0000000..548808c --- /dev/null +++ b/gallery/animation.html @@ -0,0 +1,105 @@ + + + + + + + Animation / Gallery – Ailyaut's blog + + + + + + + + + + + + + + +
+
+
+ Ailyaut's blog +
+ +
+
+ +
+
+
+

Gallery

+
+
+
+
+
+ 3D + Illustration + Animation + Music +
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+
+ +
+ + + diff --git a/gallery/animation/bar.mp4 b/gallery/animation/bar.mp4 new file mode 100644 index 0000000..913eb1b Binary files /dev/null and b/gallery/animation/bar.mp4 differ diff --git a/gallery/animation/lettheshowbegin.mp4 b/gallery/animation/lettheshowbegin.mp4 new file mode 100644 index 0000000..8639cb4 Binary files /dev/null and b/gallery/animation/lettheshowbegin.mp4 differ diff --git a/gallery/animation/tentensky.mp4 b/gallery/animation/tentensky.mp4 new file mode 100644 index 0000000..1f025cc Binary files /dev/null and b/gallery/animation/tentensky.mp4 differ diff --git a/gallery/animation/tententrain.mp4 b/gallery/animation/tententrain.mp4 new file mode 100644 index 0000000..5b6363f Binary files /dev/null and b/gallery/animation/tententrain.mp4 differ diff --git a/gallery/illustration.html b/gallery/illustration.html new file mode 100644 index 0000000..4bd12f6 --- /dev/null +++ b/gallery/illustration.html @@ -0,0 +1,106 @@ + + + + + + + Illustration / Gallery – Ailyaut's blog + + + + + + + + + + + + + + +
+
+
+ Ailyaut's blog +
+ +
+
+ +
+
+
+

Gallery

+
+
+
+
+
+ 3D + Illustration + Animation + Music +
+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+ +
+ + + diff --git a/gallery/illustration/canevas_2025.png b/gallery/illustration/canevas_2025.png new file mode 100644 index 0000000..e0f6855 Binary files /dev/null and b/gallery/illustration/canevas_2025.png differ diff --git a/gallery/illustration/iso.png b/gallery/illustration/iso.png new file mode 100644 index 0000000..e646198 Binary files /dev/null and b/gallery/illustration/iso.png differ diff --git a/gallery/illustration/jupiter.png b/gallery/illustration/jupiter.png new file mode 100644 index 0000000..bb6e1fe Binary files /dev/null and b/gallery/illustration/jupiter.png differ diff --git a/gallery/illustration/leopard.jpg b/gallery/illustration/leopard.jpg new file mode 100644 index 0000000..6d84d29 Binary files /dev/null and b/gallery/illustration/leopard.jpg differ diff --git a/gallery/illustration/mars.png b/gallery/illustration/mars.png new file mode 100644 index 0000000..d86ccb4 Binary files /dev/null and b/gallery/illustration/mars.png differ diff --git a/gallery/illustration/thumb/leopard.png b/gallery/illustration/thumb/leopard.png new file mode 100644 index 0000000..4300bff Binary files /dev/null and b/gallery/illustration/thumb/leopard.png differ diff --git a/gallery/illustration/thumb/thunderblight.png b/gallery/illustration/thumb/thunderblight.png new file mode 100644 index 0000000..35fadb1 Binary files /dev/null and b/gallery/illustration/thumb/thunderblight.png differ diff --git a/gallery/illustration/thunderblight.png b/gallery/illustration/thunderblight.png new file mode 100644 index 0000000..74b79d2 Binary files /dev/null and b/gallery/illustration/thunderblight.png differ diff --git a/gallery/illustration/uranus.png b/gallery/illustration/uranus.png new file mode 100644 index 0000000..8cd3296 Binary files /dev/null and b/gallery/illustration/uranus.png differ diff --git a/gallery/music.html b/gallery/music.html new file mode 100644 index 0000000..514d87f --- /dev/null +++ b/gallery/music.html @@ -0,0 +1,102 @@ + + + + + + + Music / Gallery – Ailyaut's blog + + + + + + + + + + + + + + +
+
+
+ Ailyaut's blog +
+ +
+
+ +
+
+
+

Gallery

+
+
+
+
+
+ 3D + Illustration + Animation + Music +
+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+ +
+ + + diff --git a/style.css b/style.css index 052f383..406a506 100644 --- a/style.css +++ b/style.css @@ -1 +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;margin-bottom: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;}.reverse{flex-direction:column-reverse;}.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;} .verified {filter:brightness(0);}}.spacer{width:var(--size);height:var(--size);}@media(min-width:768px){.box{flex-direction:row;max-width:1240px;}.reverse{flex-direction:row;}.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);height:26px;}.verified{filter:var(--icons);position:relative;top:0.15em;overflow:visible;margin-top:-99em;height:24px;}.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 +: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;margin-bottom: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;}.reverse{flex-direction:column-reverse;}.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;} .verified {filter:brightness(0);}}.spacer{width:var(--size);height:var(--size);}@media(min-width:768px){.box{flex-direction:row;max-width:1240px;}.reverse{flex-direction:row;}.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);height:26px;}.verified{filter:var(--icons);position:relative;top:0.15em;overflow:visible;margin-top:-99em;height:24px;}.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{background-color:var(--surface);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 index 048a773..7a2c958 100644 --- a/style_expanded.css +++ b/style_expanded.css @@ -292,6 +292,7 @@ hr { } .gallery { + background-color: var(--surface); max-width: 100%; border-radius: 1em; }