Initial setup for website rewrite

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>