FULL ON WEBSITE REMAKE

src/app/components/AndroidHome.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { useState } from "react";
+import { APPS, APP_BY_ID } from "./apps";
+import Clock from "./Clock";
+import { useTheme } from "./useTheme";
+import { WALLPAPER } from "../data";
+
+const DOCK_IDS = ["projects", "services", "socials", "contributions"];
+
+export default function AndroidHome() {
+  const { theme, toggle } = useTheme();
+  const [openId, setOpenId] = useState<string | null>(null);
+  const openApp = openId ? APP_BY_ID[openId] : null;
+
+  const renderIcon = (appId: string, inDock = false) => {
+    const app = APP_BY_ID[appId];
+    if (!app) return null;
+    return (
+      <button
+        key={app.id}
+        type="button"
+        className={"android-app" + (inDock ? " in-dock" : "")}
+        onClick={() => setOpenId(app.id)}
+      >
+        <span className="android-app-icon" style={{ background: app.color }}>
+          {app.icon}
+        </span>
+        {!inDock && <span className="android-app-label">{app.title}</span>}
+      </button>
+    );
+  };
+
+  return (
+    <div className="android-root">
+      {openApp ? (
+        <div className="android-app-view">
+          <header className="android-appbar">
+            <button
+              type="button"
+              className="android-back"
+              onClick={() => setOpenId(null)}
+              aria-label="Back"
+            >
+              ←
+            </button>
+            <span className="android-appbar-title">{openApp.title}</span>
+          </header>
+          <div className="android-app-body app-surface">{openApp.content}</div>
+        </div>
+      ) : (
+        <div className="android-home" style={{ backgroundImage: `url('${WALLPAPER}')` }}>
+          <div className="android-statusbar">
+            <span className="android-status-time">
+              <Clock />
+            </span>
+            <span className="android-status-icons" aria-hidden="true">
+              ᯤ  ▮
+            </span>
+          </div>
+
+          <button
+            type="button"
+            className="android-theme-chip"
+            onClick={toggle}
+            aria-label={`Switch to ${theme === "skeuo" ? "gruvbox" : "Desktop"} theme`}
+          >
+            <span aria-hidden="true">🎨</span>
+            <span>{theme === "skeuo" ? "Gruvbox" : "Desktop"}</span>
+          </button>
+
+          <div className="android-glance">
+            <div className="android-glance-time">
+              <Clock />
+            </div>
+            <div className="android-glance-sub">dvorakmortonxd.dev</div>
+          </div>
+
+          <div className="android-grid">{APPS.map((app) => renderIcon(app.id))}</div>
+
+          <div className="android-dock">{DOCK_IDS.map((id) => renderIcon(id, true))}</div>
+
+          <div className="android-navbar">
+            <span className="android-navbar-pill" />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}