From 29c0c8074797ce2303a4b0bfcf509488a4377e77 Mon Sep 17 00:00:00 2001
From: MRMARCABLE <127839985+MRMARCABLE@users.noreply.github.com>
Date: Tue, 10 Nov 2026 09:17:58 +0700
Subject: [PATCH] feat: redesign nav & layout

---
 app/layout.tsx        | 51 +++++++++++++++++++++++++-------
 components/Navbar.tsx | 67 +++++++++++++++++++++++++++++++++++++------
 next.config.ts        | 12 ++++++++
 3 files changed, 111 insertions(+), 19 deletions(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index ea48498..bc61f31 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -14,26 +14,55 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Marca | Personal Portfolio",
-  description: "Informatics Student & Developer Portfolio",
+  title: "Marca | Yohannes Marcel Lalopua — Portfolio",
+  description:
+    "Informatics Student at UKWMS — Web Development, UI/UX, AI Agents & Embedded Systems Portfolio",
 };
 
 export default function RootLayout({ children }: LayoutProps<"/">) {
   return (
     <html
-      lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+      lang="id"
+      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased scroll-smooth`}
     >
-      <body className="min-h-full flex flex-col bg-zinc-950 text-zinc-100">
+      <body className="relative min-h-full flex flex-col bg-zinc-950 text-zinc-100 selection:bg-emerald-500/20 selection:text-emerald-300">
+        {/* Ambient top radial spotlight inspired by ArtCraft */}
+        <div
+          aria-hidden="true"
+          className="pointer-events-none fixed inset-x-0 top-0 -z-10 h-96 bg-[radial-gradient(ellipse_60%_50%_at_50%_-10%,rgba(16,185,129,0.10),transparent)]"
+        />
+
         <Navbar />
-        <main className="flex-1 max-w-3xl w-full mx-auto px-6 py-10">
+
+        <main className="flex-1 max-w-4xl w-full mx-auto px-6 py-12">
           {children}
         </main>
-        <footer className="border-t border-zinc-800 py-6 text-center text-sm text-zinc-500">
-          © 2026 Yohannes Marcel Lalopua —{" "}
-          <a href="https://github.com/" target="_blank" className="text-zinc-300 hover:underline">
-            GitHub
-          </a>
+
+        <footer className="border-t border-zinc-800/80 bg-zinc-950/90 py-8">
+          <div className="max-w-4xl mx-auto px-6 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-zinc-500">
+            <div className="flex items-center gap-2 font-mono">
+              <span className="h-2 w-2 rounded-full bg-emerald-500/80" />
+              <span>© 2026 YOHANNES MARCEL LALOPUA // UKWMS INFORMATICS</span>
+            </div>
+            <div className="flex items-center gap-5 font-mono">
+              <a
+                href="https://github.com/MRMARCABLE"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-zinc-400 hover:text-zinc-100 transition"
+              >
+                GITHUB/MRMARCABLE ↗
+              </a>
+              <a
+                href="https://git-eng.ukwms.ac.id/5803025050"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-zinc-400 hover:text-zinc-100 transition"
+              >
+                GIT-ENG/5803025050 ↗
+              </a>
+            </div>
+          </div>
         </footer>
       </body>
     </html>
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 30cf02b..35b7f86 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -1,15 +1,66 @@
+"use client";
+
 import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+const navItems = [
+  { index: "01", label: "Overview", href: "/" },
+  { index: "02", label: "Projects", href: "/projects" },
+];
 
 export default function Navbar() {
+  const pathname = usePathname();
+
   return (
-    <nav className="border-b border-zinc-800 py-4 px-6">
-      <div className="max-w-3xl mx-auto flex justify-between items-center">
-        <Link href="/" className="font-bold text-lg tracking-tight">Marca.</Link>
-        <div className="flex gap-6 text-sm text-zinc-400">
-          <Link href="/" className="hover:text-white transition">Home</Link>
-          <Link href="/projects" className="hover:text-white transition">Projects</Link>
+    <header className="sticky top-0 z-50 border-b border-zinc-800/80 bg-zinc-950/80 backdrop-blur-md">
+      <nav className="max-w-4xl mx-auto px-6 h-16 flex justify-between items-center">
+        <div className="flex items-center gap-3">
+          <Link
+            href="/"
+            className="group flex items-center gap-2.5 font-semibold tracking-tight text-zinc-100"
+          >
+            <span className="flex h-7 w-7 items-center justify-center rounded border border-zinc-700/80 bg-zinc-900 font-mono text-xs text-emerald-400 group-hover:border-emerald-500/60 transition">
+              M
+            </span>
+            <span className="text-base font-bold tracking-tight">Marca.</span>
+          </Link>
+          <span className="hidden sm:inline-flex items-center gap-1.5 rounded-full border border-zinc-800 bg-zinc-900/70 px-2.5 py-0.5 font-mono text-[11px] text-zinc-400">
+            <span className="h-1.5 w-1.5 rounded-full bg-emerald-400 animate-pulse" />
+            INFORMATICS // UKWMS
+          </span>
         </div>
-      </div>
-    </nav>
+
+        <div className="flex items-center gap-2 sm:gap-3">
+          {navItems.map((item) => {
+            const isActive = pathname === item.href;
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={`px-3 py-1.5 rounded-md text-xs sm:text-sm font-medium transition flex items-center gap-1.5 ${
+                  isActive
+                    ? "bg-zinc-800/90 text-zinc-100 border border-zinc-700/80 shadow-xs"
+                    : "text-zinc-400 hover:text-zinc-200 hover:bg-zinc-900/60 border border-transparent"
+                }`}
+              >
+                <span className="font-mono text-[10px] text-zinc-500">
+                  {item.index}
+                </span>
+                <span>{item.label}</span>
+              </Link>
+            );
+          })}
+
+          <a
+            href="https://github.com/MRMARCABLE"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="hidden md:inline-flex items-center gap-1.5 ml-1 px-3 py-1.5 rounded-md border border-zinc-800 bg-zinc-900/50 font-mono text-xs text-zinc-300 hover:border-zinc-700 hover:text-white transition"
+          >
+            GitHub ↗
+          </a>
+        </div>
+      </nav>
+    </header>
   );
 }
\ No newline at end of file
diff --git a/next.config.ts b/next.config.ts
index bad166a..2fc022b 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -7,6 +7,18 @@ const nextConfig: NextConfig = {
   },
   cacheComponents: true,
   partialPrefetching: true,
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "github.com",
+      },
+      {
+        protocol: "https",
+        hostname: "avatars.githubusercontent.com",
+      },
+    ],
+  },
   turbopack: {
     rules: {
       "*.css": {