kill the projects page in favor of a unified home page

Author: KTibow

src/lib/Header.astro

@@ -8,7 +8,6 @@ const pages = [
   { url: '/milliblog/', title: 'milliblog', description: 'human research' },
   { url: 'https://x.com/KTibow', title: 'microblog', description: 'X' },
   { url: '/nanoblog/', title: 'nanoblog', description: 'small thoughts' },
-  { url: '/projects/', title: 'projects', description: 'past work' },
   { url: '/', title: 'home', description: 'about me' },
 ];
 ---

src/pages/_motive.astro

@@ -0,0 +1,30 @@
+<article class="motive">
+  <slot name="graphic" />
+  <div class="body prose">
+    <slot />
+  </div>
+</article>
+<style>
+  .motive {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    width: 100%;
+    max-width: 40rem;
+    background-color: var(--m3c-surface-container);
+    border-radius: 1.5rem;
+    > svg {
+      min-width: 10rem;
+      min-height: 10rem;
+      border-radius: 1.5rem;
+    }
+  }
+  .body {
+    display: flex;
+    flex-direction: column;
+    padding: 0 0.5rem;
+    > h2 {
+      font-size: inherit;
+      line-height: inherit;
+    }
+  }
+</style>

src/pages/index.astro

@@ -0,0 +1,104 @@
+---
+import Base from '$lib/layouts/Base.astro';
+import Header from '$lib/Header.astro';
+import Arrow from './_arrow.astro';
+
+import bg from './_bg.svg?url';
+import cursor from './_cursor.svg?url';
+
+const wordmark = `<svg width="161.6" height="40" viewBox="0 0 1753 434" fill="currentColor"><title>Kendell</title><rect width="121" height="50" y="384" rx="25"/><rect width="89" height="50" x="160" y="384" rx="25"/><rect width="89" height="50" x="32" y="320" rx="25"/><rect width="89" height="50" x="160" y="320" rx="25"/><rect width="89" height="50" x="32" y="256" rx="25"/><rect width="89" height="50" x="128" y="256" rx="25"/><rect width="153" height="50" x="32" y="192" rx="25"/><rect width="89" height="50" x="32" y="128" rx="25"/><rect width="89" height="50" x="128" y="128" rx="25"/><rect width="89" height="50" x="32" y="64" rx="25"/><rect width="89" height="50" x="160" y="64" rx="25"/><rect width="121" height="50" rx="25"/><rect width="89" height="50" x="160" rx="25"/><rect width="153" height="50" x="320" y="384" rx="25"/><rect width="89" height="50" x="288" y="320" rx="25"/><rect width="217" height="50" x="288" y="256" rx="25"/><rect width="89" height="50" x="288" y="192" rx="25"/><rect width="89" height="50" x="416" y="192" rx="25"/><rect width="153" height="50" x="320" y="128" rx="25"/><rect width="89" height="50" x="544" y="384" rx="25"/><rect width="89" height="50" x="672" y="384" rx="25"/><rect width="89" height="50" x="544" y="320" rx="25"/><rect width="89" height="50" x="672" y="320" rx="25"/><rect width="89" height="50" x="544" y="256" rx="25"/><rect width="89" height="50" x="672" y="256" rx="25"/><rect width="89" height="50" x="544" y="192" rx="25"/><rect width="89" height="50" x="672" y="192" rx="25"/><rect width="185" height="50" x="544" y="128" rx="25"/><rect width="121" height="50" x="832" y="384" rx="25"/><rect width="89" height="50" x="960" y="384" rx="25"/><rect width="89" height="50" x="800" y="320" rx="25"/><rect width="89" height="50" x="928" y="320" rx="25"/><rect width="89" height="50" x="800" y="256" rx="25"/><rect width="89" height="50" x="928" y="256" rx="25"/><rect width="89" height="50" x="800" y="192" rx="25"/><rect width="121" height="50" x="896" y="192" rx="25"/><rect width="89" height="50" x="832" y="128" rx="25"/><rect width="89" height="50" x="928" y="128" rx="25"/><rect width="89" height="50" x="928" y="64" rx="25"/><rect width="121" height="50" x="896" rx="25"/><rect width="153" height="50" x="1088" y="384" rx="25"/><rect width="89" height="50" x="1056" y="320" rx="25"/><rect width="217" height="50" x="1056" y="256" rx="25"/><rect width="89" height="50" x="1056" y="192" rx="25"/><rect width="89" height="50" x="1184" y="192" rx="25"/><rect width="153" height="50" x="1088" y="128" rx="25"/><rect width="153" height="50" x="1344" y="384" rx="25"/><rect width="89" height="50" x="1376" y="320" rx="25"/><rect width="89" height="50" x="1376" y="256" rx="25"/><rect width="89" height="50" x="1376" y="192" rx="25"/><rect width="89" height="50" x="1376" y="128" rx="25"/><rect width="89" height="50" x="1376" y="64" rx="25"/><rect width="121" height="50" x="1344" rx="25"/><rect width="153" height="50" x="1600" y="384" rx="25"/><rect width="89" height="50" x="1632" y="320" rx="25"/><rect width="89" height="50" x="1632" y="256" rx="25"/><rect width="89" height="50" x="1632" y="192" rx="25"/><rect width="89" height="50" x="1632" y="128" rx="25"/><rect width="89" height="50" x="1632" y="64" rx="25"/><rect width="121" height="50" x="1600" rx="25"/></svg>`;
+---
+
+<Base title="Kendell">
+  <Header span />
+  <style
+    set:html={':root {' +
+      [
+        `cursor: url("${cursor}"), auto`,
+        `background-image: url("${bg}")`,
+        `background-color: var(--m3c-primary)`,
+        `color: var(--m3c-surface)`,
+        `background-size: 100%`,
+        `background-repeat: no-repeat`,
+        `background-attachment: fixed`,
+        `background-position: top center`,
+      ].join(';') +
+      '}' +
+      ':root.midnight {' +
+      [
+        `background-image: linear-gradient(rgb(0 0 0 / 0.8), rgba(0 0 0 / 0.8)), url("${bg}")`,
+        `color: var(--m3c-on-surface)`,
+      ].join(';') +
+      '}'}
+  ></style>
+  <main>
+    <div>
+      <h1><Fragment set:html={wordmark} /></h1>
+      <time class="link"></time>
+      <a class="link layer" href="https://github.com/KTibow">GitHub <Arrow /></a>
+      <a class="link layer" href="https://github.com/sponsors/KTibow">GitHub Sponsors <Arrow /></a>
+      <a class="link layer" href="https://discord.gg/DSzZQxpzHR">Discord <Arrow /></a>
+    </div>
+    <div>
+      <p>EHLO! i like making things; this site has some things i've made.</p>
+      <p>
+        you might also know me for my chatting (where i'm known as KTibow) or for my interest in
+        minification (e18e, svgo, etc are awesome).
+      </p>
+    </div>
+  </main>
+  <script>
+    const time = document.querySelector('time')!;
+    function updateTime() {
+      const now = new Date();
+      time.dateTime = now.toISOString();
+      time.textContent = now.toLocaleTimeString(undefined, {
+        hour: 'numeric',
+        minute: '2-digit',
+        timeZone: 'America/Los_Angeles',
+      });
+      setTimeout(updateTime, 60000 - (Date.now() % 60000));
+    }
+    updateTime();
+  </script>
+</Base>
+
+<style>
+  main {
+    display: flex;
+    @media (width < 52.5rem) {
+      flex-direction: column;
+    }
+    gap: 1.5rem;
+    margin-inline: 0.5rem;
+    margin-block: auto;
+    align-self: center;
+    > * {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+  h1 {
+    margin-bottom: auto;
+  }
+  .link {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 2.5rem;
+    border-radius: 0.5rem;
+    font-weight: 500;
+    &:last-child {
+      margin-bottom: -0.5rem;
+    }
+  }
+  p {
+    &:not(:first-child) {
+      margin-top: 1em;
+    }
+    @media (width >= 52.5rem) {
+      line-height: 1.3;
+      max-width: 13rem;
+    }
+  }
+</style>