removed drawing-gallery page
This commit is contained in:
@@ -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>
|
|
||||||
@@ -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!).",
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
Reference in New Issue
Block a user