yayyy new website!!

10 files changed, 765 insertions, 0 deletions

diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
new file mode 100644
index 0000000..2ced366
--- /dev/null
+++ b/src/routes/+error.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { page } from "$app/stores";
+
+  let displayDog = ($page.status === 404) || false;
+</script>
+
+<div class="error-container">
+  <div class="error">
+    <h1>{$page.status ?? "oopsie daisies!"}</h1>
+    <p>{$page.error?.message ?? "website broke &gt;w&lt; "}</p>
+  </div>
+  {#if displayDog}
+    <div class="huh">
+      <img src="/huh.jpg" alt="dog looking at the camera with a question mark edited next to it"/>
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  .error-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+
+    & .error {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin: 36px 12px;
+      border-spacing: 36px;
+
+      & :not(:last-child) {
+        margin-bottom: 1rem;
+      }
+    }
+  }
+</style>
+
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
new file mode 100644
index 0000000..7772574
--- /dev/null
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+  import Header from './Header.svelte';
+  import './styles.scss';
+</script>
+
+<div class="app">
+  <Header>
+    <main>
+      <slot />
+    </main>
+  </Header>
+</div>
+
+<style>
+  .app {
+    display: flex;
+    flex-direction: column;
+  }
+
+  main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding: 1rem;
+      padding-top: 4em;
+    width: 100%;
+    max-width: 64rem;
+    margin: 0 auto;
+    box-sizing: border-box;
+  }
+</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
new file mode 100644
index 0000000..c046cd7
--- /dev/null
+++ b/src/routes/+page.svelte
@@ -0,0 +1,205 @@
+<script lang="ts">
+  import { fade } from "svelte/transition";
+  import github from "$lib/images/github.svg?raw";
+  import xmppSvg from "$lib/assets/xmpp.svg?raw";
+  import { decode, isDecoded } from "$lib/decoder";
+  import { getContext, onMount } from "svelte";
+  import { isMobile } from "$lib/mobile";
+  import { browser } from "$app/environment";
+
+
+  const header = getContext<Header>("Header");
+
+  var description = [
+    "Hiiiii im Rose!! I've been coding and abusing computers for like 8 years now (as of 2024)!",
+    "My main focus is in OSdev and Containers, but my experience ranges all accross the spectrum, ",
+    "frontend, backend, weird amalgamations inbetween, I can make everything work! ",
+  ].join("");
+
+
+  var xmpp:string = "e714815f15b15315615a12714b15015a15915615615b11515615914e";
+  var matrix: string = "c210213a12713012b1230fc13612a1270ef12313213113612a12712512313413b0f012512e137124"
+  onMount(() => {
+    if (navigator.webdriver) {
+      document.body.toggleAttribute("data-noscript");
+      return;
+    }
+
+    xmpp = decode(xmpp);
+    matrix = decode(matrix);
+  });
+
+  onMount(async () => {
+    var chrome: boolean = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+    if (chrome && !isMobile()) { // I can forgive people for using chrome on mobile tbh
+      header.addMessage("Chrome browsers enforce Googles monopolistic position while harming user privacy. See https://contrachrome.com/", {
+	dismissable: false
+      })
+    }
+  });
+
+  function copyText(text: string): (event: MouseEvent|KeyboardEvent) => void {
+    return (event) => {
+      if (event instanceof KeyboardEvent && event.code != "Enter")
+	  return;
+
+      if (navigator.clipboard == null) {
+	return;
+      }
+
+      navigator.clipboard.writeText(text)
+	.then(() => header.addMessage("Copied to clipboard"))
+	.catch(() => header.addMessage("Failed to copy to clipboard"));
+    };
+  }
+</script>
+
+<svelte:head>
+  <title>rose</title>
+  <meta name="description" content="Coder of C. Abuser of Containers. Hater of golang." />
+  <meta property="og:title" content="axtlos"/>
+  <meta property="og:type" content="website"/>
+  <meta property="og:description" content={description}/>
+  <meta property="og:image" content="/me.png"/>
+  <meta property="og:url" content="https://xenia.blahaj.land"/>
+  <meta property="og:locale" content="en_US"/>
+  <link rel="me" href="https://eepy.moe/@rose"/>
+</svelte:head>
+
+<page>
+  <section id="welcome">
+    <h1>Hi! I'm Rose</h1>
+  </section>
+  <section id="about">
+    <h2>About me!</h2>
+    <p>
+      I'm a software engineer with an interest in Containers and OSdev.
+      I currently live in germany and study Computer Science.
+    </p>
+    <p>
+      Apart from Coding and tinkering with Hardware, I enjoy listening to music, reading books and going on walks!
+    </p>
+  </section>
+  <section id="projects">
+    <h2>My work</h2>
+    <p>
+      Currently most of my time is spent working on
+      <a href="https://github.com/Vanilla-OS/vib">vib</a>,
+      as the maintainer of vib I handle any project management,
+      while actively expanding it with more features.
+    </p>
+    <p>
+      In connection to vib. I am currently reviving an older
+      project called Project Shards, an arch based immutable
+      distribution, that went through many different designs,
+      but has settled on using systemd-sysupdate in the same vein as
+      <a href="https://os.gnome.org">GNOME OS</a>.
+    </p>
+    <p>
+      A more thorough list of Projects can be found in the
+      <a href="/projects">Projects</a> page.
+    </p>
+  </section>
+  <section id="contact">
+    <h2>Contact</h2>
+    <p class="subheader">Click on an element to copy its address</p>
+    <p>
+      You can contact me on these platforms!
+    </p>
+    {#if !browser}
+      <p id="noscript">
+	You seem to have disable javascript! But this website uses js to deobfuscate the contacts &gt;w&lt;
+	The obfuscated codes are displayed in the boxes below, you can use <a href="/deobfuscate.sh">this shell script</a> to debofuscate them locally!
+      </p>
+    {/if}
+    <ul>
+      <li id="xmpp">
+	<div
+	  role="button"
+	  tabindex="0"
+	  on:click={isDecoded(matrix) ? undefined : copyText(xmpp)}
+	  on:keydown={isDecoded(matrix) ? undefined : copyText(xmpp)}>
+	  <h3>XMPP</h3>
+	  {#if !browser}
+	    <noscript>{xmpp}</noscript>
+	  {:else}
+	    <p>{xmpp}</p>
+	  {/if}
+	</div>
+      </li>
+      <li id="matrix">
+	<div
+	  role="button"
+	  tabindex="0"
+	  on:click={isDecoded(matrix) ? undefined : copyText(matrix)}
+	  on:keydown={isDecoded(matrix) ? undefined : copyText(matrix)}>
+	  <h3>matrix</h3>
+	  {#if !browser}
+	    <noscript>{matrix}</noscript>
+	  {:else}
+	    <p>{matrix}</p>
+	  {/if}
+	</div>
+      </li>
+      <li id="email">
+	<div>
+	  <a class="permalink"
+	     href={isDecoded(matrix) ? `javascript:void` : `mailto:${xmpp}`}>
+	    <h3>email</h3>
+	    {#if !browser}
+	      <noscript>{xmpp}</noscript>
+	    {:else}
+	      <p>{xmpp}</p>
+	    {/if}
+	  </a>
+	</div>
+      </li>
+    </ul>
+  </section>
+</page>
+
+<style lang="scss">
+  @use "$lib/styles";
+  page {
+    & section {
+      width: 100%;
+
+      &#contact {
+	& .subheader {
+	  font-size: 0.8em;
+	  margin-top: -25px;
+	}
+	& ul {
+	  list-style: none;
+	  display: flex;
+	  gap: 10px;
+	  flex-wrap: wrap;
+	  flex-direction: row;
+	  padding: unset;
+	  margin: unset;
+          margin-top: 1em;
+	  margin-bottom: 1em;
+	  justify-content: space-around;
+
+	  & li#xmpp > div { @include styles.contact($color: #FFC067, $text-color: #000000); }
+	  & li#matrix > div { @include styles.contact($color: #7D7, $text-color: #000000); }
+	  & li#email {
+	    & a {
+	      text-decoration: none;
+	    }
+	    & > div {
+	      @include styles.contact($color: #B19CD9, $text-color: #000000);
+	    }
+	  }
+
+	  & li > * {
+	    & p {
+	      text-align: center;
+	    }
+	  }
+	}
+      }
+    }
+  }
+
+</style>
diff --git a/src/routes/+page.ts b/src/routes/+page.ts
new file mode 100644
index 0000000..a72419a
--- /dev/null
+++ b/src/routes/+page.ts
@@ -0,0 +1,3 @@
+// 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/ContactCard.svelte b/src/routes/ContactCard.svelte
new file mode 100644
index 0000000..d347deb
--- /dev/null
+++ b/src/routes/ContactCard.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+  export let inline: boolean = false;
+  export let svg: string;
+  export let onclick;
+</script>
+
+<div
+  role="button"
+  tabindex="0"
+  on:click={onclick}
+  on:keydown={onclick}>
+  <span class:inline={inline}>
+    {@html svg}
+  </span>
+</div>
+
+<span class:inline={inline}>
+  {@html svg}
+</span>
+
+<style lang="scss">
+  span {
+    & :global(svg) {
+      width: 1em;
+      height: 1em;
+      fill: currentColor;
+    }
+    &.inline :global(svg) { transform: translate(0, 0.125em); }
+  }
+
+  div {
+    background-color: green;
+    user-select: none;
+    padding: 1px 18px;
+    border-radius: 9999px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+</style>
diff --git a/src/routes/Header.svelte b/src/routes/Header.svelte
new file mode 100644
index 0000000..0366e6d
--- /dev/null
+++ b/src/routes/Header.svelte
@@ -0,0 +1,299 @@
+<script context="module" lang="ts">
+  import { type ComponentType, SvelteComponent} from "svelte";
+  var showmsg: boolean = false;
+
+  export type Header = {
+    addMessage (message: string, options?: Partial<MessageOptions>): void
+  };
+
+  type HeaderMessage = {
+    message: string,
+    options: MessageOptions,
+    dismiss: () => void,
+  }
+
+  type MessageOptions = {
+    time: number,
+    dismissable: boolean,
+  };
+
+  var chrome: boolean = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+</script>
+
+<script lang="ts">
+  import { page } from '$app/stores';
+  import logo from '/rose.gif';
+  import boowomp from '/wilted-flower.gif';
+  import close from '$lib/assets/close.svg?raw';
+  import { setContext } from "svelte";
+  import { fly } from "svelte/transition";
+  import { readable, writable } from "svelte/store";
+
+  const newestMessage = writable<HeaderMessage|null>(null);
+
+  const rose = chrome ? boowomp : logo;
+
+  const currentMessage = writable<HeaderMessage|null>(null, (set) => {
+    let $currentMessage: HeaderMessage|null = null;
+    let currentTimeout: number|null = null;
+
+    const dismiss = () => {
+      if (currentTimeout == null) clearTimeout(currentTimeout);
+      $currentMessage = null;
+      set(null);
+    };
+
+    const unsubscribe = newestMessage.subscribe(($newestMessage) => {
+      if ($newestMessage == null) return;
+
+      if ($currentMessage != null) dismiss();
+
+      $currentMessage = $newestMessage;
+      $currentMessage.dismiss = dismiss;
+      if ($currentMessage.options.dismissable)
+	currentTimeout = setTimeout(dismiss, $currentMessage.options.duration);
+      set($currentMessage);
+    });
+
+    return () => {
+      unsubscribe();
+      dismiss();
+    };
+  });
+
+    setContext<Header>("Header", {
+    addMessage(...args: any[]) {
+
+      let [ message, options ] = args as [string, Partial<MessageOptions>|undefined];
+      options ??= { dismissable: true, duration: 5000 };
+      options.dismissable ??= true;
+      options.duration ??= 5000;
+      newestMessage.set({
+        type: "message",
+        message,
+        options: options as MessageOptions,
+        dismiss: void {},
+      });
+
+    },
+  });
+
+</script>
+
+<div class="main">
+  <header>
+    <div class="corner">
+      <a href="/" class="name">
+	<img id="logo" src={rose} alt="rose"/>
+	<p>rose</p>
+      </a>
+    </div>
+
+    {#if $currentMessage != null}
+      <div class="center" transition:fly>
+	<p>
+	  {$currentMessage.message}
+	</p>
+	{#if $currentMessage.options.dismissable}
+	  <button
+	    class="dismiss"
+	    on:click={$currentMessage.dismiss}>
+	    <span class="icon">{@html close}</span>
+	  </button>
+	{/if}
+      </div>
+    {/if}
+
+    <nav>
+      <ul>
+	<li aria-current={$page.url.pathname === '/' ? 'page' : undefined}>
+	  <a href="/">Home</a>
+	</li>
+	<li aria-current={$page.url.pathname === '/projects' ? 'page' : undefined}>
+	  <a href="/projects">Projects</a>
+	</li>
+      </ul>
+    </nav>
+  </header>
+  <slot />
+</div>
+
+<style lang="scss">
+  @use "sass:color";
+
+  @import "@fontsource-variable/playwrite-hr";
+
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    position: fixed;
+    position: -webkit-sticky;
+    top: 0;
+    z-index: 99;
+    background-color: color.change(white, $alpha: 0.9);
+    height: 3em;
+  }
+
+  .name {
+    font-family: 'Playwrite HR Variable', cursive;
+    font-size: 1.3em;
+    color: #150129;
+    padding-bottom: 6px;
+  }
+
+  .corner {
+    height: 3em;
+    margin-bottom: 0px;
+
+    & a {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      text-decoration: none;
+
+      &:visited {
+	color: black;
+      }
+      &:hover &:active {
+	color: black;
+      }
+
+      & p {
+	padding-left: 4px;
+      }
+    }
+
+    & img {
+      width: 1.5em;
+      height: 1.5em;
+      object-fit: contain;
+    }
+
+    & img {
+      width: 1.5em;
+      height: 1.5em;
+      object-fit: contain;
+
+    }
+
+  }
+
+  .center {
+    display: flex;
+    flex-direction: row;
+    background-color: #000000ac;
+    border-radius: 100px;
+    align-items: center;
+    height: 2.5em;
+
+    & > .dismiss {
+      min-height: 2.3em;
+      min-width: 2.3em;
+      background: transparent;
+      border: none;
+      border-radius: 9999px;
+      margin-right: 10px;
+
+      &:hover { background: #ffffff30; }
+      &:active { background: #ffffff60; }
+
+      & > :global(span) {
+	justify-content: center;
+	align-content: center;
+	width: 100%;
+	height: 100%;
+	fill: #ffffff;
+	transform: translate(0, 0.125em);
+	& > :global(svg) {
+	  width: 16px;
+          height: 16px;
+          object-fit: contain;
+          text-align: center;
+          fill: #ffffff;
+	}
+      }
+    }
+
+    & p {
+      color: #fff;
+      margin-left: 10px;
+      margin-right: 10px;
+    }
+
+  }
+
+  nav {
+    display: flex;
+    justify-content: right;
+    font-size: 1.2em;
+    padding-right: 10px;
+    object-fit: contain;
+  }
+
+  ul {
+    position: relative;
+    padding: 0;
+    margin: 0;
+    height: 3em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    list-style: none;
+    background-size: contain;
+  }
+
+  li {
+    position: relative;
+    height: 100%;
+  }
+
+  li[aria-current='page']::before {
+    --size: 6px;
+    content: '';
+    width: 0;
+    height: 0;
+    position: absolute;
+    top: 0;
+    left: calc(50% - var(--size));
+    border: var(--size) solid transparent;
+    border-top: var(--size) solid var(--color-theme-1);
+  }
+
+  nav a {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    padding: 0 0.5rem;
+    color: #150129;
+    font-weight: 700;
+    font-size-adjust: 0.3;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    text-decoration: none;
+    transition: color 0.2s linear;
+  }
+
+  a:hover {
+    color: var(--color-theme-1);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    /* If the operating system is using dark mode, then apply this CSS */
+    header {
+      background-color: color.change(#292b33, $alpha: 0.9);
+    }
+
+    a:link:not(.permalink),a:visited:not(.permalink) {
+      color: #b9cffb;
+    }
+
+    .name {
+      color: #f5f5f5;
+    }
+  }
+
+</style>
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>
diff --git a/src/routes/styles.scss b/src/routes/styles.scss
new file mode 100644
index 0000000..0fe7ab6
--- /dev/null
+++ b/src/routes/styles.scss
@@ -0,0 +1,48 @@
+@import "@fontsource-variable/inter";
+
+body {
+  font-family:
+    'Inter Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-size: 1.2em;
+  color: #150129;
+}
+
+h1 {
+  width: 100%;
+  font-size-adjust: 0.7;
+  margin-bottom: 2px;
+}
+
+page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  width: 100%;
+  height: 0;
+  padding: 0 0 calc(100% * 495 / 2048) 0;
+}
+
+.permalink {
+  color: #150129;
+}
+
+.subheader {
+  font-size: 0.9em;
+  margin-top: 0px;
+}
+
+
+@media (prefers-color-scheme: dark) {
+    /* If the operating system is using dark mode, then apply this CSS */
+    body {
+      background: #292b33;
+      color: #f5f5f5
+    }
+    a:link:not(.permalink),a:visited:not(.permalink) {
+	color: #b9cffb;
+    }
+}
+
+a:link:not(.permalink),a:visited:not(.permalink) { color: #2160ad; }