KeshavAnandCode/terminal-portfolio-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

final content hopefully, and fixed routing

Browse Source
This commit is contained in:
Keshav Anand
2026-01-18 00:09:46 -06:00
parent 999fc08ffe
commit 1d369291e2
3 changed files with 57 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
client/src/App.tsx
View File

@@ -4,7 +4,6 @@ import { QueryClientProvider } from "@tanstack/react-query";
import { Toaster } from "@/components/ui/toaster"; import { Toaster } from "@/components/ui/toaster";
import { TooltipProvider } from "@/components/ui/tooltip"; import { TooltipProvider } from "@/components/ui/tooltip";
import Home from "@/pages/home"; import Home from "@/pages/home";
import NotFound from "@/pages/not-found";
import Docs from "@/pages/docs"; import Docs from "@/pages/docs";
@@ -13,21 +12,6 @@ function Router() {
<Switch> <Switch>
<Route path="/" component={Home} /> <Route path="/" component={Home} />
<Route path="/docs" component={Docs} /> <Route path="/docs" component={Docs} />
<Route path="/webshell">
<div className="min-h-screen bg-black flex flex-col items-center justify-center p-8 font-mono">
<div className="text-destructive text-4xl mb-4">
404: Web Shell Not Found
</div>
<p className="text-muted-foreground text-center max-w-md">
The web-based shell environment is currently unavailable. Please use
your native terminal for the full experience.
</p>
<a href="/" className="mt-8 text-primary hover:underline">
$ exit
</a>
</div>
</Route>
<Route component={NotFound} />
</Switch> </Switch>
); );
} }

115
client/src/pages/docs.tsx
View File

@@ -51,29 +51,31 @@ function CommandReference() {
return ( return (
<div className="relative group p-6 rounded-xl border border-border/30 bg-surface/40 backdrop-blur-sm mb-12"> <div className="relative group p-6 rounded-xl border border-border/30 bg-surface/40 backdrop-blur-sm mb-12">
<div className="flex items-center gap-4 mb-4"> <AnimatedSection title="What is it?" delay={200}>
<Terminal className="w-5 h-5 text-primary" /> <div className="flex items-center gap-4 mb-4">
<span className="text-xs text-muted-foreground uppercase tracking-widest font-mono"> <Terminal className="w-5 h-5 text-primary" />
Reference Command <span className="text-xs text-muted-foreground uppercase tracking-widest font-mono">
</span> Terminal Command:
</div> </span>
<div className="flex items-center justify-between gap-4"> </div>
<code className="text-lg md:text-xl font-mono text-primary break-all"> <div className="flex items-center justify-between gap-4">
{SSH_COMMAND} <code className="text-lg md:text-xl font-mono text-primary break-all">
</code> {SSH_COMMAND}
<Button </code>
size="icon" <Button
variant="ghost" size="icon"
onClick={handleCopy} variant="ghost"
className="shrink-0 text-muted-foreground hover:text-primary" onClick={handleCopy}
> className="shrink-0 text-muted-foreground hover:text-primary"
{copied ? ( >
<Check className="h-5 w-5 text-primary" /> {copied ? (
) : ( <Check className="h-5 w-5 text-primary" />
<Copy className="h-5 w-5" /> ) : (
)} <Copy className="h-5 w-5" />
</Button> )}
</div> </Button>
</div>
</AnimatedSection>
</div> </div>
); );
} }
@@ -93,24 +95,27 @@ export default function Docs() {
Documentation Documentation
</h1> </h1>
<p className="text-muted-foreground"> <p className="text-muted-foreground">
Technical architecture and connection manual. The who, what, when, where, why
</p> </p>
</div> </div>
<CommandReference /> <CommandReference />
<div className="space-y-12 md:space-y-20"> <div className="space-y-12 md:space-y-20">
<AnimatedSection title="What is it?" delay={200}> <AnimatedSection title="What is it?" delay={500}>
<p className="text-muted-foreground leading-relaxed text-sm md:text-base"> <p className="text-muted-foreground leading-relaxed text-sm md:text-base">
When executed in your terminal, this command renders a fully When executed in your terminal, this command renders a fully
interactive shell portfolio experience. Much like a digital resume interactive shell portfolio experience. Much like a digital resume
or personal site, it allows you to explore my work and background or personal site, it allows you to explore my work and background
through a safe, secure, and purely text-based interface. It is through a safe, <strong>secure</strong>, and purely text-based
completely harmless to your system. interface.{" "}
<span className="text-foreground font-bold">
It is completely harmless to your system.
</span>{" "}
</p> </p>
</AnimatedSection> </AnimatedSection>
<AnimatedSection title="Command Breakdown" delay={400}> <AnimatedSection title="Command Breakdown" delay={800}>
<div className="space-y-8"> <div className="space-y-8">
<div className="relative p-4 md:p-6 bg-surface/20 rounded-lg border border-border/10"> <div className="relative p-4 md:p-6 bg-surface/20 rounded-lg border border-border/10">
<div className="text-primary text-base md:text-xl mb-6 font-mono text-center tracking-widest break-all"> <div className="text-primary text-base md:text-xl mb-6 font-mono text-center tracking-widest break-all">
@@ -137,8 +142,8 @@ export default function Docs() {
</div> </div>
<p className="text-[11px] md:text-xs text-muted-foreground leading-relaxed"> <p className="text-[11px] md:text-xs text-muted-foreground leading-relaxed">
<span className="text-foreground font-bold">User:</span> A <span className="text-foreground font-bold">User:</span> A
passwordless, restricted user profile specifically passwordless, restricted user on my homeserver meant for
provisioned for public access. public access.
</p> </p>
</div> </div>
@@ -149,7 +154,7 @@ export default function Docs() {
<p className="text-[11px] md:text-xs text-muted-foreground leading-relaxed"> <p className="text-[11px] md:text-xs text-muted-foreground leading-relaxed">
<span className="text-foreground font-bold">Domain:</span>{" "} <span className="text-foreground font-bold">Domain:</span>{" "}
Points to a web record that directs your request to my Points to a web record that directs your request to my
server's public gateway. server's public IP (gateway).
</p> </p>
</div> </div>
</div> </div>
@@ -157,7 +162,7 @@ export default function Docs() {
</div> </div>
</AnimatedSection> </AnimatedSection>
<AnimatedSection title="Execution Guide" delay={600}> <AnimatedSection title="How to Run" delay={1100}>
<div className="space-y-4 text-muted-foreground text-sm md:text-base"> <div className="space-y-4 text-muted-foreground text-sm md:text-base">
<div className="flex gap-4"> <div className="flex gap-4">
<span className="text-primary shrink-0">01</span> <span className="text-primary shrink-0">01</span>
@@ -185,7 +190,7 @@ export default function Docs() {
<span className="text-primary shrink-0">05</span> <span className="text-primary shrink-0">05</span>
<p> <p>
Terminate the process at any time by pressing{" "} Terminate the process at any time by pressing{" "}
<kbd className="px-1 py-0.5 rounded bg-surface/80 border border-border/30 text-foreground text-[10px]"> <kbd className="px-1 py-0.5 rounded bg-surface/80 border border-border/30 text-foreground text-[16px]">
Ctrl + C Ctrl + C
</kbd> </kbd>
. .
@@ -194,35 +199,29 @@ export default function Docs() {
</div> </div>
</AnimatedSection> </AnimatedSection>
<AnimatedSection title="Technical Summary" delay={800}> <AnimatedSection title="Code Logic" delay={1400}>
<div className="space-y-6"> <div className="space-y-6">
<p className="text-muted-foreground leading-relaxed text-sm md:text-base"> <p className="text-muted-foreground leading-relaxed text-sm md:text-base">
This command facilitates authenticated access to the{" "} This command gives authenticated access to the{" "}
<span className="text-foreground font-bold">'portfolio'</span>{" "} <span className="text-foreground font-bold">'portfolio'</span>{" "}
user account on my private home infrastructure. No password is user account on my private home server.
required, as the user environment is strictly isolated. </p>
<p className="text-muted-foreground leading-relaxed text-sm md:text-base">
Instead of a standard bash or zsh shell, the user session
triggers a custom-coded{" "}
<span className="text-foreground font-bold">
C++ executable
</span>
. This binary utilizes{" "}
<span className="text-foreground font-bold">FTXUI</span>—a
sophisticated functional terminal user interface library—to
handle real-time rendering and input.
</p> </p>
<div className="p-4 md:p-6 bg-surface/20 rounded-lg border border-border/10 space-y-4">
<p className="text-xs md:text-sm text-muted-foreground italic">
"The portfolio user is a specialized account with no
system-level permissions and a modified shell."
</p>
<p className="text-muted-foreground leading-relaxed text-sm md:text-base">
Instead of a standard bash or zsh shell, the user session
triggers a custom-coded{" "}
<span className="text-foreground font-bold">
C++ executable
</span>
. This binary utilizes{" "}
<span className="text-foreground font-bold">FTXUI</span>—a
sophisticated functional terminal user interface library—to
handle real-time rendering and input.
</p>
</div>
</div> </div>
</AnimatedSection> </AnimatedSection>
<AnimatedSection title="Resources" delay={1000}> <AnimatedSection title="Resources" delay={1700}>
<div className="flex flex-col md:flex-row gap-4"> <div className="flex flex-col md:flex-row gap-4">
<a <a
href="https://git.keshavanand.net/KeshavAnandCode/terminal-portfolio" href="https://git.keshavanand.net/KeshavAnandCode/terminal-portfolio"
@@ -248,9 +247,9 @@ export default function Docs() {
<ArrowRight className="w-4 h-4 opacity-0 group-hover:opacity-100 transition-opacity" /> <ArrowRight className="w-4 h-4 opacity-0 group-hover:opacity-100 transition-opacity" />
</a> </a>
</div> </div>
<p className="mt-4 text-[10px] text-muted-foreground/60 text-center"> <p className="mt-4 text-[12px] text-muted-foreground/60 text-center">
Note: Web shell is a simulated environment. Native terminal is Note: Web shell is a simulated environment, and native terminal is
recommended for optimal performance. recommended
</p> </p>
</AnimatedSection> </AnimatedSection>
</div> </div>

21
client/src/pages/not-found.tsx
View File

@@ -1,21 +0,0 @@
import { Card, CardContent } from "@/components/ui/card";
import { AlertCircle } from "lucide-react";
export default function NotFound() {
return (
<div className="min-h-screen w-full flex items-center justify-center bg-gray-50">
<Card className="w-full max-w-md mx-4">
<CardContent className="pt-6">
<div className="flex mb-4 gap-2">
<AlertCircle className="h-8 w-8 text-red-500" />
<h1 className="text-2xl font-bold text-gray-900">404 Page Not Found</h1>
</div>
<p className="mt-4 text-sm text-gray-600">
Did you forget to add the page to the router?
</p>
</CardContent>
</Card>
</div>
);
}