diff options
| author | Kyren223 <contact@kyren.codes> | 2026-10-06 20:46:31 +0300 |
|---|---|---|
| committer | Kyren223 <contact@kyren.codes> | 2026-10-06 20:46:31 +0300 |
| commit | ba1be9573ef20d6424ae987257a1c727c47d4b53 (patch) | |
| tree | e59ef56f19142215070d0516a9b3a110d15557b6 /src/components | |
| parent | ea056b6e080669ba4b6f16c2757b4e2e88ea0553 (diff) | |
Initial setup for website rewrite
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/BlogItem.astro | 40 | ||||
| -rw-r--r-- | src/components/Head.astro | 29 | ||||
| -rw-r--r-- | src/components/Link.astro | 12 | ||||
| -rw-r--r-- | src/components/Markdown.astro | 12 | ||||
| -rw-r--r-- | src/components/Nav.astro | 47 | ||||
| -rw-r--r-- | src/components/Project.astro | 27 | ||||
| -rw-r--r-- | src/components/RadarChart.astro | 132 | ||||
| -rw-r--r-- | src/components/TerminalBorder.astro | 43 |
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> |
