updated main page
This commit is contained in:
@@ -1,137 +0,0 @@
|
||||
<script lang="ts">
|
||||
import Banner2 from "$lib/banner2.svelte";
|
||||
import Content from "$lib/viewport/content.svelte";
|
||||
import { type Drawing, drawings } from "./drawings";
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Drawing Gallery | denizk0461</title>
|
||||
</svelte:head>
|
||||
|
||||
{#snippet drawingGalleryEntry({d}: {d: Drawing})}
|
||||
<div class="gallery-entry">
|
||||
<div class="gallery-entry-img-container">
|
||||
<img src="{d.img}" alt="{d.imgAlt}">
|
||||
</div>
|
||||
<div class="gallery-entry-info">
|
||||
<p class="gallery-entry-title">{d.title} <span>{d.date}</span></p>
|
||||
{#each d.notes as note}
|
||||
<p class="gallery-entry-note">{note}</p>
|
||||
{/each}
|
||||
<a href="{d.img}">view full-size</a>
|
||||
</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
|
||||
<Content>
|
||||
<Banner2
|
||||
title="Drawing Gallery"
|
||||
subtitle=""
|
||||
banner="banner.webp"
|
||||
bannerAlt="Several Faber-Castell Polychromos colour pencils lined up with markings next to them in the same colour on a sheet of paper." />
|
||||
|
||||
<p>I started drawing at the start of 2026 and this is my page to show off what I make! I've mostly drawn on paper so far (I like the feel and resistance of pens on paper as well as the <a href="/blog/2026/0129">limitations</a> it imposes), but I got into digital art with Krita recently!</p>
|
||||
|
||||
<p>Why have I created this page, you may wonder? to pressure myself to draw more</p>
|
||||
|
||||
<p>If you're interested, here's a post about me <a href="/blog/2026/0205">drawing every day for 28 days</a> to learn to draw. You may recognise some of the drawings there; I picked out my favourite drawings and added them here!</p>
|
||||
|
||||
<div class="drawing-container">
|
||||
{#each drawings as d}
|
||||
{@render drawingGalleryEntry({d})}
|
||||
{/each}
|
||||
</div>
|
||||
</Content>
|
||||
|
||||
<style>
|
||||
.drawing-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.gallery-entry {
|
||||
position: relative;
|
||||
height: 340px;
|
||||
}
|
||||
|
||||
.gallery-entry-img-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gallery-entry-img-container, .gallery-entry-info {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.gallery-entry-img-container, .gallery-entry-info {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gallery-entry img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: scale var(--duration-animation) var(--anim-curve);
|
||||
}
|
||||
|
||||
.gallery-entry:hover img {
|
||||
scale: 1.2;
|
||||
}
|
||||
|
||||
.gallery-entry:hover .gallery-entry-info {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.gallery-entry-info {
|
||||
opacity: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: opacity var(--duration-animation) var(--anim-curve);
|
||||
background-color: var(--color-header-highlight);
|
||||
padding: 12px 8px;
|
||||
gap: 4px;
|
||||
box-sizing: border-box;
|
||||
justify-content: center;
|
||||
outline: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
|
||||
}
|
||||
|
||||
.gallery-entry-info * {
|
||||
margin: 0;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.gallery-entry-title {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.gallery-entry-title span {
|
||||
font-size: 0.8rem;
|
||||
line-height: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.gallery-entry-note, .gallery-entry-info a {
|
||||
font-size: 1.0rem;
|
||||
line-height: 1.3rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
.drawing-container {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.drawing-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,98 +0,0 @@
|
||||
export interface Drawing {
|
||||
title: string;
|
||||
date: string;
|
||||
desc: string[];
|
||||
src: string;
|
||||
alt: string;
|
||||
}
|
||||
|
||||
export let drawings: Drawing[] = [
|
||||
{
|
||||
title: "Krita #1",
|
||||
src: "2026/0310.webp",
|
||||
date: "2026-03-10",
|
||||
desc: [
|
||||
"2026-03-10",
|
||||
"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.",
|
||||
],
|
||||
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.",
|
||||
},
|
||||
{
|
||||
title: "SMILE! :D",
|
||||
date: "2026-03-04",
|
||||
src: "/blog/2026/0205/27-1.webp",
|
||||
desc: [
|
||||
"2026-03-04",
|
||||
"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!",
|
||||
],
|
||||
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.",
|
||||
},
|
||||
{
|
||||
title: "Cyborg Arm",
|
||||
date: "2026-02-27",
|
||||
src: "/blog/2026/0205/22.webp",
|
||||
desc: [
|
||||
"2026-02-27",
|
||||
"Possibly my favourite sketch from the drawing challenge, because she looks cool, but also because her design deviates from the other characters a bit.",
|
||||
],
|
||||
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.",
|
||||
},
|
||||
{
|
||||
title: "Porter Robinson fanart",
|
||||
date: "2026-02-26",
|
||||
src: "/blog/2026/0205/21.webp",
|
||||
desc: [
|
||||
"2026-02-26",
|
||||
"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.",
|
||||
],
|
||||
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.",
|
||||
},
|
||||
{
|
||||
title: "Emilia",
|
||||
date: "2026-02-23",
|
||||
src: "/blog/2026/0205/18.webp",
|
||||
desc: [
|
||||
"2026-02-23",
|
||||
"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.",
|
||||
],
|
||||
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.",
|
||||
},
|
||||
{
|
||||
title: "Elizabeth",
|
||||
date: "2026-02-18",
|
||||
src: "/blog/2026/0205/13-2.webp",
|
||||
desc: [
|
||||
"2026-02-18",
|
||||
"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!",
|
||||
],
|
||||
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.",
|
||||
},
|
||||
{
|
||||
title: "bread girl",
|
||||
date: "2026-01-30",
|
||||
src: "2026/breadgirl.webp",
|
||||
desc: [
|
||||
"2026-01-30",
|
||||
"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.",
|
||||
],
|
||||
alt: "An anime-style girl chewing on a piece of bread. She wears a ponytail and a sleeveless top.",
|
||||
},
|
||||
{
|
||||
title: "test",
|
||||
date: "2026-01-29",
|
||||
src: "/blog/2026/0129/girl.webp",
|
||||
desc: [
|
||||
"2026-01-29",
|
||||
"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!",
|
||||
],
|
||||
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.",
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user