jeffemmett
/
mytmux.life-website
mirror of https://github.com/Jeff-Emmett/mytmux.life-website.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: update site with new terminal setup guides 

Rename "Learn" to "THE_TMUX_IFESTO" and add mobile setup sections.
Expand command reference matrix with essential terminal commands.

#VERCEL_SKIP

Co-authored-by: Jeff Emmett <46964190+Jeff-Emmett@users.noreply.github.com>
This commit is contained in:
v0 2025-11-21 19:36:36 +00:00
parent 18b95e0552
commit c2205a2a77
2 changed files with 181 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
app/page.tsx
View File

@ -264,49 +264,135 @@ export default function Home() {
{/* Documentation / Info Section */} {/* Documentation / Info Section */}
<section id="learn" className="container px-4 py-12"> <section id="learn" className="container px-4 py-12">
<div className="flex flex-col space-y-4 mb-8">
<h2 className="text-3xl font-bold tracking-tight border-l-4 border-primary pl-4">THE_TMUX_IFESTO</h2>
<p className="text-muted-foreground">The philosophy of persistent, multiplexed terminal environments.</p>
</div>
<div className="grid md:grid-cols-3 gap-12"> <div className="grid md:grid-cols-3 gap-12">
<div className="md:col-span-1 space-y-2"> <div className="md:col-span-1 space-y-2">
<h3 className="text-xl font-bold text-primary">01. MULTIPLEXING</h3> <h3 className="text-xl font-bold text-primary">01. PERSISTENCE</h3>
<p className="text-sm text-muted-foreground leading-relaxed"> <p className="text-sm text-muted-foreground leading-relaxed">
Run multiple terminal sessions inside one single window. Detach them and leave them running in the Your work should not die when your connection drops. Detach your session, go home, and reattach exactly
background, then reattach later. where you left off. The session lives on the server, independent of your client.
</p> </p>
</div> </div>
<div className="md:col-span-1 space-y-2"> <div className="md:col-span-1 space-y-2">
<h3 className="text-xl font-bold text-primary">02. WINDOWS & PANES</h3> <h3 className="text-xl font-bold text-primary">02. MULTIPLEXING</h3>
<p className="text-sm text-muted-foreground leading-relaxed"> <p className="text-sm text-muted-foreground leading-relaxed">
Organize your workspace into windows (tabs) and panes (splits). Keep your editor, server logs, and git One terminal is never enough. Split your workspace into windows (tabs) and panes (tiled splits). Monitor
commands visible at once. logs, edit code, and run git commands simultaneously in a single SSH connection.
</p> </p>
</div> </div>
<div className="md:col-span-1 space-y-2"> <div className="md:col-span-1 space-y-2">
<h3 className="text-xl font-bold text-primary">03. CONFIGURATION</h3> <h3 className="text-xl font-bold text-primary">03. CONFIGURATION</h3>
<p className="text-sm text-muted-foreground leading-relaxed"> <p className="text-sm text-muted-foreground leading-relaxed">
Tmux is highly scriptable. Bind keys, change status bar colors, and create custom layouts to fit your The terminal is your canvas. Script your layouts, bind custom keys, and automate your startup. A
specific workflow needs. well-configured tmux environment is a force multiplier for any developer.
</p> </p>
</div> </div>
</div> </div>
</section> </section>
{/* Mobile Setup Section */}
<section className="container px-4 py-12 border-t border-border">
<h2 className="text-2xl font-bold mb-8">MOBILE_DEPLOYMENT_PROTOCOLS</h2>
<div className="grid md:grid-cols-2 gap-8">
{/* Android Protocol */}
<div className="border border-border bg-card p-6 space-y-4">
<h3 className="text-xl font-bold text-primary flex items-center gap-2">
<span className="text-xs bg-primary text-black px-1">ANDROID</span>
<span>TERMUX_PROTOCOL</span>
</h3>
<div className="space-y-4 text-sm text-muted-foreground font-mono">
<div className="flex gap-4">
<span className="text-primary">01.</span>
<div>
<p className="mb-1 text-foreground">Acquire F-Droid</p>
<p>Download the F-Droid APK from f-droid.org to access the open-source repository.</p>
</div>
</div>
<div className="flex gap-4">
<span className="text-primary">02.</span>
<div>
<p className="mb-1 text-foreground">Install Termux</p>
<p>Search for "Termux" within F-Droid. Do not use the Play Store version (deprecated).</p>
</div>
</div>
<div className="flex gap-4">
<span className="text-primary">03.</span>
<div>
<p className="mb-1 text-foreground">Initialize Environment</p>
<div className="bg-black p-2 mt-1 border border-border text-xs">
<p>$ pkg update && pkg upgrade</p>
<p>$ pkg install tmux vim git</p>
</div>
</div>
</div>
</div>
</div>
{/* iOS Protocol */}
<div className="border border-border bg-card p-6 space-y-4">
<h3 className="text-xl font-bold text-primary flex items-center gap-2">
<span className="text-xs bg-primary text-black px-1">APPLE</span>
<span>ISH_SHELL_PROTOCOL</span>
</h3>
<div className="space-y-4 text-sm text-muted-foreground font-mono">
<div className="flex gap-4">
<span className="text-primary">01.</span>
<div>
<p className="mb-1 text-foreground">Acquire iSH Shell</p>
<p>Install "iSH Shell" from the App Store. This provides a localized Alpine Linux environment.</p>
</div>
</div>
<div className="flex gap-4">
<span className="text-primary">02.</span>
<div>
<p className="mb-1 text-foreground">Package Management</p>
<p>iSH uses Alpine's 'apk' package manager.</p>
</div>
</div>
<div className="flex gap-4">
<span className="text-primary">03.</span>
<div>
<p className="mb-1 text-foreground">Deploy Tmux</p>
<div className="bg-black p-2 mt-1 border border-border text-xs">
<p>$ apk update</p>
<p>$ apk add tmux vim openssh</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* Cheat Sheet */} {/* Cheat Sheet */}
<section className="container px-4 py-12 border-t border-border"> <section className="container px-4 py-12 border-t border-border">
<h2 className="text-2xl font-bold mb-8">QUICK_REFERENCE_CARD</h2> <h2 className="text-2xl font-bold mb-8">COMMAND_REFERENCE_MATRIX</h2>
<div className="grid md:grid-cols-2 gap-4"> <div className="grid md:grid-cols-2 gap-4">
{[ {[
{ cmd: "tmux new -s <name>", desc: "Start new named session" },
{ cmd: "tmux a -t <name>", desc: "Attach to existing session" },
{ cmd: "tmux ls", desc: "List all active sessions" },
{ cmd: "Ctrl+b d", desc: "Detach from current session" },
{ cmd: "Ctrl+b %", desc: "Split pane vertically" }, { cmd: "Ctrl+b %", desc: "Split pane vertically" },
{ cmd: 'Ctrl+b "', desc: "Split pane horizontally" }, { cmd: 'Ctrl+b "', desc: "Split pane horizontally" },
{ cmd: "Ctrl+b o", desc: "Swap to next pane" }, { cmd: "Ctrl+b <arrows>", desc: "Navigate between panes" },
{ cmd: "Ctrl+b z", desc: "Toggle pane zoom (maximize)" },
{ cmd: "Ctrl+b c", desc: "Create new window" }, { cmd: "Ctrl+b c", desc: "Create new window" },
{ cmd: "Ctrl+b n", desc: "Next window" }, { cmd: "Ctrl+b n", desc: "Move to next window" },
{ cmd: "Ctrl+b d", desc: "Detach session" }, { cmd: "Ctrl+b ,", desc: "Rename current window" },
{ cmd: "Ctrl+b [", desc: "Enter copy/scroll mode" },
].map((item, i) => ( ].map((item, i) => (
<div <div
key={i} key={i}
className="flex items-center justify-between p-4 border border-border bg-card/50 hover:bg-card transition-colors group" className="flex items-center justify-between p-4 border border-border bg-card/50 hover:bg-card transition-colors group"
> >
<span className="text-muted-foreground group-hover:text-foreground transition-colors">{item.desc}</span> <span className="text-muted-foreground group-hover:text-foreground transition-colors text-sm font-mono">
<code className="bg-secondary px-2 py-1 text-primary text-xs">{item.cmd}</code> {item.desc}
</span>
<code className="bg-secondary px-2 py-1 text-primary text-xs border border-primary/20">{item.cmd}</code>
</div> </div>
))} ))}
</div> </div>

195
styles/globals.css
View File

@ -1,125 +1,92 @@
@import 'tailwindcss'; @tailwind base;
@import 'tw-animate-css'; @tailwind components;
@tailwind utilities;
@custom-variant dark (&:is(.dark *)); @layer utilities {
.text-balance {
:root { text-wrap: balance;
--background: oklch(1 0 0); }
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
--destructive-foreground: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--radius: 0.625rem;
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
} }
.dark { @layer base {
--background: oklch(0.145 0 0); :root {
--foreground: oklch(0.985 0 0); --font-sans: var(--font-geist-sans);
--card: oklch(0.145 0 0); --font-mono: var(--font-geist-mono);
--card-foreground: oklch(0.985 0 0); --background: 0 0% 100%;
--popover: oklch(0.145 0 0); --foreground: 0 0% 3.9%;
--popover-foreground: oklch(0.985 0 0); --card: 0 0% 100%;
--primary: oklch(0.985 0 0); --card-foreground: 0 0% 3.9%;
--primary-foreground: oklch(0.205 0 0); --popover: 0 0% 100%;
--secondary: oklch(0.269 0 0); --popover-foreground: 0 0% 3.9%;
--secondary-foreground: oklch(0.985 0 0); --primary: 0 0% 9%;
--muted: oklch(0.269 0 0); --primary-foreground: 0 0% 98%;
--muted-foreground: oklch(0.708 0 0); --secondary: 0 0% 96.1%;
--accent: oklch(0.269 0 0); --secondary-foreground: 0 0% 9%;
--accent-foreground: oklch(0.985 0 0); --muted: 0 0% 96.1%;
--destructive: oklch(0.396 0.141 25.723); --muted-foreground: 0 0% 45.1%;
--destructive-foreground: oklch(0.637 0.237 25.331); --accent: 0 0% 96.1%;
--border: oklch(0.269 0 0); --accent-foreground: 0 0% 9%;
--input: oklch(0.269 0 0); --destructive: 0 84.2% 60.2%;
--ring: oklch(0.439 0 0); --destructive-foreground: 0 0% 98%;
--chart-1: oklch(0.488 0.243 264.376); --border: 0 0% 89.8%;
--chart-2: oklch(0.696 0.17 162.48); --input: 0 0% 89.8%;
--chart-3: oklch(0.769 0.188 70.08); --ring: 0 0% 3.9%;
--chart-4: oklch(0.627 0.265 303.9); --chart-1: 12 76% 61%;
--chart-5: oklch(0.645 0.246 16.439); --chart-2: 173 58% 39%;
--sidebar: oklch(0.205 0 0); --chart-3: 197 37% 24%;
--sidebar-foreground: oklch(0.985 0 0); --chart-4: 43 74% 66%;
--sidebar-primary: oklch(0.488 0.243 264.376); --chart-5: 27 87% 67%;
--sidebar-primary-foreground: oklch(0.985 0 0); --radius: 0.5rem;
--sidebar-accent: oklch(0.269 0 0); --sidebar-background: 0 0% 98%;
--sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-foreground: 240 5.3% 26.1%;
--sidebar-border: oklch(0.269 0 0); --sidebar-primary: 240 5.9% 10%;
--sidebar-ring: oklch(0.439 0 0); --sidebar-primary-foreground: 0 0% 98%;
} --sidebar-accent: 240 4.8% 95.9%;
--sidebar-accent-foreground: 240 5.9% 10%;
@theme inline { --sidebar-border: 220 13% 91%;
--font-sans: 'Geist', 'Geist Fallback'; --sidebar-ring: 217.2 91.2% 59.8%;
--font-mono: 'Geist Mono', 'Geist Mono Fallback'; }
--color-background: var(--background); .dark {
--color-foreground: var(--foreground); --background: 0 0% 3.9%;
--color-card: var(--card); --foreground: 0 0% 98%;
--color-card-foreground: var(--card-foreground); --card: 0 0% 3.9%;
--color-popover: var(--popover); --card-foreground: 0 0% 98%;
--color-popover-foreground: var(--popover-foreground); --popover: 0 0% 3.9%;
--color-primary: var(--primary); --popover-foreground: 0 0% 98%;
--color-primary-foreground: var(--primary-foreground); --primary: 0 0% 98%;
--color-secondary: var(--secondary); --primary-foreground: 0 0% 9%;
--color-secondary-foreground: var(--secondary-foreground); --secondary: 0 0% 14.9%;
--color-muted: var(--muted); --secondary-foreground: 0 0% 98%;
--color-muted-foreground: var(--muted-foreground); --muted: 0 0% 14.9%;
--color-accent: var(--accent); --muted-foreground: 0 0% 63.9%;
--color-accent-foreground: var(--accent-foreground); --accent: 0 0% 14.9%;
--color-destructive: var(--destructive); --accent-foreground: 0 0% 98%;
--color-destructive-foreground: var(--destructive-foreground); --destructive: 0 62.8% 30.6%;
--color-border: var(--border); --destructive-foreground: 0 0% 98%;
--color-input: var(--input); --border: 0 0% 14.9%;
--color-ring: var(--ring); --input: 0 0% 14.9%;
--color-chart-1: var(--chart-1); --ring: 0 0% 83.1%;
--color-chart-2: var(--chart-2); --chart-1: 220 70% 50%;
--color-chart-3: var(--chart-3); --chart-2: 160 60% 45%;
--color-chart-4: var(--chart-4); --chart-3: 30 80% 55%;
--color-chart-5: var(--chart-5); --chart-4: 280 65% 60%;
--radius-sm: calc(var(--radius) - 4px); --chart-5: 340 75% 55%;
--radius-md: calc(var(--radius) - 2px); --sidebar-background: 240 5.9% 10%;
--radius-lg: var(--radius); --sidebar-foreground: 240 4.8% 95.9%;
--radius-xl: calc(var(--radius) + 4px); --sidebar-primary: 224.3 76.3% 48%;
--color-sidebar: var(--sidebar); --sidebar-primary-foreground: 0 0% 100%;
--color-sidebar-foreground: var(--sidebar-foreground); --sidebar-accent: 240 3.7% 15.9%;
--color-sidebar-primary: var(--sidebar-primary); --sidebar-accent-foreground: 240 4.8% 95.9%;
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --sidebar-border: 240 3.7% 15.9%;
--color-sidebar-accent: var(--sidebar-accent); --sidebar-ring: 217.2 91.2% 59.8%;
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground); }
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
} }
@layer base { @layer base {
* { * {
@apply border-border outline-ring/50; @apply border-border;
} }
body { body {
@apply bg-background text-foreground; @apply bg-background text-foreground;
} }
} }