added drawings to drawing gallery

src/routes/drawings/+page.svelte

@@ -4,6 +4,8 @@
     import { drawings } from "./drawings";
 
     let selectedIndex: number = $state(0);
+
+    let drawingsRev = drawings.toReversed();
 </script>
 
 <svelte:head>
@@ -14,20 +16,27 @@
     <Banner2
         title="Drawing Gallery"
         banner="banner.webp"
-        bannerAlt="Mirror picture of me, pixelated beyond recognition"
+        bannerAlt="Several Faber-Castell Polychromos colour pencils lined up with markings next to them in the same colour on a sheet of paper."
-        subtitle="minor things I have worked on"
+        subtitle="???"
         />
     
     <div class="selected-container">
-        <img
+        <a class="selected-img-link" href={drawingsRev[selectedIndex].src}>
+            <img
             class="selected-img"
-            src={drawings[selectedIndex].src}
+            src={drawingsRev[selectedIndex].src}
-            alt={drawings[selectedIndex].alt}
+            alt={drawingsRev[selectedIndex].alt}
         />
+        </a>
         
         <div class="selected-text-container">
-            <p class="selected-date">from {drawings[selectedIndex].date}</p>
+            <div class="selected-text-header">
-            {#each drawings[selectedIndex].desc as d}
+                {#if drawingsRev[selectedIndex].title}
+                    <p class="selected-title">{drawingsRev[selectedIndex].title}</p>
+                {/if}
+                <p class="selected-date">from {drawingsRev[selectedIndex].date}</p>
+            </div>
+            {#each drawingsRev[selectedIndex].desc as d}
                 <p>{@html d}</p>
             {/each}
         </div>
@@ -36,7 +45,7 @@
     <hr>
 
     <div class="img-button-container">
-        {#each drawings as d, index}
+        {#each drawingsRev as d, index}
             <button class="img-button" onclick={() => selectedIndex = index}>
                 <img src={d.src} alt={d.alt} loading="lazy" />
             </button>
@@ -52,8 +61,12 @@
         gap: 16px;
     }
 
+    .selected-img-link {
+        margin: 0;
+    }
+
     .selected-img {
-        object-fit: cover;
+        object-fit: contain;
         width: 100%;
         height: 400px;
         max-height: initial;
@@ -62,13 +75,20 @@
     .selected-text-container {
         display: flex;
         flex-direction: column;
-        gap: 4px;
+        gap: 8px;
+    }
+
+    .selected-text-header p {
+        font-weight: 600;
+        font-style: italic;
+    }
+
+    .selected-title {
+        font-size: 1.1rem;
     }
 
     .selected-date {
         font-size: 1.0rem;
-        font-weight: 600;
-        font-style: italic;
     }
 
     .selected-text-container * {
@@ -78,13 +98,19 @@
     .img-button-container {
         display: grid;
         grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-        gap: 8px;
+        gap: 4px;
     }
 
     .img-button {
         cursor: pointer;
         width: 100%;
         overflow: hidden;
+        border-radius: var(--border-radius);
+        filter: brightness(70%) saturate(60%);
+        transition: filter var(--duration-animation) var(--anim-curve);
+    }
+    .img-button:hover {
+        filter: brightness(100%) saturate(100%);
     }
 
     .img-button img {
@@ -94,9 +120,9 @@
         transition: scale var(--duration-animation) var(--anim-curve);
     }
     .img-button:hover img {
-        scale: 1.16;
+        scale: 1.12;
     }
     .img-button:active img {
-        scale: 1.1;
+        scale: 1.08;
     }
 </style>

src/routes/drawings/drawings.ts

@@ -1,4 +1,5 @@
 export interface Drawing {
+    title?: string;
     date: string;
     src: string;
     alt: string;
@@ -7,73 +8,164 @@ export interface Drawing {
 
 export let drawings: Drawing[] = [
     {
-        date: "2026-01-01",
+        date: "2026-01-29",
-        src: "lecturer-gender.webp",
+        src: "/blog/2026/0129/girl.webp",
-        alt: "test",
+        alt: "A small drawing of an anime-style girl's head. She has a ponytail and is looking towards the left with a concentrated gaze.",
         desc: [
-            "test",
+            "A small sketch (only like 4cm wide) that I drew with a ballpoint pen on pink paper. The fact that I was able to sketch this, without any prior practice, plus an intrinsic want to be able to draw made me seriously consider learning to draw.",
-            "test",
+            "Having learned just a little bit about drawing, I can say now (a month and a half later) that this isn't great, but it served its purpose of making me start to draw!",
-            "test",
         ],
     },
     {
-        date: "2026-01-02",
+        title: "Bread Girl",
-        src: "cover.png",
+        date: "2026-01-30",
-        alt: "test",
+        src: "2026/breadgirl.webp",
+        alt: "An anime-style girl chewing on a piece of bread. She wears a ponytail and a sleeveless top.",
         desc: [
-            "test",
+            "I drew her during a game of Wizard. I initially wanted to make her chew on a whole loaf but I didn't know how to draw that.",
-            "test",
+            "Wasn't really sure how to convey that her mouth is full either, but in retrospect, I could have exaggerated the bow in her lower eyelids to do so.",
-            "test",
+            "I like her eyes. Her head could be taller, actually.",
         ],
     },
     {
-        date: "2026-01-02",
+        title: "Elizabeth",
-        src: "cover.png",
+        date: "2026-02-18",
-        alt: "test",
+        src: "/blog/2026/0205/13-2.webp",
+        alt: "A pencil drawing of a girl looking to the left. She is wearing a cropped loose tee and jeans, while her right hand is hinted to rest on her hip.",
         desc: [
-            "test",
+            "She's the product of me trying to re-draw the character I drew on day 1 of my drawing challenge, and I was really glad to see that I had actually improved!",
-            "test",
-            "test",
         ],
     },
     {
-        date: "2026-01-02",
+        title: "Emilia",
-        src: "cover.png",
+        date: "2026-02-23",
-        alt: "test",
+        src: "/blog/2026/0205/18.webp",
+        alt: "A pencil sketch of a girl holding up a V sign with her left arm. She is wearing a long-sleeve shirt, jeans, and her hair is tied up in a ponytail. She is winking, the other eye is coloured green. Her body is tilted towards the right side of the paper. In the top right corner is a lightly-drawn sketch of the girl's pose.",
         desc: [
-            "test",
+            "My first character with the new style of drawing eyes I picked up from a manga drawing book!",
-            "test",
+            "I named her Emilia because she looked like a more nice and caring character.",
-            "test",
         ],
     },
     {
-        date: "2026-01-01",
+        title: "Porter Robinson fanart",
-        src: "lecturer-gender.webp",
+        date: "2026-02-26",
-        alt: "test",
+        src: "/blog/2026/0205/21.webp",
+        alt: "Two pencil sketches traced over with a black fineliner. The left one is of a hand with a cube in its palm, sketched after the hand on the cover of Porter Robinson's album Worlds. Beneath it is an emoticon used on the same cover. To the right is a manga-style head with green eyes and wavy hair, meant to resemble Porter Robinson's Vocaloid mascot Po-Uta.",
         desc: [
-            "test",
+            "I drew the Worlds hand for practice and then decided to draw Po-Uta's head as well. I realised then that learning to draw gave me the ability to draw fanart.",
-            "test",
+            "I had never considered that possibility before.",
-            "test",
         ],
     },
     {
-        date: "2026-01-01",
+        title: "Cyborg Arm",
-        src: "lecturer-gender.webp",
+        date: "2026-02-27",
-        alt: "test",
+        src: "/blog/2026/0205/22.webp",
+        alt: "A pencil sketch of a girl with a ponytail, crop top, and track pants with a slightly shocked look on her face. She is looking at her right arm, which is a cyborg part.",
         desc: [
-            "test",
+            "Possibly my favourite sketch from the drawing challenge, because she looks cool, but also because her design deviates from the other characters a bit.",
-            "test",
-            "test",
         ],
     },
     {
-        date: "2026-01-01",
+        date: "2026-03-04",
-        src: "lecturer-gender.webp",
+        src: "/blog/2026/0205/27-1.webp",
-        alt: "test",
+        alt: "A drawing of a girl with her head tilted towards her right shoulder. She is smiling with her eyes closed and is holding up a victory sign with her left hand. She has her hair in a ponytail and is wearing jeans with shoulder straps, and there is a scrunchie on her left wrist as well.",
         desc: [
-            "test",
+            "This is actually the construction sketch of a drawing I later went over with a fineliner and coloured pencils. However, I kind of prefer the pencil sketch.",
-            "test",
+            "This was my first attempt at a head-on perspective. I had fun drawing details like the scrunchie, the jeans, and the smile!",
-            "test",
+        ],
+    },
+    {
+        date: "2026-03-10",
+        src: "2026/0310.webp",
+        alt: "A digital drawing of a girl with long brown hair in a ponytail. She has green eyes and is wearing a cropped shirt with stripes, an orange spaghetti top underneath, and dark trousers. She is holding her hands behind her back.",
+        desc: [
+            "ok i changed my mind on digital art. it's awesome.",
+            "My first drawing using Krita! I went with my usual methods but tried refining some things and adding (hopefully not overly misplaced) shadows too. I ended up really liking the ability to use layers, and colour in digital art just pops so nicely.",
+            "Initially, I drew the left arm in front of her body but later changed this to avoid drawing the hand.",
+        ],
+    },
+    {
+        date: "2026-03-18",
+        src: "2026/0318.webp",
+        alt: "A smiling character with a ponytail and bangs. Their eyes are closed.",
+        desc: [
+            "I drew this character while testing brushes in Krita.  It's why the coloured spaces all use a crayon-like brush whereas the shadows are dotted. It doesn't fit together, but hey, I had to learn that at some point, right?",
+            "I like her expression, it's cute.",
+        ],
+    },
+    {
+        date: "2026-03-28",
+        src: "2026/0328.webp",
+        alt: "Different eyes in different colours. The eye in the centre has a four-pronged star for a pupil.",
+        desc: [
+            "Some eye drawing practice while I was staying at a friends' house. Wanted to try some shading and overall just making the eyes look more interesting.",
+            "In retrospect, the eyebrows don't look good, and the eyelashes (on the bottom eye) are way off. I do like the star for the pupil on the middle one though!",
+        ],
+    },
+    {
+        date: "2026-03-29",
+        src: "2026/0329.webp",
+        alt: "Different eyes in different colours.",
+        desc: [
+            "More eye drawing practice. Note the eyeshadow as well as the shape of the eye in the top left. Eyelashes on the top one are still way off; I think it's both their size as well as their quantity (way too many individual hairs!).",
+        ],
+    },
+    {
+        title: "Lecturer Confused About Gender",
+        date: "2026-04-10",
+        src: "2026/0410.webp",
+        alt: "A sketch of my lecturer. He has short hair, blue eyes, and is wearing glasses. Next to him is a thinking cloud with gender markers and question marks inside.",
+        desc: [
+            "This drawing was inspired by my statistics lecturer saying (in good faith): \"there's male and female, but there's also diverse, which is a lot of genders, well I actually don't know how many\".",
+        ],
+    },
+    {
+        title: "Dyed Hair",
+        date: "2026-04-17",
+        src: "2026/0417.webp",
+        alt: "The head of a character facing away. Their hair is black and red.",
+        desc: [
+            "I played around with brushes during my statistics class and made this. There are a few things I like about it. I like that I drew it without outlines and it actually looks decent. I also love the hair colour gradient.",
+            "It doesn't really make sense for the hair to transition from red at the roots to black and then back to red, but it doesn't matter either. It looks cool.",
+        ],
+    },
+    {
+        date: "2026-04-20",
+        src: "2026/0420.webp",
+        alt: "Several pencil sketches including Plankton and Patrick from SpongeBob Squarepants as well as other faces. There's also a close-up of a semi-realistic green eye and a box with a plate and a single sphere on it, with the text 'One Pea 5€'.",
+        desc: [
+            "I've not given up on drawing using physical paper and pencils! And I've learned to draw Patrick('s head), for better or for worse.",
+            "This was drawn during a meeting a student group of mine had at university. I had fun drawing Patrick with different expressions! Plankton ended up not so good.",
+            "I quite like the more realistic-looking eye, especially the front view. The 'website girl' is me deciding on the head to use for sketches I want to put on this website for some text callouts. Haven't gotten around to drawing these sketches yet, but they'll be cool once I do.",
+            "The 'One Pea 5€' was me anticipating Tomodachi Life: Living the Dream.",
+        ],
+    },
+    {
+        title: "patrick doing not so good",
+        date: "2026-04-21",
+        src: "2026/0421.webp",
+        alt: "Two drawings of Patrick Star's head. The left is neutral, the right looks exhausted.",
+        desc: [
+            "Had some more fun drawing Patrick during my shift. The right one is me at work (I work in IT support).",
+        ],
+    },
+    {
+        date: "2026-04-24",
+        src: "2026/0424_hand.webp",
+        alt: "A hand with its fingers spread out. The nails are painted green.",
+        desc: [
+            "Another statistics class sketch! I'm bad at hands so I wanted to practice. I was a bit worried doing this, as other people in my class could see what's on my tablet, but I want to get over that feeling of people judging my drawings.",
+            "I played with shading in this one. It went okay. I didn't really know how to shade. The thumb also ended up too thin.",
+        ],
+    },
+    {
+        title: "Blinn-Phong",
+        date: "2026-04-24",
+        src: "2026/0424_ball.webp",
+        alt: "An orange sphere shaded to look three-dimensional.",
+        desc: [
+            "This is the dot from a '!' symbol I wrote in my statistics notes. I decided to try and shade it similarly to how I've seen it in game engines and 3D modelling software -- even with a specular highlight!",
+            "I like how this turned out! From a distance, it really looks kind of 3D, especially compared to all the other notes on the page.",
         ],
     },
 ];

src/routes/feed/drawings/lecturer-gender.md

@@ -7,7 +7,7 @@ images:
     - drawing
     - hinge
 imageAlts:
-    - A sketch of my lecturer. He has short hair, blue eyes, and is wearing glasses. Next to him is a thinking cloud with gender markers and question marks inside.
+    - 
     - A Microsoft Surface Pro 8 tablet with one of its two kickstand hinges broken apart.
 ---