summaryrefslogtreecommitdiff
path: root/src/pages
diff options
context:
space:
mode:
Diffstat (limited to 'src/pages')
-rw-r--r--src/pages/blogs/index.astro39
-rw-r--r--src/pages/index.astro165
2 files changed, 119 insertions, 85 deletions
diff --git a/src/pages/blogs/index.astro b/src/pages/blogs/index.astro
new file mode 100644
index 0000000..de5252a
--- /dev/null
+++ b/src/pages/blogs/index.astro
@@ -0,0 +1,39 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import TerminalBorder from "../../components/TerminalBorder.astro";
+import BlogItem from "../../components/BlogItem.astro";
+import { getCollection } from "astro:content";
+
+const blogEntries = await getCollection("blogs");
+
+const blogs = [
+ {
+ title: "The search for the perfect ed25519 key pair",
+ description: `
+This is the description about this thing which shoud be very
+long and cause this to wrap so that I can see how about 3 lines
+of paragraph will look int this so now I am gonna continue
+yapping to make it even longer`.trimStart(),
+ date: "November 12th 2024",
+ },
+];
+---
+
+<Layout dir="blogs/">
+ <TerminalBorder header="Shell" margin="0.5rem 0 20px">
+ <p>ls ~/blogs {blogs.length}</p>
+ </TerminalBorder>
+ <div class="max-h-[18.5rem] overflow-y-auto">
+ {
+ blogs.map((blog) => (
+ <>
+ <BlogItem
+ title={blog.title}
+ description={blog.description}
+ date={blog.date}
+ />
+ </>
+ ))
+ }
+ </div>
+</Layout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 2a47693..d6cff92 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,8 +1,7 @@
---
-import Layout from "../layouts/Layout.astro";
+import Terminal from "../layouts/Layout.astro";
import TerminalBorder from "../components/TerminalBorder.astro";
import Link from "../components/Link.astro";
-import Nav from "../components/Nav.astro";
const sshKey = `ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIAsrdN6e4XbkJfV/FbH3GY8ujWgxSCSbYiwzQ4rKyren`;
const fingerprint = `
@@ -26,97 +25,93 @@ And when I am not coding I am most likely playing video games,
watching Anime or solving Rubik's cubes fast.`.trimStart();
---
-<Layout title="/home/kyren/">
- <main>
- <Nav path="" />
- <div id="content">
- <div id="left" class="column">
- <TerminalBorder header="Profile">
- <div class="flex items-center space-x-3">
- <img
- src="logo.svg"
- alt="picture"
- class="h-[100%] object-cover"
- />
- <pre
- id="sshKeyCopy"
- class="text-[75%] flex-1">{fingerprint}</pre>
- </div>
- </TerminalBorder>
- <TerminalBorder header="Name">
- <span>Kyren</span>
- </TerminalBorder>
- <TerminalBorder header="Email">
- <span>Kyren223@proton.me</span>
- </TerminalBorder>
- <TerminalBorder header="Timezone">
- <span>UTC+2</span>
- </TerminalBorder>
- <div class="w-[334%]">
- <TerminalBorder header="SSH Key">
- <div
- class="w-[100%] flex items-center space-x-2 hover:text-[var(--alt)]"
- >
- <span
- id="sshKey"
- class="hover:text-[var(--alt)] cursor-pointer truncate flex-1"
- >{sshKey}</span
- >
- <button
- id="sshKeyCopy"
- class="flex items-center justify-center ml-auto hover:text-[var(--alt)]"
- >
- <svg
- width="100%"
- height="100%"
- viewBox="0 -3 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>
+<Terminal dir="">
+ <div id="content">
+ <div id="left" class="column">
+ <TerminalBorder header="Profile">
+ <div class="flex items-center space-x-3">
+ <img
+ src="logo.svg"
+ alt="picture"
+ class="h-[100%] object-cover"
+ />
+ <pre
+ id="sshKeyCopy"
+ class="text-[75%] flex-1">{fingerprint}</pre>
</div>
- </div>
- <div id="right" class="column">
- <TerminalBorder header="Status">
- <p>
- Working on
- <Link href="https://github.com/KapiMC/Kapi">Kapi </Link>
- | Learning Web Development | Available for hire
- </p>
- </TerminalBorder>
- <TerminalBorder header="About Me" margin="20px 0">
- <p>{aboutMe}</p>
- </TerminalBorder>
- <TerminalBorder header="Links">
- <p>
- <Link href="https://github.com/Kyren223"
- >github.com/Kyren223</Link
+ </TerminalBorder>
+ <TerminalBorder header="Name">
+ <span>Kyren</span>
+ </TerminalBorder>
+ <TerminalBorder header="Email">
+ <span>Kyren223@proton.me</span>
+ </TerminalBorder>
+ <TerminalBorder header="Timezone">
+ <span>UTC+2</span>
+ </TerminalBorder>
+ <div class="w-[334%]">
+ <TerminalBorder header="SSH Key">
+ <div
+ class="w-[100%] flex items-center space-x-2 hover:text-[var(--alt)]"
+ >
+ <span
+ id="sshKey"
+ class="hover:text-[var(--alt)] cursor-pointer truncate flex-1"
+ >{sshKey}</span
>
- <br />
- <Link
- href="https://discord.com/users/481884415090229258"
- >discord.com/Kyren223</Link
+ <button
+ id="sshKeyCopy"
+ class="flex items-center justify-center ml-auto hover:text-[var(--alt)]"
>
- </p>
+ <svg
+ width="100%"
+ height="100%"
+ viewBox="0 -3 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>
- </main>
-</Layout>
+ <div id="right" class="column">
+ <TerminalBorder header="Status">
+ <p>
+ Working on
+ <Link href="https://github.com/KapiMC/Kapi">Kapi </Link>
+ | Learning Web Development | Available for hire
+ </p>
+ </TerminalBorder>
+ <TerminalBorder header="About Me" margin="20px 0">
+ <p>{aboutMe}</p>
+ </TerminalBorder>
+ <TerminalBorder header="Links">
+ <p>
+ <Link href="https://github.com/Kyren223"
+ >github.com/Kyren223</Link
+ >
+ <br />
+ <Link href="https://discord.com/users/481884415090229258"
+ >discord.com/Kyren223</Link
+ >
+ </p>
+ </TerminalBorder>
+ </div>
+ </div>
+</Terminal>
<script>
- const sshKey = document.getElementById("sshKey").innerHTML;
+ const sshKey = document.getElementById("sshKey")?.innerHTML;
function copySshKeyToClipboard() {
navigator.clipboard
- .writeText(sshKey)
+ .writeText(sshKey ? sshKey : "")
.then(() => {
// TODO: show some feedback for copying
})
@@ -127,10 +122,10 @@ watching Anime or solving Rubik's cubes fast.`.trimStart();
document
.getElementById("sshKey")
- .addEventListener("click", copySshKeyToClipboard);
+ ?.addEventListener("click", copySshKeyToClipboard);
document
.getElementById("sshKeyCopy")
- .addEventListener("click", copySshKeyToClipboard);
+ ?.addEventListener("click", copySshKeyToClipboard);
</script>
<style>
generated by cgit v1.3.1 (git 2.54.0) at 2026-10-10 09:24:05 +0000