Merge pull request #89 from MealCraft/feautre/make_juntekim_com_better

self hosted

juntekim_frontend/app/SelfHosted/page.tsx

@@ -0,0 +1,153 @@
+const services = [
+  {
+    name: "Ollama",
+    description: "Local LLM server powering my AI experiments",
+    url: "https://ollama.juntekim.com",
+    icon: "🧠",
+  },
+  {
+    name: "Uptime Kuma",
+    description: "Service monitoring for my homelab and projects",
+    url: "https://uptime.kuma.juntekim.com",
+    icon: "🟢",
+  },
+  {
+    name: "n8n",
+    description: "Automation workflows I run for small tasks and integrations",
+    url: "https://n8n.juntekim.com",
+    icon: "⚙️",
+  },
+  {
+    name: "Home Assistant",
+    description: "Home automation hub for devices and sensors",
+    url: "https://ha.juntekim.com",
+    icon: "🏠",
+  },
+  {
+    name: "pgAdmin",
+    description: "Web interface I use to manage PostgreSQL databases",
+    url: "https://pgadmin.juntekim.com",
+    icon: "🗄️",
+  },
+  {
+    name: "DBeaver",
+    description: "Another Web interface I use to manage PostgreSQL databases. - Deciding which one I prefer",
+    url: "https://dbeaver.juntekim.com",
+    icon: "🐿️",
+  },
+  {
+    name: "Monica",
+    description: "Personal CRM to keep track of relationships",
+    url: "https://crm.juntekim.com",
+    icon: "📇",
+  },
+  {
+    name: "Tandoor Recipes",
+    description: "Recipe manager I use for cooking",
+    url: "https://mealcraft.com",
+    icon: "🍳",
+  },
+  {
+    name: "JS Paint",
+    description: "A nostalgic browser-based MS Paint clone",
+    url: "https://jspaint.juntekim.com",
+    icon: "🎨",
+  },
+  {
+    name: "Exercise Tracker",
+    description: "Workout tracking powered by wger",
+    url: "https://exercise.juntekim.com",
+    icon: "💪",
+  },
+  {
+    "name": "Code Server",
+    "description": "VS Code running on my server so I can code from anywhere",
+    "icon": "💻"
+  },
+  {
+    "name": "Whoami",
+    "description": "Tiny test service I use to debug Traefik routing",
+    "url": "https://whoami.mealcraft.com/",
+    "icon": "🧪"
+  },
+  {
+    "name": "PDF Tools",
+    "description": "Simple tools I host for generating and working with PDFs",
+    "url": "https://pdf.juntekim.com",
+    "icon": "📄"
+  },
+  {
+    "name": "Stripe → Invoice",
+    "description": "A tool I built to automatically create Xero invoices from Stripe payments",
+    "url": "https://stripetoinvoice.com",
+    "icon": "💳"
+  },
+  {
+    name: "My Website",
+    description: "Main personal website showcasing projects and experiments",
+    url: "https://juntekim.com",
+    icon: "🌐"
+  },
+  {
+    name: "Databasus",
+    description: "Automated sql-db backups to AWS S3",
+    url: "https://databasus.juntekim.com/",
+    icon: "🗃️"
+  },
+  {
+    name: "Traefik Dashboard",
+    description: "Dashboard for monitoring and managing Traefik reverse proxy",
+    url: "https://traefik.mealcraft.com/dashboard/",
+    icon: "📊"
+  },
+
+];
+
+export default function HomelabPage() {
+  return (
+    <div className="max-w-5xl mx-auto p-8">
+      <h1 className="text-3xl font-bold mb-4 text-zinc-900 dark:text-zinc-100">
+        🖥️ My Self-Hosted Stack
+      </h1>
+
+        <p className="mb-8 text-zinc-600 dark:text-zinc-400 max-w-2xl leading-relaxed">
+        These are tools I run in my personal <strong>homelab</strong> — a small server
+        I manage myself to experiment with technology and host useful services.
+        </p>
+
+      <div className="border-t border-zinc-200 dark:border-zinc-800 my-8" />
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+        {services.map((service) => (
+          <a
+            key={service.name}
+            href={service.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="
+              group block p-6 rounded-2xl
+              border border-zinc-200 dark:border-zinc-700
+              bg-white/80 dark:bg-zinc-900/80
+              backdrop-blur
+              hover:shadow-xl hover:-translate-y-1
+              transition-all duration-200
+            "
+          >
+            <div className="flex items-center gap-3 mb-3">
+              <span className="text-2xl">{service.icon}</span>
+              <h2 className="text-xl font-semibold">{service.name}</h2>
+            </div>
+
+            <p className="text-sm text-zinc-600 dark:text-zinc-400 mb-4">
+              {service.description}
+            </p>
+
+            <span className="text-xs font-medium text-zinc-500 dark:text-zinc-400 group-hover:text-zinc-900 dark:group-hover:text-zinc-200 transition">
+              Open →
+            </span>
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+}

juntekim_frontend/app/Youtube/my_editing_setup/page.tsx

@@ -1,14 +0,0 @@
-import fs from "fs";
-import path from "path";
-import MarkdownRenderer from "../../components/MardownRenderer";
-
-export default function YoutubePage() {
-  const filePath = path.join(process.cwd(), "app/Youtube/robot_vaccume_only_starts_when_I_leave_the_house/script.md");
-  const markdown = fs.readFileSync(filePath, "utf8");
-
-  return (
-    <div className="p-8">
-      <MarkdownRenderer content={markdown} />
-    </div>
-  );
-}

juntekim_frontend/app/Youtube/my_editing_setup/script.md

@@ -1 +0,0 @@
-my editing_set_up requires one windows computer so i can carry on using one desk

juntekim_frontend/app/Youtube/my_new_dev_setup/page.tsx

@@ -1,14 +0,0 @@
-import fs from "fs";
-import path from "path";
-import MarkdownRenderer from "../../components/MardownRenderer";
-
-export default function YoutubePage() {
-  const filePath = path.join(process.cwd(), "app/Youtube/robot_vaccume_only_starts_when_I_leave_the_house/script.md");
-  const markdown = fs.readFileSync(filePath, "utf8");
-
-  return (
-    <div className="p-8">
-      <MarkdownRenderer content={markdown} />
-    </div>
-  );
-}

juntekim_frontend/app/Youtube/my_new_dev_setup/script.md

@@ -1,2 +0,0 @@
-Write about my dev set up that uses ubunutu as the devcontainer, i just ssh
-

juntekim_frontend/app/Youtube/page.tsx

@@ -1,14 +0,0 @@
-import fs from "fs";
-import path from "path";
-import MarkdownRenderer from "../components/MardownRenderer";
-
-export default function YoutubePage() {
-  const filePath = path.join(process.cwd(), "app/Youtube/todo.md");
-  const markdown = fs.readFileSync(filePath, "utf8");
-
-  return (
-    <div className="p-8">
-      <MarkdownRenderer content={markdown} />
-    </div>
-  );
-}

juntekim_frontend/app/Youtube/robot_vaccume_only_starts_when_I_leave_the_house/page.tsx

@@ -1,14 +0,0 @@
-import fs from "fs";
-import path from "path";
-import MarkdownRenderer from "../../components/MardownRenderer";
-
-export default function YoutubePage() {
-  const filePath = path.join(process.cwd(), "app/Youtube/robot_vaccume_only_starts_when_I_leave_the_house/script.md");
-  const markdown = fs.readFileSync(filePath, "utf8");
-
-  return (
-    <div className="p-8">
-      <MarkdownRenderer content={markdown} />
-    </div>
-  );
-}

juntekim_frontend/app/Youtube/robot_vaccume_only_starts_when_I_leave_the_house/script.md

@@ -1 +0,0 @@
-A rought script please to make a youtube video...

juntekim_frontend/app/Youtube/todo.md

@@ -1 +0,0 @@
-- Make youtube video for s7 triggering when I leave the house