Add the skeleton of a projects page
diff --git a/apps/a/src/routes/+page.svelte b/apps/a/src/routes/+page.svelte
index 3dde275..ec17dc6 100644
--- a/apps/a/src/routes/+page.svelte
+++ b/apps/a/src/routes/+page.svelte
@@ -22,7 +22,7 @@
<div class="flex flex-col items-center justify-center gap-2 m-10">
<Button href="/who" variant="outline">Who are you?</Button>
- <Button href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">What do you make?</Button>
+ <Button href="/what">What do you make?</Button>
</div>
<style lang="postcss">
diff --git a/apps/a/src/routes/what/+page.svelte b/apps/a/src/routes/what/+page.svelte
new file mode 100644
index 0000000..e69ac02
--- /dev/null
+++ b/apps/a/src/routes/what/+page.svelte
@@ -0,0 +1,29 @@
+<script>
+ import Project from './project.svelte';
+</script>
+
+Online projects
+Projects that are
+<div class="flex p-10 gap-7 justify-items-strech justify-evenly flex-wrap">
+ <Project name="a.starrysky.fyi" online
+ >a.starrysky.fyi is a website to help me display my projects in an accessible and explorable
+ format</Project
+ >
+ <Project name="The Void" homepage="https://void.starrysky.fyi"
+ >Sometimes you need to talk but there's nobody who wants to listen. Let out your frustrations and watch them slip away into the void... Ported from React to Svelte to be the first project on starrysky.fyi</Project
+ >
+ <Project name="The older Void" homepage="https://void.crawling.us" archived
+ >A former version of The Void. While I recommend you use the new version, there's nothing stopping you from writing here
+ </Project
+ >
+ <Project name="GITForum (Git Issue Tracker Forum)" offline
+ >A "forum" where posts were created as GitHub Issues. Fetching and rendering posts was entirely client side, however a CORS proxy was needed to get GitHub oauth tokens</Project
+ >
+ <Project name="a.starrysky.fyi"
+ >a.starrysky.fyi is a website to help me display my projects in an accessible and explorable
+ format</Project
+ >
+ <Project name="Make a website" lost
+ >One of my first projects ever, made for a secondary school open day. You could sign up and be given a page where you could write HTML. Perhaps it's just as well this one's lost, as I hadn't yet learned not to store passwords in plaintext</Project
+ >
+</div>
diff --git a/apps/a/src/routes/what/project.svelte b/apps/a/src/routes/what/project.svelte
new file mode 100644
index 0000000..fc71dc9
--- /dev/null
+++ b/apps/a/src/routes/what/project.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+ export let name: string;
+
+ export let lost: boolean = false;
+ export let offline: boolean = false;
+ export let archived: boolean = false;
+ export let online: boolean = false;
+
+ type themes = 'online' | 'archived' | 'offline' | 'lost';
+ function get_theme(
+ _online: boolean,
+ _archived: boolean,
+ _offline: boolean,
+ _lost: boolean
+ ): themes {
+ if (_lost) return 'lost';
+ if (_offline) return 'offline';
+ if (_archived) return 'archived';
+ return 'online';
+ }
+
+ let theme: themes;
+ $: theme = get_theme(online, archived, offline, lost);
+
+ export let homepage: string | undefined = undefined;
+</script>
+
+<a
+ href={homepage}
+ class="flex flex-col w-64 grow rounded-md p-3 border border-2 hover:border-white transition-all"
+ class:border-emerald-600={theme === 'online'}
+ class:border-yellow-600={theme === 'archived'}
+ class:border-rose-600={theme === 'offline'}
+ class:border-gray-700={theme === 'lost'}
+>
+ <p><span class="title">{name}</span> ({theme})</p>
+ <p><slot /></p>
+</a>
+
+<style lang="postcss">
+
+</style>