diff --git a/src/routes/drawings/+page.svelte b/src/routes/drawings/+page.svelte index 396e90c..39b9afa 100644 --- a/src/routes/drawings/+page.svelte +++ b/src/routes/drawings/+page.svelte @@ -4,6 +4,8 @@ import { drawings } from "./drawings"; let selectedIndex: number = $state(0); + + let drawingsRev = drawings.toReversed(); @@ -14,20 +16,27 @@
- + {drawings[selectedIndex].alt} +
-

from {drawings[selectedIndex].date}

- {#each drawings[selectedIndex].desc as d} +
+ {#if drawingsRev[selectedIndex].title} +

{drawingsRev[selectedIndex].title}

+ {/if} +

from {drawingsRev[selectedIndex].date}

+
+ {#each drawingsRev[selectedIndex].desc as d}

{@html d}

{/each}
@@ -36,7 +45,7 @@
- {#each drawings as d, index} + {#each drawingsRev as d, index} @@ -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; } \ No newline at end of file diff --git a/src/routes/drawings/drawings.ts b/src/routes/drawings/drawings.ts index 427b012..054ec69 100644 --- a/src/routes/drawings/drawings.ts +++ b/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", - src: "lecturer-gender.webp", - alt: "test", + date: "2026-01-29", + src: "/blog/2026/0129/girl.webp", + 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", - "test", - "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.", + "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!", ], }, { - date: "2026-01-02", - src: "cover.png", - alt: "test", + title: "Bread Girl", + date: "2026-01-30", + 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", - "test", - "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.", + "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.", + "I like her eyes. Her head could be taller, actually.", ], }, { - date: "2026-01-02", - src: "cover.png", - alt: "test", + title: "Elizabeth", + date: "2026-02-18", + 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", - "test", - "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!", ], }, { - date: "2026-01-02", - src: "cover.png", - alt: "test", + title: "Emilia", + date: "2026-02-23", + 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", - "test", - "test", + "My first character with the new style of drawing eyes I picked up from a manga drawing book!", + "I named her Emilia because she looked like a more nice and caring character.", ], }, { - date: "2026-01-01", - src: "lecturer-gender.webp", - alt: "test", + title: "Porter Robinson fanart", + date: "2026-02-26", + 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", - "test", - "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.", + "I had never considered that possibility before.", ], }, { - date: "2026-01-01", - src: "lecturer-gender.webp", - alt: "test", + title: "Cyborg Arm", + date: "2026-02-27", + 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", - "test", - "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.", ], }, { - date: "2026-01-01", - src: "lecturer-gender.webp", - alt: "test", + date: "2026-03-04", + src: "/blog/2026/0205/27-1.webp", + 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", - "test", - "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.", + "This was my first attempt at a head-on perspective. I had fun drawing details like the scrunchie, the jeans, and the smile!", + ], + }, + { + 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.", ], }, ]; \ No newline at end of file diff --git a/src/routes/feed/drawings/lecturer-gender.md b/src/routes/feed/drawings/lecturer-gender.md index c720910..010fcdf 100644 --- a/src/routes/feed/drawings/lecturer-gender.md +++ b/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. --- diff --git a/static/projects/drawings/firstmonth/0310.webp b/static/drawings/2026/0310.webp similarity index 100% rename from static/projects/drawings/firstmonth/0310.webp rename to static/drawings/2026/0310.webp diff --git a/static/drawings/2026/0318.webp b/static/drawings/2026/0318.webp new file mode 100644 index 0000000..6574705 Binary files /dev/null and b/static/drawings/2026/0318.webp differ diff --git a/static/drawings/2026/0328.webp b/static/drawings/2026/0328.webp new file mode 100644 index 0000000..e49bab9 Binary files /dev/null and b/static/drawings/2026/0328.webp differ diff --git a/static/drawings/2026/0329.webp b/static/drawings/2026/0329.webp new file mode 100644 index 0000000..8d0df54 Binary files /dev/null and b/static/drawings/2026/0329.webp differ diff --git a/static/drawings/lecturer-gender.webp b/static/drawings/2026/0410.webp similarity index 100% rename from static/drawings/lecturer-gender.webp rename to static/drawings/2026/0410.webp diff --git a/static/drawings/2026/0417.webp b/static/drawings/2026/0417.webp new file mode 100644 index 0000000..d0034d1 Binary files /dev/null and b/static/drawings/2026/0417.webp differ diff --git a/static/drawings/2026/0420.webp b/static/drawings/2026/0420.webp new file mode 100644 index 0000000..8659689 Binary files /dev/null and b/static/drawings/2026/0420.webp differ diff --git a/static/drawings/2026/0421.webp b/static/drawings/2026/0421.webp new file mode 100644 index 0000000..759aec0 Binary files /dev/null and b/static/drawings/2026/0421.webp differ diff --git a/static/drawings/2026/0424_ball.webp b/static/drawings/2026/0424_ball.webp new file mode 100644 index 0000000..196a06d Binary files /dev/null and b/static/drawings/2026/0424_ball.webp differ diff --git a/static/drawings/2026/0424_hand.webp b/static/drawings/2026/0424_hand.webp new file mode 100644 index 0000000..03e6b74 Binary files /dev/null and b/static/drawings/2026/0424_hand.webp differ diff --git a/static/projects/drawings/firstmonth/breadgirl.webp b/static/drawings/2026/breadgirl.webp similarity index 100% rename from static/projects/drawings/firstmonth/breadgirl.webp rename to static/drawings/2026/breadgirl.webp diff --git a/static/projects/drawings/firstmonth/banner.webp b/static/drawings/banner.webp similarity index 100% rename from static/projects/drawings/firstmonth/banner.webp rename to static/drawings/banner.webp