diff options
| -rw-r--r-- | package.json | 5 | ||||
| -rw-r--r-- | pnpm-lock.yaml | 45 | ||||
| -rw-r--r-- | src/components/Nav.astro | 76 | ||||
| -rw-r--r-- | src/layouts/Layout.astro | 161 | ||||
| -rw-r--r-- | src/pages/index.astro | 231 |
5 files changed, 313 insertions, 205 deletions
diff --git a/package.json b/package.json index a1a07ce..bc69cc1 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,9 @@ "tailwindcss": "^3.4.14" }, "devDependencies": { - "@tailwindcss/typography": "^0.5.15" + "@tailwindcss/typography": "^0.5.15", + "prettier": "^3.3.3", + "prettier-plugin-astro": "^0.14.1", + "typescript": "^5.6.3" } }
\ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 00bdd39..5807cfd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -27,6 +27,15 @@ importers: '@tailwindcss/typography': specifier: ^0.5.15 version: 0.5.15(tailwindcss@3.4.14) + prettier: + specifier: ^3.3.3 + version: 3.3.3 + prettier-plugin-astro: + specifier: ^0.14.1 + version: 0.14.1 + typescript: + specifier: ^5.6.3 + version: 5.6.3 packages: @@ -1722,6 +1731,15 @@ packages: resolution: {integrity: sha512-gYBeFTZLu055D8Vv3cSPox/0iTPtkzxpLroSYYA7WXgRi31WCJ51Uyl8ZiPeUUjyvs2MBzK+S8v9JVUgHU/Sqw==} engines: {node: '>=18.12'} + prettier-plugin-astro@0.14.1: + resolution: {integrity: sha512-RiBETaaP9veVstE4vUwSIcdATj6dKmXljouXc/DDNwBSPTp8FRkLGDSGFClKsAFeeg+13SB0Z1JZvbD76bigJw==} + engines: {node: ^14.15.0 || >=16.0.0} + + prettier@3.3.3: + resolution: {integrity: sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==} + engines: {node: '>=14'} + hasBin: true + prismjs@1.29.0: resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==} engines: {node: '>=6'} @@ -1836,6 +1854,12 @@ packages: run-parallel@1.2.0: resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==} + s.color@0.0.15: + resolution: {integrity: sha512-AUNrbEUHeKY8XsYr/DYpl+qk5+aM+DChopnWOPEzn8YKzOhv4l2zH6LzZms3tOZP3wwdOyc0RmTciyi46HLIuA==} + + sass-formatter@0.7.9: + resolution: {integrity: sha512-CWZ8XiSim+fJVG0cFLStwDvft1VI7uvXdCNJYXhDvowiv+DsbD1nXLiQ4zrE5UBvj5DWZJ93cwN0NX5PMsr1Pw==} + sax@1.4.1: resolution: {integrity: sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==} @@ -1945,6 +1969,9 @@ packages: engines: {node: '>=16 || 14 >=14.17'} hasBin: true + suf-log@2.5.3: + resolution: {integrity: sha512-KvC8OPjzdNOe+xQ4XWJV2whQA0aM1kGVczMQ8+dStAO6KfEB140JEVQ9dE76ONZ0/Ylf67ni4tILPJB41U0eow==} + supports-preserve-symlinks-flag@1.0.0: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} @@ -4315,6 +4342,14 @@ snapshots: find-yarn-workspace-root2: 1.2.16 which-pm: 3.0.0 + prettier-plugin-astro@0.14.1: + dependencies: + '@astrojs/compiler': 2.10.3 + prettier: 3.3.3 + sass-formatter: 0.7.9 + + prettier@3.3.3: {} + prismjs@1.29.0: {} prompts@2.4.2: @@ -4533,6 +4568,12 @@ snapshots: dependencies: queue-microtask: 1.2.3 + s.color@0.0.15: {} + + sass-formatter@0.7.9: + dependencies: + suf-log: 2.5.3 + sax@1.4.1: {} section-matter@1.0.0: @@ -4667,6 +4708,10 @@ snapshots: pirates: 4.0.6 ts-interface-checker: 0.1.13 + suf-log@2.5.3: + dependencies: + s.color: 0.0.15 + supports-preserve-symlinks-flag@1.0.0: {} tailwindcss@3.4.14: diff --git a/src/components/Nav.astro b/src/components/Nav.astro index 3c41d0d..60f2f14 100644 --- a/src/components/Nav.astro +++ b/src/components/Nav.astro @@ -5,46 +5,50 @@ interface Props { const { path } = Astro.props; -const directories = ["about", "works", "links"] - +const directories = ["about", "works", "links"]; --- + <nav> - <span id="nav-path">/home/kyren/{path}</span> - <span id="nav-links"> - <a href="/">home</a> - {directories.map((dir) => ( - <a href={`/${dir}`}>{dir}</a> - <span></span> /* For whitespace */ - ))} - </span> + <span id="nav-path">/home/kyren/{path}</span> + <span id="nav-links"> + <a href="/">home</a> + { + directories.map((dir) => ( + <> + <a href={`/${dir}`}>{dir}</a> + </> + )) + } + </span> </nav> <style> + /* main { */ + /* padding-top: 1.25rem; */ + /* } */ -nav { - font-weight: 300; - display: flex; - flex-wrap: wrap; - justify-content: space-between; - border: 0; - border-bottom: 1px; - border-style: solid; - margin-bottom: 0.75rem; - padding-bottom: 0.75rem; -} -#nav-links a { - margin-right: 0.15rem; - margin-bottom: 0px; - margin-left: 0.15rem; - color: var(--primary); - font-size: 1rem; - -} -#nav-links a:hover { - color: var(--accent); -} -#nav-path { - margin-right: 2rem; -} - + nav { + font-weight: 300; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + border: 0; + border-bottom: 1px; + border-style: solid; + margin-bottom: 0.75rem; + padding-bottom: 0.75rem; + } + #nav-links a { + margin-right: 0.15rem; + margin-bottom: 0px; + margin-left: 0.15rem; + color: var(--primary); + font-size: 1rem; + } + #nav-links a:hover { + color: var(--accent); + } + #nav-path { + margin-right: 2rem; + } </style> diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index bed38f4..9c1584c 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,6 +1,6 @@ --- interface Props { - title: string; + title: string; } const { title } = Astro.props; @@ -8,97 +8,96 @@ const { title } = Astro.props; <!doctype html> <html lang="en"> - <head> - <meta charset="UTF-8" /> - <meta name="description" content="Astro description" /> - <meta name="viewport" content="width=device-width" /> - <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> - <meta name="generator" content={Astro.generator} /> - <title>{title}</title> - </head> - <body> - <slot /> - </body> + <head> + <meta charset="UTF-8" /> + <meta name="description" content="Astro description" /> + <meta name="viewport" content="width=device-width" /> + <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> + <meta name="generator" content={Astro.generator} /> + <title>{title}</title> + </head> + <body> + <slot /> + </body> </html> <style is:global> -@import url("../styles/JetBrainsMono.css"); + @import url("../styles/JetBrainsMono.css"); -:root { - --primary: #ffbf00; - --secondary: #9b7eca; - --accent: #7ed4fb; - --extra: #8fcc75; - --text: #ffffff; - --alt: #999999; - --background: #000000; -} + :root { + --primary: #ffbf00; + --secondary: #9b7eca; + --accent: #7ed4fb; + --extra: #8fcc75; + --text: #ffffff; + --alt: #999999; + --background: #000000; + } -* { - margin: 0; - padding: 0; -} + * { + margin: 0; + padding: 0; + } -html { - background-color: var(--background); - color: var(--text); - font-family: "Jetbrains Mono", monospace; - user-select: none; -} + html { + background-color: var(--background); + color: var(--text); + font-family: "Jetbrains Mono", monospace; + user-select: none; + } -body { - overflow-y: scroll; - zoom: 1; -} -@media screen and (max-width: 768px) { body { - zoom: 0.8; + overflow-y: scroll; + zoom: 1; } -} -@media screen and (max-width: 480px) { - body { - zoom: 0.7; + @media screen and (max-width: 768px) { + body { + zoom: 0.8; + } + } + @media screen and (max-width: 480px) { + body { + zoom: 0.7; + } } -} - -main { - display: grid; - position: absolute; - top: 50%; - left: 50%; - grid-template-columns: minmax(200px, 1fr); - transform: translate(-50%, -50%); - border: 1px; - border-style: solid; - background: var(--background); - padding: 1.75rem; - width: 55rem; - max-width: 75%; - /* ! font-weight: 300; */ -} -h1, -h2, -h3 { - font-size: 1rem; - font-weight: bold; -} + main { + display: grid; + position: absolute; + top: 50%; + left: 50%; + grid-template-columns: minmax(200px, 1fr); + transform: translate(-50%, -50%); + border: 1px; + border-style: solid; + background: var(--background); + padding: 1.75rem; + width: 55rem; + max-width: 75%; + padding-top: 1.25rem; + } -a { - font-weight: 300; -} -a:link, -a:visited, -a:active { - background-color: transparent; - text-decoration: none; - color: var(--secondary); -} -a:hover { - transition-duration: 0.2s; - transition-property: color, text-decoration; - text-decoration: underline; - color: var(--accent); -} + h1, + h2, + h3 { + font-size: 1rem; + font-weight: bold; + } + a { + font-weight: 300; + } + a:link, + a:visited, + a:active { + background-color: transparent; + text-decoration: none; + color: var(--secondary); + } + a:hover { + transition-duration: 0.2s; + transition-property: color, text-decoration; + text-decoration: underline; + color: var(--accent); + } </style> diff --git a/src/pages/index.astro b/src/pages/index.astro index 172be47..2afde87 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,9 +1,9 @@ --- -import Layout from '../layouts/Layout.astro'; -import TerminalBorder from '../components/TerminalBorder.astro' -import Nav from '../components/Nav.astro' +import Layout from "../layouts/Layout.astro"; +import TerminalBorder from "../components/TerminalBorder.astro"; +import Nav from "../components/Nav.astro"; -const sshKey = `ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIAsrdN6e4XbkJfV/FbH3GY8ujWgxSCSbYiwzQ4rKyren` +const sshKey = `ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIAsrdN6e4XbkJfV/FbH3GY8ujWgxSCSbYiwzQ4rKyren`; const fingerprint = ` +--[ED25519 256]--+ |+o.+oE*B%* o | @@ -15,7 +15,7 @@ const fingerprint = ` |. . . | |.. | |. | -+----[SHA256]-----+`.trimStart() ++----[SHA256]-----+`.trimStart(); const aboutMe = ` Hi! I'm Kyren, a software engineer and Minecraft plugin freelancer, @@ -23,99 +23,156 @@ I love working with Rust, Golang and Java. I am also a terminal nerd and linux enthusiast who uses NVIM btw. And when I am not coding I am most likely playing video games, watching Anime or solving Rubik's cubes fast. -Test`.trimStart() +Test`.trimStart(); --- + <Layout title="Kyren's Website"> - <main> - <Nav path=""/> - <div id="content"> - <div id="left" class="column"> - <TerminalBorder header='Profile'> - <div class="flex items-center space-x-3"> - <img src="logo.svg" alt="picture" class="h-[100%] object-cover" /> - <pre id="sshKeyCopy" class="text-[75%] flex-1 ">{fingerprint}</pre> - </div> - </TerminalBorder> - <TerminalBorder header="Name"> - <span>Kyren</span> - </TerminalBorder> - <TerminalBorder header="Email"> - <span>Kyren223@proton.me</span> - </TerminalBorder> - <TerminalBorder header="Timezone"> - <span>UTC+2</span> - </TerminalBorder> - <TerminalBorder header="SSH Key"> - <div class="w-[100%] flex items-center space-x-2 hover:text-[var(--alt)]"> - <span id="sshKey" class="hover:text-[var(--alt)] cursor-pointer truncate flex-1">{sshKey}</span> - <button id="sshKeyCopy" class="flex items-center justify-center ml-auto hover:text-[var(--alt)]"> - <svg width="100%" height="100%" viewBox="0 -3 24 24" xmlns="http://www.w3.org/2000/svg" fill="none"> - <path fill="currentColor" fill-rule="evenodd" d="M4 2a2 2 0 00-2 2v9a2 2 0 002 2h2v2a2 2 0 002 2h9a2 2 0 002-2V8a2 2 0 00-2-2h-2V4a2 2 0 00-2-2H4zm9 4V4H4v9h2V8a2 2 0 012-2h5zM8 8h9v9H8V8z"/> - </svg> - </button> - </div> - </TerminalBorder> - </div> - <div id="right" class="column"> - <TerminalBorder header="About Me"> - <p>{aboutMe}</p> - </TerminalBorder> - <TerminalBorder header="Skills" margin='30px 0px'> - <a href="/about/">cd ~/imabanana80/about </a> - </TerminalBorder> - <TerminalBorder header="Projects"> - <a href="/works/">cd ~/imabanana80/works</a> - </TerminalBorder> - </div> - </div> - </main> + <main> + <Nav path="" /> + <div id="content"> + <div id="left" class="column"> + <TerminalBorder header="Profile"> + <div class="flex items-center space-x-3"> + <img + src="logo.svg" + alt="picture" + class="h-[100%] object-cover" + /> + <pre + id="sshKeyCopy" + class="text-[75%] flex-1">{fingerprint}</pre> + </div> + </TerminalBorder> + <TerminalBorder header="Name"> + <span>Kyren</span> + </TerminalBorder> + <TerminalBorder header="Email"> + <span>Kyren223@proton.me</span> + </TerminalBorder> + <TerminalBorder header="Timezone"> + <span>UTC+2</span> + </TerminalBorder> + <TerminalBorder header="SSH Key"> + <div + class="w-[100%] flex items-center space-x-2 hover:text-[var(--alt)]" + > + <span + id="sshKey" + class="hover:text-[var(--alt)] cursor-pointer truncate flex-1" + >{sshKey}</span + > + <button + id="sshKeyCopy" + class="flex items-center justify-center ml-auto hover:text-[var(--alt)]" + > + <svg + width="100%" + height="100%" + viewBox="0 -3 24 24" + xmlns="http://www.w3.org/2000/svg" + fill="none" + > + <path + fill="currentColor" + fill-rule="evenodd" + d="M4 2a2 2 0 00-2 2v9a2 2 0 002 2h2v2a2 2 0 002 2h9a2 2 0 002-2V8a2 2 0 00-2-2h-2V4a2 2 0 00-2-2H4zm9 4V4H4v9h2V8a2 2 0 012-2h5zM8 8h9v9H8V8z" + ></path> + </svg> + </button> + </div> + </TerminalBorder> + </div> + <div id="right" class="column"> + <TerminalBorder header="About Me"> + <p>{aboutMe}</p> + </TerminalBorder> + <TerminalBorder header="Skills" margin="30px 0px"> + <a href="/about/">cd ~/imabanana80/about </a> + </TerminalBorder> + <TerminalBorder header="Projects"> + <a href="/works/">cd ~/imabanana80/works</a> + </TerminalBorder> + </div> + </div> + </main> </Layout> <script> - const sshKey = document.getElementById('sshKey').innerHTML - function copySshKeyToClipboard() { - navigator.clipboard.writeText(sshKey).then(() => { - // TODO: show some feedback for copying - }).catch(_err => { - // TODO: show same feedback but with err - }); - } + const sshKey = document.getElementById("sshKey").innerHTML; + function copySshKeyToClipboard() { + navigator.clipboard + .writeText(sshKey) + .then(() => { + // TODO: show some feedback for copying + }) + .catch((_err) => { + // TODO: show same feedback but with err + }); + } - document.getElementById('sshKey').addEventListener('click', copySshKeyToClipboard); - document.getElementById('sshKeyCopy').addEventListener('click', copySshKeyToClipboard); + document + .getElementById("sshKey") + .addEventListener("click", copySshKeyToClipboard); + document + .getElementById("sshKeyCopy") + .addEventListener("click", copySshKeyToClipboard); </script> <style> -#left { - width: 30%; -} -#right { - width: 67%; -} + #content { + margin-top: 0.5rem; + display: flex; + justify-content: space-between; /* Removing this makes a cool effect of the right side being "attached" to the left */ + } -#content { - margin-top: 0.5rem; - display: flex; - justify-content: space-between; /* Removing this makes a cool effect of the right side being "attached" to the left */ -} + #left { + width: 30%; + } + #right { + width: 67%; + } -.column { - /* border-style: solid; */ - border-width: 1px; - border-color: var(--alt); -} + .column { + /* border-style: solid; */ + border-width: 1px; + border-color: var(--alt); + } -button { - background-color: var(--background); - color: var(--text); - border: 0; - font-size: 1rem; - cursor: pointer; - width: 20px; - height: 20px; - padding: 0; - line-height: 30px; - font-size: 16px; -} + button { + background-color: var(--background); + color: var(--text); + border: 0; + font-size: 1rem; + cursor: pointer; + width: 20px; + height: 20px; + padding: 0; + line-height: 30px; + font-size: 16px; + } + nav { + font-weight: 300; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + border: 0; + border-bottom: 1px; + border-style: solid; + margin-bottom: 0.75rem; + padding-bottom: 0.75rem; + } + #nav-links a { + margin-right: 0.15rem; + margin-bottom: 0px; + margin-left: 0.15rem; + color: var(--primary); + font-size: 1rem; + } + #nav-links a:hover { + color: var(--accent); + } + #nav-path { + margin-right: 2rem; + } </style> |