added projects section

package.json

@@ -33,7 +33,7 @@
 		"remark-github": "^11.2.4",
 		"remark-slug": "^7.0.1",
 		"sass": "^1.55.0",
-		"svelte": "^3.51.0",
+		"svelte": "^3.52.0",
 		"svelte-check": "^2.9.2",
 		"svelte-preprocess": "^4.10.7",
 		"tslib": "^2.4.0",

src/data/links.ts

@@ -1,4 +1,4 @@
-import type { DocsPage } from "$data/docs";
+import type { DocsPage } from "$data/projects";
 
 export const links = {
 	github: {

src/data/projects.ts

@@ -0,0 +1,45 @@
+export type DocsNode = {
+	name: string,
+	icon?: string,
+}
+
+export type DocsPage = DocsNode & { path: string }
+
+export type DocsCategory = DocsNode & { pages: DocsPage[] }
+
+export const projects: (DocsPage | DocsCategory)[] = [
+	{
+		name: "Overview",
+		path: ""
+	},
+	{
+		name: "Personal",
+		pages: [
+			{
+				name: "Raytracer",
+				path: "/personal/raytracer"
+			},
+			{
+				name: "Personal website (this site)",
+				path: "/personal/website"
+			}
+		]
+	},
+	{
+		name: "Degree-related",
+		pages: [
+			{
+				name: "Library Manager",
+				path: "/degree/library-manager"
+			},
+			{
+				name: "Python QT Data Analysis Tool",
+				path: "/degree/pythonqtdataanalysis"
+			},
+			{
+				name: "Lunar Lander game written in SQL",
+				path: "/degree/lunarlandersql"
+			}
+		]
+	}
+];

src/layout/FeaturesSection/FeaturesSection.svelte

@@ -31,7 +31,7 @@
 	</div>
 	<div class="features-section-right">
 		<HeaderChip>Skills</HeaderChip>
-		<h2>My experience and confidence</h2>
+		<h2>My experience and interests</h2>
 		<p>
 			I like using a wide-range of technologies and tools to solve problems.
 			Here's a sample of the ones I like the most and have the most experience with.

src/layout/FeaturesSection/preview/PreviewShowcase.scss

@@ -134,7 +134,14 @@
 				background-image: linear-gradient(#f0a3a3, #f42323);
 			  }
 		}
-
+		div.listcontainer {
+			text-align: center;
+			ul {
+				display: inline-block;
+				text-align: left;
+			  }
+		  }
+
 		// Metadata elements
 		h4,
 		h5,

src/layout/FeaturesSection/preview/PreviewShowcase.svelte

@@ -1,6 +1,8 @@
 <script>
 	import { draw } from "svelte/transition";
 	import { previewFiles } from "$data/features";
+	import { projects } from "$data/projects";
+	import { each } from "svelte/internal";
 
 	let currentPreviewFile = 0;
 </script>
@@ -48,6 +50,22 @@
 					<h5>
 						{file.confidence}
 					</h5>
+					{#if file?.projects !== undefined}
+						<br/>
+						<hr/>
+						<h4>Projects</h4>
+						<div class="listcontainer">
+							<ul>
+								{#each file.projects as project}
+									<li>
+										<a href="/projects{project.link}">
+											{project.name}
+										</a>
+									</li>
+								{/each}
+							</ul>
+						</div>
+					{/if}
 					<br/>
 					<hr/>
 					<span>{file.description}</span>