From e235aa6cf4914cbff6c72f19e0fcf6888da349f7 Mon Sep 17 00:00:00 2001
From: axtloss <axtlos@disroot.org>
Date: Tue, 20 Aug 2024 01:20:30 +0200
Subject: yayyy new website!!

---
 src/routes/+page.svelte | 205 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 205 insertions(+)
 create mode 100644 src/routes/+page.svelte

(limited to 'src/routes/+page.svelte')

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>
-- 
cgit v1.2.3