Compare commits

...

2 Commits

Author SHA1 Message Date
8ab87a2f97 added update about bucket webring 2026-02-16 18:45:20 +01:00
9b84c6050e removed drawing-gallery page 2026-02-16 18:43:56 +01:00
5 changed files with 6 additions and 182 deletions

View File

@@ -1,151 +0,0 @@
<script lang="ts">
import Banner2 from "$lib/banner2.svelte";
import Content from "$lib/viewport/content.svelte";
import { drawings, type DrawingData } from "./drawing-data";
let selectedDrawingIndex: number = $state(-1);
function selectDrawing(index: number) {
selectedDrawingIndex = index;
}
</script>
<svelte:head>
<title>Drawing Gallery | denizk0461</title>
</svelte:head>
{#snippet drawing({ drawing }: { drawing: DrawingData })}
<button class="drawing-link-container" onclick={(event) => selectDrawing(drawings.indexOf(drawing))}>
<div class="drawing-content-container">
<img class="drawing-img" src="{drawing.fileName}" alt="{drawing.altText}">
<div class="drawing-overlay"></div>
</div>
</button>
{/snippet}
{#snippet inspector({ index }: { index: number })}
{#if index == -1}
<p class="inspector-img-note">click on an image to view details about it</p>
{:else}
<a class="inspector-link" href="{drawings[index].fileName}">
<img class="inspector-img" src="{drawings[index].fileName}" alt="{drawings[index].altText}">
</a>
<p class="inspector-date">{drawings[index].date}</p>
<hr>
{#each drawings[index].notes as n}
<p class="inspector-paragraph">{n}</p>
{/each}
{/if}
{/snippet}
<Content>
<Banner2
title="Drawing Gallery" />
<p>I'm trying this to motivate myself to draw more now. Let's see where this takes us.</p>
<div class="page-container">
<div class="drawing-gallery">
{#each drawings as d}
{@render drawing({drawing: d})}
{/each}
</div>
<div class="inspector">
{@render inspector({ index: selectedDrawingIndex })}
</div>
</div>
</Content>
<style>
.page-container {
display: flex;
flex-direction: row;
}
.drawing-gallery {
display: flex;
flex-wrap: wrap;
width: 60%;
padding-right: 16px;
box-sizing: border-box;
}
.drawing-link-container {
display: flex;
height: 14vh;
flex-grow: 1;
overflow: hidden;
}
.drawing-content-container {
position: relative;
cursor: pointer;
}
.drawing-img {
max-height: 100%;
min-width: 100%;
object-fit: cover;
vertical-align: bottom;
transition: scale 0.06s ease-out, filter 0.06s ease-out;
}
.drawing-overlay {
opacity: 0;
transition: opacity 0.06s ease-out;
background-color: var(--color-background-highlight-hover-dark);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
pointer-events: none;
display: flex;
flex-direction: column;
justify-content: end;
}
.drawing-content-container:hover .drawing-overlay {
opacity: 1;
}
.drawing-content-container:hover .drawing-img, .inspector-link:hover .inspector-img {
scale: 1.1;
/* filter: grayscale(60%); */
}
.inspector {
width: 40%;
display: flex;
flex-direction: column;
}
.inspector-link {
width: 100%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.inspector-img {
width: 100%;
margin: 0;
transition: scale 0.06s ease-out;
}
.inspector-date {
font-family: var(--font-mono);
font-weight: 600;
color: var(--color-highlight);
margin: 2px 0;
}
.inspector-paragraph {
margin: 2px 0;
}
.inspector-img-note {
padding: 64px 16px;
background-color: var(--color-background-highlight);
}
</style>

View File

@@ -1,31 +0,0 @@
export interface DrawingData {
fileName: string;
altText: string;
// Format: yyyy-MM-dd
date: string;
notes: string[];
}
export let drawings: DrawingData[] = [
{
fileName: "2026/breadgirl.webp",
altText: "An anime-style girl chewing on a piece of bread. She wears a ponytail and a sleeveless top.",
date: "2026-01-30",
notes: [
"I drew her during a game of Wizard. I initially wanted to make her chew on a whole loaf but I wasn't sure if I could draw that.",
"Wasn't really sure how to convey that her mouth is full, 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.",
],
},
{
fileName: "2026/girl.webp",
altText: "An anime-style girl's head. She has a ponytail and is looking towards the left with a concentrated gaze.",
date: "2026-01-29",
notes: [
"Her nose is a bit high but I do like her focused gaze. I think I nailed the eyes, to be honest, at least the left one, considering the drawing is just 3x4cm.",
"I'm super happy with this, especially since it was my first try drawing in a long time and I only used a ballpoint pen (non-erasable!).",
],
},
];

View File

@@ -1,6 +1,12 @@
import { type UpdateEntry } from "$lib/components/update-entry.svelte"; import { type UpdateEntry } from "$lib/components/update-entry.svelte";
export const entries: UpdateEntry[] = [ export const entries: UpdateEntry[] = [
{
date: "2026-02-16",
time: "18:44",
content: "My website is now part of the bucket webring!",
link: "https://webring.bucketfish.me/",
},
{ {
date: "2026-02-06", date: "2026-02-06",
time: "18:47", time: "18:47",

Binary file not shown.

Before

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 30 KiB