removed art and art feed pages; added blurb to project page, which is half-merged with that of the former art feed
This commit is contained in:
@@ -1,39 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import Banner2 from "$lib/banner2.svelte";
|
|
||||||
import Content from "$lib/viewport/content.svelte";
|
|
||||||
import GalleryRow, { type GalleryRowEntry } from "$lib/lists/gallery-row.svelte";
|
|
||||||
|
|
||||||
const subpages: GalleryRowEntry[] = [
|
|
||||||
{
|
|
||||||
title: "Drawing Gallery",
|
|
||||||
description: "Some cool things I've drawn!",
|
|
||||||
img: "drawings/banner.webp",
|
|
||||||
altText: "Several Faber-Castell Polychromos colour pencils lined up with markings next to them in the same colour on a sheet of paper.",
|
|
||||||
link: "drawings",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Discography",
|
|
||||||
description: "Small stories about my past music",
|
|
||||||
img: "/main/hypertext.webp",
|
|
||||||
altText: "",
|
|
||||||
link: "music",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<svelte:head>
|
|
||||||
<title>Art | denizk0461</title>
|
|
||||||
</svelte:head>
|
|
||||||
|
|
||||||
<Content>
|
|
||||||
<Banner2
|
|
||||||
title="Art"
|
|
||||||
banner="banner.webp"
|
|
||||||
bannerAlt="A rainbow-like holographic effect produced by bending a reflective sheet of cardboard."
|
|
||||||
subtitle="my creative side" />
|
|
||||||
|
|
||||||
<p>Here I have collected the products of some of my creative endeavours. Check them out below!</p>
|
|
||||||
|
|
||||||
<GalleryRow entries={subpages} />
|
|
||||||
|
|
||||||
</Content>
|
|
||||||
@@ -1,123 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import Content from "$lib/viewport/content.svelte";
|
|
||||||
import Banner2 from "$lib/banner2.svelte";
|
|
||||||
import TableOfContents from "$lib/components/table-of-contents.svelte";
|
|
||||||
|
|
||||||
export let data;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<svelte:head>
|
|
||||||
<title>Art Feed | denizk0461</title>
|
|
||||||
</svelte:head>
|
|
||||||
|
|
||||||
{#snippet pageButtons(currentIndex: number)}
|
|
||||||
<div class="page-button-container blurred-background">
|
|
||||||
{#if currentIndex == 1}
|
|
||||||
<p class="page-button page-button-left">x</p>
|
|
||||||
{:else}
|
|
||||||
<a class="page-button page-button-left page-button-clickable" href="?p={currentIndex - 1}"><</a>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#each { length: data.maxPages }, index}
|
|
||||||
<a class="page-index" href="?p={index + 1}">{index + 1}</a>
|
|
||||||
{/each}
|
|
||||||
|
|
||||||
{#if currentIndex == data.maxPages}
|
|
||||||
<p class="page-button page-button-right">x</p>
|
|
||||||
{:else}
|
|
||||||
<a class="page-button page-button-right page-button-clickable" href="?p={currentIndex + 1}">></a>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{/snippet}
|
|
||||||
|
|
||||||
<Content>
|
|
||||||
<Banner2
|
|
||||||
title="Art & Project Feed"
|
|
||||||
banner="banner.webp"
|
|
||||||
bannerAlt="Mirror picture of me, pixelated beyond recognition"
|
|
||||||
subtitle="subtitle missing"
|
|
||||||
/>
|
|
||||||
|
|
||||||
{@render pageButtons(data.currentPage)}
|
|
||||||
|
|
||||||
<p>Welcome to my (new) art feed! It is heavily inspired by <a href="https://deathsurplus.com/">DeathSurplus' art blog</a> – definitely go check out his page!</p>
|
|
||||||
|
|
||||||
<p>This page is intended to offer a shared space for all my projects without the need to create strictly-separated pages for each hobby. Some other pages on this website have been merged into this one; namely the "Small Projects" and "Drawing Gallery" pages, so don't be surprised if content from those pages shows up here.</p>
|
|
||||||
|
|
||||||
<p>I'll add some more of my past projects, new projects, and an option to filter by project type <i>soon™</i>. Maybe I'll also split the content into pages, if I ever figure out how to do that.</p>
|
|
||||||
|
|
||||||
<p>I <b>MAY</b> merge this with the <a href="/projects">Projects</a> page, I've not yet decided.</p>
|
|
||||||
|
|
||||||
<TableOfContents />
|
|
||||||
|
|
||||||
{#each data.feedEntries as entry}
|
|
||||||
<h2>{entry.title}</h2>
|
|
||||||
<p class="subtitle">{entry.subtitle}</p>
|
|
||||||
<p class="subtitle">{entry.date}</p>
|
|
||||||
<svelte:component this={entry.content} />
|
|
||||||
{/each}
|
|
||||||
|
|
||||||
</Content>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.page-button-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: stretch;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
overflow: hidden;
|
|
||||||
width: fit-content;
|
|
||||||
margin: 12px auto;
|
|
||||||
border-top: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
|
|
||||||
border-bottom: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-button, .page-index {
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
padding: 8px 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
margin: 0;
|
|
||||||
transition: background-color var(--duration-animation) var(--anim-curve);
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-button {
|
|
||||||
color: var(--color-text);
|
|
||||||
}
|
|
||||||
.page-button-left {
|
|
||||||
border-right: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
|
|
||||||
}
|
|
||||||
.page-button-right {
|
|
||||||
border-left: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
|
|
||||||
}
|
|
||||||
.page-button-clickable:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-index:link, .page-index:visited {
|
|
||||||
color: var(--color-text)
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-index:hover, .page-button-clickable:hover {
|
|
||||||
text-decoration: none;
|
|
||||||
background-color: var(--color-background-highlight-alt);
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
margin: 0;
|
|
||||||
font-size: 1rem;
|
|
||||||
line-height: 1.4rem;
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--color-highlight-alt);
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle::before {
|
|
||||||
content: "<!-- ";
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle::after {
|
|
||||||
content: " -->";
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,50 +0,0 @@
|
|||||||
import { entries } from './feed';
|
|
||||||
|
|
||||||
interface FeedEntry {
|
|
||||||
content: any;
|
|
||||||
title: string;
|
|
||||||
subtitle: string;
|
|
||||||
date: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
let entriesPerPage = 8;
|
|
||||||
|
|
||||||
export async function load({ params, url }) {
|
|
||||||
// Get page index
|
|
||||||
let pageIndex = Number(url.searchParams.get('p'));
|
|
||||||
if (pageIndex == 0) {
|
|
||||||
pageIndex = 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO check if index exceeds maximum permitted and redirect (to max page?)
|
|
||||||
|
|
||||||
let feedEntries: FeedEntry[] = [];
|
|
||||||
let start = (pageIndex - 1) * entriesPerPage;
|
|
||||||
|
|
||||||
for (let i = start; i < start + entriesPerPage; i += 1) {
|
|
||||||
// Stop iterating when end reached
|
|
||||||
if (i >= entries.length) {
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
// Vite complains if I don't do this even though it's stupid
|
|
||||||
const path = entries[i].split("/");
|
|
||||||
const page = await import(`./${path[0]}/${path[1]}.md`);
|
|
||||||
const md = page.metadata;
|
|
||||||
|
|
||||||
feedEntries.push({
|
|
||||||
content: page.default,
|
|
||||||
title: md.title,
|
|
||||||
subtitle: md.subtitle,
|
|
||||||
date: md.date,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
let currentPage = pageIndex;
|
|
||||||
let maxPages = Math.ceil(entries.length / entriesPerPage);
|
|
||||||
|
|
||||||
return {
|
|
||||||
currentPage,
|
|
||||||
maxPages,
|
|
||||||
feedEntries,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
export let entries: string[] = [
|
|
||||||
// 2026
|
|
||||||
"misc/lightyears-font",
|
|
||||||
"drawings/firstmonth",
|
|
||||||
// 2024
|
|
||||||
"electronics/3ds-usb-c",
|
|
||||||
"electronics/deej0461",
|
|
||||||
];
|
|
||||||
@@ -36,33 +36,13 @@
|
|||||||
bannerAlt="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."
|
bannerAlt="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."
|
||||||
subtitle="Things I have worked on" />
|
subtitle="Things I have worked on" />
|
||||||
|
|
||||||
<!-- <p>Welcome to my projects page! Here I show off all the things I have done. Projects are ordered by general topic, sorted reverse-chronologically, and have a status marker assigned that shows whether they are active or not. have fun browsing~!</p> -->
|
<p>Welcome to my (new) projects page! Here I show off all the things I have done. Projects are ordered reverse-chronologically and have some other neat information displayed. have fun browsing~!</p>
|
||||||
|
|
||||||
<!-- <p>The projects page also has two sister pages that go into detail about specific subgroups of projects:</p>
|
<p>This page, in its current form, is inspired by <a href="https://deathsurplus.com/">DeathSurplus' art blog</a> – definitely go check out his website!</p>
|
||||||
|
|
||||||
<GalleryRow entries={subpages} /> -->
|
<p>I'll add some more of my past projects, new projects, and an option to filter by project type <i>soon™</i>. Maybe I'll also split the content into pages.</p>
|
||||||
|
|
||||||
<!-- <TableOfContents /> -->
|
<hr>
|
||||||
|
|
||||||
<!-- <h2 id="games">Games</h2>
|
|
||||||
{#each games as project}
|
|
||||||
{@render projectSummary({ project: project })}
|
|
||||||
{/each}
|
|
||||||
|
|
||||||
<h2 id="hardware">Hardware</h2>
|
|
||||||
{#each hardware as project}
|
|
||||||
{@render projectSummary({ project: project })}
|
|
||||||
{/each}
|
|
||||||
|
|
||||||
<h2 id="apps">Apps</h2>
|
|
||||||
{#each apps as project}
|
|
||||||
{@render projectSummary({ project: project })}
|
|
||||||
{/each}
|
|
||||||
|
|
||||||
<h2 id="music">Music</h2>
|
|
||||||
{#each music as project}
|
|
||||||
{@render projectSummary({ project: project })}
|
|
||||||
{/each} -->
|
|
||||||
|
|
||||||
<div class="project-container">
|
<div class="project-container">
|
||||||
{#each projects as p}
|
{#each projects as p}
|
||||||
@@ -73,12 +53,22 @@
|
|||||||
|
|
||||||
{#snippet project(p: Project)}
|
{#snippet project(p: Project)}
|
||||||
{#if p.directLink}
|
{#if p.directLink}
|
||||||
<a href={p.directLink}>{p.title}</a>
|
<a class="project-wrapper" href={p.directLink}>
|
||||||
|
{@render projectContent(p)}
|
||||||
|
</a>
|
||||||
{:else}
|
{:else}
|
||||||
<a href="{p.category}/{p.id}">{p.title}</a>
|
<a class="project-wrapper" href="{p.category}/{p.id}">
|
||||||
|
{@render projectContent(p)}
|
||||||
|
</a>
|
||||||
{/if}
|
{/if}
|
||||||
{/snippet}
|
{/snippet}
|
||||||
|
|
||||||
|
{#snippet projectContent(p: Project)}
|
||||||
|
<p>{p.title}</p>
|
||||||
|
<p>{p.subtitle}</p>
|
||||||
|
<p>{p.date}</p>
|
||||||
|
{/snippet}
|
||||||
|
|
||||||
<!-- {#snippet projectSummary({
|
<!-- {#snippet projectSummary({
|
||||||
project
|
project
|
||||||
}: {
|
}: {
|
||||||
@@ -113,7 +103,18 @@
|
|||||||
<style>
|
<style>
|
||||||
.project-container {
|
.project-container {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr;
|
/* grid-template-columns: 1fr 1fr; */
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
/* gap: 4px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-wrapper p {
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* .project-subtitle {
|
/* .project-subtitle {
|
||||||
|
|||||||
Reference in New Issue
Block a user