Remake the portfolio as an interactive Signal Desk

README.md

@@ -1,24 +1,16 @@
 # luinbytes.dev
 
-Lu's personal portfolio: software built from annoying gaps, shipped as useful tools.
+Lu's personal portfolio, currently presented as three fully built interactive directions for review.
 
-The homepage keeps the personal intro up front, then gives [HomeBot](https://github.com/luinbytes/HomeBot) its own feature section. The rest of the work stays in the build index and dedicated case pages.
+The homepage is a comparison gallery. Each concept reframes the site around Lu, his current work at [Orchid.ai](https://orchid.ai), and a curated group of public repositories rather than a catalogue of product pages.
 
 ## What is featured
 
-HomeBot is an open-source Rust desktop, server, and Android home for persistent AI teammates. It keeps authenticated chats, tools, routines, and repository workspaces server-owned while native desktop and Android clients share the same state.
+- `/concepts/signal-desk` — a warm, tactile studio patchbay with animated repository channels.
+- `/concepts/trace` — a bold editorial identity with a native range-driven project scrubber.
+- `/concepts/signal-field` — a spatial topographic map with plotted repository routes and a list-view fallback.
 
-- [Source repository](https://github.com/luinbytes/HomeBot)
-- Current status: pre-v1 development
-
-The homepage's retained build index also covers:
-
-- [Linux Sonar](https://github.com/luinbytes/linux-sonar) — per-app PipeWire routing, ChatMix, and mic effects for Linux.
-- Meteor — local-first Android tasks and habits.
-- Sleepr — cycle-aware wake guidance and on-device sleep rhythm learning.
-- Game Systems — overlays, hooks, trainers, and runtime instrumentation.
-
-Dedicated case pages cover BallHammer, Risk of Anticheat, BrcTrainer, DaggerFall, and SuperHackerGolf.
+All three feature [HomeBot](https://github.com/luinbytes/HomeBot), [rakazo-android](https://github.com/luinbytes/rakazo-android), [Linux Sonar](https://github.com/luinbytes/linux-sonar), [bongocat](https://github.com/luinbytes/bongocat), [cursor-barrier](https://github.com/luinbytes/cursor-barrier), and [BallHammer](https://github.com/luinbytes/BallHammer). Existing case-study routes remain available as an archive while a final direction is selected.
 
 ## Stack
 

app/concepts/signal-desk/page.tsx

@@ -0,0 +1,11 @@
+import type { Metadata } from "next";
+import { SignalDesk } from "@/components/concepts/signal-desk/signal-desk";
+
+export const metadata: Metadata = {
+  title: "Signal Desk | Lu portfolio concept",
+  description: "A tactile, interactive portfolio concept for Lu's work at Orchid.ai and in open source.",
+};
+
+export default function SignalDeskPage() {
+  return <SignalDesk />;
+}

app/concepts/signal-field/page.tsx

@@ -0,0 +1,11 @@
+import type { Metadata } from "next";
+import { SignalField } from "@/components/concepts/signal-field/signal-field";
+
+export const metadata: Metadata = {
+  title: "Signal Field | Lu portfolio concept",
+  description: "A spatial, interactive portfolio concept for Lu's work at Orchid.ai and in open source.",
+};
+
+export default function SignalFieldPage() {
+  return <SignalField />;
+}

app/concepts/trace/page.tsx

@@ -0,0 +1,12 @@
+import type { Metadata } from "next";
+import TracePortfolio from "@/components/concepts/trace/trace-portfolio";
+
+export const metadata: Metadata = {
+  title: "Trace | Lu",
+  description:
+    "Lu's interactive portfolio: software engineering, open-source systems, and useful weird little tools.",
+};
+
+export default function TracePage() {
+  return <TracePortfolio />;
+}

app/layout.tsx

@@ -1,10 +1,7 @@
 import type { Metadata } from "next";
 import { Pixelify_Sans, Space_Grotesk, Space_Mono } from "next/font/google";
 import "./globals.css";
-import { Header } from "@/components/layout/header";
-import { Footer } from "@/components/layout/footer";
-import { CommandMenu } from "@/components/command-menu";
-import { CaseInterfaceOverlay } from "@/components/case-interface-overlay";
+import { SiteFrame } from "@/components/layout/site-frame";
 import { siteUrl } from "@/site.config";
 
 const spaceGrotesk = Space_Grotesk({
@@ -34,14 +31,14 @@ export const metadata: Metadata = {
     template: "%s | Lu",
   },
   description:
-    "Self-taught software engineer building Android apps, Linux tools, game mods, Raycast extensions, and open-source utilities.",
+    "Lu builds Orchid.ai's native Android app, agent systems, Linux tools, and stubbornly practical software.",
   metadataBase: new URL(siteUrl),
   twitter: {
     card: "summary_large_image",
     title: "Lu | Software Engineer",
     description:
-      "Self-taught software engineer building Android apps, Linux tools, game mods, Raycast extensions, and open-source utilities.",
-    creator: "@luinbytes",
+      "I make computers do the useful part. Native Android, agent systems, Linux tools, and practical software.",
+    creator: "@x6c75",
     images: `${siteUrl}/share-cards/luinbytes-dev-pink-print.png`,
   },
   openGraph: {
@@ -50,7 +47,7 @@ export const metadata: Metadata = {
     url: siteUrl,
     title: "Lu | Software Engineer",
     description:
-      "Self-taught software engineer building Android apps, Linux tools, game mods, Raycast extensions, and open-source utilities.",
+      "I make computers do the useful part. Native Android, agent systems, Linux tools, and practical software.",
     siteName: "Luinbytes",
     images: [
       {
@@ -105,8 +102,8 @@ export default function RootLayout({
         ║   b) Lu debugging something I broke (sorry)               ║
         ║   c) A recruiter snooping for code quality (it's good!)   ║
         ║                                                           ║
-        ║   Ink-and-paper system. Proof loop interface.               ║
-        ║   Hard frames, print marks, preserved details.              ║
+        ║   Welcome to the aquarium. Please do not tap the glass.      ║
+        ║   The fish are unionised and have excellent lawyers.         ║
         ║                                                           ║
         ╚═══════════════════════════════════════════════════════════╝
       */}
@@ -128,19 +125,13 @@ export default function RootLayout({
         suppressHydrationWarning
       >
         <ConsoleEgg />
-        <CommandMenu />
-        <CaseInterfaceOverlay />
         <a
           href="#main"
           className="registration-plate sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[200] focus:border-2 focus:border-dark-brown focus:bg-paper focus:px-4 focus:py-3 focus:font-mono focus:text-[12px] focus:font-bold focus:uppercase focus:tracking-[0.08em] focus:text-dark-brown focus:outline focus:outline-3 focus:outline-paper focus:outline-offset-3"
         >
           Skip to content
         </a>
-        <Header />
-        <main id="main" className="min-h-screen pt-16">
-          {children}
-        </main>
-        <Footer />
+        <SiteFrame>{children}</SiteFrame>
       </body>
     </html>
   );

app/page.tsx

@@ -1,5 +1,5 @@
-import { AnomalyHome } from "@/components/sections/anomaly-home";
+import { SignalDesk } from "@/components/concepts/signal-desk/signal-desk";
 
 export default function Home() {
-  return <AnomalyHome />;
+  return <SignalDesk />;
 }

components/concepts/concept-gallery.module.css

@@ -0,0 +1,179 @@
+.page {
+  color-scheme: light;
+  min-height: 100vh;
+  overflow: hidden;
+  background: #e8e7e3;
+  color: #17171b;
+}
+
+.nav,
+.intro,
+.concepts,
+.footer {
+  width: min(100% - 2rem, 92rem);
+  margin-inline: auto;
+}
+
+.nav {
+  min-height: 4.5rem;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  border-bottom: 1px solid #17171b;
+  font-family: var(--font-mono);
+  font-size: 0.66rem;
+  font-weight: 700;
+  letter-spacing: 0.13em;
+}
+
+.nav > span:nth-child(2) { text-align: center; color: #67666c; }
+.nav a { justify-self: end; display: flex; align-items: center; gap: 0.5rem; }
+.nav svg { width: 0.9rem; height: 0.9rem; }
+
+.intro {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+  padding-block: clamp(5rem, 10vw, 10rem) 4rem;
+}
+
+.intro > p {
+  grid-column: 1 / -1;
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: #67666c;
+}
+
+.intro h1 {
+  max-width: 9ch;
+  font-size: clamp(4rem, 9vw, 9rem);
+  font-weight: 650;
+  line-height: 0.84;
+  letter-spacing: -0.075em;
+}
+
+.intro > div {
+  align-self: end;
+  max-width: 34rem;
+  padding-bottom: 0.6rem;
+  color: #55545a;
+  font-size: 1.05rem;
+  line-height: 1.65;
+}
+
+.intro > div span {
+  display: block;
+  margin-top: 1.25rem;
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: #17171b;
+}
+
+.concepts {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  border: 1px solid #17171b;
+}
+
+.card {
+  --accent: #e56f59;
+  --surface: #f3ebdd;
+  --ink: #282235;
+  min-height: 42rem;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid #17171b;
+  padding: 1.25rem;
+  background: var(--surface);
+  color: var(--ink);
+}
+
+.card:last-child { border-right: 0; }
+.trace { --accent: #ff6b4a; --surface: #0b1f33; --ink: #e8f0f4; }
+.field { --accent: #d8ff57; --surface: #09111f; --ink: #f2f1e8; }
+
+.cardTopline {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  font-family: var(--font-mono);
+  font-size: 0.62rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.cardTopline span:first-child { color: var(--accent); }
+
+.motif {
+  min-height: 17rem;
+  display: grid;
+  place-items: center;
+}
+
+.motif svg { width: 100%; overflow: visible; }
+.motif path, .motif circle { fill: none; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; }
+.motif circle { fill: var(--surface); stroke: var(--accent); }
+
+.cardCopy { margin-top: auto; }
+.card h2 { font-size: clamp(2.5rem, 4vw, 4.75rem); font-weight: 650; line-height: 0.95; letter-spacing: -0.06em; }
+.cardCopy p { min-height: 7.5rem; margin-top: 1rem; color: color-mix(in srgb, var(--ink) 70%, transparent); line-height: 1.55; }
+
+.card > a {
+  min-height: 3rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
+  padding-top: 1rem;
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.card > a svg { width: 1rem; height: 1rem; transition: transform 180ms ease; }
+.card > a:hover svg, .card > a:focus-visible svg { transform: translate(3px, -3px); }
+
+.footer {
+  min-height: 8rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 2rem;
+  font-family: var(--font-mono);
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+@media (max-width: 980px) {
+  .concepts { grid-template-columns: 1fr; }
+  .card { min-height: 34rem; border-right: 0; border-bottom: 1px solid #17171b; }
+  .card:last-child { border-bottom: 0; }
+  .motif { min-height: 12rem; }
+  .cardCopy p { min-height: auto; margin-bottom: 2rem; }
+}
+
+@media (max-width: 680px) {
+  .nav, .intro, .concepts, .footer { width: min(100% - 1.25rem, 92rem); }
+  .nav { grid-template-columns: 1fr auto; }
+  .nav > span:nth-child(2) { display: none; }
+  .intro { grid-template-columns: 1fr; padding-block: 4.5rem 3rem; }
+  .intro h1 { font-size: clamp(3.6rem, 18vw, 6rem); }
+  .intro > div { margin-top: 1rem; }
+  .card { min-height: 32rem; }
+  .footer { align-items: flex-start; flex-direction: column; justify-content: center; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .card > a svg { transition: none; }
+}