mirror of
https://github.com/Kyren223/website.git
synced 2026-08-13 05:44:25 +00:00
271 lines
10 KiB
Plaintext
271 lines
10 KiB
Plaintext
---
|
|
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="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>
|
|
<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-[1vw]">
|
|
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-[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>
|