Files
website/src/pages/index.astro

129 lines
4.1 KiB
Plaintext
Raw Normal View History

2024-03-09 22:41:35 +00:00
---
import BaseHead from "../components/BaseHead.astro";
import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
import Link from "../components/Link.astro";
import FormattedDate from "../components/FormattedDate.astro";
2024-07-15 00:39:54 +01:00
import Footer from "../components/Footer.astro";
2024-06-18 21:12:25 +01:00
import LuaLine from "../components/LuaLine.astro";
2024-03-09 22:41:35 +00:00
import { getBlogs } from "../content/blog";
const posts = (await getBlogs()).sort(
2024-03-12 18:15:50 +00:00
(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
2024-03-09 22:41:35 +00:00
);
---
<!doctype html>
2025-08-03 23:02:35 +01:00
<html lang="en" class="dark:mocha bg-ctp-base">
2024-06-18 21:12:25 +01:00
<head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
</head>
<body
2025-08-03 23:02:35 +01:00
class="tilde-background text-ctp-text h-screen m-auto sm:flex items-center justify-center sm:overflow-hidden"
2024-06-18 21:12:25 +01:00
>
2024-07-15 00:39:54 +01:00
<div class="visible p-8 sm:hidden">
<header>
<p class="font-bold text-2xl">kennethnym</p>
</header>
<main class="py-8">
2025-08-06 01:15:18 +01:00
<p>
2025-10-09 02:12:25 +01:00
software engineer @ <Link href="https://ona.com">ona</Link>. all
opinions are my own.
2025-08-06 01:15:18 +01:00
</p>
<p>check out <Link href="/read">the books I am reading!</Link></p>
2024-07-15 00:39:54 +01:00
<h1 class="font-bold mt-8 mb-2 text-lg visited">current projects:</h1>
<ul class="not-prose space-y-4 md:space-y-2">
<li>
<Link href="https://polygui.org">poly</Link>: a language-agnostic,
cross-platform GUI framework for building OS-native applications.
</li>
<li>
2024-07-22 01:01:00 +01:00
<Link href="https://github.com/kennethnym/infinifi">infinifi</Link>:
a website that plays gentle, ai-generated lo-fi music indefinitely
2024-07-15 00:39:54 +01:00
</li>
<li>
<Link href="https://github.com/kennethnym/mai">mai</Link>:
multilayer authenticity identifier, an ML model that attempts to
identify synthetic AI images
</li>
</ul>
<h1 class="font-bold mt-8 mb-2 text-lg visited">my thoughts:</h1>
<ul aria-label="recent blog posts" class="space-y-2">
{
posts.map((post) => (
<li class="flex flex-row justify-between hover:bg-opacity-10 hover:bg-text -mx-2 px-2 rounded space-x-4">
<Link href={`/blog/${post.slug}`}>{post.data.title}</Link>
<div class="text-right">
<FormattedDate date={post.data.pubDate} />
</div>
</li>
))
}
</ul>
</main>
<hr class="opacity-20 py-2" />
<Footer />
</div>
<div
class="hidden sm:visible scroll-container w-full h-full overflow-auto sm:flex items-center justify-center"
2024-06-18 21:12:25 +01:00
>
2024-07-15 00:39:54 +01:00
<main
class="py-8 px-4 max-w-4xl flex flex-col items-center space-y-0 leading-tight"
>
2025-10-09 02:12:25 +01:00
<header class="font-bold text-center">KENNETHNYM v24.0</header>
2024-07-15 00:39:54 +01:00
<p class="leading-none">&nbsp;</p>
2025-08-06 01:15:18 +01:00
<p class="text-center">
2025-10-09 02:12:25 +01:00
software engineer @ <Link href="https://ona.com">Ona</Link>. unpaid
hhkb salesman.
2025-08-06 01:15:18 +01:00
</p>
2024-07-15 00:39:54 +01:00
<p>&nbsp;</p>
<p>&nbsp;</p>
2025-08-06 01:15:18 +01:00
<Link href="/read" class="w-full">books i am reading</Link>
<p>&nbsp;</p>
2024-07-15 00:39:54 +01:00
<ul
aria-label="recent blog posts"
class="w-full space-y-2 sm:space-y-0"
>
{
posts.map((post) => (
<li class="flex flex-row justify-between hover:bg-opacity-10 hover:bg-text -mx-2 px-2 rounded space-x-8">
<Link href={`/blog/${post.slug}`}>{post.data.title}</Link>
<div class="text-right">
<FormattedDate date={post.data.pubDate} />
</div>
</li>
))
}
</ul>
</main>
</div>
2024-06-18 21:12:25 +01:00
<LuaLine />
2024-07-14 23:27:56 +01:00
<style>
2024-07-15 00:39:54 +01:00
.scroll-container {
margin-bottom: 4ch;
}
@media (min-width: 640px) {
.tilde-background {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='10' height='20'><text x='0' y='16' fill='%2343465E' font-family='CommitMono'>~</text></svg>");
background-repeat: repeat-y;
}
}
@media (min-width: 640px) and (prefers-color-scheme: dark) {
.tilde-background {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='10' height='20'><text x='0' y='16' fill='%23C6D1F1' font-family='CommitMono'>~</text></svg>");
background-repeat: repeat-y;
}
2024-07-14 23:27:56 +01:00
}
</style>
2024-07-15 00:39:54 +01:00
<script>
window.addEventListener("closebuffer", () => {
document.body.style.display = "none";
});
</script>
2024-06-18 21:12:25 +01:00
</body>
2024-03-09 22:41:35 +00:00
</html>