@naeil/ui 0.1.0

package/src/app/[locale]/(content)/layout.tsx

@@ -0,0 +1,7 @@
+export default function ContentLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <main className="pt-28">{children}</main>;
+}

package/src/app/[locale]/(content)/pkm/page.tsx

@@ -0,0 +1,31 @@
+import { setRequestLocale } from "next-intl/server";
+import { useTranslations } from "next-intl";
+import { ProjectLayout } from "@/components/project-layout";
+import type { ProjectData } from "@/components/project-layout";
+
+export default async function PKMPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+
+  return <PKMContent />;
+}
+
+function PKMContent() {
+  const t = useTranslations("pkm");
+
+  const data: ProjectData = {
+    icon: "/images/jellyfish.png",
+    name: t("name"),
+    description: t("description"),
+    accent: "oklch(0.627 0.265 303)",
+    tags: ["Python", "Embeddings", "Semantic Search"],
+    github: "https://github.com/naeil-dev/pkm",
+    comingSoon: true,
+  };
+
+  return <ProjectLayout data={data} />;
+}

package/src/app/[locale]/(content)/projects/page.tsx

@@ -0,0 +1,100 @@
+import { setRequestLocale } from "next-intl/server";
+import { useTranslations } from "next-intl";
+import { Link } from "@/i18n/routing";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { PageTitle } from "@/components/typography";
+
+export default async function ProjectsPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+
+  return <ProjectsContent />;
+}
+
+function ProjectsContent() {
+  const t = useTranslations();
+
+  const PROJECTS = [
+    {
+      name: t("projects.cc.name"),
+      description: t("projects.cc.description"),
+      href: "/cc" as const,
+      tags: ["Python", "RSS", "AI"],
+      status: t("projects.status.active"),
+      coming: false,
+    },
+    {
+      name: t("projects.pkm.name"),
+      description: t("projects.pkm.description"),
+      href: "/pkm" as const,
+      tags: ["Python", "Embeddings", "Search"],
+      status: t("projects.status.coming"),
+      coming: true,
+    },
+    {
+      name: t("projects.naeilUi.name"),
+      description: t("projects.naeilUi.description"),
+      href: "/design" as const,
+      tags: ["React", "Tailwind", "Design Tokens"],
+      status: t("projects.status.active"),
+      coming: false,
+    },
+    {
+      name: t("projects.babyAgent.name"),
+      description: t("projects.babyAgent.description"),
+      href: "/baby-agent" as const,
+      tags: ["OpenClaw", "LINE", "AI"],
+      status: t("projects.status.coming"),
+      coming: true,
+    },
+  ];
+
+  return (
+    <section className="mx-auto max-w-4xl px-6 pb-24">
+      <div className="mb-10">
+        <PageTitle className="mb-3">{t("projects.title")}</PageTitle>
+        <p className="text-muted-foreground text-lg">
+          {t("projects.subtitle")}
+        </p>
+      </div>
+
+      <div className="grid gap-4">
+        {PROJECTS.map((project) => (
+          <Link key={project.name} href={project.href}>
+            <Card className="transition-colors hover:border-foreground/20">
+              <CardHeader>
+                <div className="flex items-center justify-between">
+                  <CardTitle className="text-base">{project.name}</CardTitle>
+                  <Badge variant={project.coming ? "outline" : "secondary"}>
+                    {project.status}
+                  </Badge>
+                </div>
+                <CardDescription>{project.description}</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="flex flex-wrap gap-1.5">
+                  {project.tags.map((tag) => (
+                    <Badge key={tag} variant="outline" className="text-xs">
+                      {tag}
+                    </Badge>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          </Link>
+        ))}
+      </div>
+    </section>
+  );
+}

package/src/app/[locale]/(content)/sa/page.tsx

@@ -0,0 +1,179 @@
+import { setRequestLocale } from "next-intl/server";
+import { useTranslations } from "next-intl";
+import { ProjectLayout } from "@/components/project-layout";
+import type { ProjectData } from "@/components/project-layout";
+
+export default async function SAPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+
+  return <SAContent />;
+}
+
+function SAContent() {
+  const t = useTranslations("sa");
+
+  const data: ProjectData = {
+    icon: "/images/fish.png",
+    name: t("name"),
+    description: t("description"),
+    accent: "oklch(0.723 0.219 149)",
+    tags: ["Python", "PostgreSQL", "pgvector", "BGE-M3", "Claude", "Docling"],
+    github: "https://github.com/naeil-dev/sustainability-analyzer",
+
+    overview: t("overview"),
+
+    features: [
+      {
+        icon: "📄",
+        title: t("features.ingest.title"),
+        description: t("features.ingest.desc"),
+      },
+      {
+        icon: "🔍",
+        title: t("features.embed.title"),
+        description: t("features.embed.desc"),
+      },
+      {
+        icon: "🗂️",
+        title: t("features.topics.title"),
+        description: t("features.topics.desc"),
+      },
+      {
+        icon: "📊",
+        title: t("features.assess.title"),
+        description: t("features.assess.desc"),
+      },
+      {
+        icon: "⚖️",
+        title: t("features.compare.title"),
+        description: t("features.compare.desc"),
+      },
+      {
+        icon: "⚡",
+        title: t("features.zeroCost.title"),
+        description: t("features.zeroCost.desc"),
+      },
+    ],
+
+    workflow: {
+      nodes: [
+        {
+          id: "pdf",
+          label: "ESG Reports",
+          type: "source",
+          position: { x: 50, y: 5 },
+          detail: {
+            description: t("workflow.pdf.desc"),
+            tech: ["PDF"],
+            meta: t("workflow.pdf.meta"),
+          },
+        },
+        {
+          id: "docling",
+          label: "Docling Parser",
+          type: "process",
+          position: { x: 50, y: 18 },
+          detail: {
+            description: t("workflow.docling.desc"),
+            tech: ["Docling", "Python"],
+            meta: t("workflow.docling.meta"),
+          },
+        },
+        {
+          id: "chunk",
+          label: "Hierarchical Chunker",
+          type: "process",
+          position: { x: 50, y: 32 },
+          detail: {
+            description: t("workflow.chunk.desc"),
+            tech: ["Parent-Child", "Layout-aware"],
+            meta: t("workflow.chunk.meta"),
+          },
+        },
+        {
+          id: "bgem3",
+          label: "BGE-M3",
+          type: "ai",
+          position: { x: 25, y: 46 },
+          detail: {
+            description: t("workflow.bgem3.desc"),
+            tech: ["FlagEmbedding", "PyTorch"],
+            meta: t("workflow.bgem3.meta"),
+          },
+        },
+        {
+          id: "pgvector",
+          label: "PostgreSQL",
+          type: "storage",
+          position: { x: 75, y: 46 },
+          detail: {
+            description: t("workflow.pgvector.desc"),
+            tech: ["PostgreSQL 17", "pgvector", "Docker"],
+          },
+        },
+        {
+          id: "search",
+          label: "Hybrid Search",
+          type: "process",
+          position: { x: 50, y: 60 },
+          detail: {
+            description: t("workflow.search.desc"),
+            tech: ["Dense", "Sparse", "pgvector"],
+          },
+        },
+        {
+          id: "claude",
+          label: "Claude Sonnet",
+          type: "ai",
+          position: { x: 50, y: 74 },
+          detail: {
+            description: t("workflow.claude.desc"),
+            tech: ["Claude Sonnet", "Anthropic API"],
+            meta: t("workflow.claude.meta"),
+          },
+        },
+        {
+          id: "report",
+          label: "Comparison Report",
+          type: "output",
+          position: { x: 50, y: 90 },
+          detail: {
+            description: t("workflow.report.desc"),
+            tech: ["Jinja2", "HTML"],
+            meta: t("workflow.report.meta"),
+          },
+        },
+      ],
+      edges: [
+        { from: "pdf", to: "docling" },
+        { from: "docling", to: "chunk" },
+        { from: "chunk", to: "bgem3" },
+        { from: "chunk", to: "pgvector" },
+        { from: "bgem3", to: "pgvector" },
+        { from: "pgvector", to: "search" },
+        { from: "search", to: "claude" },
+        { from: "claude", to: "pgvector" },
+        { from: "claude", to: "report" },
+      ],
+    },
+
+    stack: [
+      { icon: "🐍", name: "Python 3.12" },
+      { icon: "🐘", name: "PostgreSQL 17" },
+      { icon: "🧮", name: "pgvector 0.8" },
+      { icon: "🔤", name: "BGE-M3" },
+      { icon: "🧠", name: "Claude Sonnet" },
+      { icon: "📄", name: "Docling" },
+      { icon: "🔥", name: "PyTorch" },
+      { icon: "🐳", name: "Docker Compose" },
+      { icon: "📊", name: "Jinja2" },
+    ],
+  };
+
+  return <ProjectLayout data={data} />;
+}

package/src/app/[locale]/(landing)/page.tsx

@@ -0,0 +1,157 @@
+import { setRequestLocale } from "next-intl/server";
+import { useTranslations } from "next-intl";
+import { Link } from "@/i18n/routing";
+import { Badge } from "@/components/ui/badge";
+import { HeroSection } from "@/components/hero-section";
+import Image from "next/image";
+
+export default async function HubPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+
+  return <HubContent />;
+}
+
+const PROJECTS = [
+  {
+    key: "cc" as const,
+    href: "/cc" as const,
+    icon: "/images/coral.png",
+    accent: "oklch(0.704 0.140 181)",
+    tags: ["Python", "RSS", "AI"],
+    status: "active" as const,
+    featured: true,
+  },
+  {
+    key: "pkm" as const,
+    href: "/pkm" as const,
+    icon: "/images/jellyfish.png",
+    accent: "oklch(0.702 0.183 293)",
+    tags: ["Python", "Embeddings", "Search"],
+    status: "coming" as const,
+    featured: false,
+  },
+  {
+    key: "naeilUi" as const,
+    href: "/design" as const,
+    icon: "/images/whale.png",
+    accent: "oklch(0.623 0.214 259)",
+    tags: ["React", "Tailwind", "OKLCH"],
+    status: "active" as const,
+    featured: false,
+  },
+  {
+    key: "sa" as const,
+    href: "/sa" as const,
+    icon: "/images/fish.png",
+    accent: "oklch(0.723 0.219 149)",
+    tags: ["Python", "pgvector", "Claude"],
+    status: "active" as const,
+    featured: false,
+  },
+  {
+    key: "babyAgent" as const,
+    href: "/baby-agent" as const,
+    icon: "/images/turtle.png",
+    accent: "oklch(0.769 0.188 70.08)",
+    tags: ["LINE", "AI"],
+    status: "coming" as const,
+    featured: false,
+  },
+] as const;
+
+function HubContent() {
+  const t = useTranslations();
+
+  return (
+    <>
+      {/* Hero */}
+      <HeroSection />
+
+      {/* Projects — Bento Grid */}
+      <section className="mx-auto max-w-4xl px-6 py-24">
+        <h2 className="text-foreground mb-2 text-2xl font-bold tracking-tight">
+          {t("projects.title")}
+        </h2>
+        <p className="text-muted-foreground mb-10 text-sm">
+          {t("projects.subtitle")}
+        </p>
+
+        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+          {PROJECTS.map((project) => (
+            <Link
+              key={project.key}
+              href={project.href}
+              className={[
+                "group relative rounded-2xl border border-border-subtle bg-surface-subtle p-7 transition-all duration-250",
+                "hover:-translate-y-0.5 hover:border-border-subtle-hover hover:shadow-[0_8px_32px_rgba(0,0,0,0.08)] dark:hover:shadow-[0_8px_32px_rgba(0,0,0,0.3)]",
+                project.featured ? "sm:col-span-2 sm:flex sm:items-center sm:gap-8" : "",
+              ].join(" ")}
+              style={{ "--accent": project.accent } as React.CSSProperties}
+            >
+              {/* Icon */}
+              <div
+                className={[
+                  "flex shrink-0 items-center justify-center rounded-[14px]",
+                  project.featured
+                    ? "mb-5 h-14 w-14 sm:mb-0 sm:h-20 sm:w-20"
+                    : "mb-5 h-14 w-14",
+                ].join(" ")}
+                style={{
+                  background: `color-mix(in oklch, ${project.accent} 8%, transparent)`,
+                  border: `1px solid color-mix(in oklch, ${project.accent} 20%, transparent)`,
+                }}
+              >
+                <Image
+                  src={project.icon}
+                  alt=""
+                  width={project.featured ? 52 : 36}
+                  height={project.featured ? 52 : 36}
+                  className="object-contain"
+                />
+              </div>
+
+              {/* Text */}
+              <div className={project.featured ? "flex-1" : ""}>
+                <div className="text-foreground mb-1.5 text-[15px] font-semibold">
+                  {t(`projects.${project.key}.name`)}
+                  {project.status === "coming" && (
+                    <Badge
+                      variant="outline"
+                      className="text-muted-foreground ml-2 px-1.5 py-0 text-[9px] align-middle"
+                    >
+                      {t("projects.status.coming")}
+                    </Badge>
+                  )}
+                </div>
+                <p className="text-muted-foreground mb-3 text-[13px] leading-relaxed">
+                  {t(`projects.${project.key}.description`)}
+                </p>
+                <div className="flex flex-wrap gap-1.5">
+                  {project.tags.map((tag) => (
+                    <span
+                      key={tag}
+                      className="rounded-full border border-border-subtle px-2 py-0.5 text-[10px] text-zinc-400"
+                    >
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              </div>
+
+              {/* Arrow */}
+              <span className="text-muted-foreground/40 group-hover:text-foreground absolute right-6 top-6 text-sm transition-colors">
+                ↗
+              </span>
+            </Link>
+          ))}
+        </div>
+      </section>
+
+    </>
+  );
+}

package/src/app/[locale]/layout.tsx

@@ -0,0 +1,72 @@
+import type { Metadata } from "next";
+import { NextIntlClientProvider } from "next-intl";
+import {
+  getMessages,
+  getTranslations,
+  setRequestLocale,
+} from "next-intl/server";
+import { notFound } from "next/navigation";
+import { ThemeProvider } from "@/components/theme-provider";
+import { Toaster } from "@/components/ui/sonner";
+import { NavServerWrapper } from "@/components/nav-server-wrapper";
+import { FooterWrapper } from "@/components/footer-wrapper";
+import { locales, type Locale } from "@/i18n/config";
+
+export function generateStaticParams() {
+  return locales.map((locale) => ({ locale }));
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}): Promise<Metadata> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "common" });
+  return {
+    title: t("appName"),
+    description: "Personal projects by Jay",
+    alternates: {
+      canonical: `https://naeil.dev/${locale}`,
+      languages: {
+        en: "https://naeil.dev/en",
+        ko: "https://naeil.dev/ko",
+        ja: "https://naeil.dev/ja",
+        "x-default": "https://naeil.dev/en",
+      },
+    },
+  };
+}
+
+export default async function LocaleLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+
+  if (!locales.includes(locale as Locale)) {
+    notFound();
+  }
+
+  setRequestLocale(locale);
+  const messages = await getMessages();
+
+  return (
+    <NextIntlClientProvider messages={messages}>
+      <ThemeProvider
+        attribute="class"
+        defaultTheme="dark"
+        enableSystem
+        disableTransitionOnChange
+      >
+        <NavServerWrapper />
+        <main>{children}</main>
+        <FooterWrapper />
+        <Toaster />
+      </ThemeProvider>
+    </NextIntlClientProvider>
+  );
+}

package/src/app/[locale]/login/actions.ts

@@ -0,0 +1,10 @@
+"use server";
+
+import { redirect } from "@/i18n/routing";
+import { createClient } from "@/lib/supabase/server";
+
+export async function logout(locale: string) {
+  const supabase = await createClient();
+  await supabase.auth.signOut();
+  redirect({ href: "/", locale });
+}

package/src/app/[locale]/login/oauth-buttons.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { Button } from "@/components/ui/button";
+import { createClient } from "@/lib/supabase/client";
+
+export function OAuthButtons({ next }: { next?: string }) {
+  const t = useTranslations("auth");
+
+  const handleOAuth = async (provider: "google" | "github") => {
+    const supabase = createClient();
+    await supabase.auth.signInWithOAuth({
+      provider,
+      options: {
+        redirectTo: `${window.location.origin}/auth/callback`,
+      },
+    });
+  };
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Button
+        variant="outline"
+        size="lg"
+        className="w-full"
+        onClick={() => handleOAuth("google")}
+      >
+        <GoogleIcon />
+        {t("loginWithGoogle")}
+      </Button>
+      <Button
+        variant="outline"
+        size="lg"
+        className="w-full"
+        onClick={() => handleOAuth("github")}
+      >
+        <GitHubIcon />
+        {t("loginWithGithub")}
+      </Button>
+    </div>
+  );
+}
+
+function GoogleIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+      <path
+        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"
+        fill="#4285F4"
+      />
+      <path
+        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+        fill="#34A853"
+      />
+      <path
+        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+        fill="#FBBC05"
+      />
+      <path
+        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+        fill="#EA4335"
+      />
+    </svg>
+  );
+}
+
+function GitHubIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+    >
+      <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+    </svg>
+  );
+}