Apply the homepage design review

404.html

@@ -4,8 +4,10 @@
     <meta charset="UTF-8" />
     <!--app-policy-->
     <meta name="referrer" content="no-referrer" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <link rel="icon" href="/favicon.ico" sizes="32x32" />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <link rel="apple-touch-icon" href="/images/portfolio/lu-avatar.jpg" />
     <script>document.documentElement.dataset.pondBoot="pending";const restorePondFallback=()=>{delete document.documentElement.dataset.pondBoot};window.addEventListener("error",event=>{if(event.target instanceof HTMLScriptElement||event instanceof ErrorEvent)restorePondFallback()},true);window.setTimeout(restorePondFallback,15000);</script>
     <!--app-head-->
   </head>

app/fonts/InstrumentSerif-OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2022 The Instrument Serif Project Authors (https://github.com/Instrument/instrument-serif) InstrumentSerif-Italic.ttf: Copyright 2022 The Instrument Serif Project Authors (https://github.com/Instrument/instrument-serif)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

app/not-found.module.css

@@ -1,3 +1,32 @@
+/* Glass tokens are local to the 404 page; the homepage uses its own paper/green palette. */
+.page {
+  --glass-fill: rgb(37 28 53 / .3);
+  --glass-top: rgb(226 211 255 / .14);
+  --glass-bottom: rgb(20 15 32 / .05);
+  --glass-edge: rgb(235 223 255 / .2);
+  --glass-rim: rgb(243 234 255 / .37);
+  --glass-selected: rgb(153 132 207 / .22);
+  --site-shadow: 0 12px 30px rgb(13 7 28 / .2), 0 2px 5px rgb(13 7 28 / .12);
+  --glass-shadow: var(--site-shadow), inset 0 1px 0 var(--glass-rim), inset 0 -1px 1px rgb(15 8 25 / .2);
+  --glass-panel-shadow: var(--site-shadow), inset 0 1px 1px rgb(243 234 255 / .3), inset 0 -1px 1px rgb(15 8 25 / .2);
+  --site-panel-bg: linear-gradient(135deg, rgb(69 54 90 / .93), rgb(37 28 53 / .94));
+}
+
+@media (prefers-color-scheme: light) {
+  .page {
+    --glass-fill: rgb(255 255 255 / .16);
+    --glass-top: rgb(255 255 255 / .46);
+    --glass-bottom: rgb(255 255 255 / .05);
+    --glass-edge: rgb(91 65 113 / .18);
+    --glass-rim: rgb(255 255 255 / .8);
+    --glass-selected: rgb(153 132 207 / .18);
+    --site-shadow: 0 12px 30px rgb(70 40 95 / .08), 0 2px 5px rgb(63 40 80 / .04);
+    --glass-shadow: var(--site-shadow), inset 0 1px 0 var(--glass-rim), inset 0 -1px 1px rgb(71 47 87 / .1);
+    --glass-panel-shadow: var(--site-shadow), inset 0 1px 1px rgb(255 255 255 / .88), inset 0 -1px 1px rgb(71 47 87 / .09);
+    --site-panel-bg: linear-gradient(135deg, rgb(249 245 253 / .96), rgb(238 232 243 / .94));
+  }
+}
+
 .page {
   position: relative;
   display: grid;

app/routes.tsx

@@ -13,6 +13,7 @@ type RouteMetadata = {
   image: string;
   imageAlt: string;
   noindex?: boolean;
+  themeColor?: { light: string; dark: string };
 };
 
 export type SiteRoute = {
@@ -23,20 +24,21 @@ export type SiteRoute = {
 };
 
 const homeMetadata: RouteMetadata = {
-  title: "Lu | Software Engineer",
-  socialTitle: "Lu | Software Engineer",
+  title: "Lu — I make stubborn software behave",
+  socialTitle: "Lu — I make stubborn software behave",
   description: "Lu makes stubborn software behave: native Android apps, agent systems, Linux tools, and practical software.",
   socialDescription: "I make stubborn software behave. Native Android, agent systems, Linux tools, and practical software.",
   canonical: siteConfig.siteUrl,
   image: `${siteConfig.siteUrl}/share-cards/luinbytes-dev-pond.png`,
-  imageAlt: "Lu | Software Engineer",
+  imageAlt: "luinbytes.dev share card: the line “I get annoyed, then I build the missing thing.” beside a pixel-art pond with koi, lily pads and stepping stones.",
+  themeColor: { light: "#f5f0e6", dark: "#242d26" },
 };
 
 const notFoundRoute: SiteRoute = {
   path: "/404",
   output: "404.html",
   Component: NotFound,
-  metadata: { ...homeMetadata, noindex: true },
+  metadata: { ...homeMetadata, themeColor: undefined, noindex: true },
 };
 
 export const siteRoutes: readonly SiteRoute[] = [
@@ -52,7 +54,7 @@ export const siteRoutes: readonly SiteRoute[] = [
       socialDescription: "Privacy policy for Lu's personal software on luinbytes.dev.",
       canonical: `${siteConfig.siteUrl}/privacy`,
       image: `${siteConfig.siteUrl}/share-cards/luinbytes-dev-pond.png`,
-      imageAlt: "Lu | Software Engineer",
+      imageAlt: homeMetadata.imageAlt,
       noindex: true,
     },
   },
@@ -71,7 +73,11 @@ export function RouteHead({ route }: { route: SiteRoute }) {
     <>
       <title>{metadata.title}</title>
       <meta name="description" content={metadata.description} />
-      <meta name="keywords" content="Software Engineer,Next.js,TypeScript,Android,Kotlin,AI Agents,HomeBot,Rakazo,Linux,PipeWire,CLI Tool,Open Source" />
+      <meta name="color-scheme" content="light dark" />
+      {metadata.themeColor && <>
+        <meta name="theme-color" media="(prefers-color-scheme: light)" content={metadata.themeColor.light} />
+        <meta name="theme-color" media="(prefers-color-scheme: dark)" content={metadata.themeColor.dark} />
+      </>}
       {metadata.noindex && <meta name="robots" content="noindex" />}
       <link rel="canonical" href={metadata.canonical} />
       <meta property="og:type" content="website" />

components/concepts/signal-desk/pond-environment.module.css

@@ -4,6 +4,8 @@
   z-index: -2;
   overflow: hidden;
   pointer-events: none;
+  -webkit-user-select: none;
+  user-select: none;
   background: var(--site-bg);
 }
 
@@ -12,6 +14,9 @@
   inset: 0;
   z-index: -1;
   touch-action: manipulation;
+  -webkit-user-select: none;
+  user-select: none;
+  -webkit-touch-callout: none;
 }
 
 .pondImage,

components/concepts/signal-desk/pond-input.ts

@@ -8,45 +8,32 @@ type PondInputOptions = {
   onPrimaryImpact: (screen: PondPoint, world: PondPoint) => void;
   onFoodDrop: (screen: PondPoint, world: PondPoint) => void;
   onAffordance: (screen: PondPoint, visible: boolean) => void;
-  onGesture?: (gesture: "single-tap-impact" | "double-tap-food") => void;
+  onGesture?: (gesture: "tap-food") => void;
 };
 
-type TouchTap = { x: number; y: number; time: number };
-
 function isCompletedTap(touch: { moved: boolean; started: number }, now: number, overWater: boolean) {
   return !touch.moved && now - touch.started <= 430 && overWater;
 }
 
-function isDoubleTap(previous: TouchTap | null, current: PondPoint, now: number) {
-  if (!previous) return false;
-  const elapsed = now - previous.time;
-  return elapsed >= 70 && elapsed <= 430 && Math.hypot(current.x - previous.x, current.y - previous.y) <= 34;
-}
+// A single click or tap on open water splashes and drops food. The browser's
+// context menu is never intercepted.
 
 export function installPondInput(options: PondInputOptions) {
   const { interaction } = options;
   let previousPointer = { x: 0, y: 0, time: 0 };
   let activeTouch: { id: number; x: number; y: number; started: number; moved: boolean } | null = null;
-  let lastTouchTap: TouchTap | null = null;
-  let pendingSingleTap: number | null = null;
   let lastFoodInput = Number.NEGATIVE_INFINITY;
 
-  const point = (event: PointerEvent | MouseEvent) => ({ x: event.clientX, y: event.clientY });
+  const point = (event: PointerEvent) => ({ x: event.clientX, y: event.clientY });
   const validWater = (screen: PondPoint) => options.isWater(screen.x, screen.y);
   const ownsPoint = (screen: PondPoint) => document.elementFromPoint(screen.x, screen.y) === interaction;
 
-  const clearPendingTap = () => {
-    if (pendingSingleTap !== null) window.clearTimeout(pendingSingleTap);
-    pendingSingleTap = null;
-    lastTouchTap = null;
-  };
-
   const dropFood = (screen: PondPoint) => {
     if (!validWater(screen)) return false;
     const now = performance.now();
     if (now - lastFoodInput >= 140) {
       options.onFoodDrop(screen, options.toWorld(screen.x, screen.y));
-      options.onGesture?.("double-tap-food");
+      options.onGesture?.("tap-food");
       lastFoodInput = now;
     }
     return true;
@@ -79,7 +66,6 @@ export function installPondInput(options: PondInputOptions) {
     if (event.pointerType === "touch") {
       if (!event.isPrimary || activeTouch) {
         activeTouch = null;
-        clearPendingTap();
         return;
       }
       activeTouch = {
@@ -94,6 +80,7 @@ export function installPondInput(options: PondInputOptions) {
     }
     if (event.button === 0 && validWater(screen)) {
       options.onPrimaryImpact(screen, options.toWorld(screen.x, screen.y));
+      dropFood(screen);
     }
   };
 
@@ -106,32 +93,14 @@ export function installPondInput(options: PondInputOptions) {
     const screen = point(event);
     if (!validWater(touch) || !isCompletedTap(touch, now, validWater(screen))) return;
 
-    const previous = lastTouchTap;
-    if (isDoubleTap(previous, screen, now)) {
-      clearPendingTap();
-      if (dropFood(screen) && event.cancelable) event.preventDefault();
-      return;
-    }
-
-    lastTouchTap = { ...screen, time: now };
-    if (pendingSingleTap !== null) window.clearTimeout(pendingSingleTap);
-    pendingSingleTap = window.setTimeout(() => {
-      if (lastTouchTap?.time === now) {
-        options.onPrimaryImpact({ x: touch.x, y: touch.y }, options.toWorld(touch.x, touch.y));
-        options.onGesture?.("single-tap-impact");
-      }
-      clearPendingTap();
-    }, 440);
+    options.onPrimaryImpact({ x: touch.x, y: touch.y }, options.toWorld(touch.x, touch.y));
+    if (dropFood(screen) && event.cancelable) event.preventDefault();
   };
 
   const cancel = (event: PointerEvent) => {
     if (activeTouch?.id === event.pointerId) activeTouch = null;
   };
 
-  const contextMenu = (event: MouseEvent) => {
-    if (dropFood(point(event))) event.preventDefault();
-  };
-
   const feedFromControl = (event: Event) => {
     for (const y of [0.5, 0.3, 0.7, 0.15, 0.85, 0.05, 0.95]) {
       for (const x of [0.5, 0.3, 0.7, 0.15, 0.85, 0.05, 0.95]) {
@@ -147,24 +116,20 @@ export function installPondInput(options: PondInputOptions) {
 
   const resize = () => {
     activeTouch = null;
-    clearPendingTap();
   };
 
   window.addEventListener("pointermove", move, { passive: true });
   interaction.addEventListener("pointerdown", press, { passive: true });
   interaction.addEventListener("pointerup", release, { passive: false });
   interaction.addEventListener("pointercancel", cancel, { passive: true });
-  interaction.addEventListener("contextmenu", contextMenu);
   interaction.addEventListener("pond-feed", feedFromControl);
   window.addEventListener("resize", resize, { passive: true });
 
   return () => {
-    clearPendingTap();
     window.removeEventListener("pointermove", move);
     interaction.removeEventListener("pointerdown", press);
     interaction.removeEventListener("pointerup", release);
     interaction.removeEventListener("pointercancel", cancel);
-    interaction.removeEventListener("contextmenu", contextMenu);
     interaction.removeEventListener("pond-feed", feedFromControl);
     window.removeEventListener("resize", resize);
   };