diff --git a/package-lock.json b/package-lock.json
index 666ed29..9b37bea 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "dvorakmortonxd",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "dvorakmortonxd",
-      "version": "2.0.0",
+      "version": "2.1.0",
       "dependencies": {
         "next": "^16.3.5",
         "react": "^19.3.0",
diff --git a/package.json b/package.json
index b805d91..2a92539 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dvorakmortonxd",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",
diff --git a/src/app/components/MobileHome.tsx b/src/app/components/MobileHome.tsx
index 33d1f88..f72f167 100644
--- a/src/app/components/MobileHome.tsx
+++ b/src/app/components/MobileHome.tsx
@@ -10,6 +10,7 @@ import {
 } from "react";
 import { APPS, APP_BY_ID } from "./apps";
 import Clock from "./Clock";
+import { useDragOrder } from "./useDragOrder";
 import { MOBILE_WALLPAPER } from "../data";
 
 const DOCK_IDS = ["projects", "services", "socials", "contributions"];
@@ -59,6 +60,11 @@ export default function MobileHome() {
   const openApp = openId ? APP_BY_ID[openId] : null;
   const closeTimer = useRef<number | null>(null);
 
+  const [gridApps, setGridApps] = useState(APPS);
+  const [dockApps, setDockApps] = useState(() => DOCK_IDS.map((id) => ({ id })));
+  const gridDrag = useDragOrder(setGridApps);
+  const dockDrag = useDragOrder(setDockApps);
+
   const clearCloseTimer = () => {
     if (closeTimer.current !== null) {
       window.clearTimeout(closeTimer.current);
@@ -101,15 +107,24 @@ export default function MobileHome() {
     setOpenId(appId);
   };
 
-  const renderIcon = (appId: string, inDock = false) => {
+  const renderIcon = (appId: string, inDock: boolean, drag: ReturnType<typeof useDragOrder>) => {
     const app = APP_BY_ID[appId];
     if (!app) return null;
     return (
       <button
         key={app.id}
         type="button"
-        className={"mobile-app" + (inDock ? " in-dock" : "")}
-        onClick={(e) => launch(app.id, e)}
+        data-drag-id={app.id}
+        className={
+          "mobile-app" +
+          (inDock ? " in-dock" : "") +
+          (drag.dragId === app.id ? " dragging" : "")
+        }
+        onPointerDown={drag.onPointerDown(app.id)}
+        onClick={(e) => {
+          if (drag.consumeDragged()) return;
+          launch(app.id, e);
+        }}
       >
         <span className="mobile-app-icon">
           <span className="mobile-app-glyph">{app.icon}</span>
@@ -136,8 +151,6 @@ export default function MobileHome() {
         style={{ backgroundImage: `url('${MOBILE_WALLPAPER}')` }}
         aria-hidden={openApp ? true : undefined}
       >
-        <div className="mobile-notch" aria-hidden="true" />
-
         <div className="mobile-statusbar">
           <span className="mobile-status-time">
             <Clock />
@@ -173,10 +186,12 @@ export default function MobileHome() {
 
         <div className="mobile-grid">
           <HomeWidget />
-          {APPS.map((app) => renderIcon(app.id))}
+          {gridApps.map((app) => renderIcon(app.id, false, gridDrag))}
         </div>
 
-        <div className="mobile-dock">{DOCK_IDS.map((id) => renderIcon(id, true))}</div>
+        <div className="mobile-dock">
+          {dockApps.map((d) => renderIcon(d.id, true, dockDrag))}
+        </div>
 
         <div className="mobile-pagedots" aria-hidden="true">
           <span className="active" />
diff --git a/src/app/components/TerminalLayout.tsx b/src/app/components/TerminalLayout.tsx
index 602d792..e48b482 100644
--- a/src/app/components/TerminalLayout.tsx
+++ b/src/app/components/TerminalLayout.tsx
@@ -593,7 +593,7 @@ export default function TerminalLayout() {
         </section>
 
         <footer className="footer">
-          <span className="footer-label">v2.0.0</span>
+          <span className="footer-label">v2.1.0</span>
           © 2025-2026 Martin Dvořák. All rights reserved (not really I dont care, just follow
           the GPL3.0 License)
         </footer>
diff --git a/src/app/components/WinWindow.tsx b/src/app/components/WinWindow.tsx
index b4461a3..ab38de7 100644
--- a/src/app/components/WinWindow.tsx
+++ b/src/app/components/WinWindow.tsx
@@ -21,25 +21,33 @@ interface Props {
   app: AppDef;
   active: boolean;
   closing?: boolean;
+  minimizing?: boolean;
   onFocus: () => void;
   onClose: () => void;
   onCloseAnimationEnd?: () => void;
   onMinimize: () => void;
+  onMinimizeAnimationEnd?: () => void;
   onToggleMaximize: () => void;
   onMove: (x: number, y: number) => void;
+  onResize: (x: number, y: number, w: number, h: number) => void;
 }
 
+const RESIZE_DIRS = ["n", "s", "e", "w", "ne", "nw", "se", "sw"] as const;
+
 export default function WinWindow({
   win,
   app,
   active,
   closing,
+  minimizing,
   onFocus,
   onClose,
   onCloseAnimationEnd,
   onMinimize,
+  onMinimizeAnimationEnd,
   onToggleMaximize,
   onMove,
+  onResize,
 }: Props) {
   const centered = win.centered && !win.maximized;
   const style: CSSProperties = win.maximized
@@ -81,6 +89,64 @@ export default function WinWindow({
     window.addEventListener("pointercancel", handleUp);
   };
 
+  const startResize =
+    (dir: (typeof RESIZE_DIRS)[number]) => (e: ReactPointerEvent<HTMLDivElement>) => {
+      onFocus();
+      if (win.maximized) return;
+      e.preventDefault();
+      e.stopPropagation();
+
+      const node = e.currentTarget.closest(".win-window") as HTMLElement | null;
+      const rect = node?.getBoundingClientRect();
+      const startX = rect ? rect.left : win.x;
+      const startY = rect ? rect.top : win.y;
+      const startW = rect ? rect.width : win.w;
+      const startH = rect ? rect.height : win.h;
+      const px = e.clientX;
+      const py = e.clientY;
+      const minW = 260;
+      const minH = 150;
+
+      const handleMove = (ev: PointerEvent) => {
+        const dx = ev.clientX - px;
+        const dy = ev.clientY - py;
+        let x = startX;
+        let y = startY;
+        let w = startW;
+        let h = startH;
+
+        if (dir.includes("e")) w = startW + dx;
+        if (dir.includes("s")) h = startH + dy;
+        if (dir.includes("w")) {
+          w = startW - dx;
+          x = startX + dx;
+        }
+        if (dir.includes("n")) {
+          h = startH - dy;
+          y = startY + dy;
+        }
+        if (w < minW) {
+          if (dir.includes("w")) x = startX + startW - minW;
+          w = minW;
+        }
+        if (h < minH) {
+          if (dir.includes("n")) y = startY + startH - minH;
+          h = minH;
+        }
+
+        onResize(Math.round(x), Math.round(y), Math.round(w), Math.round(h));
+      };
+      const handleUp = () => {
+        window.removeEventListener("pointermove", handleMove);
+        window.removeEventListener("pointerup", handleUp);
+        window.removeEventListener("pointercancel", handleUp);
+      };
+
+      window.addEventListener("pointermove", handleMove);
+      window.addEventListener("pointerup", handleUp);
+      window.addEventListener("pointercancel", handleUp);
+    };
+
   return (
     <section
       className={
@@ -89,13 +155,15 @@ export default function WinWindow({
         (centered ? " centered" : "") +
         (win.minimized ? " minimized" : "") +
         (win.maximized ? " maximized" : "") +
-        (closing ? " closing" : "")
+        (closing ? " closing" : "") +
+        (minimizing ? " minimizing" : "")
       }
       style={style}
       onPointerDown={onFocus}
       onAnimationEnd={(e) => {
         if (e.target !== e.currentTarget) return;
         if (closing) onCloseAnimationEnd?.();
+        else if (minimizing) onMinimizeAnimationEnd?.();
       }}
       role="dialog"
       aria-label={app.title}
@@ -103,6 +171,17 @@ export default function WinWindow({
       <div className="win-titlebar" onPointerDown={startDrag}>
         <span className="win-titlebar-text">{app.title}</span>
         <div className="win-controls" onPointerDown={(e) => e.stopPropagation()}>
+          {app.url && (
+            <button
+              type="button"
+              className="win-ctl win-ctl-www"
+              onClick={() => window.open(app.url, "_blank", "noopener,noreferrer")}
+              title={`Open ${app.url}`}
+              aria-label="Open website"
+            >
+              www
+            </button>
+          )}
           <button
             type="button"
             className="win-ctl win-ctl-min"
@@ -124,6 +203,18 @@ export default function WinWindow({
         </div>
       </div>
       <div className="win-body app-surface">{app.content}</div>
+
+      {!win.maximized && (
+        <div className="win-resize-layer" aria-hidden="true">
+          {RESIZE_DIRS.map((dir) => (
+            <div
+              key={dir}
+              className={`win-resize win-resize-${dir}`}
+              onPointerDown={startResize(dir)}
+            />
+          ))}
+        </div>
+      )}
     </section>
   );
 }
diff --git a/src/app/components/WindowsDesktop.tsx b/src/app/components/WindowsDesktop.tsx
index 471dedb..fb2d784 100644
--- a/src/app/components/WindowsDesktop.tsx
+++ b/src/app/components/WindowsDesktop.tsx
@@ -1,37 +1,46 @@
 "use client";
 
-import { useRef, useState } from "react";
+import { useRef, useState, type ReactNode } from "react";
 import Image from "next/image";
-import { APPS, APP_BY_ID } from "./apps";
+import { APPS, APP_BY_ID, createWebsiteApp, type AppDef } from "./apps";
 import WinWindow, { type WinState } from "./WinWindow";
 import Clock from "./Clock";
 import { useTheme } from "./useTheme";
+import { useDragOrder } from "./useDragOrder";
 import { WALLPAPER, friends } from "../data";
 
 const TASKBAR_HEIGHT = 48;
 
 const LEFT_APPS = APPS.filter((a) => a.id !== "services" && a.id !== "friends");
 
-const SERVICE_SHORTCUTS: {
+interface Shortcut {
   id: string;
-  icon: string;
+  icon: ReactNode;
   label: string;
+  color: string;
   url?: string;
   appId?: string;
-}[] = [
-  { id: "svc-proxmox", icon: "🖥️", label: "Proxmox", appId: "alacritty" },
-  { id: "svc-ai", icon: "🦾", label: "Llama.cpp", url: "https://ai.dvorakmortonxd.dev/" },
-  { id: "svc-jellyfin", icon: "🎬", label: "Jellyfin", url: "https://jelly.dvorakmortonxd.dev/" },
-  { id: "svc-smp", icon: "🎮", label: "SMP", url: "https://discord.gg/vyvhk7d8bX" },
-  { id: "svc-navidrome", icon: "🎸", label: "Navidrome", url: "https://navidrome.dvorakmortonxd.dev/" },
-  { id: "svc-gitdxd", icon: "🐙", label: "GitDXD", url: "https://git.dvorakmortonxd.dev" },
+  desc?: string;
+  image?: string;
+}
+
+const SERVICE_SHORTCUTS: Shortcut[] = [
+  { id: "svc-proxmox", icon: "🖥️", label: "Proxmox", appId: "alacritty", color: "#1257a0", desc: "Server Management" },
+  { id: "svc-ai", icon: "🦾", label: "Llama.cpp", url: "https://ai.dvorakmortonxd.dev/", color: "#157347", desc: "Local AI Server" },
+  { id: "svc-jellyfin", icon: "🎬", label: "Jellyfin", url: "https://jelly.dvorakmortonxd.dev/", color: "#6a4fb3", desc: "Local Media Server" },
+  { id: "svc-smp", icon: "🎮", label: "SMP", url: "https://discord.gg/vyvhk7d8bX", color: "#c0392b", desc: "My Survival Minecraft Server" },
+  { id: "svc-navidrome", icon: "🎸", label: "Navidrome", url: "https://navidrome.dvorakmortonxd.dev/", color: "#b3005f", desc: "Music Streaming" },
+  { id: "svc-gitdxd", icon: "🐙", label: "GitDXD", url: "https://git.dvorakmortonxd.dev", color: "#6a4fb3", desc: "Best Git Hosting OAT" },
 ];
 
-const FRIEND_SHORTCUTS = friends.map((f, i) => ({
+const FRIEND_SHORTCUTS: Shortcut[] = friends.map((f, i) => ({
   id: `friend-${i}`,
   label: f.name,
   url: f.realUrl || f.url,
-  img: f.img,
+  color: "#c0392b",
+  icon: "🫂",
+  image: f.img,
+  desc: f.desc,
 }));
 
 export default function WindowsDesktop() {
@@ -56,6 +65,18 @@ export default function WindowsDesktop() {
   const [startClosing, setStartClosing] = useState(false);
   const [selectedIcon, setSelectedIcon] = useState<string | null>(null);
   const [closingIds, setClosingIds] = useState<number[]>([]);
+  const [minimizingIds, setMinimizingIds] = useState<number[]>([]);
+
+  const [leftApps, setLeftApps] = useState(LEFT_APPS);
+  const [serviceItems, setServiceItems] = useState(SERVICE_SHORTCUTS);
+  const [friendItems, setFriendItems] = useState(FRIEND_SHORTCUTS);
+
+  const leftDrag = useDragOrder(setLeftApps);
+  const serviceDrag = useDragOrder(setServiceItems);
+  const friendDrag = useDragOrder(setFriendItems);
+
+  const [dynamicApps, setDynamicApps] = useState<Record<string, AppDef>>({});
+  const getApp = (id: string): AppDef | undefined => APP_BY_ID[id] ?? dynamicApps[id];
 
   const idRef = useRef(2);
   const zRef = useRef(11);
@@ -78,9 +99,9 @@ export default function WindowsDesktop() {
     }
   };
 
-  const openApp = (appId: string) => {
+  const openAppDef = (app: AppDef) => {
     if (startOpen) setStartClosing(true);
-    const existing = wins.find((w) => w.appId === appId);
+    const existing = wins.find((w) => w.appId === app.id);
     if (existing) {
       setWins((prev) =>
         prev.map((w) =>
@@ -90,8 +111,6 @@ export default function WindowsDesktop() {
       setActiveId(existing.id);
       return;
     }
-    const app = APP_BY_ID[appId];
-    if (!app) return;
     const id = idRef.current++;
     const vw = window.innerWidth;
     const vh = window.innerHeight - TASKBAR_HEIGHT;
@@ -104,7 +123,7 @@ export default function WindowsDesktop() {
       ...prev,
       {
         id,
-        appId,
+        appId: app.id,
         x,
         y,
         w: app.width,
@@ -118,6 +137,35 @@ export default function WindowsDesktop() {
     setActiveId(id);
   };
 
+  const openApp = (appId: string) => {
+    const app = getApp(appId);
+    if (app) openAppDef(app);
+  };
+
+  // Service and friend shortcuts either open an app (Proxmox) or an in-desktop
+  // window representing the external website, with a www button to actually go
+  // there.
+  const openShortcut = (s: Shortcut) => {
+    if (s.appId) {
+      openApp(s.appId);
+      return;
+    }
+    if (!s.url) return;
+    const id = `web:${s.url}`;
+    const app =
+      getApp(id) ??
+      createWebsiteApp({
+        id,
+        title: s.label,
+        url: s.url,
+        desc: s.desc,
+        icon: s.icon,
+        image: s.image,
+      });
+    setDynamicApps((prev) => (prev[id] ? prev : { ...prev, [id]: app }));
+    openAppDef(app);
+  };
+
   const closeStart = () => {
     if (startOpen && !startClosing) setStartClosing(true);
   };
@@ -140,8 +188,13 @@ export default function WindowsDesktop() {
     setWins((prev) => prev.filter((w) => w.id !== id));
     setClosingIds((prev) => prev.filter((x) => x !== id));
   };
+  // Minimize plays the same animation as closing, then hides the window.
   const minimizeWin = (id: number) =>
+    setMinimizingIds((prev) => (prev.includes(id) ? prev : [...prev, id]));
+  const finishMinimize = (id: number) => {
     setWins((prev) => prev.map((w) => (w.id === id ? { ...w, minimized: true } : w)));
+    setMinimizingIds((prev) => prev.filter((x) => x !== id));
+  };
   const toggleMax = (id: number) =>
     setWins((prev) =>
       prev.map((w) => (w.id === id ? { ...w, maximized: !w.maximized } : w))
@@ -162,6 +215,11 @@ export default function WindowsDesktop() {
       )
     );
   };
+  const resizeWin = (id: number, x: number, y: number, w: number, h: number) => {
+    setWins((prev) =>
+      prev.map((win) => (win.id === id ? { ...win, centered: false, x, y, w, h } : win))
+    );
+  };
 
   const taskbarClick = (w: WinState) => {
     if (w.minimized) {
@@ -178,6 +236,11 @@ export default function WindowsDesktop() {
 
   const wallpaper = `url('${WALLPAPER}')`;
 
+  const iconClick = (drag: ReturnType<typeof useDragOrder>, id: string, action: () => void) => {
+    if (drag.consumeDragged()) return;
+    activateIcon(id, action);
+  };
+
   return (
     <div
       className="win-desktop"
@@ -193,12 +256,18 @@ export default function WindowsDesktop() {
 
       {/* Desktop icons */}
       <div className="win-icons" onPointerDown={(e) => e.stopPropagation()}>
-        {LEFT_APPS.map((app) => (
+        {leftApps.map((app) => (
           <button
             key={app.id}
             type="button"
-            className={"win-icon" + (selectedIcon === app.id ? " selected" : "")}
-            onClick={() => activateIcon(app.id, () => openApp(app.id))}
+            data-drag-id={app.id}
+            className={
+              "win-icon" +
+              (selectedIcon === app.id ? " selected" : "") +
+              (leftDrag.dragId === app.id ? " dragging" : "")
+            }
+            onPointerDown={leftDrag.onPointerDown(app.id)}
+            onClick={() => iconClick(leftDrag, app.id, () => openApp(app.id))}
             title={`Open ${app.title}`}
           >
             <span className="win-icon-glyph" style={{ background: app.color }}>
@@ -214,19 +283,19 @@ export default function WindowsDesktop() {
         className="win-icons win-icons-tr"
         onPointerDown={(e) => e.stopPropagation()}
       >
-        {SERVICE_SHORTCUTS.map((s) => (
+        {serviceItems.map((s) => (
           <button
             key={s.id}
             type="button"
-            className={"win-icon" + (selectedIcon === s.id ? " selected" : "")}
-            title={s.label}
-            onClick={() =>
-              activateIcon(s.id, () =>
-                s.appId
-                  ? openApp(s.appId)
-                  : window.open(s.url, "_blank", "noopener,noreferrer")
-              )
+            data-drag-id={s.id}
+            className={
+              "win-icon" +
+              (selectedIcon === s.id ? " selected" : "") +
+              (serviceDrag.dragId === s.id ? " dragging" : "")
             }
+            onPointerDown={serviceDrag.onPointerDown(s.id)}
+            title={s.label}
+            onClick={() => iconClick(serviceDrag, s.id, () => openShortcut(s))}
           >
             <span className="win-icon-glyph">{s.icon}</span>
             <span className="win-icon-label">{s.label}</span>
@@ -239,20 +308,24 @@ export default function WindowsDesktop() {
         className="win-icons win-icons-br"
         onPointerDown={(e) => e.stopPropagation()}
       >
-        {FRIEND_SHORTCUTS.map((f) => (
+        {friendItems.map((f) => (
           <button
             key={f.id}
             type="button"
-            className={"win-icon" + (selectedIcon === f.id ? " selected" : "")}
-            title={f.label}
-            onClick={() =>
-              activateIcon(f.id, () =>
-                window.open(f.url, "_blank", "noopener,noreferrer")
-              )
+            data-drag-id={f.id}
+            className={
+              "win-icon" +
+              (selectedIcon === f.id ? " selected" : "") +
+              (friendDrag.dragId === f.id ? " dragging" : "")
             }
+            onPointerDown={friendDrag.onPointerDown(f.id)}
+            title={f.label}
+            onClick={() => iconClick(friendDrag, f.id, () => openShortcut(f))}
           >
             <span className="win-icon-glyph">
-              <Image src={f.img} alt={f.label} width={38} height={38} className="win-icon-img" />
+              {f.image && (
+                <Image src={f.image} alt={f.label} width={38} height={38} className="win-icon-img" />
+              )}
             </span>
             <span className="win-icon-label">{f.label}</span>
           </button>
@@ -265,15 +338,18 @@ export default function WindowsDesktop() {
           <WinWindow
             key={w.id}
             win={w}
-            app={APP_BY_ID[w.appId]}
+            app={getApp(w.appId) ?? APP_BY_ID.welcome}
             active={activeId === w.id}
             closing={closingIds.includes(w.id)}
+            minimizing={minimizingIds.includes(w.id)}
             onFocus={() => focus(w.id)}
             onClose={() => closeWin(w.id)}
             onCloseAnimationEnd={() => finishClose(w.id)}
             onMinimize={() => minimizeWin(w.id)}
+            onMinimizeAnimationEnd={() => finishMinimize(w.id)}
             onToggleMaximize={() => toggleMax(w.id)}
             onMove={(x, y) => moveWin(w.id, x, y)}
+            onResize={(x, y, width, height) => resizeWin(w.id, x, y, width, height)}
           />
         ))}
       </div>
@@ -294,7 +370,7 @@ export default function WindowsDesktop() {
           <div className="kickoff-content">
             <div className="kickoff-section-title">Applications</div>
             <div className="kickoff-list">
-              {LEFT_APPS.map((app) => (
+              {leftApps.map((app) => (
                 <button
                   key={app.id}
                   type="button"
@@ -305,49 +381,37 @@ export default function WindowsDesktop() {
                   <span className="kickoff-label">{app.title}</span>
                 </button>
               ))}
-              {SERVICE_SHORTCUTS.map((s) =>
-                s.appId ? (
-                  <button
-                    key={s.id}
-                    type="button"
-                    className="kickoff-item"
-                    onClick={() => openApp(s.appId as string)}
-                  >
-                    <span className="kickoff-icon">{s.icon}</span>
-                    <span className="kickoff-label">{s.label}</span>
-                  </button>
-                ) : (
-                  <a
-                    key={s.id}
-                    className="kickoff-item"
-                    href={s.url}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <span className="kickoff-icon">{s.icon}</span>
-                    <span className="kickoff-label">{s.label}</span>
-                  </a>
-                )
-              )}
-              {FRIEND_SHORTCUTS.map((f) => (
-                <a
-                  key={f.id}
+              {serviceItems.map((s) => (
+                <button
+                  key={s.id}
+                  type="button"
                   className="kickoff-item"
-                  href={f.url}
-                  target="_blank"
-                  rel="noopener noreferrer"
+                  onClick={() => openShortcut(s)}
+                >
+                  <span className="kickoff-icon">{s.icon}</span>
+                  <span className="kickoff-label">{s.label}</span>
+                </button>
+              ))}
+              {friendItems.map((f) => (
+                <button
+                  key={f.id}
+                  type="button"
+                  className="kickoff-item"
+                  onClick={() => openShortcut(f)}
                 >
                   <span className="kickoff-icon">
-                    <Image
-                      src={f.img}
-                      alt={f.label}
-                      width={20}
-                      height={20}
-                      className="kickoff-icon-img"
-                    />
+                    {f.image && (
+                      <Image
+                        src={f.image}
+                        alt={f.label}
+                        width={20}
+                        height={20}
+                        className="kickoff-icon-img"
+                      />
+                    )}
                   </span>
                   <span className="kickoff-label">{f.label}</span>
-                </a>
+                </button>
               ))}
             </div>
           </div>
@@ -370,7 +434,7 @@ export default function WindowsDesktop() {
 
         <div className="win-tb-buttons">
           {wins.map((w) => {
-            const app = APP_BY_ID[w.appId];
+            const app = getApp(w.appId) ?? APP_BY_ID.welcome;
             return (
               <button
                 key={w.id}
diff --git a/src/app/components/apps.tsx b/src/app/components/apps.tsx
index fe76fe7..263d9dc 100644
--- a/src/app/components/apps.tsx
+++ b/src/app/components/apps.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import Image from "next/image";
-import type { ReactNode } from "react";
+import { useEffect, useRef, useState, type KeyboardEvent as ReactKeyboardEvent, type ReactNode } from "react";
 import {
   socials,
   codingProjects,
@@ -18,10 +18,12 @@ import { setTheme } from "./useTheme";
 export interface AppDef {
   id: string;
   title: string;
-  icon: string;
+  icon: ReactNode;
   color: string;
   width: number;
   height: number;
+  /** When set the app represents an external website: a www button opens it. */
+  url?: string;
   content: ReactNode;
 }
 
@@ -406,20 +408,205 @@ const SIKE_ART = [
   "▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀    ▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀  ▀▀▀▀▀▀▀▀    ▀▀▀▀▀▀▀▀▀▀▀▀▀▀",
 ].join("\n");
 
-function SikeTerminal() {
+const TERMINAL_FILES: Record<string, string> = {
+  "about_me.md":
+    "Hey, I'm Martin Dvorak, a 17 year old IT student from the Czech Republic.\nI self-host way too many things and tinker with GNU/Linux.",
+  "now.txt":
+    "Currently hosting an SMP and building an education app with Pepa.",
+  "resume.txt":
+    "sssvt.cz - network management & administration (2025-)\nGentoo, SwayFX, RustyWolf, dxdwm, Revival Inc.",
+};
+
+const NEOFETCH = [
+  "      .-/+oossssoo+/-.        martin@gentoo",
+  "  `:+ssssssssssssssssss+:`    ------------",
+  "-+ssssssssssssssssssyyssss+-  OS: Gentoo Linux x86_64",
+  ".ossssssssssssssssssdMMMNysssso  Kernel: 6.6.21-gentoo",
+  ":sssssssssssssssssssssssssss+  Shell: bash 5.2.21",
+  " osssssssssssssssssssssssso  DE: Plasma (web)",
+  "  /ssssssssssssssssssssss+/   Terminal: Alacritty",
+  "   `:+sssssssssssssssss+:`    CPU: Ryzen 5 3600",
+  "       .-/+oossssoo+/-.       GPU: RX 580 8GB",
+].join("\n");
+
+function Terminal() {
+  const [lines, setLines] = useState<{ id: number; kind: "in" | "out" | "art"; text: string }[]>([
+    { id: 0, kind: "out", text: "Type 'help' for a list of commands." },
+  ]);
+  const [input, setInput] = useState("");
+  const [history, setHistory] = useState<string[]>([]);
+  const [histIndex, setHistIndex] = useState<number | null>(null);
+  const idRef = useRef(1);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const bodyRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  useEffect(() => {
+    bodyRef.current?.scrollTo({ top: bodyRef.current.scrollHeight });
+  }, [lines]);
+
+  const push = (next: { kind: "in" | "out" | "art"; text: string }[]) => {
+    setLines((prev) => [...prev, ...next.map((l) => ({ ...l, id: idRef.current++ }))]);
+  };
+
+  const run = (raw: string) => {
+    const cmd = raw.trim();
+    if (!cmd) {
+      push([{ kind: "in", text: "$" }]);
+      return;
+    }
+    setHistory((h) => [...h, cmd]);
+    setHistIndex(null);
+
+    const output: { kind: "in" | "out" | "art"; text: string }[] = [
+      { kind: "in", text: `$ ${cmd}` },
+    ];
+    const [name, ...args] = cmd.split(/\s+/);
+
+    switch (name) {
+      case "help":
+        output.push({
+          kind: "out",
+          text: "Available: help, ls, cat, echo, whoami, pwd, date, uname, neofetch, history, clear, ssh, sudo, emerge, exit",
+        });
+        break;
+      case "ls":
+        output.push({ kind: "out", text: "about_me.md  now.txt  resume.txt  projects/  services/" });
+        break;
+      case "cat": {
+        const file = args[0];
+        if (!file) output.push({ kind: "out", text: "cat: missing operand" });
+        else if (TERMINAL_FILES[file]) output.push({ kind: "out", text: TERMINAL_FILES[file] });
+        else output.push({ kind: "out", text: `cat: ${file}: No such file or directory` });
+        break;
+      }
+      case "echo":
+        output.push({ kind: "out", text: args.join(" ") });
+        break;
+      case "whoami":
+        output.push({ kind: "out", text: "martin" });
+        break;
+      case "pwd":
+        output.push({ kind: "out", text: "/home/martin" });
+        break;
+      case "date":
+        output.push({ kind: "out", text: new Date().toString() });
+        break;
+      case "uname":
+        output.push({
+          kind: "out",
+          text: args.includes("-a")
+            ? "Linux gentoo 6.6.21-gentoo #1 SMP PREEMPT_DYNAMIC x86_64 GNU/Linux"
+            : "Linux",
+        });
+        break;
+      case "neofetch":
+        output.push({ kind: "art", text: NEOFETCH });
+        break;
+      case "history":
+        output.push({
+          kind: "out",
+          text:
+            history.map((h, i) => `${String(i + 1).padStart(4)}  ${h}`).join("\n") ||
+            "(no history yet)",
+        });
+        break;
+      case "clear":
+        setLines([]);
+        return;
+      case "ssh":
+        output.push({ kind: "out", text: "Connecting to host..." });
+        output.push({ kind: "art", text: SIKE_ART });
+        break;
+      case "sudo":
+        output.push({
+          kind: "out",
+          text: "martin is not in the sudoers file. This incident has been reported.",
+        });
+        break;
+      case "emerge":
+        output.push({
+          kind: "out",
+          text: args.length
+            ? `Calculating dependencies... done!\n>>> Emerging (1 of 1) ${args.join(" ")}`
+            : "emerge: no packages specified",
+        });
+        break;
+      case "cd":
+        output.push({ kind: "out", text: "" });
+        break;
+      case "exit":
+        output.push({ kind: "out", text: "logout" });
+        break;
+      default:
+        output.push({ kind: "out", text: `bash: ${name}: command not found` });
+    }
+
+    push(output);
+  };
+
+  const onKeyDown = (e: ReactKeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      const value = input;
+      setInput("");
+      run(value);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      if (!history.length) return;
+      const next = histIndex === null ? history.length - 1 : Math.max(0, histIndex - 1);
+      setHistIndex(next);
+      setInput(history[next]);
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      if (histIndex === null) return;
+      const next = histIndex + 1;
+      if (next >= history.length) {
+        setHistIndex(null);
+        setInput("");
+      } else {
+        setHistIndex(next);
+        setInput(history[next]);
+      }
+    } else if (e.ctrlKey && e.key === "l") {
+      e.preventDefault();
+      setLines([]);
+    }
+  };
+
   return (
-    <div className="alacritty">
-      <div className="alacritty-line">
+    <div
+      className="alacritty"
+      ref={bodyRef}
+      onClick={() => inputRef.current?.focus()}
+    >
+      {lines.map((line) => (
+        <div key={line.id} className="alacritty-line">
+          {line.kind === "art" ? (
+            <pre className="alacritty-art">{line.text}</pre>
+          ) : (
+            <span className={line.kind === "in" ? "alacritty-cmd" : "alacritty-out-text"}>
+              {line.text}
+            </span>
+          )}
+        </div>
+      ))}
+      <div className="alacritty-line alacritty-inputline">
         <span className="alacritty-prompt">martin@gentoo</span>
         <span className="alacritty-path"> ~ </span>
-        <span className="alacritty-cmd">$ ssh root@proxmox.dvorakmortonxd.dev</span>
-      </div>
-      <pre className="alacritty-art">{SIKE_ART}</pre>
-      <div className="alacritty-line">
-        <span className="alacritty-prompt">martin@gentoo</span>
-        <span className="alacritty-path"> ~ </span>
-        <span className="alacritty-cmd">$ </span>
-        <span className="alacritty-cursor" aria-hidden="true" />
+        <span className="alacritty-cmd">$&nbsp;</span>
+        <input
+          ref={inputRef}
+          className="alacritty-input"
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={onKeyDown}
+          spellCheck={false}
+          autoComplete="off"
+          aria-label="Terminal input"
+        />
       </div>
     </div>
   );
@@ -432,9 +619,72 @@ export const ALACRITTY_APP: AppDef = {
   color: "#1d1f21",
   width: 760,
   height: 440,
-  content: <SikeTerminal />,
+  content: <Terminal />,
 };
 
+function WebsiteApp({
+  title,
+  url,
+  desc,
+  icon,
+  image,
+}: {
+  title: string;
+  url: string;
+  desc?: string;
+  icon?: ReactNode;
+  image?: string;
+}) {
+  return (
+    <div className="app-pad app-center website-app">
+      <div className="website-app-icon">
+        {image ? (
+          <Image src={image} alt={title} width={84} height={84} className="website-app-img" />
+        ) : (
+          <span className="website-app-emoji">{icon ?? "🌐"}</span>
+        )}
+      </div>
+      <h2 className="app-h1">{title}</h2>
+      {desc && <p className="app-h2">{desc}</p>}
+      <p className="app-text">
+        This icon opens an external website. Use the <strong>www</strong> button in the title
+        bar (or the link below) to open it in a new tab.
+      </p>
+      <a className="website-app-link" href={url} target="_blank" rel="noopener noreferrer">
+        {url}
+      </a>
+    </div>
+  );
+}
+
+export function createWebsiteApp(opts: {
+  id: string;
+  title: string;
+  url: string;
+  desc?: string;
+  icon?: ReactNode;
+  image?: string;
+}): AppDef {
+  return {
+    id: opts.id,
+    title: opts.title,
+    icon: opts.icon ?? "🌐",
+    color: "#0a7cc1",
+    width: 620,
+    height: 440,
+    url: opts.url,
+    content: (
+      <WebsiteApp
+        title={opts.title}
+        url={opts.url}
+        desc={opts.desc}
+        icon={opts.icon}
+        image={opts.image}
+      />
+    ),
+  };
+}
+
 export const APPS: AppDef[] = [
   { id: "welcome", title: "Welcome", icon: "👋", color: "#2f7fc4", width: 620, height: 430, content: <WelcomeApp /> },
   { id: "about", title: "About Me", icon: "🧑‍💻", color: "#0d5aa7", width: 720, height: 470, content: <AboutApp /> },
diff --git a/src/app/components/useDragOrder.ts b/src/app/components/useDragOrder.ts
new file mode 100644
index 0000000..11f6061
--- /dev/null
+++ b/src/app/components/useDragOrder.ts
@@ -0,0 +1,83 @@
+"use client";
+
+import {
+  useRef,
+  useState,
+  type Dispatch,
+  type PointerEvent as ReactPointerEvent,
+  type SetStateAction,
+} from "react";
+
+/**
+ * Pointer-based reordering for a list of items rendered with
+ * `data-drag-id={item.id}`. Dragging an item over another swaps them. Works
+ * with both mouse and touch.
+ *
+ * The click that follows a drag is swallowed via `consumeDragged()` so tapping
+ * still launches the icon while dragging only rearranges it.
+ */
+export function useDragOrder<T extends { id: string }>(
+  setItems: Dispatch<SetStateAction<T[]>>
+) {
+  const [dragId, setDragId] = useState<string | null>(null);
+  const suppressRef = useRef(false);
+
+  const onPointerDown = (id: string) => (e: ReactPointerEvent) => {
+    if (e.pointerType === "mouse" && e.button !== 0) return;
+    const startX = e.clientX;
+    const startY = e.clientY;
+    let active = false;
+
+    const move = (ev: PointerEvent) => {
+      if (!active) {
+        if (Math.hypot(ev.clientX - startX, ev.clientY - startY) < 8) return;
+        active = true;
+        suppressRef.current = true;
+        setDragId(id);
+      }
+
+      const el = document.elementFromPoint(ev.clientX, ev.clientY) as HTMLElement | null;
+      const target = el?.closest<HTMLElement>("[data-drag-id]");
+      const overId = target?.dataset.dragId;
+      if (!overId || overId === id) return;
+
+      setItems((prev) => {
+        const from = prev.findIndex((x) => x.id === id);
+        const to = prev.findIndex((x) => x.id === overId);
+        if (from < 0 || to < 0 || from === to) return prev;
+        const next = prev.slice();
+        const [moved] = next.splice(from, 1);
+        next.splice(to, 0, moved);
+        return next;
+      });
+    };
+
+    const up = () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+      window.removeEventListener("pointercancel", up);
+      setDragId(null);
+      if (active) {
+        active = false;
+        window.setTimeout(() => {
+          suppressRef.current = false;
+        }, 300);
+      }
+    };
+
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+    window.addEventListener("pointercancel", up);
+  };
+
+  /** Returns true (once) when a drag just happened, so the click is ignored. */
+  const consumeDragged = () => {
+    if (suppressRef.current) {
+      suppressRef.current = false;
+      return true;
+    }
+    return false;
+  };
+
+  return { onPointerDown, dragId, consumeDragged };
+}
diff --git a/src/app/skeuo.css b/src/app/skeuo.css
index 96ca40f..ab9fee0 100644
--- a/src/app/skeuo.css
+++ b/src/app/skeuo.css
@@ -99,6 +99,10 @@ html[data-device="phone"] .skeuo-mobile-root { display: block; }
   background: rgba(61, 174, 233, 0.16);
   border-color: rgba(61, 174, 233, 0.4);
 }
+.win-icon.dragging {
+  opacity: 0.55;
+  border-color: rgba(61, 174, 233, 0.8);
+}
 .win-icon-glyph {
   width: 48px;
   height: 48px;
@@ -196,6 +200,78 @@ a.win-icon {
   animation: winClose 0.14s ease-in forwards;
   pointer-events: none;
 }
+.win-window.minimizing {
+  animation: winClose 0.14s ease-in forwards;
+  pointer-events: none;
+}
+
+/* Resize handles */
+.win-resize-layer {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+.win-resize {
+  position: absolute;
+  pointer-events: auto;
+  z-index: 6;
+}
+.win-resize-n {
+  top: 0;
+  left: 8px;
+  right: 8px;
+  height: 5px;
+  cursor: ns-resize;
+}
+.win-resize-s {
+  bottom: 0;
+  left: 8px;
+  right: 8px;
+  height: 5px;
+  cursor: ns-resize;
+}
+.win-resize-e {
+  right: 0;
+  top: 8px;
+  bottom: 8px;
+  width: 5px;
+  cursor: ew-resize;
+}
+.win-resize-w {
+  left: 0;
+  top: 8px;
+  bottom: 8px;
+  width: 5px;
+  cursor: ew-resize;
+}
+.win-resize-ne {
+  top: 0;
+  right: 0;
+  width: 12px;
+  height: 12px;
+  cursor: nesw-resize;
+}
+.win-resize-nw {
+  top: 0;
+  left: 0;
+  width: 12px;
+  height: 12px;
+  cursor: nwse-resize;
+}
+.win-resize-se {
+  bottom: 0;
+  right: 0;
+  width: 14px;
+  height: 14px;
+  cursor: nwse-resize;
+}
+.win-resize-sw {
+  bottom: 0;
+  left: 0;
+  width: 12px;
+  height: 12px;
+  cursor: nesw-resize;
+}
 
 @keyframes winOpen {
   from {
@@ -310,6 +386,17 @@ a.win-icon {
 .win-ctl-close::after {
   transform: translate(-50%, -50%) rotate(-45deg);
 }
+.win-ctl-www {
+  width: 36px;
+  font-size: 0.6rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  color: #9fd0f5;
+  cursor: pointer;
+}
+.win-ctl-www:hover {
+  background: rgba(61, 174, 233, 0.3);
+}
 
 .win-body {
   flex: 1;
@@ -422,6 +509,49 @@ a.win-icon {
   color: #1d3e5c;
 }
 
+/* External website "apps" opened from a shortcut icon */
+.website-app {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+.website-app-icon {
+  display: grid;
+  place-items: center;
+  width: 96px;
+  height: 96px;
+  margin-bottom: 8px;
+  border-radius: 22px;
+  background: linear-gradient(to bottom, #ffffff, #eef2f8);
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  box-shadow: inset 0 1px 0 #ffffff, 0 2px 6px rgba(0, 0, 0, 0.12);
+}
+.website-app-emoji {
+  font-size: 3rem;
+  line-height: 1;
+}
+.website-app-img {
+  width: 84px;
+  height: 84px;
+  object-fit: contain;
+  filter: brightness(0);
+}
+.website-app-link {
+  margin-top: 14px;
+  padding: 8px 16px;
+  border-radius: 6px;
+  background: linear-gradient(to bottom, #ffffff, #dfeaf6);
+  border: 1px solid #7db9e8;
+  color: #0d5aa7;
+  font-family: var(--font-custom-mono), "JetBrains Mono", monospace;
+  font-size: 0.8rem;
+  text-decoration: none;
+}
+.website-app-link:hover {
+  box-shadow: 0 0 0 1px #7db9e8, 0 0 12px rgba(95, 175, 255, 0.5);
+}
+
 .app-surface .project-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
@@ -835,6 +965,23 @@ a.win-icon {
 .alacritty-prompt { color: #b8bb26; }
 .alacritty-path { color: #83a598; }
 .alacritty-cmd { color: #ebdbb2; }
+.alacritty-out-text { color: #c5c8c6; white-space: pre-wrap; }
+.alacritty-inputline {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0;
+}
+.alacritty-input {
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: #ebdbb2;
+  font: inherit;
+  caret-color: #ebdbb2;
+}
 .alacritty-art {
   margin: 0 0 12px;
   font-family: inherit;
@@ -1139,6 +1286,7 @@ a.win-icon {
 .mobile-home {
   position: fixed;
   inset: 0;
+  height: 100dvh;
   overflow: hidden;
   background-color: #101319;
   background-size: cover;
@@ -1165,45 +1313,25 @@ a.win-icon {
   );
 }
 
-.mobile-notch {
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 164px;
-  height: 34px;
-  z-index: 60;
-  background: #000;
-  border-radius: 0 0 22px 22px;
-  pointer-events: none;
-}
-.mobile-notch::after {
-  content: "";
-  position: absolute;
-  right: 26px;
-  top: 11px;
-  width: 9px;
-  height: 9px;
-  border-radius: 50%;
-  background: radial-gradient(circle at 35% 30%, #2b3a55, #05070b 70%);
-}
-
 .mobile-statusbar {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
-  height: 30px;
+  height: 34px;
   z-index: 55;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 16px;
+  padding: 0 18px;
   font-size: 0.72rem;
   font-weight: 600;
   letter-spacing: 0.01em;
 }
 .mobile-status-time {
+  font-size: 0.94rem;
+  font-weight: 600;
+  letter-spacing: 0;
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 }
 .mobile-status-icons {
@@ -1285,6 +1413,11 @@ a.win-icon {
   background: transparent;
   cursor: pointer;
   color: inherit;
+  min-width: 0;
+  touch-action: none;
+}
+.mobile-app.dragging {
+  opacity: 0.55;
 }
 .mobile-app-icon {
   position: relative;
@@ -1400,6 +1533,7 @@ a.win-icon {
 .mobile-app-view {
   position: fixed;
   inset: 0;
+  height: 100dvh;
   z-index: 40;
   display: flex;
   flex-direction: column;
@@ -1703,24 +1837,24 @@ a.win-icon {
 
 /* Phones in landscape: compact the home so the app grid (and its labels) fit. */
 @media (orientation: landscape) and (max-height: 620px) {
-  .mobile-notch { width: 108px; height: 22px; }
-  .mobile-statusbar { height: 24px; font-size: 0.66rem; padding: 0 14px; }
+  .mobile-statusbar { height: 28px; font-size: 0.72rem; padding: 0 16px; }
+  .mobile-status-time { font-size: 0.84rem; }
   .mobile-grid {
     top: 30px;
     bottom: 76px;
-    grid-template-columns: repeat(7, 1fr);
-    grid-auto-rows: 62px;
-    gap: 8px 6px;
-    padding: 4px 22px;
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+    grid-auto-rows: 60px;
+    gap: 8px 4px;
+    padding: 4px 16px;
   }
-  .mobile-app { gap: 3px; }
-  .mobile-app-icon { width: 42px; height: 42px; border-radius: 15px; font-size: 20px; }
-  .mobile-app-label { font-size: 0.58rem; }
-  .mobile-widget { border-radius: 16px; padding: 6px 10px; }
-  .mobile-widget-time { font-size: 1.1rem; }
-  .mobile-widget-date { font-size: 0.55rem; }
-  .mobile-dock { bottom: 14px; padding: 7px 12px; border-radius: 24px; }
-  .mobile-app.in-dock .mobile-app-icon { width: 40px; height: 40px; border-radius: 14px; font-size: 19px; }
+  .mobile-app { gap: 2px; }
+  .mobile-app-icon { width: 40px; height: 40px; border-radius: 14px; font-size: 19px; }
+  .mobile-app-label { font-size: 0.55rem; }
+  .mobile-widget { border-radius: 14px; padding: 5px 8px; }
+  .mobile-widget-time { font-size: 1rem; }
+  .mobile-widget-date { font-size: 0.5rem; }
+  .mobile-dock { bottom: 10px; padding: 6px 10px; border-radius: 22px; }
+  .mobile-app.in-dock .mobile-app-icon { width: 38px; height: 38px; border-radius: 13px; font-size: 18px; }
   .mobile-pagedots { display: none; }
 }