Start work on projects page

src/app.css

@@ -45,6 +45,11 @@ button,
 	font-family: inherit;
 	box-shadow: 0 0.1em 0.2em #000;
 	text-decoration: none;
+	transition: background-color 200ms;
+}
+button:hover,
+.button:hover {
+	background-color: var(--background-color-alt-2);
 }
 
 p {

src/lib/BackAnchor.svelte

@@ -2,7 +2,9 @@
 	export let href: string
 </script>
 
-<a {href} class="back-anchor">← Back</a>
+<a {href} class="back-anchor">
+	← {#if href === '/'}Home{:else}Back{/if}
+</a>
 
 <style>
 	.back-anchor {

src/lib/Project.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	export let name: string
+	export let href: string | undefined = undefined
+
+	/** A link to where the code is hosted. */
+	export let source: string | undefined = undefined
+
+	export let archived = false
+
+	export let rust = false
+	export let svelte = false
+	export let javascript = false
+	export let typescript = false
+	export let python = false
+</script>
+
+<div>
+	{#if href}
+		<a {href} class:no-link={archived}>
+			<h2>{name}</h2>
+		</a>
+	{:else}
+		<h2 class="no-link">{name}</h2>
+	{/if}
+	<p><slot /></p>
+</div>
+
+<style>
+	h2 {
+		margin-bottom: 0;
+	}
+
+	a {
+		text-decoration: none;
+		color: inherit;
+	}
+	.no-link {
+		text-decoration: line-through;
+	}
+</style>

src/routes/__error.svelte

@@ -12,12 +12,14 @@
 </script>
 
 <script lang="ts">
+	import BackAnchor from '$lib/BackAnchor.svelte'
+
 	export let status: number
 	export let message: string
 </script>
 
 <nav>
-	<a href="/" class="back-anchor">← Home</a>
+	<BackAnchor href="/" />
 </nav>
 <section class="error-page">
 	<div>

src/routes/blog/index.svelte

@@ -1,6 +1,5 @@
 <script lang="ts" context="module">
 	export const prerender = true
-	// export const router = false
 
 	import type { Load } from '@sveltejs/kit'
 	import type { BlogPostPreview } from './index.json'
@@ -27,7 +26,7 @@
 	<nav>
 		<BackAnchor href="/" />
 	</nav>
-
+	<h1>Blog</h1>
 	{#each posts as post}
 		<PostPreview {post} />
 	{/each}

src/routes/index.svelte

@@ -29,7 +29,7 @@
 		<h1 bind:this={titleEl}>matdoesdev</h1>
 
 		<div class="button-row social-media-row">
-			<a href="//github.com/mat-1"><img src="/github.svg" class="icon" alt="GitHub" /></a>
+			<a href="//github.com/mat-1"><img src="/icons/github.svg" class="icon" alt="GitHub" /></a>
 		</div>
 
 		<p>I'm mat, I do full-stack software development.</p>

src/routes/projects.svelte

@@ -0,0 +1,104 @@
+<script lang="ts" context="module">
+	export const prerender = true
+</script>
+
+<script lang="ts">
+	import BackAnchor from '$lib/BackAnchor.svelte'
+	import Project from '$lib/Project.svelte'
+</script>
+
+<div>
+	<nav>
+		<BackAnchor href="/" />
+	</nav>
+	<h1>Projects</h1>
+	<Project name="matdoesdev" href="https://matdoes.dev" rust>My portfolio.</Project>
+	<Project name="i.matdoes.dev" href="https://i.matdoes.dev" rust>A simple image host.</Project>
+	<Project name="Web Utils" href="https://u.matdoes.dev" svelte typescript>
+		Utilities for software developers.
+	</Project>
+	<Project name="mat's rss reader" href="https://rss.matdoes.dev" svelte typescript>
+		Simple RSS reader.
+	</Project>
+	<Project name="Metasearch" href="https://s.matdoes.dev" typescript>
+		Simple metasearch engine.
+	</Project>
+	<Project name="SnooSlash" href="https://www.youtube.com/channel/UCz5bLto2bC9fSC5N429WDnw" python>
+		Reddit TTS video generator.
+	</Project>
+	<Project name="DreamSMP Tracker" python>
+		Tracks when DreamSMP members play and livestream.
+	</Project>
+	<Project name="Wynn Lea Moe" href="https://wynnleamoe.matdoes.dev" javascript>
+		Parody of sky.lea.moe that shows Wynncraft stats instead of SkyBlock stats.
+	</Project>
+	<Project name="Forum Sweats" source="https://github.com/mat-1/forum-sweats/" python>
+		A Discord bot with many useful and unique features.
+	</Project>
+	<Project name="Minecraft Assets" href="https://mcassets.matdoes.dev" python>
+		A user-friendly interface for the assets of all Minecraft versions.
+	</Project>
+	<Project name="SkyBlock Stats" href="https://skyblock.matdoes.dev/" typescript svelte>
+		Check your Hypixel SkyBlock stats, see leaderboards, mayors, auction prices, and way more.
+	</Project>
+	<Project name="Super Duper Simple Pinger" href="https://ping.matdoes.dev/" python>
+		Send an HTTP request to your repls every few minutes to keep them alive.
+	</Project>
+	<Project name="The Stonk Exchange" python>
+		A stock market simulator with a twist. Instead of investing in real companies, you invest in
+		your fellow server members.
+	</Project>
+	<Project
+		name="Domain Hack Finder"
+		href="https://replit.com/talk/share/Domain-Hack-Finder/15778"
+		source="https://replit.com/@mat1/domain-hack-finder"
+		python
+	>
+		Find domain hacks for any word or phrase.
+	</Project>
+	<Project
+		name="Colors"
+		href="https://colors.matdoes.dev/"
+		source="https://replit.com/@mat1/colors"
+		python
+	>
+		Find the best colors.
+	</Project>
+	<Project
+		name="HTTP Lookup"
+		href="https://http.matdoes.dev/"
+		source="https://replit.com/@mat1/http-statuses"
+	>
+		Look up HTTP status codes.
+	</Project>
+	<Project
+		name="4bit"
+		href="https://web.archive.org/web/20190502100718/https://4bitbot.tk/"
+		archived
+		python
+	>
+		Fun utility bot for Discord.
+	</Project>
+	<Project name="Repl Talk API" href="https://pypi.org/project/repltalk/" archived python>
+		API wrapper for <a href="https://replit.com/community/all">Repl Talk</a>.
+	</Project>
+	<Project name="Old i.matdoes.dev" source="https://github.com/mat-1/i.matdoes.dev" python>
+		A simple image host.
+	</Project>
+	<Project
+		name="Repl Talk Bot"
+		href="https://replit.com/talk/share/Repl-Talk-Discord-Bot/5599"
+		archived
+		python
+	>
+		Discord bot that automatically sends posts from Repl Talk into the #repl-talk channel in the
+		Replit Discord.
+	</Project>
+	<Project name="Old matdoesdev" python>My portfolio.</Project>
+	<Project name="Replit Dark Theme" href="https://darktheme.matdoes.dev/themes" python>
+		A customizable dark theme for Replit.
+	</Project>
+	<Project name="Hytale Discord Webhook" href="https://hytale.matdoes.dev" python>
+		Automatically send Hytale blog posts to your Discord server with only one click.
+	</Project>
+</div>

static/icons/python.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="110.4" height="109.8" fill="#fff" xmlns:v="https://vecta.io/nano"><path d="M55 0C27 0 28.6 12.2 28.6 12.2v12.6h26.8v3.7H18s-18-2-18 26.3S15.8 82 15.8 82H25V69s-.5-15.6 15.4-15.6H67s15 .2 15-14.4V14.5S84.4-.2 55-.2zM40 8.5c2.7 0 4.8 2.2 4.8 4.8S42.7 18 40 18s-4.8-2.2-4.8-4.8 2-4.8 4.8-4.8zm15.6 101.3c28 0 26.3-12.2 26.3-12.2V85H55v-3.8h37.4s18 2 18-26.3-15.7-27.4-15.7-27.4h-9.3v13s.6 16-15.4 16H43.5s-15-.2-15 14.4v24s-2.3 14.7 27 14.7zm14.8-8.5c-2.7 0-4.8-2.2-4.8-4.8s2.2-4.8 4.8-4.8 4.8 2.2 4.8 4.8-2.2 4.8-4.8 4.8z"/></svg>