summaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
authorKyren223 <contact@kyren.codes>2026-10-06 20:46:31 +0300
committerKyren223 <contact@kyren.codes>2026-10-06 20:46:31 +0300
commitba1be9573ef20d6424ae987257a1c727c47d4b53 (patch)
treee59ef56f19142215070d0516a9b3a110d15557b6 /src/components
parentea056b6e080669ba4b6f16c2757b4e2e88ea0553 (diff)
Initial setup for website rewrite
Diffstat (limited to 'src/components')
-rw-r--r--src/components/BlogItem.astro40
-rw-r--r--src/components/Head.astro29
-rw-r--r--src/components/Link.astro12
-rw-r--r--src/components/Markdown.astro12
-rw-r--r--src/components/Nav.astro47
-rw-r--r--src/components/Project.astro27
-rw-r--r--src/components/RadarChart.astro132
-rw-r--r--src/components/TerminalBorder.astro43
8 files changed, 0 insertions, 342 deletions
diff --git a/src/components/BlogItem.astro b/src/components/BlogItem.astro
deleted file mode 100644
index 8440d85..0000000
--- a/src/components/BlogItem.astro
+++ /dev/null
@@ -1,40 +0,0 @@
----
-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/src/components/Head.astro b/src/components/Head.astro
deleted file mode 100644
index a1a6e35..0000000
--- a/src/components/Head.astro
+++ /dev/null
@@ -1,29 +0,0 @@
----
-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/src/components/Link.astro b/src/components/Link.astro
deleted file mode 100644
index e8396ec..0000000
--- a/src/components/Link.astro
+++ /dev/null
@@ -1,12 +0,0 @@
----
-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/src/components/Markdown.astro b/src/components/Markdown.astro
deleted file mode 100644
index 104b57e..0000000
--- a/src/components/Markdown.astro
+++ /dev/null
@@ -1,12 +0,0 @@
----
-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/src/components/Nav.astro b/src/components/Nav.astro
deleted file mode 100644
index da08b32..0000000
--- a/src/components/Nav.astro
+++ /dev/null
@@ -1,47 +0,0 @@
----
-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/src/components/Project.astro b/src/components/Project.astro
deleted file mode 100644
index 0b15a68..0000000
--- a/src/components/Project.astro
+++ /dev/null
@@ -1,27 +0,0 @@
----
-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/src/components/RadarChart.astro b/src/components/RadarChart.astro
deleted file mode 100644
index 0a3d434..0000000
--- a/src/components/RadarChart.astro
+++ /dev/null
@@ -1,132 +0,0 @@
----
-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/src/components/TerminalBorder.astro b/src/components/TerminalBorder.astro
deleted file mode 100644
index 4e8bfb3..0000000
--- a/src/components/TerminalBorder.astro
+++ /dev/null
@@ -1,43 +0,0 @@
----
-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>