3 files changed, 98 insertions, 0 deletions
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
new file mode 100644
index 0000000..dbe5516
--- /dev/null
+++ b/src/routes/projects/+page.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+  import ProjectEntry from "./ProjectEntry.svelte";
+</script>
+
+<page>
+  <section id="title">
+    <h1>Projects</h1>
+  </section>
+  <section id="brief">
+    <p>
+      A list of most projects I have worked on or am a part of, note that not all of them are still maintained.
+    </p>
+  </section>
+  <ProjectEntry name={'FsVerify'} description={'Block Based filesystem verification for immutable Linux Distributions written in golang and C'}
+		projType={'Personal Project'} link={'https://github.com/axtloss/fsverify'}/>
+
+  <ProjectEntry name={'BVG - Basic Vector Graphics'} description={'Custom made vector graphic format for use with FsVerify, the parser (fbwarn) is written in C using raylib'}
+		projType={'Personal Project'} link={'https://github.com/axtloss/fsverify/tree/main/fbwarn'}>
+    <img  src="/bvg.png" alt="The FsVerify logo drawn with BVG"/>
+  </ProjectEntry>
+
+  <ProjectEntry name={'vib'} description={'Building docker images using yaml recipes, written in golang'}
+		projType={'Maintainer, Collaboration'} link={'https://vib.vanillaos.org'}/>
+
+  <ProjectEntry name={'Vanilla System Operator'} description={'Tool to manage Vanilla OS installations, including Waydroid app management'}
+		projType={'Collaboration'} link={'https://github.com/vanilla-os/vanilla-system-operator'}/>
+
+  <ProjectEntry name={'FsGuard'} description={'File tree based Filesystem integrity verification, fully written in go and used by Vanilla OS through fswarn'}
+		projType={'Maintainer, Personal Project'} link={'https://github.com/linux-immutability-tools/fsguard'}/>
+
+  <ProjectEntry name={'jade'} description={'Installer backend for Crystal Linux, written in rust'}
+		projType={'Collaboration / Personal Project'} link={'https://gitlab.com/crystal-linux/software/jade'}/>
+
+  <ProjectEntry name={'jade-gui'} description={'Graphical frontend for Jade, written in python using gtk4 and libadwaita'}
+		projType={'Collaboration / Personal Project'} link={'https://gitlab.com/crystal-linux/software/jade-gui'}/>
+
+  <ProjectEntry name={'JshipIT'} description={'OCI client written in Java similiar to podman/docker with a focus on using containers as a form of isolated environments, similiar to Distrobox and Toolbx'}
+		projType={'Personal Project'} link={'https://github.com/axtloss/JshipIT'}/>
+</page>
+
+<style lang="scss">
+  @use 'sass:color';
+  img {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    border-radius: 10px 10px 10px 10px;
+    box-shadow: 0 1px 4px 1px color.change(black, $alpha: 0.13),
+		0 1px 10px 5px color.change(black, $alpha: 0.09),
+		0 3px 16px 8px color.change(black, $alpha: 0.04),
+		0 0 0 1px color.change(black, $alpha: 0.05);
+  }
+</style>
diff --git a/src/routes/projects/+page.ts b/src/routes/projects/+page.ts
new file mode 100644
index 0000000..e739ef4
--- /dev/null
+++ b/src/routes/projects/+page.ts
@@ -0,0 +1,9 @@
+import { dev } from '$app/environment';
+
+// we don't need any JS on this page, though we'll load
+// it in dev so that we get hot module replacement
+export const csr = dev;
+
+// since there's no dynamic data here, we can prerender
+// it so that it gets served as a static asset in production
+export const prerender = true;
diff --git a/src/routes/projects/ProjectEntry.svelte b/src/routes/projects/ProjectEntry.svelte
new file mode 100644
index 0000000..53c69b5
--- /dev/null
+++ b/src/routes/projects/ProjectEntry.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+  export let name: string;
+  export let description: string;
+  export let projType: string;
+  export let link: string;
+  export let id: string = name.toLowerCase().replaceAll(" ", "_");
+</script>
+
+<section id="{id}" class="box">
+    <h2>{name}</h2>
+    <section id="fsverify-link">
+      <p class="subheader">
+	{projType} - <a href="{link}">{link}</a>
+      </p>
+    </section>
+    <slot />
+    <p class="description">
+      {description}
+    </p>
+</section>
+
+
+<style lang="scss">
+  @use 'sass:color';
+  section {
+    max-width: 790px;
+    width: 100%;
+    & h2 {
+      margin-bottom: 0px;
+    }
+    & .description {
+      text-align: center;
+    }
+  }
+
+</style>