website

git clone https://pyrossh.dev/repos/website.git

木 Personal website of pyrossh. Built with astrojs, shiki, vite.

1c7ecfb5 — pyrossh

improve repos and add dark theme

Files changed (13) hide show

bun.lock +7 -0
package.json +1 -0
src/assets/icons/moon.svg +4 -0
src/assets/icons/sun.svg +1 -0
src/assets/logos/ghostty.png +0 -0
src/components/Header.astro +45 -26
src/components/Slide.astro +0 -37
src/consts.ts +58 -3
src/layouts/Base.astro +3 -2
src/layouts/Base.css +28 -10
src/pages/index.astro +171 -193
src/pages/posts/[...slug].astro +3 -3
src/pages/posts/index.astro +15 -8

bun.lock CHANGED Viewed

@@ -10,6 +10,7 @@
         "@effective/css-reset": "^3.2.0",
         "@tailwindcss/vite": "^4.1.4",
         "astro": "^5.7.5",
+        "simple-git": "^3.27.0",
         "tailwindcss": "^4.1.4",
       },
       "devDependencies": {
@@ -139,6 +140,10 @@
     "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.0", "", {}, "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="],
+    "@kwsites/file-exists": ["@kwsites/file-exists@1.1.1", "", { "dependencies": { "debug": "^4.1.1" } }, "sha512-m9/5YGR18lIwxSFDwfE3oA7bWuq9kdau6ugN4H2rJeyhFQZcG9AgSHkQtSD15a8WvTgfz9aikZMrKPHvbpqFiw=="],
+    "@kwsites/promise-deferred": ["@kwsites/promise-deferred@1.1.1", "", {}, "sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw=="],
     "@mdx-js/mdx": ["@mdx-js/mdx@3.1.0", "", { "dependencies": { "@types/estree": "^1.0.0", "@types/estree-jsx": "^1.0.0", "@types/hast": "^3.0.0", "@types/mdx": "^2.0.0", "collapse-white-space": "^2.0.0", "devlop": "^1.0.0", "estree-util-is-identifier-name": "^3.0.0", "estree-util-scope": "^1.0.0", "estree-walker": "^3.0.0", "hast-util-to-jsx-runtime": "^2.0.0", "markdown-extensions": "^2.0.0", "recma-build-jsx": "^1.0.0", "recma-jsx": "^1.0.0", "recma-stringify": "^1.0.0", "rehype-recma": "^1.0.0", "remark-mdx": "^3.0.0", "remark-parse": "^11.0.0", "remark-rehype": "^11.0.0", "source-map": "^0.7.0", "unified": "^11.0.0", "unist-util-position-from-estree": "^2.0.0", "unist-util-stringify-position": "^4.0.0", "unist-util-visit": "^5.0.0", "vfile": "^6.0.0" } }, "sha512-/QxEhPAvGwbQmy1Px8F899L5Uc2KZ6JtXwlCgJmjSTBedwOZkByYcBG4GceIGPXRDsmfxhHazuS+hlOShRLeDw=="],
     "@oslojs/encoding": ["@oslojs/encoding@1.1.0", "", {}, "sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ=="],
@@ -745,6 +750,8 @@
     "shiki": ["shiki@3.3.0", "", { "dependencies": { "@shikijs/core": "3.3.0", "@shikijs/engine-javascript": "3.3.0", "@shikijs/engine-oniguruma": "3.3.0", "@shikijs/langs": "3.3.0", "@shikijs/themes": "3.3.0", "@shikijs/types": "3.3.0", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-j0Z1tG5vlOFGW8JVj0Cpuatzvshes7VJy5ncDmmMaYcmnGW0Js1N81TOW98ivTFNZfKRn9uwEg/aIm638o368g=="],
+    "simple-git": ["simple-git@3.27.0", "", { "dependencies": { "@kwsites/file-exists": "^1.1.1", "@kwsites/promise-deferred": "^1.1.1", "debug": "^4.3.5" } }, "sha512-ivHoFS9Yi9GY49ogc6/YAi3Fl9ROnF4VyubNylgCkA+RVqLaKWnDSzXOVzya8csELIaWaYNutsEuAhZrtOjozA=="],
     "simple-swizzle": ["simple-swizzle@0.2.2", "", { "dependencies": { "is-arrayish": "^0.3.1" } }, "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg=="],
     "sisteransi": ["sisteransi@1.0.5", "", {}, "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="],

package.json CHANGED Viewed

@@ -14,6 +14,7 @@
     "@effective/css-reset": "^3.2.0",
     "@tailwindcss/vite": "^4.1.4",
     "astro": "^5.7.5",
+    "simple-git": "^3.27.0",
     "tailwindcss": "^4.1.4"
   },
   "devDependencies": {

src/assets/icons/moon.svg ADDED Viewed

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="24px" height="24px" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 22C17.5228 22 22 17.5228 22 12C22 11.5373 21.3065 11.4608 21.0672 11.8568C19.9289 13.7406 17.8615 15 15.5 15C11.9101 15 9 12.0899 9 8.5C9 6.13845 10.2594 4.07105 12.1432 2.93276C12.5392 2.69347 12.4627 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" />
+</svg>

src/assets/icons/sun.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12Z" fill="#f1fa8c"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M12 1.25C12.4142 1.25 12.75 1.58579 12.75 2V4C12.75 4.41421 12.4142 4.75 12 4.75C11.5858 4.75 11.25 4.41421 11.25 4V2C11.25 1.58579 11.5858 1.25 12 1.25ZM3.66865 3.71609C3.94815 3.41039 4.42255 3.38915 4.72825 3.66865L6.95026 5.70024C7.25596 5.97974 7.2772 6.45413 6.9977 6.75983C6.7182 7.06553 6.2438 7.08677 5.9381 6.80727L3.71609 4.77569C3.41039 4.49619 3.38915 4.02179 3.66865 3.71609ZM20.3314 3.71609C20.6109 4.02179 20.5896 4.49619 20.2839 4.77569L18.0619 6.80727C17.7562 7.08677 17.2818 7.06553 17.0023 6.75983C16.7228 6.45413 16.744 5.97974 17.0497 5.70024L19.2718 3.66865C19.5775 3.38915 20.0518 3.41039 20.3314 3.71609ZM1.25 12C1.25 11.5858 1.58579 11.25 2 11.25H4C4.41421 11.25 4.75 11.5858 4.75 12C4.75 12.4142 4.41421 12.75 4 12.75H2C1.58579 12.75 1.25 12.4142 1.25 12ZM19.25 12C19.25 11.5858 19.5858 11.25 20 11.25H22C22.4142 11.25 22.75 11.5858 22.75 12C22.75 12.4142 22.4142 12.75 22 12.75H20C19.5858 12.75 19.25 12.4142 19.25 12ZM17.0255 17.0252C17.3184 16.7323 17.7933 16.7323 18.0862 17.0252L20.3082 19.2475C20.6011 19.5404 20.601 20.0153 20.3081 20.3082C20.0152 20.6011 19.5403 20.601 19.2475 20.3081L17.0255 18.0858C16.7326 17.7929 16.7326 17.3181 17.0255 17.0252ZM6.97467 17.0253C7.26756 17.3182 7.26756 17.7931 6.97467 18.086L4.75244 20.3082C4.45955 20.6011 3.98468 20.6011 3.69178 20.3082C3.39889 20.0153 3.39889 19.5404 3.69178 19.2476L5.91401 17.0253C6.2069 16.7324 6.68177 16.7324 6.97467 17.0253ZM12 19.25C12.4142 19.25 12.75 19.5858 12.75 20V22C12.75 22.4142 12.4142 22.75 12 22.75C11.5858 22.75 11.25 22.4142 11.25 22V20C11.25 19.5858 11.5858 19.25 12 19.25Z" fill="#f1fa8c"></path> </g></svg>

src/assets/logos/ghostty.png ADDED Viewed

Binary file

src/components/Header.astro CHANGED Viewed

@@ -1,6 +1,8 @@
 ---
 import HeaderLink from "./HeaderLink.astro";
 import Wrapper from "./Wrapper.astro";
+import Moon from "@/assets/icons/moon.svg";
+import Sun from "@/assets/icons/sun.svg";
 ---
 <header>
@@ -8,29 +10,37 @@ import Wrapper from "./Wrapper.astro";
     <nav>
       <HeaderLink class="logo" href="/"> 木 pyrossh </HeaderLink>
       <div class="links">
+        <button id="theme-change">
+          <Moon id="dark" style="display: none;" width={"1em"} height={"1em"} />
+          <Sun id="light" width={"1em"} height={"1em"} />
+        </button>
+        <script>
+          const button = document.getElementById("theme-change")!;
+          document.getElementById("dark")!.style.display = "none";
+          button.addEventListener("click", () => {
+            const currentTheme =
+              document.documentElement.getAttribute("theme") || "dark";
+            const newTheme = currentTheme === "dark" ? "light" : "dark";
+            document.documentElement.setAttribute("theme", newTheme);
+            document.getElementById(currentTheme)!.style.display = "block";
+            document.getElementById(newTheme)!.style.display = "none";
+          });
+        </script>
+        <div>|</div>
         <HeaderLink href="/cv">cv</HeaderLink>
         <div>|</div>
         <HeaderLink href="/posts">posts</HeaderLink>
-        <div>|</div>
-        <HeaderLink href="https://git.sr.ht/~pyrossh/">code</HeaderLink>
       </div>
     </nav>
   </Wrapper>
 </header>
 <style>
   header {
-    background-color: var(--color-black);
+    background: #131618;
-    border-top: 5px solid #444;
-    border-bottom: 1px solid #444;
     min-height: 56px;
     position: relative;
   }
-  nav {
-    /* padding-left: 0px; */
-    /* padding-right: 0px; */
-  }
   .logo {
     display: flex;
     font-size: 22px;
@@ -57,24 +67,33 @@ import Wrapper from "./Wrapper.astro";
     font-size: 22px;
     line-height: 56px;
     color: white;
-  }
-  .links a {
+    button {
-    display: inline-block;
-    text-decoration: none;
-    font-size: 22px;
-    line-height: 56px;
-    color: white;
-    font-weight: 400;
-    padding-left: 12px;
-    padding-right: 12px;
+      padding-right: 12px;
+      cursor: pointer;
+    }
+    a {
+      display: inline-block;
+      text-decoration: none;
+      font-size: 22px;
+      line-height: 56px;
+      color: white;
+      font-weight: 400;
+      padding-left: 12px;
+      padding-right: 12px;
+      &:last-child {
+        padding-right: 0px;
+      }
-    &.active,
+      &.active,
-    &:hover {
+      &:hover {
-      color: var(--color-gray-200);
+        color: var(--color-gray-200);
-      text-decoration: underline;
+        text-decoration: underline;
-      text-decoration-color: var(--color-accent);
+        text-decoration-color: var(--color-accent);
-      text-underline-offset: 8px;
+        text-underline-offset: 8px;
+      }
     }
   }
 </style>

src/components/Slide.astro DELETED Viewed

@@ -1,37 +0,0 @@
----
-const { title, link, isExternal = true } = Astro.props;
----
-<div class="card bg-[#f0ede2] rounded-xs">
-  <div class="card-body p-4">
-    <div class="card-title">
-      <slot name="icon" />
-      <a
-        class="link"
-        href={link}
-        target={isExternal ? "_blank" : "_self"}
-        rel={isExternal ? "noopener noreferrer" : ""}
-      >
-        {title}
-      </a>
-    </div>
-    <slot />
-  </div>
-</div>
-<style>
-  .card {
-    display: flex;
-  }
-  .card-title {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-  .link {
-    font-weight: 500;
-    text-decoration: underline;
-  }
-</style>

src/consts.ts CHANGED Viewed

@@ -1,5 +1,60 @@
-// Place any global data in this file.
-// You can import this data from anywhere in your site by using the `import` keyword.
 export const SITE_TITLE = 'pyrossh';
 export const SITE_DESCRIPTION = 'Welcome to my website!';
+export const REPOS = [
+  {
+    title: "rust-embed",
+    description: "rust macro which loads files into the rust binary at compile time during release and loads the file from the fs during dev."
+  },
+  {
+    title: "website",
+    description: "木 Personal website of pyrossh. Built with astrojs, shiki, vite."
+  },
+  {
+    title: "plum",
+    description: "A statically typed, imperative programming language inspired by rust, python"
+  },
+  {
+    title: "edge-city",
+    description: "edge-city is a next level meta-framework for react that runs only on edge runtimes"
+  },
+  {
+    title: "gromer",
+    description: "gromer is a framework and cli to build multipage web apps in golang using htmx and alpinejs."
+  },
+  {
+    title: "atoms-element",
+    description: "A simple web component library for defining your custom elements. It works on both client and server."
+  },
+  {
+    title: "atoms-state",
+    description: "Simple State management for react"
+  },
+  {
+    title: "remote-monitor",
+    description: "Remote Monitoring and Control using GSM-SMS"
+  },
+  {
+    title: "only-bible-app",
+    description: "The only bible app you will ever need. No ads. No in-app purchases. No distractions."
+  },
+  {
+    title: "gdx-studio",
+    description: "An IDE for creating Games using libgdx and Java supported on all platforms Android, iOS, Desktop"
+  },
+  {
+    title: "rp2350",
+    description: "code to drive rp2350"
+  },
+  {
+    title: "config",
+    description: "Common configuration"
+  },
+  {
+    title: "sabel-ide",
+    description: "sabel-ide"
+  },
+  {
+    title: "tide-jsx",
+    description: "Tide + JSX"
+  },
+]

src/layouts/Base.astro CHANGED Viewed

@@ -9,10 +9,11 @@ import "./Base.css";
 interface Props {
   title: string;
   description: string;
+  class?: string;
   image?: string;
 }
-const { title, description } = Astro.props;
+const { title, description, class: classname } = Astro.props;
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 const image = "/favicon.png";
 ---
@@ -57,7 +58,7 @@ const image = "/favicon.png";
   <body>
     <Header />
     <Wrapper>
-      <main>
+      <main class:list={classname}>
         <slot />
       </main>
     </Wrapper>

src/layouts/Base.css CHANGED Viewed

@@ -2,15 +2,28 @@
 :root {
   --color-accent: #f1fa8c;
-  --color-accent-dark: #000d8a;
   --color-black: #000000;
   --color-white: #ffffff;
-  --gray: 96, 115, 159;
+  --color-body-bg: #212529;
-  --gray-light: 229, 233, 240;
+  --color-text: #f8f9fa;
-  --gray-dark: 34, 41, 57;
+  --color-card-link: #3395ff;
+  --color-box-bg: #131618;
+  --color-link: #3395ff;
+  --color-post-link: #3395ff;
-  --gray-gradient: rgba(var(--gray-light), 50%), #fff;
+  --color-highlight-bg: #703be1;
-  --box-shadow: 0 2px 6px rgba(var(--gray), 25%),
+  --color-code-fg: rgb(244, 176, 176);
+}
+[theme='light'] {
+  --color-accent: #f1fa8c;
+  --color-body-bg: #ffffff;
+  --color-text: #222;
+  --color-card-link: #000000;
+  --color-box-bg: #f1f5f9;
+  --color-link: #1c398e;
+  --color-post-link: #000000;
-    0 8px 24px rgba(var(--gray), 33%), 0 16px 32px rgba(var(--gray), 33%);
+  --color-highlight-bg: #9befee;
+  --color-code-fg: #d14;
 }
 html {
@@ -31,14 +44,19 @@ body {
   display: flex;
   flex-direction: column;
   flex: 1;
-  background-color: var(--color-white);
+  background-color: var(--color-body-bg);
+  color: var(--color-text);
   font-family: var(--font-roboto);
   text-rendering: optimizeLegibility;
   font-variant-ligatures: common-ligatures;
   font-kerning: normal;
   font-size: 14pt;
   line-height: 1.6;
+  /* min-height: 100vh; */
+  /* min-width: 992px !important; */
+  /* font-family: sans-serif; */
-  color: #222;
+  /* font-size: 1rem; */
+  /* text-align: initial; */
   @media (max-width: 720px) {
     font-size: 13pt;
@@ -46,7 +64,7 @@ body {
 }
 main {
-  background-color: var(--color-white);
+  margin-bottom: 1rem;
   padding-top: 1em;
   padding-bottom: 1em;
 }

src/pages/index.astro CHANGED Viewed

@@ -1,17 +1,14 @@
 ---
 import { Image } from "astro:assets";
 import Layout from "@/layouts/Base.astro";
-import Slide from "@/components/Slide.astro";
-import onlyBiblePng from "@/assets/images/app_icon.png";
-import rustPng from "@/assets/logos/rust.png";
-import pyrosshPng from "@/assets/logos/pyrossh.png";
 import stats from "@/assets/logos/stats.png";
 import code from "@/assets/logos/code.png";
 import helix from "@/assets/logos/helix.png";
 import nu from "@/assets/logos/nu.png";
-import iterm from "@/assets/logos/iterm.png";
 import zellij from "@/assets/logos/zellij.png";
 import inkscape from "@/assets/logos/inkscape.png";
+import ghostty from "@/assets/logos/ghostty.png";
+import { REPOS } from "@/consts";
 ---
 <Layout
@@ -39,188 +36,151 @@ import inkscape from "@/assets/logos/inkscape.png";
         I enjoy working on open-source projects, and during the last decade,
         I've created a number of projects that are widely used.
       </p>
-      <div>
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-8">
-        <section class="projects">
+        <section class="interests">
-          <h2>Projects</h2>
+          <h2>Interests</h2>
+          <ul>
+            <li>HTML</li>
+            <li>CSS</li>
+            <li>Javascript</li>
+            <li>SQL</li>
+            <li>Bun</li>
+            <li>Zig</li>
+            <li>React</li>
+            <li>Expo</li>
+            <li>MicroZig</li>
+            <li>K8s</li>
+            <li>S3</li>
+            <li>Iceberg</li>
+          </ul>
+        </section>
-          <div class="slides">
+        <section class="contact">
+          <h2>Contact</h2>
-            <Slide
+          <ul>
+            <li>
-              title="rust-embed"
+              <strong>Email:</strong>
+              <span>pyros2097@gmail.com</span>
+            </li>
+            <li>
+              <strong>Sourcehut:</strong>
-              link="https://git.sr.ht/~pyrossh/rust-embed"
+              <a href="https://git.sr.ht/~pyrossh/">
+                https://git.sr.ht/~pyrossh/
+              </a>
+            </li>
+            <li>
+              <strong>Crates:</strong>
+              <a href="https://crates.io/users/pyrossh">
+                https://crates.io/users/pyrossh
+              </a>
+            </li>
+            <li>
+              <strong>LinkedIn:</strong>
+              <a href="https://www.linkedin.com/in/peter-john-in">
+                https://www.linkedin.com/in/pyrossh
+              </a>
+            </li>
+          </ul>
+        </section>
+      </div>
+      <section class="tools">
+        <h2>Tools</h2>
+        <ul>
+          <li>
+            <a
+              href="https://github.com/exelban/stats"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <div>Stats</div>
+              <Image src={stats} alt="Stats" />
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://github.com/microsoft/vscode"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <div>VS Code</div>
+              <Image src={code} alt="VS Code" />
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://github.com/helix-editor/helix"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <div>Helix</div>
+              <Image src={helix} alt="Helix" />
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://github.com/nushell/nushell"
+              target="_blank"
+              rel="noopener noreferrer"
             >
+              <div>Nushell</div>
-              <Image slot="icon" src={rustPng} alt="rust embed" />
+              <Image class="p-0.5 rounded-md" src={nu} alt="nu-shell" />
-              <p>
-                A rust proc-macro which loads files into the rust binary at
-                compile time during release and loads the file from the fs
-                during dev
-              </p>
+            </a>
-            </Slide>
+          </li>
-            <Slide
+          <li>
-              title="pyrossh.dev"
+            <a
-              link="https://git.sr.ht/~pyrossh/website"
+              href="https://github.com/ghostty-org/ghostty"
+              target="_blank"
+              rel="noopener noreferrer"
             >
+              <div>Ghostty</div>
-              <Image slot="icon" src={pyrosshPng} alt="pyrossh website" />
+              <Image src={ghostty} alt="ghostty" />
+            </a>
+          </li>
-              <p>
+          <li>
-                木 Personal website of pyrossh. Built with
-                <span class="*:underline">
-                  <a
+            <a
-                    href="https://astro.build/"
+              href="https://zellij.dev/"
-                    target="_blank"
+              target="_blank"
-                    rel="noopener noreferrer">astrojs</a
-                  >,
-                  <a
-                    href="https://shiki.matsu.io/"
-                    target="_blank"
-                    rel="noopener noreferrer">shiki</a
-                  >,
-                  <a
-                    href="https://vitejs.dev/"
-                    target="_blank"
-                    rel="noopener noreferrer">vite</a
+              rel="noopener noreferrer"
-                  >.
-                </span>
-              </p>
-            </Slide>
-            <Slide title="pacman" link="https://git.sr.ht/~pyrossh/plum">
-              <span slot="icon" class="text-4xl mr-2">👾</span>
-              <p>
-                A statically typed, imperative programming language with ADT's
-                inspired by rust, haskell.
-              </p>
-            </Slide>
-            <Slide
-              title="Only Bible App"
-              link="/only-bible-app"
-              isExternal={false}
             >
+              <div>Zellij</div>
-              <Image slot="icon" src={onlyBiblePng} alt="Only Bible App" />
+              <Image class="w-7 p-0.5" src={zellij} alt="zellij" />
-              <p>
-                The only bible app you will ever need. No ads, No in-app
-                purchases, No distractions. Works completely offline.
-              </p>
+            </a>
-            </Slide>
-          </div>
+          </li>
-          <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-8">
-            <section class="interests">
-              <h2>Interests</h2>
-              <ul>
+          <li>
+            <a
-                <li>HTML</li>
+              href="https://inkscape.org/"
-                <li>CSS</li>
+              target="_blank"
+              rel="noopener noreferrer"
+            >
-                <li>Javascript</li>
+              <div>Inkscape</div>
+              <Image src={inkscape} alt="inkscape" />
-                <li>SQL</li>
+            </a>
-                <li>Bun</li>
-                <li>Zig</li>
-                <li>React</li>
-                <li>Expo</li>
-                <li>MicroZig</li>
-                <li>K8s</li>
-                <li>S3</li>
+          </li>
-                <li>Iceberg</li>
-              </ul>
+        </ul>
-            </section>
+      </section>
-            <section class="contact">
+      <section class="projects">
-              <h2>Contact</h2>
+        <h2>Repos</h2>
+        <div class="repos">
+          {
+            REPOS.map((repo) => (
+              <div class="event">
-              <ul>
+                <h4>
-                <li>
-                  <strong>Email:</strong>
-                  <span>pyros2097@gmail.com</span>
-                </li>
-                <li>
-                  <strong>Sourcehut:</strong>
-                  <a href="https://git.sr.ht/~pyrossh/">
+                  <a href={`https://git.sr.ht/~pyrossh/${repo.title}`}>
-                    https://git.sr.ht/~pyrossh/
-                  </a>
-                </li>
-                <li>
+                    {" "}
-                  <strong>LinkedIn:</strong>
+                    {repo.title}{" "}
-                  <a href="https://www.linkedin.com/in/peter-john-in">
-                    https://www.linkedin.com/in/pyrossh
                   </a>
-                </li>
+                </h4>
-              </ul>
-            </section>
-          </div>
-          <section class="tools">
-            <h2>Tools</h2>
-            <ul>
-              <li>
-                <a
-                  href="https://github.com/exelban/stats"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <div>Stats</div>
-                  <Image src={stats} alt="Stats" />
-                </a>
-              </li>
-              <li>
-                <a
-                  href="https://github.com/microsoft/vscode"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <div>VS Code</div>
-                  <Image src={code} alt="VS Code" />
-                </a>
-              </li>
-              <li>
-                <a
-                  href="https://github.com/helix-editor/helix"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <div>Helix</div>
-                  <Image src={helix} alt="Helix" />
-                </a>
-              </li>
-              <li>
-                <a
-                  href="https://github.com/nushell/nushell"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <div>Nushell</div>
-                  <Image class="p-0.5 rounded-md" src={nu} alt="nu-shell" />
-                </a>
-              </li>
-              <li>
-                <a
-                  href="https://github.com/gnachman/iTerm2"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <div>iTerm2</div>
-                  <Image src={iterm} alt="iterm2" />
-                </a>
-              </li>
-              <li>
-                <a
-                  href="https://zellij.dev/"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <div>Zellij</div>
-                  <Image class="w-7 p-0.5" src={zellij} alt="zellij" />
-                </a>
-              </li>
-              <li>
-                <a
-                  href="https://inkscape.org/"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <div>Inkscape</div>
+                <p>{repo.description}</p>
-                  <Image src={inkscape} alt="inkscape" />
-                </a>
-              </li>
+              </div>
+            ))
+          }
-            </ul>
+        </div>
-          </section>
+      </section>
-        </section>
-      </div>
     </div>
   </div>
 </Layout>
 <style>
   h2 {
     font-size: 1.5rem;
@@ -234,20 +194,16 @@ import inkscape from "@/assets/logos/inkscape.png";
     margin-bottom: 1rem;
   }
-  .p-0\.5 {
-    /* padding: 0.125rem; */
-  }
   .rounded-md {
     border-radius: 0.375rem;
   }
   .projects {
-    .slides {
+    .repos {
       display: grid;
       grid-template-columns: auto auto;
-      gap: 2rem;
+      gap: 1rem;
-      margin-top: 1rem;
+      margin-top: 0.5rem;
       @media (max-width: 720px) {
         gap: 1rem;
@@ -255,10 +211,29 @@ import inkscape from "@/assets/logos/inkscape.png";
       }
     }
-    img {
+    .event {
+      text-overflow: ellipsis;
-      width: 36px;
+      overflow: hidden;
-      margin-right: 0.5rem;
+      padding: 0.5rem;
+      background: var(--color-box-bg);
+      color: var(--color-text);
+      font-size: 0.95em;
+      a {
+        color: var(--color-card-link);
+      }
+      h4 {
+        font-size: 1.1rem;
+        font-weight: 500;
-      border-radius: 12px;
+        line-height: 1.2;
+        border-bottom: 1px solid #495057;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        margin-bottom: 0;
+        padding: 0;
+      }
     }
   }
@@ -270,7 +245,7 @@ import inkscape from "@/assets/logos/inkscape.png";
       text-align: center;
       margin-top: 1rem;
       li {
-        background-color: #f1f5f9;
+        background-color: var(--color-box-bg);
         padding: 0.25rem;
       }
     }
@@ -288,7 +263,7 @@ import inkscape from "@/assets/logos/inkscape.png";
         flex-direction: row;
         align-items: baseline;
         padding: 0.25rem;
-        background-color: #f1f5f9;
+        background-color: var(--color-box-bg);
         @media (max-width: 720px) {
           flex-direction: column;
@@ -296,7 +271,7 @@ import inkscape from "@/assets/logos/inkscape.png";
       }
       a {
-        color: #1c398e;
+        color: var(--color-link);
       }
       strong {
@@ -321,7 +296,7 @@ import inkscape from "@/assets/logos/inkscape.png";
         grid-template-columns: auto auto auto;
       }
       li {
-        background-color: #f1f5f9;
+        background-color: var(--color-box-bg);
         padding: 0.25rem;
         a {
@@ -329,6 +304,9 @@ import inkscape from "@/assets/logos/inkscape.png";
           flex-direction: row;
           align-items: center;
           text-align: left;
+          margin-left: 0.25rem;
+          margin-right: 0.25rem;
+          font-size: 0.9em;
           div {
             flex: 1;

src/pages/posts/[...slug].astro CHANGED Viewed

@@ -66,8 +66,8 @@ const { Content } = await render(Astro.props);
     p,
     li {
       code {
-        color: #d14;
+        color: var(--color-code-fg);
-        background-color: var(--color-gray-100);
+        background-color: var(--color-box-bg);
         word-wrap: break-word;
         box-decoration-break: clone;
         padding: 2px 4px;
@@ -80,7 +80,7 @@ const { Content } = await render(Astro.props);
     blockquote {
       font-size: 1.2rem;
       font-weight: 600;
-      background: var(--color-accent);
+      background: var(--color-highlight-bg);
       padding: 0.4rem;
       margin: 16px 0px;

src/pages/posts/index.astro CHANGED Viewed

@@ -14,17 +14,12 @@ const posts = (await getCollection("content")).sort(
     <ul class="flex flex-col">
       {
         posts.map((post) => (
-          <li class="grid grid-cols-1 sm:grid-cols-2 gap-3 justify-start items-end mt-5 leading-6">
+          <li class="item grid grid-cols-1 sm:grid-cols-2 gap-3 justify-start items-end mt-5 leading-6">
             <div class="flex flex-col">
-              <a
-                class="text-black underline underline-offset-4"
-                href={`/posts/${post.id}`}
+              <a href={`/posts/${post.id}`}>{post.data.title}</a>
-              >
-                {post.data.title}
-              </a>
               <span class="hover:cursor-default">{post.data.description}</span>
             </div>
-            <span class="flex flex-1 justify-end sm:ml-4 text-md text-gray-900">
+            <span class="flex flex-1 justify-end sm:ml-4 text-md ">
               <FormattedDate date={post.data.pubDate} />
             </span>
           </li>
@@ -39,6 +34,18 @@ const posts = (await getCollection("content")).sort(
     display: flex;
     float: left;
   }
+  .item {
+    a {
+      color: var(--color-post-link);
+      text-decoration-line: underline;
+      text-underline-offset: 4px;
+    }
+    span {
+      font-size: 13pt;
+      /* text-gray-900 */
+    }
+  }
   hr {
     padding-bottom: 75%;
   }

~repos /website

git clone https://pyrossh.dev/repos/website.git

木 Personal website of pyrossh. Built with astrojs, shiki, vite.