created projects2 for project page overhaul + merge with art feed

This commit is contained in:
2026-04-08 12:41:54 +02:00
parent 792483232f
commit 9f867b11c5
3 changed files with 265 additions and 14 deletions

View File

@@ -36,7 +36,6 @@
banner="banner.webp"
bannerAlt="Mirror picture of me, pixelated beyond recognition"
subtitle="subtitle missing"
date="2026-04-06"
/>
{@render pageButtons(data.currentPage)}

View File

@@ -1,7 +1,8 @@
<script lang="ts">
import Banner2 from "$lib/banner2.svelte";
import TableOfContents from "$lib/components/table-of-contents.svelte";
import { type Project, games, hardware, apps, music, getStatusText, getStatusCode } from './projects';
// import { type Project, games, hardware, apps, music, getStatusText, getStatusCode } from './projects';
import { projects, type Project, getStatusCode } from "./projects2";
import LinkList from "$lib/lists/link-list.svelte";
import Content from "$lib/viewport/content.svelte";
import GalleryRow, { type GalleryRowEntry } from "$lib/lists/gallery-row.svelte";
@@ -35,15 +36,15 @@
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" />
<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 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>The projects page also has two sister pages that go into detail about specific subgroups of projects:</p>
<!-- <p>The projects page also has two sister pages that go into detail about specific subgroups of projects:</p>
<GalleryRow entries={subpages} />
<GalleryRow entries={subpages} /> -->
<TableOfContents />
<!-- <TableOfContents /> -->
<h2 id="games">Games</h2>
<!-- <h2 id="games">Games</h2>
{#each games as project}
{@render projectSummary({ project: project })}
{/each}
@@ -61,10 +62,20 @@
<h2 id="music">Music</h2>
{#each music as project}
{@render projectSummary({ project: project })}
{/each}
{/each} -->
<div class="project-container">
{#each projects as p}
{@render project(p)}
{/each}
</div>
</Content>
{#snippet projectSummary({
{#snippet project(p: Project)}
<p>{p.title}</p>
{/snippet}
<!-- {#snippet projectSummary({
project
}: {
project: Project;
@@ -83,7 +94,7 @@
{#if project.date}
{project.date} |
{/if}
{getStatusText(project)}
{project}
</p>
{#if project.icon}
@@ -93,10 +104,15 @@
<p>{@html paragraph}</p>
{/each}
<LinkList entries={project.links} />
{/snippet}
{/snippet} -->
<style>
.project-subtitle {
.project-container {
display: grid;
grid-template-columns: 1fr 1fr;
}
/* .project-subtitle {
font-family: var(--font-mono);
font-size: 1.0rem;
margin-top: 0;
@@ -108,7 +124,7 @@
}
.project-banner {
margin: 0; /* reset left/right margins */
margin: 0;
width: 100%;
object-fit: cover;
max-height: 300px;
@@ -139,7 +155,7 @@
font-size: 1.0rem;
font-weight: 700;
color: var(--color-status);
}
} */
/* #region Project Status Colours */
.project-status-c-act {

View File

@@ -0,0 +1,236 @@
export interface Project {
category: ProjectCategory;
id: string;
isOngoing: boolean; // whether the project is currently active (true) or a past project (false)
banner: string;
date: string;
title: string;
subtitle: string;
status: ProjectStatus;
};
export enum ProjectCategory {
DRAWINGS = "drawings",
GAMES = "games",
ELECTRONICS = "electronics",
MUSIC = "music",
APPS = "apps",
MISC = "misc",
}
export enum ProjectStatus {
ACTIVE = "active",
INACTIVE = "inactive",
ABANDONED = "abandoned",
FINISHED = "finished",
EOL = "end-of-life", // end of life
}
/**
* Returns static codes that can be used to reference same-name CSS classes
* without relying on display text.
*/
export function getStatusCode(project: Project): String {
switch (project.status) {
case ProjectStatus.ACTIVE:
return "act";
case ProjectStatus.INACTIVE:
return "ina";
case ProjectStatus.ABANDONED:
return "aba";
case ProjectStatus.FINISHED:
return "fin";
case ProjectStatus.EOL:
return "eol";
}
}
export const projects: Project[] = [
{
category: ProjectCategory.MISC,
id: "lightyears-font",
banner: "",
title: "LIGHTYEARS font",
subtitle: "stylised font",
isOngoing: false,
date: "March 2026",
status: ProjectStatus.FINISHED,
},
{
category: ProjectCategory.DRAWINGS,
id: "firstmonth",
banner: "",
title: "My First Month Drawing",
subtitle: "self-imposed drawing challenge",
isOngoing: false,
date: "February March 2026",
status: ProjectStatus.FINISHED,
},
{
category: ProjectCategory.ELECTRONICS,
id: "3ds-usb-c",
banner: "",
title: "3DS USB-C mod",
subtitle: "DIY charging port mod",
isOngoing: false,
date: "October 2024",
status: ProjectStatus.FINISHED,
},
{
category: ProjectCategory.ELECTRONICS,
id: "deej0461",
banner: "",
title: "deej0461",
subtitle: "PC companion audio source controller",
isOngoing: false,
date: "August 2024",
status: ProjectStatus.FINISHED,
},
{
category: ProjectCategory.GAMES,
id: "projectn5",
banner: "/projects/projectn5/banner2.webp",
title: "Homesick",
subtitle: "",
isOngoing: true,
date: "September 2023 now",
status: ProjectStatus.ACTIVE,
},
{
category: ProjectCategory.GAMES,
id: "magician",
banner: "/projects/magician/banner.webp",
title: "Magician",
subtitle: "Online Multiplayer Card Game",
isOngoing: false,
date: "July 2025",
status: ProjectStatus.ABANDONED,
},
{
category: ProjectCategory.GAMES,
id: "projektike",
banner: "/projects/projektike/banner.webp",
title: "Projektike",
subtitle: "PvP Game",
isOngoing: false,
date: "August 2024 May 2025",
status: ProjectStatus.ABANDONED,
},
{
category: ProjectCategory.GAMES,
id: "swordsnstuff",
banner: "/projects/swordsnstuff/banner.webp",
title: "Swords & Stuff",
subtitle: "Unity 2D RPG",
isOngoing: false,
date: "August 2023",
status: ProjectStatus.ABANDONED,
},
{
category: ProjectCategory.GAMES,
id: "tads",
banner: "/projects/tads/banner.webp",
title: "Totally Accurate Dating Simulator",
subtitle: "HTML Text Adventure",
isOngoing: false,
date: "August 2023",
status: ProjectStatus.FINISHED,
},
{
category: ProjectCategory.ELECTRONICS,
id: "daisyfm",
banner: "/projects/daisyfm/banner.webp",
title: "Daisy",
subtitle: "Electro-Smith Daisy-based FM synth",
isOngoing: false,
date: "July September 2024",
status: ProjectStatus.FINISHED,
},
{
category: ProjectCategory.APPS,
id: "weserplaner",
banner: "/projects/weserplaner/banner.webp",
title: "WeserPlaner",
subtitle: "University Timetable & Canteen Info App",
isOngoing: false,
date: "April 2023 January 2024",
status: ProjectStatus.EOL,
},
{
category: ProjectCategory.APPS,
id: "textbasic",
banner: "",
title: "Text Basic",
subtitle: "Extremely Basic Text Widget App",
isOngoing: false,
date: "May November 2023",
status: ProjectStatus.EOL,
},
{
category: ProjectCategory.APPS,
id: "qwark",
banner: "",
title: "Qwark Grade Log",
subtitle: "Grade Logging App",
isOngoing: false,
date: "June 2019 March 2020",
status: ProjectStatus.EOL,
},
{
category: ProjectCategory.APPS,
id: "avhplan",
banner: "",
title: "AvH-Vertretungsplan",
subtitle: "Substitution Plan App",
isOngoing: false,
date: "April 2019 March 2020",
status: ProjectStatus.EOL,
},
{
category: ProjectCategory.MUSIC,
id: "dreamworld",
banner: "/projects/dreamworld/banner.webp",
title: "Dreamworld",
subtitle: "My First Album",
isOngoing: false,
date: "July 2019 September 2021",
status: ProjectStatus.FINISHED,
},
{
category: ProjectCategory.MUSIC,
id: "anewbeginning",
banner: "",
title: "A New Beginning",
subtitle: "",
isOngoing: false,
date: "May August 2018",
status: ProjectStatus.FINISHED,
},
{
category: ProjectCategory.MUSIC,
id: "soundcloud",
banner: "",
title: "Soundcloud",
subtitle: "Demo Dump & Archive",
isOngoing: false,
date: "",
status: ProjectStatus.INACTIVE,
},
];