updated main page
This commit is contained in:
@@ -46,6 +46,16 @@
|
|||||||
altText: "The protagonist Laura standing on a floating platform in the purple test level. Ziplines are all around her and the text 'When this text is spinning, the game is not paused' is frozen in the sky.",
|
altText: "The protagonist Laura standing on a floating platform in the purple test level. Ziplines are all around her and the text 'When this text is spinning, the game is not paused' is frozen in the sky.",
|
||||||
link: "projects/projectn5",
|
link: "projects/projectn5",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: "Art Feed",
|
||||||
|
description: "<b>[major update]</b> My creative side lives here",
|
||||||
|
img: "feed/banner.webp",
|
||||||
|
altText: "A rainbow-like holographic effect produced by bending a reflective sheet of cardboard.",
|
||||||
|
link: "feed",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const galleryBottomRow: GalleryRowEntry[] = [
|
||||||
{
|
{
|
||||||
title: "Blog",
|
title: "Blog",
|
||||||
description: `A place where I write about random things. <i>latest post: ${latestBlogDate}</i>`,
|
description: `A place where I write about random things. <i>latest post: ${latestBlogDate}</i>`,
|
||||||
@@ -53,9 +63,6 @@
|
|||||||
altText: "View at a tram bridge rising and then curving to the left.",
|
altText: "View at a tram bridge rising and then curving to the left.",
|
||||||
link: "blog",
|
link: "blog",
|
||||||
},
|
},
|
||||||
];
|
|
||||||
|
|
||||||
const galleryBottomRow: GalleryRowEntry[] = [
|
|
||||||
{
|
{
|
||||||
title: "Projects",
|
title: "Projects",
|
||||||
description: "An overview of my more technical projects",
|
description: "An overview of my more technical projects",
|
||||||
@@ -63,13 +70,6 @@
|
|||||||
altText: "An upside-down New 3DS XL lying open on a desk with a small USB-C breakout board attached to it, and a USB-C cable plugged in. The 3DS is glowing to indicate that it is charging.",
|
altText: "An upside-down New 3DS XL lying open on a desk with a small USB-C breakout board attached to it, and a USB-C cable plugged in. The 3DS is glowing to indicate that it is charging.",
|
||||||
link: "projects",
|
link: "projects",
|
||||||
},
|
},
|
||||||
{
|
|
||||||
title: "Art",
|
|
||||||
description: "My creative side lives here",
|
|
||||||
img: "art/banner.webp",
|
|
||||||
altText: "A rainbow-like holographic effect produced by bending a reflective sheet of cardboard.",
|
|
||||||
link: "art",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
title: "Files",
|
title: "Files",
|
||||||
description: "Find things I've put for download on my Copyparty instance",
|
description: "Find things I've put for download on my Copyparty instance",
|
||||||
@@ -114,8 +114,12 @@
|
|||||||
<div>
|
<div>
|
||||||
<div class="sidebox-container blurred-background">
|
<div class="sidebox-container blurred-background">
|
||||||
<h4 class="sidebox-header">heads-up</h4>
|
<h4 class="sidebox-header">heads-up</h4>
|
||||||
<p>This website works best on Firefox and other Gecko-based browsers! All pages <i>should</i> be responsive and work on mobile.</p>
|
|
||||||
<p>This website is 100% mobile-friendly – or at least trying to be!</p>
|
<p>This website works best on Firefox and other Gecko-based browsers! It is also 100% mobile-friendly – or at least trying to be!</p>
|
||||||
|
|
||||||
|
<p>All pages are functional without JavaScript but I recommend you enable it (some elements won't work without it)!</p>
|
||||||
|
|
||||||
|
<p>Links may change but I will set up redirects, promise.</p>
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
|
|||||||
@@ -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