diff options
Diffstat (limited to 'src/routes/+page.svelte')
| -rw-r--r-- | src/routes/+page.svelte | 205 |
1 files changed, 205 insertions, 0 deletions
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 >w< + 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> |