Kyren223/github-website
1
0
Fork 0
mirror of https://github.com/Kyren223/website.git synced 2026-04-21 11:55:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Backup

Browse Source
This commit is contained in:
Kyren223
2024-11-13 12:59:05 +02:00
parent 5f18abf234
commit face4ce2d0
10 changed files with 222 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
src/components/RadarChart.astro Normal file
View File

@@ -0,0 +1,147 @@
---
// const { data } = Astro.props;
const data = [
{ name: 'React', total: 9 },
{ name: 'GraphQL', total: 2 },
{ name: 'JavaScript', total: 5 },
{ name: 'SVG', total: 5 },
{ name: 'TypeScript', total: 7 },
{ name: 'Tailwind', total: 7 },
{ name: 'React Query', total: 2 },
{ name: 'Next.js', total: 3 },
{ name: 'Hmm', total: 5 },
]
const chartSize = 400;
const chartCenter = chartSize / 2;
const colors = ['#58e6d9', '#ff6090', '#4871e3', '#ffc107', '#8bc34a', '#00FF00'];
const chartData = data.sort((a, b) => b.total - a.total).slice(0, colors.length);
const pointPadding = 10;
const max = chartData.reduce((max, current) => (current.total > max ? current.total : max), 0);
const rings = [...Array(6).keys()];
const getX = (angle, value) => Math.cos(angle - Math.PI / 2) * value;
const getY = (angle, value) => 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, 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 bgColor = "bg-blue-500"
const borderColor = "border-gray-100"
const strokeColor = 'stroke-gray-200'
const shapeClass = 'stroke-gray-900 fill-gray-900/[0.5]'
---
<div class=`m-0 p-0 ${bgColor} border rounded ${borderColor} shadow-lg`>
<div class='grid md:grid-cols-2 items-center gap-16 p-16'>
<svg xmlns='http://www.w3.org/2000/svg' viewBox={`0 0 ${chartSize} ${chartSize}`} 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 { x, y } = property;
return (
<g transform={`translate(${x},${y})`}>
<circle cx={0} cy={0} r={8} fill={colors[index]} />
</g>
<g transform={`translate(${x},${y})`}>
<text
x={0}
y={0}
fill={colors[index]}
font-size="16px"
text-anchor="middle"
dominant-baseline="middle"
>
Hello
</text>
</g>
);
})
}
</g>
</svg>
<div>
<h2 class='text-4xl font-black uppercase'>Top 6 Tags</h2>
<p class='mb-6'>Calculated using Astro Content Collections.</p>
<ul class='list-none m-0 p-0'>
{
properties.map((property, index) => {
const { name, total } = property;
return (
<li class='m-0 p-0 flex items-center justify-between border-b border-b-transparent [&:not(:last-child)]:border-b-gray-100 leading-10'>
<div class='flex items-center gap-1'>
<svg
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 24 24'
width={24}
height={24}
role='presentation'
>
<circle cx={12} cy={12} r={6} fill={colors[index]} />
</svg>
<strong>{name}</strong>
</div>
<strong>{`x${total}`}</strong>
</li>
);
})
}
</ul>
</div>
</div>
</div>

4
src/layouts/Layout.astro → src/layouts/Terminal.astro
View File

@@ -3,10 +3,10 @@ import "../styles/terminal.css";
import Nav from "../components/Nav.astro";
interface Props {
dir: string;
path: string;
}
const { dir: title } = Astro.props;
const { path: title } = Astro.props;
---
<!doctype html>

15
src/pages/404.astro Normal file
View File

@@ -0,0 +1,15 @@
---
import TerminalBorder from "../components/TerminalBorder.astro"
import Terminal from "../layouts/Terminal.astro"
const url = new URL(Astro.request.url).pathname.substring(1);
---
<Terminal path="404">
<TerminalBorder header="Shell" margin="0.5rem 0">
<span>
<p>$ cd ~/{url}</p>
<p class="pt-3">"{url}": No such file or directory (os error 2)</p>
</span>
</TerminalBorder>
</Terminal>

32
src/pages/blogs/index.astro → src/pages/blogs.astro
View File

@@ -1,12 +1,12 @@
---
import Layout from "../../layouts/Layout.astro";
import TerminalBorder from "../../components/TerminalBorder.astro";
import BlogItem from "../../components/BlogItem.astro";
import Terminal from "../layouts/Terminal.astro";
import TerminalBorder from "../components/TerminalBorder.astro";
import BlogItem from "../components/BlogItem.astro";
import { getCollection } from "astro:content";
function formatDate(date) {
function formatDate(date: Date) {
const day = date.getDate();
const month = date.toLocaleString("default", { month: "long" }); // Get full month name
const month = date.toLocaleString("default", { month: "long" });
const year = date.getFullYear();
let suffix = "th";
@@ -21,17 +21,19 @@ function formatDate(date) {
return `${month} ${day}${suffix} ${year}`;
}
const blogs = (await getCollection("blogs")).map((blog) => ({
title: blog.data.title,
description: blog.data.description,
date: formatDate(blog.data.date),
href: "/blogs/" + blog.slug,
}));
const blogs = (await getCollection("blogs"))
.sort((a, b) => +new Date(b.data.date) - +new Date(a.data.date))
.map((blog) => ({
title: blog.data.title,
description: blog.data.description,
date: formatDate(blog.data.date),
href: "/blogs/" + blog.slug,
}));
---
<Layout dir="blogs/">
<Terminal path="blogs/">
<TerminalBorder header="Shell" margin="0.5rem 0 20px">
<p>ls ~/blogs {blogs.length}</p>
<p>$ ls -lah -t --color=auto ~/blogs</p>
</TerminalBorder>
<div class="max-h-[18.5rem] overflow-y-auto">
{
@@ -39,7 +41,7 @@ const blogs = (await getCollection("blogs")).map((blog) => ({
<>
<BlogItem
title={blog.title}
description={blog.description}
description={blog.description ? blog.description : ""}
date={blog.date}
href={blog.href}
/>
@@ -47,4 +49,4 @@ const blogs = (await getCollection("blogs")).map((blog) => ({
))
}
</div>
</Layout>
</Terminal>

3
src/pages/blogs/[...slug].astro
View File

@@ -1,5 +1,6 @@
---
import Blog from "../../layouts/Blog.astro";
import RadarChart from "../../components/RadarChart.astro"
import { getCollection } from "astro:content";
export async function getStaticPaths() {
@@ -15,5 +16,7 @@ const { Content } = await entry.render();
---
<Blog title=`/home/kyren/blogs/${entry.slug}`>
<h1>Test</h1>
<RadarChart></RadarChart>
<Content />
</Blog>

36
src/pages/index.astro
View File

@@ -1,9 +1,9 @@
---
import Terminal from "../layouts/Layout.astro";
import Terminal from "../layouts/Terminal.astro";
import TerminalBorder from "../components/TerminalBorder.astro";
import Link from "../components/Link.astro";
const sshKey = `ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIAsrdN6e4XbkJfV/FbH3GY8ujWgxSCSbYiwzQ4rKyren`;
const sshKey = `ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIO7P9K9D5RkBk+JCRRS6AtHuTAc6cRpXfRfRMg/Kyren`;
const fingerprint = `
+--[ED25519 256]--+
|+o.+oE*B%* o |
@@ -25,7 +25,7 @@ And when I am not coding I am most likely playing video games,
watching Anime or solving Rubik's cubes fast.`.trimStart();
---
<Terminal dir="">
<Terminal path="">
<div id="content">
<div id="left" class="column">
<TerminalBorder header="Profile">
@@ -36,8 +36,7 @@ watching Anime or solving Rubik's cubes fast.`.trimStart();
class="h-[100%] object-cover"
/>
<pre
id="sshKeyCopy"
class="text-[75%] flex-1">{fingerprint}</pre>
class="copySshKey text-[75%] flex-1 hover:text-[var(--secondary)]">{fingerprint}</pre>
</div>
</TerminalBorder>
<TerminalBorder header="Name">
@@ -47,26 +46,22 @@ watching Anime or solving Rubik's cubes fast.`.trimStart();
<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>UTC+2</span> </TerminalBorder> <div class="w-[334%]"> <TerminalBorder header="SSH Key">
<div class="w-[100%] flex items-center space-x-2 group">
<span
id="sshKey"
class="hover:text-[var(--alt)] cursor-pointer truncate flex-1"
class="hover:text-[var(--alt)] cursor-pointer truncate flex-1 group-hover:text-[var(--alt)]"
>{sshKey}</span
>
<button
id="sshKeyCopy"
class="flex items-center justify-center ml-auto hover:text-[var(--alt)]"
type="button"
class="group-hover:text-[var(--alt)]"
>
<svg
width="100%"
height="100%"
viewBox="0 -3 24 24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
fill="none"
>
@@ -113,19 +108,18 @@ watching Anime or solving Rubik's cubes fast.`.trimStart();
navigator.clipboard
.writeText(sshKey ? sshKey : "")
.then(() => {
console.log("Clicked");
// TODO: show some feedback for copying
})
.catch((_err) => {
console.log("Error copying!");
// TODO: show same feedback but with err
});
}
document
.getElementById("sshKey")
?.addEventListener("click", copySshKeyToClipboard);
document
.getElementById("sshKeyCopy")
?.addEventListener("click", copySshKeyToClipboard);
document.querySelectorAll("copySshKey").forEach((elem) => {
elem.addEventListener("click", copySshKeyToClipboard);
});
</script>
<style>

6
src/pages/skills.astro Normal file
View File

@@ -0,0 +1,6 @@
---
import Terminal from "../layouts/Terminal.astro";
---
<Terminal path="skills">
</Terminal>

1
src/styles/terminal.css
View File

@@ -61,7 +61,6 @@ main {
width: 55rem;
max-width: 75%;
max-height: 75%;
padding-top: 1.25rem;
overflow: hidden;
}