Initial setup for website rewrite

8 files changed, 342 insertions, 0 deletions

diff --git a/old_stuff/src/components/BlogItem.astro b/old_stuff/src/components/BlogItem.astro
new file mode 100644
index 0000000..8440d85
--- /dev/null
+++ b/old_stuff/src/components/BlogItem.astro
@@ -0,0 +1,40 @@
+---
+import TerminalBorder from "@components/TerminalBorder.astro";
+
+function formatDate(date: Date) {
+    const day = date.getDate();
+    const month = date.toLocaleString("default", { month: "long" });
+    const year = date.getFullYear();
+    return `${month} ${day}, ${year}`;
+}
+
+interface Props {
+    title: string;
+    description: string;
+    date: Date;
+    href?: string;
+    header?: string;
+}
+
+const { title, description, date, href, header } = Astro.props;
+---
+
+<TerminalBorder header={header} footer={formatDate(date)} extra="mr-[0.1vw] sm:mr-0 mb-[5vw] sm:mb-[2vw]">
+    <span class="cursor-pointer group block w-full">
+        {
+            href ? (
+                <a href={href} style="all: unset;">
+                    <h1 class="text-[130%] text-[var(--accent)] group-hover:underline">
+                        {title}
+                    </h1>
+                    <p class="text-[var(--secondary)]">{description}</p>
+                </a>
+            ) : (
+                <>
+                    <h1 class="text-[130%] text-[var(--accent)]">{title}</h1>
+                    <p class="text-[var(--secondary)]">{description}</p>
+                </>
+            )
+        }
+    </span>
+</TerminalBorder>
diff --git a/old_stuff/src/components/Head.astro b/old_stuff/src/components/Head.astro
new file mode 100644
index 0000000..a1a6e35
--- /dev/null
+++ b/old_stuff/src/components/Head.astro
@@ -0,0 +1,29 @@
+---
+interface Props {
+    title: string;
+    description: string;
+}
+
+const { title, description } = Astro.props;
+---
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="dark">
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="generator" content={Astro.generator} />
+    <meta name="robots" content="index, follow, noarchive">
+    <meta name="keywords" content="Kyren223, Kapi, Minecraft, Developer">
+    <meta name="author" content="Kyren223">
+    <meta name="description" content={description} />
+    <title>{title}</title>
+
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content={description} />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://kyren.codes/" />
+    <meta property="og:image" content="/image.png">
+    <meta property="og:image:alt" content="a cyan sphere with a dark background">
+    <meta property="og:site_name" content="Kyren's Website">
+</head>
diff --git a/old_stuff/src/components/Link.astro b/old_stuff/src/components/Link.astro
new file mode 100644
index 0000000..e8396ec
--- /dev/null
+++ b/old_stuff/src/components/Link.astro
@@ -0,0 +1,12 @@
+---
+interface Props {
+    href: string;
+    newTab?: boolean;
+}
+
+const { href, newTab = true } = Astro.props;
+---
+
+<a href={href} {...newTab && { target: "_blank", rel: "noopener noreferrer" }}>
+    <slot />
+</a>
diff --git a/old_stuff/src/components/Markdown.astro b/old_stuff/src/components/Markdown.astro
new file mode 100644
index 0000000..104b57e
--- /dev/null
+++ b/old_stuff/src/components/Markdown.astro
@@ -0,0 +1,12 @@
+---
+import "@styles/markdown/asides.css";
+import "@styles/markdown/markdown.css";
+import "@styles/markdown/props.css";
+import "@styles/markdown/reset.css";
+import "@styles/markdown/shiki.css";
+import "@styles/markdown/util.css";
+---
+
+<div class="sl-markdown-content">
+    <slot />
+</div>
diff --git a/old_stuff/src/components/Nav.astro b/old_stuff/src/components/Nav.astro
new file mode 100644
index 0000000..da08b32
--- /dev/null
+++ b/old_stuff/src/components/Nav.astro
@@ -0,0 +1,47 @@
+---
+interface Props {
+    path: string;
+}
+
+const { path } = Astro.props;
+
+const directories = ["skills", "projects", "blogs"];
+---
+
+<nav
+    class="grid sm:flex
+    justify-between
+    border-[0.25vh] sm:border-[0.125vw]
+    border-[var(--alt)]
+    border-solid
+    mb-[7vw] sm:mb-[1.5625vw]
+    p-[3vw] sm:p-[1vw]"
+>
+    <span class="mr-[2.5vh] text-[5vw] sm:mr-[2.5vw] sm:text-[1.375vw]"
+        >{path}</span
+    >
+    <span
+        id="nav-links"
+        class="mb-0 mx-[0.2vw] text-[5vw]
+        mx-[0.2vw] sm:text-[1.375vw]"
+    >
+        <a href="/">home</a>
+        {
+            directories.map((dir) => (
+                <>
+                    <a href={`/${dir}`}>{dir}</a>
+                </>
+            ))
+        }
+        <a class="hidden sm:contents" href="/shell">shell</a>
+    </span>
+</nav>
+
+<style>
+    #nav-links a {
+        color: var(--primary);
+    }
+    #nav-links a:hover {
+        color: var(--accent);
+    }
+</style>
diff --git a/old_stuff/src/components/Project.astro b/old_stuff/src/components/Project.astro
new file mode 100644
index 0000000..0b15a68
--- /dev/null
+++ b/old_stuff/src/components/Project.astro
@@ -0,0 +1,27 @@
+---
+import TerminalBorder from "@components/TerminalBorder.astro";
+import Link from "@components/Link.astro";
+
+interface Props {
+    title: string;
+    description: string;
+    href: string;
+    cd?: string;
+    dir?: string;
+}
+
+const { title, description, href, cd = title, dir = "cd ~/projects/" } = Astro.props;
+---
+
+<div class="flex-column mt-[1vw] mx-[1vw] mb-[5vw] sm:m-0">
+    <TerminalBorder>
+        <span>
+            <h1 class="inline-block text-[130%] text-[var(--accent)]">{title}</h1>
+            <p class="inline-block text-[var(--secondary)]">{description}</p>
+            <span class="block my-[3vw] sm:my-[0.625vw]"><slot /></span>
+        </span>
+    </TerminalBorder>
+    <TerminalBorder header="Shell">
+        <Link href={href}>{dir}{cd}</Link>
+    </TerminalBorder>
+</div>
diff --git a/old_stuff/src/components/RadarChart.astro b/old_stuff/src/components/RadarChart.astro
new file mode 100644
index 0000000..0a3d434
--- /dev/null
+++ b/old_stuff/src/components/RadarChart.astro
@@ -0,0 +1,132 @@
+---
+import "@styles/terminal.css"
+
+interface Entry {
+    name: string;
+    weight: number;
+}
+
+interface Props {
+    max: number
+    data: Entry[];
+}
+
+const { max, data } = Astro.props
+
+const chartPadding = 100;
+const chartSize = 400;
+const chartCenter = chartSize / 2;
+
+const chartData = data ;// .sort((a, b) => b.weight - a.weight).slice(0, data.length);
+const pointPadding = 0;
+const rings = [...Array(6).keys()];
+
+const getX = (angle: number, value: number) =>
+    Math.cos(angle - Math.PI / 2) * value;
+const getY = (angle: number, value: number) =>
+    Math.sin(angle - Math.PI / 2) * value;
+
+const axes = chartData.map((_, index) => {
+    const angle = (Math.PI * 2 * index) / chartData.length;
+    const x = getX(angle, chartSize / 2);
+    const y = getY(angle, chartSize / 2);
+    const points = [
+        [0, 0],
+        [x, y],
+    ]
+        .map((point) => point[0] + "," + point[1])
+        .join(" ");
+    return {
+        points: points,
+    };
+});
+
+const properties = chartData.map((item, index) => {
+    const { name, weight: total } = item;
+    const clamp = Number(total / (max + pointPadding));
+    const angle = (Math.PI * 2 * index) / chartData.length;
+    const x = getX(angle, (clamp * chartSize) / 2);
+    const y = getY(angle, (clamp * chartSize) / 2);
+    return { name: name, total: total, x: x, y: y };
+});
+
+const shape =
+    properties.reduce((items, item, index) => {
+        const { x, y } = item;
+        const string = `${index === 0 ? "M" : "L"}${x},${y}`;
+        return items + string;
+    }, "") + "z";
+
+const strokeColor = "stroke-[var(--alt)]";
+const shapeClass = "stroke-[var(--primary)] fill-[#7ed4fb]/50";
+
+---
+    <div class="w-full grid md:grid-cols-1 items-center gap-16 p-0">
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox={`-${chartPadding / 2} -${chartPadding / 2} ${chartSize + chartPadding} ${chartSize + chartPadding}`}
+            role="presentation"
+        >
+            <g transform={`translate(${chartCenter},${chartCenter})`}>
+                {
+                    rings.map((_, index) => {
+                        return (
+                            <circle
+                                cx={0}
+                                cy={0}
+                                r={
+                                    ((index / rings.length) * chartSize) /
+                                    Number((Math.PI / 2 + 0.1).toFixed(2))
+                                }
+                                class={strokeColor}
+                                fill="none"
+                                stroke-width={1}
+                            />
+                        );
+                    })
+                }
+                {
+                    axes.map((axis) => {
+                        const { points } = axis;
+                        return (
+                            <polyline
+                                points={points}
+                                class={strokeColor}
+                                fill="none"
+                                stroke-width={1}
+                            />
+                        );
+                    })
+                }
+                <path d={shape} class=`${shapeClass}` stroke-width={1.5}></path>
+                {
+                    properties.map((property, index) => {
+                        const length = 1.1;
+                        const angle = (Math.PI * 2) * index / chartData.length;
+                        const maxX = getX(angle, (length * chartSize) / 2);
+                        const maxY = getY(angle, (length * chartSize) / 2);
+                        let textAngle = (angle * (180 / Math.PI))
+                        if (90 < textAngle && textAngle < 270) {
+                            textAngle += 180
+                        }
+                        return (
+                            <g transform={`translate(${maxX},${maxY})`}>
+                                <text
+                                    x={0}
+                                    y={0}
+                                    fill="var(--secondary)"
+                                    font-size="2rem"
+                                    font-weight="bold"
+                                    text-anchor="middle"
+                                    transform=`rotate(${textAngle})`
+                                    dominant-baseline="middle"
+                                >
+                                    {property.name}
+                                </text>
+                            </g>
+                        );
+                    })
+                }
+            </g>
+        </svg>
+    </div>
diff --git a/old_stuff/src/components/TerminalBorder.astro b/old_stuff/src/components/TerminalBorder.astro
new file mode 100644
index 0000000..4e8bfb3
--- /dev/null
+++ b/old_stuff/src/components/TerminalBorder.astro
@@ -0,0 +1,43 @@
+---
+interface Props {
+    header?: string;
+    footer?: string;
+    extra?: string;
+}
+
+const { header = "", footer = "", extra = "m-[-0.1vw]" } = Astro.props;
+---
+
+<div
+    class=`section
+    p-[0.8em] pt-[1.0625em] border-[0.1vw] text-[3.5vw]
+    sm:p-[1vw] sm:pt-[1.0625vw] sm:border-[0.1vw] sm:text-[100%]
+    ${extra}`
+>
+    <span
+        class="tag px-[0.5em] text-[2.5vw] left-[0.5em] top-[-0.7em]
+        sm:px-[0.625vw] sm:text-[1vw] sm:left-[0.625vw] sm:top-[-0.75vw]"
+        >{header}</span
+    >
+    <span
+        class="tag px-[0.5em] text-[2.5vw] left-[0.5em] bottom-[-0.7em]
+        sm:px-[0.625vw] sm:text-[1vw] sm:left-[0.625vw] sm:bottom-[-0.75vw]"
+        >{footer}</span
+    >
+    <slot />
+</div>
+
+<style>
+    .section {
+        position: relative;
+        display: flex;
+        border-style: solid;
+        border-color: var(--alt);
+    }
+
+    .tag {
+        position: absolute;
+        background-color: var(--background);
+        color: var(--alt);
+    }
+</style>