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 */}
<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="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">
Run multiple terminal sessions inside one single window. Detach them and leave them running in the
background, then reattach later.
Your work should not die when your connection drops. Detach your session, go home, and reattach exactly
where you left off. The session lives on the server, independent of your client.
</p>
</div>
<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">
Organize your workspace into windows (tabs) and panes (splits). Keep your editor, server logs, and git
commands visible at once.
One terminal is never enough. Split your workspace into windows (tabs) and panes (tiled splits). Monitor
logs, edit code, and run git commands simultaneously in a single SSH connection.
</p>
</div>
<div className="md:col-span-1 space-y-2">
<h3 className="text-xl font-bold text-primary">03. CONFIGURATION</h3>
<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
specific workflow needs.
The terminal is your canvas. Script your layouts, bind custom keys, and automate your startup. A
well-configured tmux environment is a force multiplier for any developer.
</p>
</div>
</div>
</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 */}
<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">
{[
{ 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 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 n", desc: "Next window" },
{ cmd: "Ctrl+b d", desc: "Detach session" },
{ cmd: "Ctrl+b n", desc: "Move to next window" },
{ cmd: "Ctrl+b ,", desc: "Rename current window" },
{ cmd: "Ctrl+b [", desc: "Enter copy/scroll mode" },
].map((item, i) => (
<div
key={i}
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>
<code className="bg-secondary px-2 py-1 text-primary text-xs">{item.cmd}</code>
<span className="text-muted-foreground group-hover:text-foreground transition-colors text-sm font-mono">
{item.desc}
</span>
<code className="bg-secondary px-2 py-1 text-primary text-xs border border-primary/20">{item.cmd}</code>
</div>
))}
</div>

195
styles/globals.css
View File

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