feat: update global styles and layout with new font and theme support; enhance dashboard header with theme toggle

2026-07-23 15:53:56 +07:00
parent 6b725f31b4
commit 4dbaba7529
5 changed files with 193 additions and 158 deletions
@@ -7,9 +7,9 @@
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
-  --font-sans: var(--font-sans);
+  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
-  --font-heading: var(--font-sans);
+  --font-heading: var(--font-geist-sans);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -49,72 +49,72 @@
 }

 :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);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.87 0 0);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
-  --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);
+  --background: oklch(0.985 0.005 85);
+  --foreground: oklch(0.15 0.025 265);
+  --card: oklch(0.99 0.003 85);
+  --card-foreground: oklch(0.15 0.025 265);
+  --popover: oklch(0.99 0.003 85);
+  --popover-foreground: oklch(0.15 0.025 265);
+  --primary: oklch(0.45 0.13 265);
+  --primary-foreground: oklch(0.985 0.005 85);
+  --secondary: oklch(0.93 0.02 265);
+  --secondary-foreground: oklch(0.25 0.03 265);
+  --muted: oklch(0.95 0.01 265);
+  --muted-foreground: oklch(0.55 0.02 265);
+  --accent: oklch(0.7 0.15 75);
+  --accent-foreground: oklch(0.2 0.02 265);
+  --destructive: oklch(0.6 0.2 25);
+  --border: oklch(0.88 0.015 265);
+  --input: oklch(0.88 0.015 265);
+  --ring: oklch(0.45 0.13 265);
+  --chart-1: oklch(0.7 0.15 75);
+  --chart-2: oklch(0.45 0.13 265);
+  --chart-3: oklch(0.6 0.12 195);
+  --chart-4: oklch(0.5 0.18 330);
+  --chart-5: oklch(0.75 0.1 155);
+  --radius: 0.5rem;
+  --sidebar: oklch(0.98 0.005 85);
+  --sidebar-foreground: oklch(0.15 0.025 265);
+  --sidebar-primary: oklch(0.45 0.13 265);
+  --sidebar-primary-foreground: oklch(0.985 0.005 85);
+  --sidebar-accent: oklch(0.95 0.01 265);
+  --sidebar-accent-foreground: oklch(0.15 0.025 265);
+  --sidebar-border: oklch(0.88 0.015 265);
+  --sidebar-ring: oklch(0.45 0.13 265);
 }

 .dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 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.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.87 0 0);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
-  --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(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
+  --background: oklch(0.13 0.02 265);
+  --foreground: oklch(0.95 0.008 85);
+  --card: oklch(0.17 0.025 265);
+  --card-foreground: oklch(0.95 0.008 85);
+  --popover: oklch(0.17 0.025 265);
+  --popover-foreground: oklch(0.95 0.008 85);
+  --primary: oklch(0.7 0.15 75);
+  --primary-foreground: oklch(0.15 0.02 265);
+  --secondary: oklch(0.22 0.03 265);
+  --secondary-foreground: oklch(0.9 0.01 85);
+  --muted: oklch(0.2 0.02 265);
+  --muted-foreground: oklch(0.6 0.02 265);
+  --accent: oklch(0.6 0.12 195);
+  --accent-foreground: oklch(0.95 0.008 85);
+  --destructive: oklch(0.65 0.2 25);
+  --border: oklch(0.25 0.03 265);
+  --input: oklch(0.25 0.03 265);
+  --ring: oklch(0.7 0.15 75);
+  --chart-1: oklch(0.7 0.15 75);
+  --chart-2: oklch(0.65 0.12 265);
+  --chart-3: oklch(0.6 0.12 195);
+  --chart-4: oklch(0.65 0.15 330);
+  --chart-5: oklch(0.7 0.1 155);
+  --sidebar: oklch(0.15 0.02 265);
+  --sidebar-foreground: oklch(0.95 0.008 85);
+  --sidebar-primary: oklch(0.7 0.15 75);
+  --sidebar-primary-foreground: oklch(0.15 0.02 265);
+  --sidebar-accent: oklch(0.2 0.02 265);
+  --sidebar-accent-foreground: oklch(0.9 0.01 85);
+  --sidebar-border: oklch(0.25 0.03 265);
+  --sidebar-ring: oklch(0.7 0.15 75);
 }

@layer base {
@@ -128,3 +128,14 @@
    @apply font-sans;
  }
 }
+
+/* Signature: glowing "server LED" focus ring */
+.dark *:focus-visible {
+  @apply ring-[3px];
+  outline: none;
+  box-shadow: 0 0 8px oklch(0.7 0.15 75 / 0.3), 0 0 0 3px oklch(0.7 0.15 75 / 0.5);
+}
+html:not(.dark) *:focus-visible {
+  @apply ring-[3px];
+  outline: none;
+}
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
+import { ThemeProvider } from "next-themes";
 import { DashboardHeader } from "@/components/dashboard/header";
 import "./globals.css";

@@ -16,7 +17,7 @@ const geistMono = Geist_Mono({
 export const metadata: Metadata = {
  title: "Asep Haryana Saputra",
  description:
-    "Backend & infrastructure engineer — portfolio, projects, and live monitoring dashboard by Asep Haryana Saputra.",
+    "Teknik Informatika student exploring backend, infrastructure & DevOps — portfolio and projects by Asep Haryana Saputra.",
 };

 export default function RootLayout({
@@ -28,10 +29,13 @@ export default function RootLayout({
    <html
      lang="en"
      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+      suppressHydrationWarning
    >
      <body className="flex min-h-full flex-col bg-background text-foreground">
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
          <DashboardHeader />
          {children}
+        </ThemeProvider>
      </body>
    </html>
  );
@@ -1,6 +1,5 @@
 import {
  ArrowRight,
-  BookOpen,
  Container,
  Cpu,
  Database,
@@ -8,6 +7,7 @@ import {
  GitBranch,
  GitFork,
  HardDrive,
+  Layers,
 } from "lucide-react";

 import { Badge } from "@/components/ui/badge";
@@ -15,13 +15,14 @@ import { buttonVariants } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { cn } from "@/lib/utils";

+// ponytail: static data, fine for a personal portfolio. Move to CMS/content layer if > 50 items.
 const skills = [
  { icon: HardDrive, label: "Backend (Bun, Elysia, Axum)" },
  { icon: Container, label: "Docker & Traefik" },
  { icon: Database, label: "PostgreSQL, Redis, NATS" },
  { icon: Cpu, label: "Rust, TypeScript, Python" },
  { icon: GitBranch, label: "CI/CD, GitHub Actions" },
-  { icon: BookOpen, label: "Dapr, Prometheus, Jaeger" },
+  { icon: Layers, label: "Dapr, Prometheus, Jaeger" },
 ];

 const techTags = [
@@ -50,19 +51,25 @@ const techTags = [
 export default function Home() {
  return (
    <div className="flex flex-1 flex-col">
-      {/* Hero */}
-      <section className="flex flex-col items-center justify-center px-6 py-24 text-center sm:py-32">
-        <div className="mb-6 flex size-14 items-center justify-center rounded-2xl bg-foreground text-xl font-bold text-background">
-          AH
-        </div>
-        <h1 className="max-w-2xl text-4xl font-semibold tracking-tight sm:text-5xl">
-          Asep Haryana Saputra
-        </h1>
-        <p className="mt-3 max-w-lg text-lg text-muted-foreground">
-          Backend &amp; infrastructure engineer who builds distributed systems,
-          RESTful APIs, and production-grade observability stacks.
+      {/* Hero — terminal-inspired */}
+      <section className="relative flex flex-col items-center justify-center overflow-hidden px-6 py-28 text-center sm:py-36">
+        <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_center,oklch(0.45_0.13_265_/_0.06)_0%,transparent_70%)] dark:bg-[radial-gradient(ellipse_at_center,oklch(0.7_0.15_75_/_0.06)_0%,transparent_70%)]" />
+        <div className="relative">
+          <p className="mb-2 font-mono text-xs text-muted-foreground">
+            <span className="text-primary dark:text-primary">~</span> whoami
          </p>
-        <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
+          <h1 className="font-mono text-3xl font-bold tracking-tight sm:text-5xl">
+            <span className="text-muted-foreground">$ </span>
+            Asep Haryana Saputra
+            <span className="inline-block size-2.5 animate-pulse bg-foreground ml-1 rounded-none" />
+          </h1>
+          <p className="mx-auto mt-3 max-w-lg font-mono text-xs text-muted-foreground sm:text-sm">
+            <span className="text-muted-foreground/50"># </span>
+            Teknik Informatika student exploring backend systems, distributed
+            infrastructure, and DevOps — still learning, still building.
+          </p>
+        </div>
+        <div className="relative mt-10 flex flex-wrap items-center justify-center gap-3">
          <a href="#projects" className={cn(buttonVariants({ size: "lg" }))}>
            View Projects
            <ArrowRight className="size-4" />
@@ -79,45 +86,45 @@ export default function Home() {
        </div>
      </section>

-      {/* About */}
-      <section className="mx-auto flex w-full max-w-3xl flex-col gap-8 px-6 pb-24">
-        <Card>
-          <CardHeader>
-            <CardTitle>About</CardTitle>
-          </CardHeader>
-          <CardContent className="text-muted-foreground">
+      {/* Content — staggered sections with alternating visual weight */}
+      <section className="mx-auto flex w-full max-w-3xl flex-col gap-12 px-6 pb-28">
+        {/* About — minimal, just text */}
+        <div>
+          <p className="mb-2 font-mono text-xs text-muted-foreground">
+            <span className="text-primary dark:text-primary">~</span> about
+          </p>
+          <div className="space-y-3 leading-relaxed text-muted-foreground">
            <p>
-              I build backend systems and infrastructure for personal projects,
-              research collaborations, and production deployments. My work spans
-              RESTful API design, container orchestration with Docker &amp;
-              Traefik, distributed tracing with OpenTelemetry &amp; Jaeger, and
-              event-driven architectures on Dapr &amp; NATS.
+              I&rsquo;m a Teknik Informatika student passionate about backend
+              engineering, distributed systems, and infrastructure. I spend my
+              time building RESTful APIs, learning container orchestration with
+              Docker &amp; Traefik, and exploring observability with OpenTelemetry
+              &amp; Jaeger.
            </p>
-            <p className="mt-3">
-              I was the Back-End lead on the ZeaVis Edu capstone team (&quot;AI
-              for Smart Education&quot; by Pijak &times; IBM SkillsBuild), where
-              I designed the system architecture, API contracts, and deployment
-              pipeline for a computer vision-based corn leaf disease detection
-              platform.
+            <p>
+              I was the Back-End lead on the ZeaVis Edu capstone team (&ldquo;AI
+              for Smart Education&rdquo; by Pijak &times; IBM SkillsBuild),
+              a 5-person team with task division across Back-End, Front-End,
+              and Machine Learning. I handled the system architecture, API
+              design, RESTful API development, and Docker deployment on VPS.
            </p>
-          </CardContent>
-        </Card>
+          </div>
+        </div>

-        {/* Skills */}
-        <Card>
-          <CardHeader>
-            <CardTitle>Skills &amp; Tools</CardTitle>
-          </CardHeader>
-          <CardContent>
+        {/* Skills & Tools — grid */}
+        <div>
+          <p className="mb-2 font-mono text-xs text-muted-foreground">
+            <span className="text-primary dark:text-primary">~</span> skills
+          </p>
          <div className="mb-4 grid grid-cols-1 gap-2 sm:grid-cols-2">
            {skills.map((s) => {
              const Icon = s.icon;
              return (
                <div
                  key={s.label}
-                    className="flex items-center gap-2 rounded-lg border border-border px-3 py-2 text-sm"
+                  className="flex items-center gap-3 rounded-lg border border-border bg-card px-3.5 py-2.5 text-sm"
                >
-                    <Icon className="size-4 shrink-0 text-muted-foreground" />
+                  <Icon className="size-4 shrink-0 text-primary dark:text-primary" />
                  <span>{s.label}</span>
                </div>
              );
@@ -127,27 +134,27 @@ export default function Home() {
            {techTags.map((t) => (
              <Badge
                key={t}
-                  variant="secondary"
+                variant="outline"
                className="text-[11px] font-normal"
              >
                {t}
              </Badge>
            ))}
          </div>
-          </CardContent>
-        </Card>
+        </div>

-        {/* Projects */}
-        <div id="projects" className="scroll-mt-20">
-          <h2 className="mb-4 text-xl font-semibold tracking-tight">
-            Featured Project
-          </h2>
-          <Card>
+        {/* Featured Project — elevated */}
+        <div id="projects" className="scroll-mt-24">
+          <p className="mb-2 font-mono text-xs text-muted-foreground">
+            <span className="text-primary dark:text-primary">~</span> featured
+            project
+          </p>
+          <Card className="relative overflow-hidden">
            <CardHeader>
              <div className="flex items-start justify-between gap-4">
                <div>
-                  <CardTitle>ZeaVis Edu</CardTitle>
-                  <p className="mt-1 text-sm text-muted-foreground">
+                  <CardTitle className="text-lg">ZeaVis Edu</CardTitle>
+                  <p className="mt-0.5 text-sm text-muted-foreground">
                    Asisten Edukasi Interaktif untuk Deteksi Penyakit Daun
                    Jagung
                  </p>
@@ -179,19 +186,19 @@ export default function Home() {
              </div>
            </CardHeader>
            <CardContent className="text-sm text-muted-foreground">
-              <p>
+              <p className="mb-4">
                A Computer Vision-powered educational platform that helps
                farmers, agricultural students, and field extension officers
                identify corn leaf diseases by uploading a photo. Built as a
                capstone project for the Pijak &times; IBM SkillsBuild program.
              </p>

-              <div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
-                <div>
-                  <p className="mb-1.5 text-xs font-semibold uppercase tracking-wider">
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                <div className="rounded-lg border border-border bg-muted/30 p-3">
+                  <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-foreground">
                    What it does
                  </p>
-                  <ul className="list-inside list-disc space-y-1 text-muted-foreground">
+                  <ul className="list-inside list-disc space-y-1 text-xs">
                    <li>Upload a photo of a corn leaf</li>
                    <li>
                      AI classifies the disease &mdash; Blight, Rust, Leaf Spot,
@@ -200,14 +207,14 @@ export default function Home() {
                    <li>Get treatment &amp; prevention recommendations</li>
                  </ul>
                </div>
-                <div>
-                  <p className="mb-1.5 text-xs font-semibold uppercase tracking-wider">
+                <div className="rounded-lg border border-border bg-muted/30 p-3">
+                  <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-foreground">
                    My role
                  </p>
-                  <ul className="list-inside list-disc space-y-1 text-muted-foreground">
+                  <ul className="list-inside list-disc space-y-1 text-xs">
                    <li>System architecture &amp; API design</li>
                    <li>RESTful API (Bun + Elysia + Drizzle + PostgreSQL)</li>
-                    <li>Rust inference engine (Axum + ONNX Runtime)</li>
+                    <li>Secure upload handling</li>
                    <li>
                      Docker deployment on VPS with Traefik &amp; Tailscale
                    </li>
@@ -234,7 +241,7 @@ export default function Home() {
                ].map((t) => (
                  <Badge
                    key={t}
-                    variant="outline"
+                    variant="secondary"
                    className="text-[10px] font-normal"
                  >
                    {t}
@@ -245,16 +252,16 @@ export default function Home() {
          </Card>
        </div>

-        {/* Infrastructure CTA */}
-        <Card>
-          <CardContent className="flex flex-col items-center gap-4 py-8 text-center">
+        {/* Infrastructure CTA — clean card */}
+        <Card className="text-center">
+          <CardContent className="flex flex-col items-center gap-4 py-10">
            <p className="text-base font-medium">
              This site doubles as a live infrastructure monitor.
            </p>
            <p className="max-w-md text-sm text-muted-foreground">
              The dashboard tracks Docker services, Traefik request metrics,
-              Prometheus system resources, and Jaeger traces across the
-              deployment.
+              Prometheus system resources, and Jaeger traces — all running on
+              my VPS deployment.
            </p>
            <a href="/dashboard" className={cn(buttonVariants())}>
              Live Dashboard
@@ -1,13 +1,17 @@
 "use client";

+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import type { DashboardData } from "@/lib/dashboard/types";

 export function DashboardHeader() {
  const [degraded, setDegraded] = useState(0);
  const [total, setTotal] = useState(0);
  const [time, setTime] = useState("");
+  const { theme, setTheme } = useTheme();

  useEffect(() => {
    const fetchStatus = async () => {
@@ -74,6 +78,15 @@ export function DashboardHeader() {
              ? `${degraded} degraded`
              : "All Systems Operational"}
        </Badge>
+        <Button
+          variant="ghost"
+          size="icon-xs"
+          onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+          aria-label="Toggle theme"
+        >
+          <Sun className="hidden dark:block!" />
+          <Moon className="block dark:hidden!" />
+        </Button>
        <span className="text-[10px] text-muted-foreground">{time}</span>
      </div>
    </header>
@@ -12,7 +12,7 @@ function Card({
      data-slot="card"
      data-size={size}
      className={cn(
-        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl border border-border bg-card py-(--card-spacing) text-sm text-card-foreground [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
        className,
      )}
      {...props}