wugweb-git · wugweb-git · Apr 15, 2026 · Apr 15, 2026
diff --git a/index.html b/index.html
@@ -1,14 +1,15 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-theme="dark" suppresshydrationwarning="true">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta name="description" content="Identity Prism — adaptive portfolio and hiring copilot for systems architecture, product strategy, and cross-industry execution." />
+    <meta name="theme-color" content="#000000" />
     <link rel="icon" type="image/x-icon" href="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=400&h=400&q=80" />
-    <title>Vedanshu Srivastava</title>
+    <title>Identity Prism</title>
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
-
diff --git a/src/App.tsx b/src/App.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 import { VibeProvider } from './components/VibeProvider';
 import { GlobalNav } from './components/GlobalNav';
+import { ThemeProvider } from './components/ThemeProvider';
 import { TestingDashboard } from './components/TestingDashboard';
 import { AmbientVoicePulse } from './components/AmbientVoicePulse';
 import { MinimalFooter } from './components/MinimalFooter';
@@ -12,15 +13,15 @@ import MediaVault from './components/MediaVault';
 
 const AppLayout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <div className="relative min-h-screen flex flex-col font-sans text-black bg-white overflow-x-hidden selection:bg-nothing-yellow selection:text-black">
+    <div className="relative min-h-[100vh] w-[100vw] flex flex-col font-sans text-primary [background:var(--bg-primary)] overflow-x-hidden selection:[background:var(--accent)] selection:text-black">
       {/* Persistent Ambient Pulse (Offline Tracker & Voice) */}
       <AmbientVoicePulse />
 
       {/* Persistent UI Controls */}
       <TestingDashboard />
 
       {/* Route Content wrapped with proper padding-bottom to avoid overlay collisions */}
-      <main className="flex-1 w-full pb-28 md:pb-32 isolate" role="main">
+      <main className="flex-1 w-[100vw] pb-[18vh] md:pb-[14vh] isolate" role="main" aria-live="polite">
         {children}
         <MinimalFooter />
       </main>
@@ -34,8 +35,9 @@ const AppLayout = ({ children }: { children: React.ReactNode }) => {
 export default function App() {
   return (
     <Router>
-      <VibeProvider>
-        <AppLayout>
+      <ThemeProvider>
+        <VibeProvider>
+          <AppLayout>
           <Routes>
             {/* Environment A: Public Proxy (The Manuscript) */}
             <Route path="/" element={<PublicProxy />} />
@@ -52,8 +54,9 @@ export default function App() {
             {/* Fallback */}
             <Route path="*" element={<Navigate to="/" replace />} />
           </Routes>
-        </AppLayout>
-      </VibeProvider>
+          </AppLayout>
+        </VibeProvider>
+      </ThemeProvider>
     </Router>
   );
 }
diff --git a/src/components/GlobalNav.tsx b/src/components/GlobalNav.tsx
@@ -3,33 +3,38 @@ import { motion, AnimatePresence } from 'framer-motion';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { Layers, User, Zap, Menu, X, Image } from 'lucide-react';
 import { cn } from '../lib/utils';
+import { ThemeToggle } from './ThemeToggle';
 
 export const GlobalNav = () => {
   const [isOpen, setIsOpen] = useState(false);
   const navigate = useNavigate();
   const location = useLocation();
 
   const routes = [
-    { path: '/', label: 'PUBLIC_PROXY', icon: <User size={18} />, color: 'bg-nothing-yellow' },
-    { path: '/owner', label: 'OWNER_HUD', icon: <Zap size={18} />, color: 'bg-black' },
-    { path: '/media', label: 'MEDIA_VAULT', icon: <Image size={18} />, color: 'bg-white text-black' },
-    { path: '/port', label: 'COMPLEXITY_PORT', icon: <Layers size={18} />, color: 'bg-white text-black' },
+    { path: '/', label: 'Public Proxy', icon: <User size={18} /> },
+    { path: '/owner', label: 'Owner Hub', icon: <Zap size={18} /> },
+    { path: '/media', label: 'Media Vault', icon: <Image size={18} /> },
+    { path: '/port', label: 'Complexity Port', icon: <Layers size={18} /> },
   ];
 
   return (
-    <nav className="fixed bottom-8 left-1/2 -translate-x-1/2 z-[100]" aria-label="Global Navigation">
-      <div className="relative">
+    <nav className="fixed bottom-[3vh] left-1/2 -translate-x-1/2 z-[100] w-[92vw] max-w-[28rem]" aria-label="Global navigation" role="navigation">
+      <div className="relative flex justify-center items-center gap-3">
+        <ThemeToggle />
+
         <motion.button
-          whileHover={{ scale: 1.05 }}
-          whileTap={{ scale: 0.95 }}
+          whileHover={{ scale: 1.03 }}
+          whileTap={{ scale: 0.97 }}
           onClick={() => setIsOpen(!isOpen)}
           aria-expanded={isOpen}
           aria-controls="global-nav-menu"
           aria-haspopup="true"
-          aria-label="Toggle Global Navigation"
+          aria-label="Toggle global navigation"
           className={cn(
-            "w-14 h-14 rounded-full flex items-center justify-center shadow-2xl transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-black focus-visible:ring-nothing-yellow",
-            isOpen ? "bg-nothing-yellow text-black" : "bg-black/90 text-white backdrop-blur-xl border border-white/10"
+            'h-[7vh] w-[14vw] min-h-12 min-w-12 max-h-14 max-w-14 rounded-full flex items-center justify-center border transition-colors',
+            isOpen
+              ? 'text-black [background:var(--accent)] [border-color:var(--accent)]'
+              : 'text-primary surface-elevated border-primary'
           )}
         >
           {isOpen ? <X size={24} /> : <Menu size={24} />}
@@ -41,46 +46,39 @@ export const GlobalNav = () => {
           <motion.div
             id="global-nav-menu"
             role="menu"
-            initial={{ opacity: 0, y: 20, scale: 0.9 }}
+            initial={{ opacity: 0, y: 20, scale: 0.96 }}
             animate={{ opacity: 1, y: 0, scale: 1 }}
-            exit={{ opacity: 0, y: 20, scale: 0.9 }}
-            className="absolute bottom-20 left-1/2 -translate-x-1/2 w-[320px] bg-black/90 backdrop-blur-2xl rounded-[2.5rem] p-4 border border-white/10 shadow-[0_20px_50px_rgba(0,0,0,0.5)]"
+            exit={{ opacity: 0, y: 20, scale: 0.96 }}
+            className="absolute bottom-[9vh] left-1/2 -translate-x-1/2 w-[92vw] max-w-[28rem] rounded-[1.5rem] p-[1.2rem] border border-primary surface-elevated"
           >
             <div className="space-y-2">
               {routes.map((route) => {
-                const isActive = location.pathname === route.path || (route.path !== '/' && location.pathname.startsWith(route.path));
+                const isActive =
+                  location.pathname === route.path ||
+                  (route.path !== '/' && location.pathname.startsWith(route.path));
+
                 return (
                   <button
                     key={route.path}
                     role="menuitem"
+                    aria-current={isActive ? 'page' : undefined}
                     onClick={() => {
                       navigate(route.path);
                       setIsOpen(false);
                     }}
                     className={cn(
-                      "w-full flex items-center gap-4 p-4 rounded-[1.5rem] transition-all group relative overflow-hidden focus:outline-none focus-visible:ring-2 focus-visible:ring-nothing-yellow",
-                      isActive ? "bg-white/20 border border-white/30 shadow-[0_0_20px_rgba(255,255,255,0.1)]" : "hover:bg-white/5 border border-transparent"
+                      'w-full flex items-center gap-4 p-4 rounded-xl border transition-all text-left',
+                      isActive
+                        ? 'border-[var(--accent)] [background:var(--accent-muted)] text-primary'
+                        : 'border-transparent hover:[background:var(--state-hover)] text-secondary'
                     )}
                   >
-                    {isActive && (
-                      <motion.div 
-                        layoutId="nav-active"
-                        className="absolute left-0 top-0 bottom-0 w-1 bg-nothing-yellow"
-                      />
-                    )}
-                    <div className={cn("w-10 h-10 rounded-full flex items-center justify-center shrink-0", route.color)}>
+                    <div className={cn('w-10 h-10 rounded-full flex items-center justify-center border', isActive ? 'border-[var(--accent)] text-accent' : 'border-primary text-secondary')}>
                       {route.icon}
                     </div>
                     <div className="flex flex-col items-start">
-                      <span className={cn(
-                        "font-display font-bold text-xs tracking-widest uppercase",
-                        isActive ? "text-white" : "text-white/40 group-hover:text-white/60"
-                      )}>
-                        {route.label}
-                      </span>
-                      {isActive && (
-                        <span className="text-[8px] font-mono text-nothing-yellow uppercase mt-1">Active Environment</span>
-                      )}
+                      <span className="font-semibold text-sm tracking-wide">{route.label}</span>
+                      {isActive && <span className="nothing-dot-matrix text-accent">active</span>}
                     </div>
                   </button>
                 );

diff --git a/src/components/MinimalFooter.tsx b/src/components/MinimalFooter.tsx
@@ -2,14 +2,23 @@ import React from 'react';
 
 export const MinimalFooter = () => {
   return (
-    <footer className="w-full bg-[#0a0a0a] text-white border-t border-white/5 py-8 px-8 md:px-16 flex items-center justify-between mt-auto z-[50]">
-      <div className="font-display font-bold text-2xl tracking-tighter text-[#a8a8a8] select-none">
-        VS
-      </div>
-
-      <div className="flex items-center gap-6 text-[#a8a8a8] font-sans text-sm">
-        <a href="#" className="hover:text-white transition-colors underline decoration-[#a8a8a8]/40 underline-offset-4">Privacy</a>
-        <a href="#" className="hover:text-white transition-colors underline decoration-[#a8a8a8]/40 underline-offset-4">& Terms</a>
+    <footer
+      className="w-[100vw] border-t border-primary py-[2.2vh] px-[4vw] md:px-[6vw] mt-auto z-[50] surface-subtle"
+      role="contentinfo"
+    >
+      <div className="w-full max-w-[92vw] mx-auto flex items-center justify-between gap-4">
+        <div className="font-semibold text-[var(--font-lg)] tracking-tight text-secondary select-none">
+          VS
+        </div>
+
+        <div className="flex items-center gap-[3vw] text-secondary text-sm">
+          <a href="#" className="hover:text-primary transition-colors underline underline-offset-4">
+            Privacy
+          </a>
+          <a href="#" className="hover:text-primary transition-colors underline underline-offset-4">
+            Terms
+          </a>
+        </div>
       </div>
     </footer>
   );