diff options
| -rw-r--r-- | src/pages/index.astro | 27 | ||||
| -rw-r--r-- | src/pages/skills.astro | 54 |
2 files changed, 63 insertions, 18 deletions
diff --git a/src/pages/index.astro b/src/pages/index.astro index 243838f..4c2136e 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -39,14 +39,22 @@ watching Anime or solving Rubik's cubes fast.`.trimStart(); class="copySshKey text-[75%] flex-1 hover:text-[var(--secondary)]">{fingerprint}</pre> </div> </TerminalBorder> - <TerminalBorder header="Name"> - <span>Kyren</span> + <TerminalBorder header="GitHub"> + <Link href="https://github.com/Kyren223"> + github.com/Kyren223 + </Link> </TerminalBorder> <TerminalBorder header="Email"> <span>Kyren223@proton.me</span> </TerminalBorder> <TerminalBorder header="Timezone"> - <span>UTC+2</span> </TerminalBorder> <div class="w-[334%]"> <TerminalBorder header="SSH Key"> + <div class="flex justify-between w-full"> + <span class="text-left">UTC+2</span> + <span id="time" class="text-right">Loading...</span> + </div> + </TerminalBorder> + <div class="w-[334%]"> + <TerminalBorder header="SSH Key"> <div class="w-[100%] flex items-center space-x-2 group"> <span id="sshKey" @@ -103,6 +111,19 @@ watching Anime or solving Rubik's cubes fast.`.trimStart(); </Terminal> <script> + const utcOffset = 2; + const time = document.getElementById("time")!; + setInterval(() => { + console.log("Hit"); + const now = new Date(); + const myTime = new Date(now.getTime() + utcOffset * 3600 * 1000); + const hours = String(myTime.getUTCHours()).padStart(2, "0"); + const minutes = String(myTime.getUTCMinutes()).padStart(2, "0"); + const seconds = String(myTime.getUTCSeconds()).padStart(2, "0"); + const formattedTime = `${hours}:${minutes}:${seconds}`; + time.innerHTML = formattedTime; + }, 1000); + const sshKey = document.getElementById("sshKey")?.innerHTML; function copySshKeyToClipboard() { navigator.clipboard diff --git a/src/pages/skills.astro b/src/pages/skills.astro index a555f5c..170cd57 100644 --- a/src/pages/skills.astro +++ b/src/pages/skills.astro @@ -1,15 +1,9 @@ --- import Terminal from "../layouts/Terminal.astro"; import RadarChart from "../components/RadarChart.astro"; +import TerminalBorder from "../components/TerminalBorder.astro"; -const data1 = [ - { name: "Backend", weight: 40 }, - { name: "Gamedev", weight: 70 }, - { name: "Frontend", weight: 5 }, - { name: "Low-Level", weight: 63 }, - { name: "Tooling", weight: 100 }, -]; - +const max = 100; const data = [ { name: "Gamedev", weight: 70 }, { name: "Backend", weight: 40 }, @@ -18,15 +12,45 @@ const data = [ { name: "Frontend", weight: 15 }, ]; - -const max = data.reduce( - (max, current) => (current.weight > max ? current.weight : max), - 0, -); +const langs = ["Java", "C/C++", "Golang", "Kotlin", "Rust", "Lua"]; +const tools = [ + "NeoVim", + "Linux", + "Git & GitHub", + "SQL and NoSQL Databases", +]; +const thing = "▓▓▓▓▓▓▓▓▓▓░░░░░░░░░░"; +const fight = [ + "FP ▓▓▓▓▓▓▓▓▓▓░░░░░░░░░░ OOP", + "Composition ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░ Inheritance", +]; --- <Terminal path="skills"> - <div class="w-[40%]"> - <RadarChart max={100} data={data} /> + <div class="flex"> + <div class="w-[60%] flex-column items-center pt-4"> + <TerminalBorder header="Languages"> + <div class="grid md:grid-cols-3 items-center gap-x-8"> + {langs.map((lang) => <p>{lang}</p>)} + </div> + </TerminalBorder> + <TerminalBorder header="Tools"> + <div class="grid md:grid-cols-1 items-center gap-x-8"> + {tools.map((tool) => <p>{tool}</p>)} + </div> + </TerminalBorder> + <TerminalBorder> + <span + >{ + fight.map((line) => ( + <p class="whitespace-pre-wrap">{line}</p> + )) + }</span + > + </TerminalBorder> + </div> + <div class="w-[40%]"> + <RadarChart max={max} data={data} /> + </div> </div> </Terminal> |