added new functionatlty and profressionalism

juntekim_frontend/app/About/page.tsx

@@ -1,26 +1,52 @@
+const links = [
+  {
+    label: "LinkedIn",
+    url: "https://www.linkedin.com/in/juntekim",
+    icon: "💼",
+    color: "bg-blue-600 hover:bg-blue-700",
+  },
+  {
+    label: "YouTube — The Pragmatic Automator",
+    url: "https://www.youtube.com/@juntekim",
+    icon: "▶️",
+    color: "bg-red-600 hover:bg-red-700",
+  },
+  {
+    label: "GitHub",
+    url: "https://github.com/kimjunte",
+    icon: "🐙",
+    color: "bg-zinc-800 hover:bg-zinc-700",
+  },
+  {
+    label: "My Self-Hosted Stack",
+    url: "/SelfHosted",
+    icon: "🖥️",
+    color: "bg-zinc-700 hover:bg-zinc-600",
+  },
+];
+
 export default function About() {
   return (
-    <>
-      <h1 className="text-2xl font-bold mb-4">Under construction</h1>
-
-      <div className="flex flex-col space-y-2">
-        <a
-          href="https://www.linkedin.com/in/juntekim"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-blue-500 underline"
-        >
-          LinkedIn
-        </a>
-        <a
-          href="https://www.youtube.com/@ThePragmaticAutomator"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-red-500 underline"
-        >
-          YouTube
-        </a>
+    <div className="min-h-screen flex flex-col items-center justify-center bg-zinc-950 px-4 py-16">
+      <div className="flex flex-col items-center mb-10">
+        <h1 className="text-2xl font-bold text-white">Junte Kim</h1>
+        <p className="text-zinc-400 mt-1 text-sm">Builder · Automator · Homelab Tinkerer</p>
       </div>
-    </>
+
+      <div className="w-full max-w-sm flex flex-col gap-3">
+        {links.map((link) => (
+          <a
+            key={link.label}
+            href={link.url}
+            target={link.url.startsWith("http") ? "_blank" : "_self"}
+            rel="noopener noreferrer"
+            className={`${link.color} text-white rounded-xl px-5 py-4 flex items-center gap-3 font-medium transition-colors duration-150`}
+          >
+            <span className="text-xl">{link.icon}</span>
+            <span>{link.label}</span>
+          </a>
+        ))}
+      </div>
+    </div>
   );
 }

juntekim_frontend/app/Learning/Todo.md

@@ -1,44 +1,27 @@
-- Pandas
-
-- Setting up a nas computer DIY
-    https://www.youtube.com/watch?v=8_1OBOeuBsA
-
-
-
-- Next.js Pages Router Tutorial — <https://nextjs.org/learn/pages-router>
-- Next.js Dashboard App Tutorial — <https://nextjs.org/learn/dashboard-app>
-- MDN: Using Promises — <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises>
-- TCP/IP Illustrated, Volume 1 — Create a GitHub repo summarizing each chapter
-- CPU/Memory FreeBSD Optimization Article — <https://people.freebsd.org/~lstewart/articles/cpumemory.pdf>
-- Operating Systems: Three Easy Pieces (OSTEP) — <https://pages.cs.wisc.edu/~remzi/OSTEP/>
-- cURL Man Page — <https://curl.se/docs/manpage.html>
-- How Linux Works — <https://www.amazon.com/How-Linux-Works-3rd-Superuser/dp/1718500408>
-- Linux Bible — <https://www.amazon.com/Linux-Bible-Christopher-Negus/dp/1119578884>
-- Linux Journey — <https://linuxjourney.com/>
-- btop Documentation — <https://github.com/aristocratos/btop>
-- k9s Documentation — <https://k9scli.io/>
-- JSConf: Event Loop — <https://www.youtube.com/watch?v=8aGhZQkoFbQ>
-- Event Loop Playlist — <https://www.youtube.com/watch?v=HjneAhCy2N4&list=PL9vTTBa7QaQOoMfpP3ztvgyQkPWDPfJez>
-- JavaScript Visualized — <https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif>
-- RealPython: Async IO — <https://realpython.com/async-io-python/>
-- AWS Documentation — <https://docs.aws.amazon.com/>
-- SVG Animations (Book) — <https://www.amazon.com/SVG-Animations-Implementations-Responsive-Animation/dp/1491939702>
-- Look up TrueNas to help with my storage problems
-    - https://www.truenas.com/docs/
-    - Video editing over network?
-    - DB with k8s back up?
-    - plex in the future?
-- Antifragile
-- Re read pragmatic programmer
-- unix and linux system adminstration handbook
-- pandas text book i bought
-- Home assistant docs on dashboard etc
-- Engineering management for the rest of us
-
-If I am stuck:
-    - Go for shower/coldplunge/run/walk
-    - talk out loud to someone
-    - have i asked chat gpt
-    - have i asked google
-    - have i read a book on it
-    - can I make touch points any smaller and notice the wins in the struggle?
+- [ ] Pandas
+- [ ] Setting up a nas computer DIY — https://www.youtube.com/watch?v=8_1OBOeuBsA
+- [ ] Next.js Pages Router Tutorial — https://nextjs.org/learn/pages-router
+- [ ] Next.js Dashboard App Tutorial — https://nextjs.org/learn/dashboard-app
+- [ ] MDN: Using Promises — https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises
+- [ ] TCP/IP Illustrated, Volume 1 — Create a GitHub repo summarizing each chapter
+- [ ] CPU/Memory FreeBSD Optimization Article — https://people.freebsd.org/~lstewart/articles/cpumemory.pdf
+- [ ] Operating Systems: Three Easy Pieces (OSTEP) — https://pages.cs.wisc.edu/~remzi/OSTEP/
+- [ ] cURL Man Page — https://curl.se/docs/manpage.html
+- [ ] How Linux Works — https://www.amazon.com/How-Linux-Works-3rd-Superuser/dp/1718500408
+- [ ] Linux Bible — https://www.amazon.com/Linux-Bible-Christopher-Negus/dp/1119578884
+- [ ] Linux Journey — https://linuxjourney.com/
+- [ ] btop Documentation — https://github.com/aristocratos/btop
+- [ ] k9s Documentation — https://k9scli.io/
+- [ ] JSConf: Event Loop — https://www.youtube.com/watch?v=8aGhZQkoFbQ
+- [ ] Event Loop Playlist — https://www.youtube.com/watch?v=HjneAhCy2N4&list=PL9vTTBa7QaQOoMfpP3ztvgyQkPWDPfJez
+- [ ] JavaScript Visualized — https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif
+- [ ] RealPython: Async IO — https://realpython.com/async-io-python/
+- [ ] AWS Documentation — https://docs.aws.amazon.com/
+- [ ] SVG Animations (Book) — https://www.amazon.com/SVG-Animations-Implementations-Responsive-Animation/dp/1491939702
+- [ ] TrueNas — https://www.truenas.com/docs/
+- [ ] Antifragile
+- [ ] Re-read Pragmatic Programmer
+- [ ] Unix and Linux System Administration Handbook
+- [ ] Pandas textbook
+- [ ] Home Assistant docs on dashboard
+- [ ] Engineering Management for the Rest of Us

juntekim_frontend/app/Learning/page.tsx

@@ -7,10 +7,14 @@ export default function LearningPage() {
   const markdown = fs.readFileSync(filePath, "utf8");
 
   return (
-    <div className="p-8">
-      <h1 className="text-3xl font-bold mb-6 text-zinc-900 dark:text-zinc-100">
-        📘 Learning To Do List:
+    <div className="max-w-3xl mx-auto p-8">
+      <h1 className="text-3xl font-bold mb-2 text-zinc-900 dark:text-zinc-100">
+        📘 Learning List
       </h1>
+      <p className="text-zinc-500 dark:text-zinc-400 mb-8 text-sm">
+        Things I want to read, watch, and explore — in no particular order.
+      </p>
+      <div className="border-t border-zinc-200 dark:border-zinc-800 mb-8" />
       <MarkdownRenderer content={markdown} />
     </div>
   );

juntekim_frontend/app/components/CdNavigation.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { useRouter } from "next/navigation";
+
+const routes: Record<string, string> = {
+  about: "/About",
+  learning: "/Learning",
+  selfhosted: "/SelfHosted",
+  home: "/",
+};
+
+export default function CdNavigation() {
+  const router = useRouter();
+  const bufferRef = useRef("");
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const tag = (e.target as HTMLElement).tagName;
+      if (tag === "INPUT" || tag === "TEXTAREA") return;
+
+      bufferRef.current += e.key;
+
+      if (timerRef.current) clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(() => {
+        bufferRef.current = "";
+      }, 1500);
+
+      const match = bufferRef.current.match(/cd\s+(\S+)$/i);
+      if (match) {
+        const dest = routes[match[1].toLowerCase()];
+        if (dest) {
+          bufferRef.current = "";
+          router.push(dest);
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [router]);
+
+  return null;
+}

juntekim_frontend/app/components/MardownRenderer.tsx

@@ -4,7 +4,7 @@ import remarkGfm from "remark-gfm";
 
 export default function MarkdownRenderer({ content }: { content: string }) {
   return (
-    <div className="prose prose-zinc dark:prose-invert max-w-none">
+    <div className="prose prose-zinc dark:prose-invert max-w-none prose-li:my-2 prose-ul:space-y-1 prose-a:text-blue-500 prose-a:no-underline hover:prose-a:underline prose-p:text-zinc-600 dark:prose-p:text-zinc-400 [&_input[type=checkbox]]:mr-2 [&_input[type=checkbox]]:accent-blue-500 [&_input[type=checkbox]]:w-4 [&_input[type=checkbox]]:h-4 [&_input[type=checkbox]]:cursor-default">
       <ReactMarkdown remarkPlugins={[remarkGfm]}>
         {content}
       </ReactMarkdown>

juntekim_frontend/app/components/TerminalBox.tsx

@@ -1,9 +1,19 @@
 "use client";
 
 import { useState, useEffect, useRef } from "react";
+import { useRouter } from "next/navigation";
 import { QUOTES } from "@/lib/quotes";
 
+const cdRoutes: Record<string, string> = {
+  about: "/About",
+  learning: "/Learning",
+  selfhosted: "/SelfHosted",
+  home: "/",
+  "~": "/",
+};
+
 export default function TerminalBox({ children }: { children: React.ReactNode }) {
+  const router = useRouter();
   // ---- BOOT SEQUENCE STATES ----
   const [showFirstPrompt, setShowFirstPrompt] = useState(false);
   const [showEnterEcho, setShowEnterEcho] = useState(false);
@@ -98,7 +108,7 @@ Available commands:
   quoteOfTheDay     Show a random quote
   tree .            Show the file structure
   ls, ls -la        Minimal directory listing
-  cd <path>         Playful message about not leaving
+  cd <path>         Navigate to a page (about, learning, selfhosted, home)
   pwd               Print working directory
   whoami            Identify yourself
   motivation        Generate motivation
@@ -137,7 +147,14 @@ Available commands:
     ls: () => "nothing to see here 👀",
     "ls -la": () => "nothing to see here 👀",
 
-    cd: () => "where you trying to go? everything you need is in tree .",
+    cd: (args: string[]) => {
+      const dest = cdRoutes[args[0]?.toLowerCase()];
+      if (dest) {
+        setTimeout(() => router.push(dest), 300);
+        return `navigating to ${args[0]}…`;
+      }
+      return `cd: ${args[0] ?? ""}: no such directory`;
+    },
 
     tree: () => [
       "Compiling…",
@@ -168,12 +185,7 @@ Available commands:
       return;
     }
 
-    if (base === "cd") {
-      setHistory(h => [...h, { type: "output", text: commands["cd"](args) }]);
-      return;
-    }
-
-    setHistory(h => [...h, { type: "output", text: `command not found: ${cmd}` }]);
+setHistory(h => [...h, { type: "output", text: `command not found: ${cmd}` }]);
   };
 
   const onKeyDown = (e: any) => {

juntekim_frontend/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import CdNavigation from "./components/CdNavigation";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -13,8 +14,8 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Junte Kim",
+  description: "Builder · Automator · Homelab Tinkerer",
 };
 
 export default function RootLayout({
@@ -27,6 +28,7 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
+        <CdNavigation />
         {children}
       </body>
     </html>