summaryrefslogtreecommitdiff
path: root/old_stuff/src/pages/index.astro
diff options
context:
space:
mode:
Diffstat (limited to 'old_stuff/src/pages/index.astro')
-rw-r--r--old_stuff/src/pages/index.astro275
1 files changed, 275 insertions, 0 deletions
diff --git a/old_stuff/src/pages/index.astro b/old_stuff/src/pages/index.astro
new file mode 100644
index 0000000..e286117
--- /dev/null
+++ b/old_stuff/src/pages/index.astro
@@ -0,0 +1,275 @@
+---
+import { getCollection } from "astro:content";
+import Terminal from "@layouts/Terminal.astro";
+import TerminalBorder from "@components/TerminalBorder.astro";
+import Link from "@components/Link.astro";
+import BlogItem from "@components/BlogItem.astro";
+
+const latestBlog = (await getCollection("blogs")).reduce((latest, blog) => {
+ const blogDate = new Date(blog.data.date);
+ return blogDate > new Date(latest.data.date) ? blog : latest;
+});
+
+const sshKey = `ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIO7P9K9D5RkBk+JCRRS6AtHuTAc6cRpXfRfRMg/Kyren`;
+const fingerprint = `
++--[ED25519 256]--+
+| +. .. +.B|
+| + o..o . BB|
+| ..o oo.o =+E|
+| ... oo. + o.|
+| . S . = |
+| . . + o |
+| o o o . |
+| oo .o+ + |
+| ++ooo+= |
++----[SHA256]-----+`.trimStart();
+
+const aboutMe = `
+Hi! I'm Kyren, a software engineer and Game developer freelancer.
+I love working with low level languages and learning things deeply.
+I am also a terminal nerd and Linux enthusiast who uses NVIM btw.
+And when I am not coding I am most likely playing video games,
+watching Anime or solving Rubik's cubes fast.`.trimStart();
+
+const utcOffset = 3;
+
+const email = "contact at kyren.codes";
+
+---
+
+<Terminal path="/home/kyren/">
+ <!-- ================= -->
+ <!-- ==== Desktop ==== -->
+ <!-- ================= -->
+ <div id="content" class="w-0 h-0 invisible sm:w-full sm:h-full sm:visible">
+ <div class="w-[30%]">
+ <TerminalBorder header="Profile">
+ <div class="flex items-center space-x-[1.25vw] h-[9.5vw]">
+ <img
+ src="favicon.svg"
+ alt="picture"
+ class="h-[100%] object-cover"
+ />
+ <pre
+ class="sshKeyCopy text-[60%] hover:text-[var(--secondary)]">{fingerprint}</pre>
+ </div>
+ </TerminalBorder>
+ <TerminalBorder header="Email">
+ <span id="email" class="flex-1">{email}</span>
+ <button class="emailCopy hover:text-gray-700">
+ <svg
+ width="100%"
+ height="100%"
+ viewBox="0 0 24 24"
+ xmlns="http://www.w3.org/2000/svg"
+ fill="none"
+ >
+ <path
+ fill="currentColor"
+ fill-rule="evenodd"
+ d="M4 2a2 2 0 00-2 2v9a2 2 0 002 2h2v2a2 2 0 002 2h9a2 2 0 002-2V8a2 2 0 00-2-2h-2V4a2 2 0 00-2-2H4zm9 4V4H4v9h2V8a2 2 0 012-2h5zM8 8h9v9H8V8z"
+ ></path>
+ </svg>
+ </button>
+ </TerminalBorder>
+ <TerminalBorder header="Git Repos (main)">
+ <Link href="https://git.kyren.codes/Kyren223">
+ git.kyren.codes/Kyren223
+ </Link>
+ </TerminalBorder>
+ <TerminalBorder header="GitHub (secondary)">
+ <Link href="https://github.com/Kyren223">
+ github.com/Kyren223
+ </Link>
+ </TerminalBorder>
+ <TerminalBorder header="Discord">
+ <Link href="https://discord.com/users/481884415090229258">
+ Kyren223
+ </Link>
+ </TerminalBorder>
+ <!-- <TerminalBorder header="Timezone"> -->
+ <!-- <div class="flex justify-between w-full"> -->
+ <!-- <span class="text-left">UTC+{utcOffset}</span> -->
+ <!-- <span id="time" class="text-right">Loading...</span> -->
+ <!-- </div> -->
+ <!-- </TerminalBorder> -->
+ <div class="w-[334%]">
+ <TerminalBorder header="SSH Key">
+ <div class="sshKeyCopy w-[100%] flex items-center group">
+ <span
+ id="sshKey"
+ class="hover:text-[var(--alt)] cursor-pointer truncate flex-1 group-hover:text-[var(--alt)]"
+ >{sshKey}</span
+ >
+ <button class="group-hover:text-gray-700">
+ <svg
+ width="100%"
+ height="100%"
+ viewBox="0 0 24 24"
+ xmlns="http://www.w3.org/2000/svg"
+ fill="none"
+ >
+ <path
+ fill="currentColor"
+ fill-rule="evenodd"
+ d="M4 2a2 2 0 00-2 2v9a2 2 0 002 2h2v2a2 2 0 002 2h9a2 2 0 002-2V8a2 2 0 00-2-2h-2V4a2 2 0 00-2-2H4zm9 4V4H4v9h2V8a2 2 0 012-2h5zM8 8h9v9H8V8z"
+ ></path>
+ </svg>
+ </button>
+ </div>
+ </TerminalBorder>
+ </div>
+ </div>
+ <div class="w-[67%]">
+ <TerminalBorder header="Status">
+ <p class="text-[0.96vw]">
+ Working on <Link href="https://git.kyren.codes/kyren223/Krypton"
+ >Krypton
+ </Link> | Learning Langdev & Compiler Design | Available for hire
+ </p>
+ </TerminalBorder>
+ <TerminalBorder header="About Me" extra="my-[2.5vw]">
+ <p>{aboutMe}</p>
+ </TerminalBorder>
+ <BlogItem
+ header="Latest Blog Post"
+ title={latestBlog.data.title}
+ description={latestBlog.data.description ?? ""}
+ date={latestBlog.data.date}
+ href={"/blogs/" + latestBlog.slug}
+ />
+ </div>
+ </div>
+
+ <!-- ================ -->
+ <!-- ==== Mobile ==== -->
+ <!-- ================ -->
+ <div
+ class="w-full h-[80svh] visible sm:w-0 sm:h-0 sm:invisible overflow-y-auto overflow-x-hidden sm:overflow-visible"
+ >
+ <div class="mx-[1vw] mt-[1vw]">
+ <TerminalBorder header="Status">
+ <p>
+ Working on <Link href="https://github.com/kyren223/eko"
+ >EKO
+ </Link> | Learning Langdev & Compiler Design | Available for hire
+ </p>
+ </TerminalBorder>
+ <TerminalBorder header="About Me" extra="my-[5vw] sm:my-[2.5vw]">
+ <p>{aboutMe}</p>
+ </TerminalBorder>
+ <BlogItem
+ header="Latest Blog Post"
+ title={latestBlog.data.title}
+ description={latestBlog.data.description ?? ""}
+ date={latestBlog.data.date}
+ href={"/blogs/" + latestBlog.slug}
+ />
+ <div class="mt-[8vw]">
+ <TerminalBorder header="Email">
+ <span id="email" class="flex-1">{email}</span>
+ <button class="emailCopy hover:text-gray-700">
+ <svg
+ class="ml-[-4vw]"
+ xmlns="http://www.w3.org/2000/svg"
+ fill="none"
+ >
+ <path
+ fill="currentColor"
+ fill-rule="evenodd"
+ d="M4 2a2 2 0 00-2 2v9a2 2 0 002 2h2v2a2 2 0 002 2h9a2 2 0 002-2V8a2 2 0 00-2-2h-2V4a2 2 0 00-2-2H4zm9 4V4H4v9h2V8a2 2 0 012-2h5zM8 8h9v9H8V8z"
+ ></path>
+ </svg>
+ </button>
+ </TerminalBorder>
+ </div>
+ <TerminalBorder header="GitHub">
+ <Link href="https://github.com/Kyren223">
+ github.com/Kyren223
+ </Link>
+ </TerminalBorder>
+ <TerminalBorder header="Discord">
+ <Link href="https://discord.com/users/481884415090229258">
+ Kyren223
+ </Link>
+ </TerminalBorder>
+ <TerminalBorder header="Timezone">
+ <div class="flex justify-between w-full">
+ <span class="text-left">UTC+{utcOffset}</span>
+ <span id="time" class="text-right">Loading...</span>
+ </div>
+ </TerminalBorder>
+ <TerminalBorder header="SSH Key">
+ <div class="sshKeyCopy w-[100%] flex items-center group">
+ <span
+ id="sshKey"
+ class="hover:text-[var(--alt)] cursor-pointer truncate flex-1 group-hover:text-[var(--alt)]"
+ >{sshKey}</span
+ >
+ </div>
+ </TerminalBorder>
+ </div>
+ </div>
+</Terminal>
+
+<script define:vars={{ utcOffset }}>
+ function copyToClipboard(text) {
+ return function () {
+ console.log("Clicked");
+ navigator.clipboard
+ .writeText(text)
+ .then(() => {
+ console.log("Copied");
+ // TODO: show some feedback for copying
+ })
+ .catch((_err) => {
+ console.log("Error copying!");
+ // TODO: show same feedback but with err
+ });
+ };
+ }
+
+ const sshKey = document.getElementById("sshKey");
+ document.querySelectorAll(".sshKeyCopy").forEach((elem) => {
+ elem.addEventListener("click", copyToClipboard(sshKey.innerHTML));
+ });
+
+ const email = document.getElementById("email");
+ document.querySelectorAll(".emailCopy").forEach((elem) => {
+ elem.addEventListener("click", copyToClipboard(email.innerHTML));
+ });
+
+ const time = document.getElementById("time");
+ setInterval(
+ () => {
+ const now = new Date();
+ const myTime = new Date(now.getTime() + utcOffset * 3600 * 1000);
+ const hours = String(myTime.getUTCHours()).padStart(2, "0");
+ const minutes = String(myTime.getUTCMinutes()).padStart(2, "0");
+ const formattedTime = `${hours}:${minutes}`;
+ time.innerHTML = formattedTime;
+ },
+ 0,
+ 60 * 1000,
+ );
+</script>
+
+<style>
+ #content {
+ margin-top: 1.5vw;
+ display: flex;
+ justify-content: space-between;
+ }
+
+ button {
+ background-color: var(--background);
+ color: var(--text);
+ border: 0;
+ font-size: 1.25vw;
+ cursor: pointer;
+ width: 1.5vw;
+ height: 1.5vw;
+ padding: 0;
+ line-height: 2.3vw;
+ }
+</style>
generated by cgit v1.3.1 (git 2.54.0) at 2026-10-10 01:41:35 +0000