From a7ef2c9d7f459145fac5b8a78679aa71b292397c Mon Sep 17 00:00:00 2001
From: Tyler Hoang <tyler@tylerhoang.xyz>
Date: Tue, 26 May 2026 20:11:26 -0700
Subject: browser+resize: implement proper faux browser + resizable windows per
 design handoff

Browser window (w-browser, Internet icon):
- Full aqua browser chrome: toolbar with back/fwd/reload/home SVG nav buttons,
  URL bar (lock + scheme + host + path + blinking caret), bookmark chips
  with colored 12x12 favicon squares, scrollable page surface, status bar
  with animated progress bar
- History stack (back/forward state, disable at ends)
- Delegated click handler via data-go attributes for in-page navigation
- Refresh button spins 700ms via CSS animation
- Address bar + title bar update on every navigation
- ARTICLES array with 4 entries (self-hosting, jazz, cooking, film) with
  drop-cap, Georgia body, IBM Plex Mono metadata, blockquotes, inline ilinks
- Chrome theme: brushed mercury toolbar, dark navy article surface with
  iridescent radial hotspots, Audiowide titles with chromeShimmer drop-cap,
  Michroma UI labels, iridescent progress bar, custom scrollbar

Resizable windows:
- makeResizable() in aero.js: appends .rs-e (right edge), .rs-s (bottom edge),
  .rs-se (SE grip) handles; tracks mousedown/move/up; enforces minW/minH
- .win.resized flex-column flip: body fills remaining height and scrolls
- Aero grip (3-stripe diagonal, blue); Chrome grip (iridescent purple/cyan/pink)
- Body cursor forced via body.rs-cursor-* classes during drag

CSS in aero.css: chrome overrides for resize handle + full browser window theme
CSS in index.html: resize handle rules, full browser/article reading styles

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 index.html | 506 +++++++++++++++++++++++++++++++++++++++++++++++++------------
 1 file changed, 406 insertions(+), 100 deletions(-)

(limited to 'index.html')

diff --git a/index.html b/index.html
index e2ee661..6e2996d 100755
--- a/index.html
+++ b/index.html
@@ -41,6 +41,37 @@
   .icon:hover .glyph { transform: translateY(-2px) scale(1.04); transition: transform 200ms; }
 
   .win { position: absolute; min-width: 320px; z-index: 50; }
+  /* When a window has been resized, it switches to a flex column so the
+     body becomes a scroll region — keeps content from getting clipped */
+  .win.resized {
+    display: flex; flex-direction: column;
+    overflow: hidden;
+    border-radius: 18px;
+  }
+  .win.resized .body {
+    flex: 1; min-height: 0;
+    overflow-y: auto;
+    border-radius: 0 0 18px 18px;
+  }
+  /* The browser window is already a flex column internally; let it fill */
+  .win.resized > .browser { flex: 1; min-height: 0; }
+  /* RESIZE HANDLES */
+  .rs { position: absolute; z-index: 5; }
+  .rs-e { right: -3px; top: 14px; bottom: 18px; width: 8px; cursor: ew-resize; }
+  .rs-s { left: 14px; right: 18px; bottom: -3px; height: 8px; cursor: ns-resize; }
+  .rs-se {
+    right: 0; bottom: 0; width: 22px; height: 22px;
+    cursor: nwse-resize;
+    background-image:
+      linear-gradient(135deg, transparent 0 38%, rgba(40,80,140,0.85) 38% 48%, transparent 48% 60%, rgba(40,80,140,0.75) 60% 70%, transparent 70%, rgba(40,80,140,0.6) 82% 92%, transparent 92%);
+    border-radius: 0 0 18px 0;
+    opacity: 0.65;
+    transition: opacity 150ms, filter 150ms;
+  }
+  .rs-se:hover { opacity: 1; filter: drop-shadow(0 0 4px rgba(120,170,220,0.8)); }
+  body.rs-cursor-e, body.rs-cursor-e * { cursor: ew-resize !important; }
+  body.rs-cursor-s, body.rs-cursor-s * { cursor: ns-resize !important; }
+  body.rs-cursor-se, body.rs-cursor-se * { cursor: nwse-resize !important; }
   .win .titlebar {
     height: 32px; padding: 0 12px; display: flex; align-items: center; gap: 8px;
     border-radius: 18px 18px 0 0;
@@ -114,68 +145,139 @@
   .film-rating .star.half { background: linear-gradient(90deg, oklch(72% 0.16 60) 50%, oklch(80% 0.04 230) 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
   .film-note { font-size: 11px; opacity: 0.75; font-style: italic; }
 
-  /* ===== BROWSER / ARTICLE READER ===== */
+  /* ============= FAUX BROWSER ============= */
+  .browser { display: flex; flex-direction: column; height: 100%; }
+  .browser .titlebar { border-bottom: 1px solid rgba(0,0,0,0.18); }
   .browser-toolbar {
     display: flex; align-items: center; gap: 8px;
-    padding: 6px 12px;
-    background: rgba(255,255,255,0.22);
-    border-bottom: 1px solid rgba(200,220,240,0.45);
-  }
-  .browser-url-bar {
-    flex: 1; height: 22px; padding: 0 10px;
-    border-radius: 11px;
-    background: rgba(255,255,255,0.62); border: 1px solid rgba(180,200,220,0.45);
-    font: 400 11px 'IBM Plex Mono', monospace; color: oklch(30% 0.05 230);
-    display: flex; align-items: center; overflow: hidden;
-    white-space: nowrap; text-overflow: ellipsis;
+    padding: 8px 12px;
+    background: linear-gradient(to bottom, oklch(96% 0.005 220), oklch(86% 0.015 225) 50%, oklch(78% 0.025 230));
+    border-bottom: 1px solid oklch(60% 0.04 230);
+    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5);
   }
+  .nav-btn {
+    width: 28px; height: 24px; border-radius: 12px;
+    display: inline-flex; align-items: center; justify-content: center;
+    background: linear-gradient(to bottom, oklch(99% 0.005 220), oklch(88% 0.015 225) 50%, oklch(74% 0.03 230));
+    border: 1px solid oklch(55% 0.05 230);
+    color: oklch(35% 0.05 235); font-size: 13px; line-height: 1;
+    cursor: pointer;
+    box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 1px 2px rgba(40,80,140,0.25);
+    transition: transform 100ms, box-shadow 100ms;
+  }
+  .nav-btn:hover { transform: translateY(-0.5px); }
+  .nav-btn:active { transform: translateY(0.5px); box-shadow: inset 0 1px 3px rgba(40,80,140,0.4); }
+  .nav-btn[disabled] { opacity: 0.35; cursor: default; transform: none !important; }
+  .nav-btn.refresh.spinning svg { animation: spin 700ms linear; }
+  @keyframes spin { to { transform: rotate(360deg); } }
+  .url-bar {
+    flex: 1; height: 26px; display: flex; align-items: center; gap: 6px;
+    padding: 0 10px;
+    background: linear-gradient(to bottom, oklch(99% 0.003 220), oklch(94% 0.008 220));
+    border: 1px solid oklch(60% 0.04 230);
+    border-radius: 13px;
+    box-shadow: inset 0 1px 2px rgba(40,80,140,0.18);
+    font: 12px "IBM Plex Mono", "Courier New", monospace;
+    color: oklch(28% 0.05 235);
+    overflow: hidden; min-width: 0;
+  }
+  .url-bar .lock { font-size: 10px; color: oklch(58% 0.16 145); flex-shrink: 0; }
+  .url-bar .url-scheme { opacity: 0.55; }
+  .url-bar .url-host { color: oklch(30% 0.08 240); font-weight: 600; }
+  .url-bar .url-path { opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .url-bar .caret { width: 1px; height: 14px; background: oklch(40% 0.08 240); animation: blink 1s steps(2) infinite; }
+  @keyframes blink { 50% { opacity: 0; } }
   .browser-bookmarks {
-    display: flex; gap: 5px; padding: 5px 12px;
-    background: rgba(255,255,255,0.15);
-    border-bottom: 1px solid rgba(200,220,240,0.35);
-    flex-wrap: wrap;
-  }
-  .browser-bm {
-    height: 20px; padding: 0 10px;
-    border-radius: 10px; border: 1px solid rgba(180,200,220,0.4);
-    background: rgba(255,255,255,0.55);
-    font: 600 10px 'Plus Jakarta Sans', sans-serif; color: oklch(30% 0.08 230);
-    cursor: pointer; letter-spacing: 0.3px;
-    transition: background 150ms, border-color 150ms;
-  }
-  .browser-bm:hover { background: rgba(255,255,255,0.88); }
-  .browser-bm.active { background: rgba(255,255,255,0.92); border-color: oklch(55% 0.12 220); color: oklch(22% 0.10 230); }
-  .browser-body {
-    overflow-y: auto; max-height: 440px;
-    padding: 16px 20px; border-radius: 0 0 18px 18px;
-  }
-  /* article typography inside the browser */
-  .browser-body h1 { font-size: 17px; font-weight: 700; margin: 0 0 10px; color: oklch(24% 0.08 230); }
-  .browser-body h2 { font-size: 14px; font-weight: 700; margin: 16px 0 6px; color: oklch(27% 0.08 230); border-bottom: 1px solid rgba(120,160,200,0.3); padding-bottom: 4px; }
-  .browser-body h3 { font-size: 13px; font-weight: 600; margin: 12px 0 5px; color: oklch(29% 0.07 230); }
-  .browser-body h4 { font-size: 12px; font-weight: 600; margin: 10px 0 4px; color: oklch(31% 0.06 230); font-style: italic; }
-  .browser-body p { margin: 0 0 9px; font-size: 12px; line-height: 1.65; color: oklch(22% 0.04 240); }
-  .browser-body ul, .browser-body ol { padding-left: 18px; margin: 0 0 9px; }
-  .browser-body li { font-size: 12px; line-height: 1.7; color: oklch(22% 0.04 240); }
-  .browser-body img { max-width: 160px; border-radius: 8px; margin: 6px 0; display: block; box-shadow: 0 2px 8px rgba(40,80,140,0.15); }
-  .browser-body figure { margin: 8px 0; }
-  .browser-body figcaption { font-size: 10px; opacity: 0.65; margin-top: 3px; }
-  .browser-body a { color: oklch(42% 0.16 255); text-decoration: none; }
-  .browser-body a:hover { text-decoration: underline; }
-  .browser-body pre, .browser-body .body > p { font: 12px 'IBM Plex Mono', monospace; line-height: 1.65; white-space: pre-wrap; color: oklch(22% 0.04 240); }
-  .browser-body center { text-align: center; }
-  /* chrome theme overrides for browser */
-  body[data-theme="chrome"] .browser-url-bar { background: rgba(195,202,215,0.5); border-color: oklch(50% 0.04 250); color: oklch(14% 0.03 250); }
-  body[data-theme="chrome"] .browser-bookmarks { background: rgba(195,202,215,0.15); border-bottom-color: oklch(60% 0.03 250); }
-  body[data-theme="chrome"] .browser-bm { font-family: 'Michroma', sans-serif; font-size: 8px; text-transform: uppercase; letter-spacing: 1px; border-color: oklch(55% 0.04 250); background: linear-gradient(to bottom, oklch(92% 0.01 240), oklch(78% 0.02 240)); color: oklch(18% 0.04 250); }
-  body[data-theme="chrome"] .browser-bm:hover { background: linear-gradient(to bottom, oklch(97% 0.01 240), oklch(86% 0.02 240)); }
-  body[data-theme="chrome"] .browser-bm.active { background: linear-gradient(to bottom, oklch(99% 0.01 240), oklch(90% 0.02 240)); border-color: oklch(40% 0.10 280); }
-  body[data-theme="chrome"] .browser-body h1,
-  body[data-theme="chrome"] .browser-body h2,
-  body[data-theme="chrome"] .browser-body h3,
-  body[data-theme="chrome"] .browser-body h4 { font-family: 'Michroma', sans-serif; text-transform: uppercase; letter-spacing: 0.5px; }
-  body[data-theme="chrome"] .browser-body p,
-  body[data-theme="chrome"] .browser-body li { font-family: 'Space Grotesk', sans-serif; }
+    display: flex; align-items: center; gap: 2px;
+    padding: 4px 10px;
+    background: linear-gradient(to bottom, oklch(94% 0.01 220), oklch(86% 0.02 225));
+    border-bottom: 1px solid oklch(62% 0.04 230);
+    font-size: 11px;
+    overflow-x: auto; scrollbar-width: none;
+  }
+  .browser-bookmarks::-webkit-scrollbar { display: none; }
+  .bm {
+    display: inline-flex; align-items: center; gap: 5px;
+    padding: 3px 8px; border-radius: 8px;
+    color: oklch(28% 0.06 235); white-space: nowrap; cursor: pointer;
+    border: 1px solid transparent;
+    transition: background 120ms, border-color 120ms;
+  }
+  .bm:hover { background: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.95); }
+  .bm.active { background: linear-gradient(to bottom, rgba(255,255,255,0.7), rgba(200,230,255,0.4)); border-color: rgba(120,170,220,0.5); }
+  .bm .favicon { width: 12px; height: 12px; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); }
+  .bm.home .favicon { background: linear-gradient(135deg, oklch(85% 0.10 220), oklch(55% 0.14 235)); }
+  .browser-page {
+    flex: 1; min-height: 0; overflow-y: auto;
+    background: oklch(98% 0.004 220);
+    color: oklch(20% 0.03 240);
+    font: 14px "Georgia", "Times New Roman", serif;
+    line-height: 1.65;
+    padding: 0;
+    position: relative;
+  }
+  .browser-page::-webkit-scrollbar { width: 12px; }
+  .browser-page::-webkit-scrollbar-track { background: linear-gradient(to right, oklch(92% 0.01 220), oklch(96% 0.005 220)); }
+  .browser-page::-webkit-scrollbar-thumb { background: linear-gradient(to right, oklch(82% 0.03 225), oklch(70% 0.05 230)); border-radius: 6px; border: 2px solid oklch(94% 0.008 220); }
+  .browser-status {
+    height: 22px; padding: 0 12px;
+    display: flex; align-items: center; justify-content: space-between;
+    background: linear-gradient(to bottom, oklch(90% 0.01 220), oklch(80% 0.02 225));
+    border-top: 1px solid oklch(60% 0.04 230);
+    font: 11px "Segoe UI", Tahoma, sans-serif;
+    color: oklch(35% 0.05 235);
+    border-radius: 0 0 18px 18px;
+  }
+  .browser-status .progress {
+    flex: 1; max-width: 80px; height: 8px; margin: 0 8px;
+    background: oklch(82% 0.02 225); border-radius: 4px;
+    border: 1px solid oklch(65% 0.04 230);
+    overflow: hidden; box-shadow: inset 0 1px 2px rgba(40,80,140,0.15);
+  }
+  .browser-status .progress-bar {
+    height: 100%; width: 100%;
+    background: linear-gradient(to bottom, oklch(82% 0.13 220), oklch(58% 0.14 235));
+    box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
+  }
+  /* index page */
+  .idx-hero {
+    padding: 32px 40px 24px;
+    background:
+      radial-gradient(60% 80% at 100% 0%, oklch(88% 0.10 215 / 0.5) 0%, transparent 60%),
+      linear-gradient(to bottom, oklch(94% 0.03 220), oklch(98% 0.004 220));
+    border-bottom: 1px solid oklch(88% 0.02 220);
+  }
+  .idx-eyebrow { font: 500 10px "IBM Plex Mono", monospace; letter-spacing: 2px; text-transform: uppercase; color: oklch(45% 0.10 230); margin-bottom: 8px; }
+  .idx-title { font: 700 38px/1.05 "Georgia", "Times New Roman", serif; color: oklch(22% 0.06 235); letter-spacing: -1px; margin: 0 0 10px; }
+  .idx-title em { font-style: italic; font-weight: 400; color: oklch(45% 0.12 220); }
+  .idx-sub { font: italic 14px/1.5 "Georgia", serif; color: oklch(40% 0.04 235); max-width: 440px; margin: 0; }
+  .idx-list { padding: 16px 40px 40px; }
+  .idx-art { display: grid; grid-template-columns: 60px 1fr auto; gap: 18px; padding: 18px 0; border-bottom: 1px solid oklch(90% 0.015 220); cursor: pointer; transition: padding 120ms; }
+  .idx-art:last-child { border-bottom: 0; }
+  .idx-art:hover { padding-left: 6px; }
+  .idx-art:hover .idx-art-title { color: oklch(40% 0.16 230); text-decoration: underline; text-decoration-color: oklch(70% 0.13 220 / 0.5); text-underline-offset: 3px; }
+  .idx-art-num { font: 600 28px/1 "IBM Plex Mono", monospace; color: oklch(80% 0.04 225); padding-top: 4px; }
+  .idx-art-title { font: 700 18px/1.25 "Georgia", serif; color: oklch(22% 0.06 235); margin: 0 0 4px; letter-spacing: -0.2px; }
+  .idx-art-excerpt { font: 13px/1.55 "Georgia", serif; color: oklch(40% 0.04 235); margin: 4px 0 0; }
+  .idx-art-meta { font: 11px "IBM Plex Mono", monospace; color: oklch(55% 0.06 230); text-align: right; padding-top: 4px; line-height: 1.6; white-space: nowrap; }
+  .idx-art-tag { display: inline-block; padding: 1px 6px; border-radius: 3px; background: oklch(92% 0.04 220); color: oklch(40% 0.10 230); font-size: 10px; text-transform: lowercase; letter-spacing: 0.5px; }
+  /* article page */
+  .art-page { padding: 36px 56px 60px; max-width: 620px; margin: 0 auto; }
+  .art-back { display: inline-flex; align-items: center; gap: 6px; font: 500 11px "IBM Plex Mono", monospace; color: oklch(45% 0.10 230); text-decoration: none; margin-bottom: 24px; cursor: pointer; letter-spacing: 1px; text-transform: uppercase; }
+  .art-back:hover { color: oklch(35% 0.16 230); }
+  .art-eyebrow { font: 500 10px "IBM Plex Mono", monospace; letter-spacing: 2px; text-transform: uppercase; color: oklch(55% 0.10 220); margin-bottom: 12px; }
+  .art-title { font: 700 32px/1.15 "Georgia", "Times New Roman", serif; color: oklch(20% 0.06 235); letter-spacing: -0.6px; margin: 0 0 14px; }
+  .art-byline { font: italic 13px/1.5 "Georgia", serif; color: oklch(48% 0.04 235); margin: 0 0 32px; padding-bottom: 16px; border-bottom: 1px solid oklch(88% 0.015 220); }
+  .art-body { font-size: 15px; line-height: 1.75; color: oklch(22% 0.03 240); }
+  .art-body p { margin: 0 0 18px; text-wrap: pretty; }
+  .art-body p:first-of-type::first-letter { font-size: 56px; font-weight: 700; float: left; line-height: 0.9; padding: 4px 8px 0 0; color: oklch(40% 0.14 220); font-family: "Georgia", serif; }
+  .art-body em { color: oklch(35% 0.10 230); }
+  .art-body a, .art-body .ilink { color: oklch(40% 0.16 230); text-decoration: underline; text-decoration-color: oklch(70% 0.13 220 / 0.4); text-underline-offset: 2px; cursor: pointer; }
+  .art-body h2 { font: 700 18px "Georgia", serif; color: oklch(22% 0.06 235); margin: 32px 0 12px; letter-spacing: -0.2px; }
+  .art-body blockquote { margin: 24px 0; padding: 0 0 0 18px; border-left: 3px solid oklch(78% 0.10 220); font-style: italic; color: oklch(38% 0.06 230); }
+  .art-body code { font: 13px "IBM Plex Mono", monospace; background: oklch(94% 0.01 220); padding: 1px 5px; border-radius: 3px; color: oklch(35% 0.10 230); }
+  .art-foot { margin-top: 40px; padding-top: 20px; border-top: 1px solid oklch(88% 0.015 220); font: 12px "IBM Plex Mono", monospace; color: oklch(55% 0.06 230); display: flex; justify-content: space-between; align-items: center; }
+  .art-foot .more { color: oklch(40% 0.16 230); cursor: pointer; }
 </style>
 </head>
 <body>
@@ -193,8 +295,8 @@
       <div class="icon" data-open="servers"><div class="glyph" style="background: var(--icon-green)">🖥</div><div class="label">My Servers</div></div>
       <div class="icon" data-open="podcast"><div class="glyph" style="background: var(--icon-silver)">🎙</div><div class="label">REEL MOUTH</div></div>
       <div class="icon" data-open="films"><div class="glyph" style="background: var(--icon-pink)">🎞</div><div class="label">Films</div></div>
+      <div class="icon" data-open="browser"><div class="glyph" style="background: var(--icon-blue)">🌐</div><div class="label">Internet</div></div>
       <div class="icon" data-open="guestbook"><div class="glyph" style="background: var(--icon-blue)">✉</div><div class="label">Contact</div></div>
-      <div class="icon" data-open="browser"><div class="glyph" style="background: var(--icon-silver)">🌐</div><div class="label">Articles</div></div>
     </div>
 
     <!-- WINDOWS -->
@@ -376,19 +478,50 @@
       </div>
     </div>
 
-    <!-- BROWSER / ARTICLE READER -->
-    <div class="win glass" id="w-browser" style="left: 200px; top: 80px; width: 580px; display: none;">
-      <div class="titlebar">
-        <div class="dots"><div class="dot r no-drag" onclick="this.closest('.win').style.display='none'"></div><div class="dot y"></div><div class="dot g"></div></div>
-        <div class="browser-url-bar no-drag" id="browser-url">about:blank</div>
-      </div>
-      <div class="browser-bookmarks no-drag">
-        <button class="browser-bm no-drag" data-src="articles/library.html" data-title="Personal Library">📚 library</button>
-        <button class="browser-bm no-drag" data-src="articles/music.html" data-title="Music List">🎵 music list</button>
-        <button class="browser-bm no-drag" data-src="articles/software.html" data-title="Software &amp; Hardware">💻 software</button>
-      </div>
-      <div class="body browser-body" id="browser-content">
-        <div style="opacity:0.5;text-align:center;padding:40px 0;font-size:12px;">← click a bookmark to load an article</div>
+    <!-- BROWSER -->
+    <div class="win glass" id="w-browser" style="left: 280px; top: 40px; width: 680px; height: 560px; display: none;">
+      <div class="browser">
+        <div class="titlebar">
+          <div class="dots">
+            <div class="dot r no-drag" onclick="this.closest('.win').style.display='none'"></div>
+            <div class="dot y"></div>
+            <div class="dot g"></div>
+          </div>
+          <span id="br-title">fun.tylerhoang.xyz — Notes</span>
+        </div>
+        <div class="browser-toolbar no-drag">
+          <button class="nav-btn" id="br-back" title="Back" disabled>
+            <svg width="11" height="11" viewBox="0 0 11 11"><path d="M7.5 1.5 L3 5.5 L7.5 9.5" stroke="currentColor" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          </button>
+          <button class="nav-btn" id="br-fwd" title="Forward" disabled>
+            <svg width="11" height="11" viewBox="0 0 11 11"><path d="M3.5 1.5 L8 5.5 L3.5 9.5" stroke="currentColor" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          </button>
+          <button class="nav-btn refresh" id="br-reload" title="Reload">
+            <svg width="12" height="12" viewBox="0 0 12 12"><path d="M9.5 6 A3.5 3.5 0 1 1 8.5 3.4 M9.8 1.5 L9.8 4 L7.3 4" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          </button>
+          <button class="nav-btn" id="br-home" title="Home">
+            <svg width="12" height="12" viewBox="0 0 12 12"><path d="M2 6 L6 2.5 L10 6 L10 10 L7.5 10 L7.5 7 L4.5 7 L4.5 10 L2 10 Z" stroke="currentColor" stroke-width="1.3" fill="none" stroke-linejoin="round"/></svg>
+          </button>
+          <div class="url-bar">
+            <span class="lock">🔒</span>
+            <span class="url-scheme">https://</span><span class="url-host" id="br-host">fun.tylerhoang.xyz</span><span class="url-path" id="br-path">/articles</span>
+            <span class="caret"></span>
+          </div>
+          <button class="nav-btn" id="br-go" title="Go" style="width: auto; padding: 0 10px;">Go</button>
+        </div>
+        <div class="browser-bookmarks">
+          <div class="bm home" data-go="/articles"><div class="favicon"></div>Notes</div>
+          <div class="bm" data-go="/articles/nextcloud-and-me"><div class="favicon" style="background: linear-gradient(135deg, oklch(85% 0.14 140), oklch(50% 0.16 150));"></div>self-hosting</div>
+          <div class="bm" data-go="/articles/learning-cherokee"><div class="favicon" style="background: linear-gradient(135deg, oklch(85% 0.10 350), oklch(55% 0.16 340));"></div>jazz</div>
+          <div class="bm" data-go="/articles/six-tries-bun-bo-hue"><div class="favicon" style="background: linear-gradient(135deg, oklch(85% 0.14 60), oklch(55% 0.16 35));"></div>cooking</div>
+          <div class="bm" data-go="/articles/stalker-and-waiting"><div class="favicon" style="background: linear-gradient(135deg, oklch(75% 0.06 280), oklch(35% 0.06 260));"></div>film</div>
+        </div>
+        <div class="browser-page" id="br-page"></div>
+        <div class="browser-status">
+          <span id="br-status">Done</span>
+          <div class="progress" id="br-progress" style="display:none;"><div class="progress-bar"></div></div>
+          <span>🔒 fun.tylerhoang.xyz · 100%</span>
+        </div>
       </div>
     </div>
 
@@ -421,6 +554,7 @@
 
   document.querySelectorAll('.win').forEach(w => {
     Aero.makeDraggable(w, w.querySelector('.titlebar'));
+    Aero.makeResizable(w, { minW: 300, minH: 220 });
   });
 
   document.querySelectorAll('.icon').forEach(ic => {
@@ -597,35 +731,207 @@
     });
   }
 
-  // browser article loader
-  function browserLoad(src) {
-    const content = document.getElementById('browser-content');
-    const urlBar = document.getElementById('browser-url');
-    document.querySelectorAll('.browser-bm').forEach(b => b.classList.toggle('active', b.dataset.src === src));
-    urlBar.textContent = 'fun.tylerhoang.xyz/' + src;
-    content.innerHTML = '<div style="opacity:0.5;text-align:center;padding:30px 0;font-size:12px;">loading…</div>';
-    fetch(src)
-      .then(r => { if (!r.ok) throw new Error(r.status); return r.text(); })
-      .then(html => {
-        const doc = new DOMParser().parseFromString(html, 'text/html');
-        // strip stylesheets, scripts, old styles
-        doc.querySelectorAll('link[rel="stylesheet"], style, script').forEach(el => el.remove());
-        // strip Bootstrap navbar component (the nav bar itself, not the page wrapper)
-        doc.querySelectorAll('div.navbar').forEach(el => el.remove());
-        // strip blink tags, preserving inner HTML (colored spans etc.)
-        doc.querySelectorAll('blink').forEach(el => {
-          el.replaceWith(...Array.from(el.childNodes));
-        });
-        content.innerHTML = doc.body.innerHTML;
-        content.scrollTop = 0;
-      })
-      .catch(() => {
-        content.innerHTML = '<div style="opacity:0.5;text-align:center;padding:30px 0;font-size:12px;">couldn\'t load article</div>';
-      });
-  }
-  document.querySelectorAll('.browser-bm').forEach(bm => {
-    bm.addEventListener('click', () => browserLoad(bm.dataset.src));
+  /* ============= FAUX BROWSER =============
+     Articles live in the ARTICLES array below.
+     Each `body` is plain HTML — use <p>, <h2>, <blockquote>, <em>, <code>,
+     and <span class="ilink" data-go="/articles/slug"> for in-page links.
+  ============================================== */
+  const ARTICLES = [
+    {
+      slug: 'nextcloud-and-me',
+      title: 'Why I run my own Nextcloud (and you probably should too)',
+      date: '2026-04-12',
+      tag: 'self-hosting',
+      excerpt: 'After my fourth Dropbox price hike, I bought a $180 mini-PC and never looked back. A field report.',
+      body: `
+        <p>For about six years I paid Dropbox roughly the cost of a nice dinner every month to store photos I'd never look at again. Then one Tuesday in March, an email came: prices going up <em>again</em>. I closed the tab, opened a new one, ordered a Beelink SER5 off Amazon, and started reading the Nextcloud install docs.</p>
+        <p>What I learned, over the next 96 hours: self-hosting in 2026 is not what it was in 2016. The tooling has caught up with the dream. <code>apt install nextcloud-aio</code>, a TLS cert from Let's Encrypt that renews itself, a dyndns entry I update with a four-line cron job, and suddenly I have my own private cloud. The whole stack draws about 12 watts at idle.</p>
+        <h2>What I actually use it for</h2>
+        <p>The boring answer is: file sync. Photos from my phone, documents I'm working on, the world's most over-engineered shopping list shared with Trinh. The interesting answer is that having a server means I keep <em>finding</em> things to put on it — a Forgejo for git mirrors, a Jellyfin for movies I own on blu-ray, a tiny Postgres I use for film-diary metadata.</p>
+        <blockquote>The point isn't to escape the cloud. The point is that the cloud should be a tool I pick up, not a landlord.</blockquote>
+        <p>Will it pay for itself? At my Dropbox rate, the hardware breaks even around month nine. But that's not really the math that matters. The math that matters is that the machine sits on a shelf above my monitor and quietly does what I tell it.</p>
+        <p>If you want to start, start small. A Raspberry Pi 5 and a USB drive will get you 80% of the way. The other 20% is patience and reading <span class="ilink" data-go="/articles/learning-cherokee">man pages on a Saturday morning</span>, which honestly I enjoy.</p>
+      `,
+    },
+    {
+      slug: 'learning-cherokee',
+      title: 'Learning <em>Cherokee</em> at 23',
+      date: '2026-03-28',
+      tag: 'jazz',
+      excerpt: 'Bud Powell\'s Cherokee is famously fast. I\'ve been practicing it at 60 bpm for two months. Some notes.',
+      body: `
+        <p>Bud Powell recorded <em>Cherokee</em> at something like 320 beats per minute. I can play it cleanly at 64. I tell myself this is progress.</p>
+        <p>The thing nobody warns you about with bebop is that the tempo is the easy part. You can put a metronome on 320 and just <em>hold on</em> to it for a chorus, fudging the notes that don't fit under your fingers. What you can't fake is the <em>line</em> — the way Bud connects an A-section descent through the bridge's modulation up a half-step, and somehow the listener feels the bridge before it arrives.</p>
+        <h2>The bridge</h2>
+        <p>Eight bars in B major, dropped into the middle of a tune in B♭. It's a famously sadistic chord change for a saxophone player. For a pianist, it just means thinking in five sharps instead of two flats — annoying but survivable.</p>
+        <p>My teacher, who is 71 and has played this tune more times than I have eaten dinner, told me to stop practicing the bridge separately. "You'll never make it sound like part of the song," she said. "Play it from the top, slow, every time." So that's what I do. Six minutes per chorus at 64 bpm. I have become very patient with my left hand.</p>
+        <h2>What I'm learning</h2>
+        <p>That speed is a side effect of clarity, not the other way around. That the metronome is a witness, not a coach. And that if I can play <em>Cherokee</em> at 200 by my 25th birthday, I will buy myself a very nice steak.</p>
+      `,
+    },
+    {
+      slug: 'six-tries-bun-bo-hue',
+      title: 'Six tries at my mom\'s bún bò huế',
+      date: '2026-02-14',
+      tag: 'cooking',
+      excerpt: 'The broth is the whole game. Here is what I got wrong, and the one thing I finally got right.',
+      body: `
+        <p>My mom doesn't write recipes down. When I ask her how much shrimp paste, she says "a spoon." When I ask which spoon, she sighs.</p>
+        <p>I have now made bún bò huế six times. The first three were unservable. The fourth was edible but flat. The fifth I overcorrected the lemongrass and it tasted like a candle. The sixth, last Sunday, made Trinh stop scrolling on her phone and say, unprompted, "this is good." I am framing the apron.</p>
+        <h2>The mistakes</h2>
+        <p>Attempt one: I used beef stock from a carton. My mother would disown me if she knew. The broth has to be built from the bone — beef shank and pork hock, simmered for at least four hours, skimmed obsessively. You can taste a corner cut. The whole thing is corners.</p>
+        <p>Attempt three: not enough sả. Lemongrass should bruise your nose when you open the pot. I was being polite with it. Bún bò is not a polite soup.</p>
+        <h2>The thing I got right</h2>
+        <p>Annatto oil. Heat the seeds in neutral oil until the oil turns the color of a sunset, then strain. Add a tablespoon to the finished broth right before serving. It is the difference between a soup that <em>looks</em> like bún bò and a soup that <em>is</em> bún bò.</p>
+        <p>I still can't make it like she does. But I'm closer now than I was in February, and that's the whole project really. <span class="ilink" data-go="/articles/stalker-and-waiting">Patience as a recipe.</span></p>
+      `,
+    },
+    {
+      slug: 'stalker-and-waiting',
+      title: 'Stalker and the unbearable lightness of waiting',
+      date: '2026-01-30',
+      tag: 'film',
+      excerpt: 'Tarkovsky\'s 162-minute walk into a haunted room. A defense of slow cinema from someone with a short attention span.',
+      body: `
+        <p>I have never been good at waiting. I check my phone in elevators. I read the menu before I sit down. So it surprised me — surprises me still — how much I love <em>Stalker</em>, a movie in which approximately nothing happens for the better part of three hours.</p>
+        <p>The plot, such as it is: three men walk through a forbidden zone toward a room that allegedly grants wishes. They argue. They get tired. They sit on damp stones and look at each other. There is no chase, no twist, no payoff in the way modern cinema teaches us to expect a payoff.</p>
+        <h2>What Tarkovsky is doing</h2>
+        <p>He is teaching you to wait. Not as a virtue — Tarkovsky is not a moralist — but as a <em>mode</em>. The camera holds on a face until the face stops performing and starts simply <em>being</em>. The Zone refuses to be interesting on a normal cinematic schedule. By the time the men reach the room, you have spent so long with their breathing that you understand, without being told, why they don't go in.</p>
+        <blockquote>The room is not the point. The walk is the point. The room is just what gives the walk its shape.</blockquote>
+        <h2>Why it matters now</h2>
+        <p>We live in the most aggressive attention economy in human history. Every interface is designed to deliver a payoff before you can decide whether you wanted one. <em>Stalker</em> is the opposite. It says: I have nothing to sell you. Sit with me for three hours and we will see what your mind does when it isn't being fed.</p>
+        <p>My mind did this: it stopped checking what time it was. By the last hour I had forgotten there was a time at all. Whatever Tarkovsky is, he is a better drug than my phone.</p>
+      `,
+    },
+  ];
+
+  const ARTICLE_INDEX = Object.fromEntries(ARTICLES.map(a => [a.slug, a]));
+  const HOST = 'fun.tylerhoang.xyz';
+  const browserHistory = { stack: [], idx: -1 };
+
+  function fmtDate(iso) {
+    const d = new Date(iso);
+    return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).toLowerCase();
+  }
+
+  function renderIndex() {
+    const items = ARTICLES.map((a, i) => `
+      <div class="idx-art" data-go="/articles/${a.slug}">
+        <div class="idx-art-num">${String(i + 1).padStart(2, '0')}</div>
+        <div>
+          <div class="idx-art-title">${a.title}</div>
+          <div class="idx-art-excerpt">${a.excerpt}</div>
+        </div>
+        <div class="idx-art-meta">
+          <div>${fmtDate(a.date)}</div>
+          <div><span class="idx-art-tag">${a.tag}</span></div>
+        </div>
+      </div>
+    `).join('');
+    return `
+      <div class="idx-hero">
+        <div class="idx-eyebrow">/notes — Tyler Hoang</div>
+        <h1 class="idx-title">Things I've been <em>thinking about</em>.</h1>
+        <p class="idx-sub">Half-finished essays from a banker who'd rather be playing piano. New ones land when they land — usually monthly, never on a schedule.</p>
+      </div>
+      <div class="idx-list">${items}</div>
+    `;
+  }
+
+  function renderArticle(slug) {
+    const a = ARTICLE_INDEX[slug];
+    if (!a) return `<div class="art-page"><h1 class="art-title">404 — not found</h1><p>That page isn't here.</p><span class="art-back" data-go="/articles">← back to notes</span></div>`;
+    const i = ARTICLES.findIndex(x => x.slug === slug);
+    const next = ARTICLES[(i + 1) % ARTICLES.length];
+    return `
+      <article class="art-page">
+        <span class="art-back" data-go="/articles">← all notes</span>
+        <div class="art-eyebrow">${a.tag} · ${fmtDate(a.date)}</div>
+        <h1 class="art-title">${a.title}</h1>
+        <div class="art-byline">by Tyler Hoang · ~${Math.max(2, Math.round(a.body.replace(/<[^>]+>/g,'').split(/\s+/).length / 200))} min read</div>
+        <div class="art-body">${a.body}</div>
+        <div class="art-foot">
+          <span>↑ thanks for reading</span>
+          <span class="more" data-go="/articles/${next.slug}">next: ${next.title.replace(/<[^>]+>/g,'')} →</span>
+        </div>
+      </article>
+    `;
+  }
+
+  function pathToContent(path) {
+    if (path === '/articles' || path === '/articles/') return renderIndex();
+    const m = path.match(/^\/articles\/([a-z0-9-]+)$/);
+    if (m) return renderArticle(m[1]);
+    return `<div class="art-page"><h1 class="art-title">404</h1><p>No page at <code>${path}</code>.</p><span class="art-back" data-go="/articles">← back</span></div>`;
+  }
+
+  function updateChrome(path) {
+    document.getElementById('br-host').textContent = HOST;
+    document.getElementById('br-path').textContent = path;
+    const isArt = /^\/articles\/[a-z0-9-]+$/.test(path);
+    const slug = isArt ? path.split('/').pop() : null;
+    const titleTxt = isArt && ARTICLE_INDEX[slug]
+      ? `${ARTICLE_INDEX[slug].title.replace(/<[^>]+>/g,'')} — fun.tylerhoang.xyz`
+      : 'Notes — fun.tylerhoang.xyz';
+    document.getElementById('br-title').textContent = titleTxt;
+    document.querySelectorAll('.browser-bookmarks .bm').forEach(bm => {
+      bm.classList.toggle('active', bm.dataset.go === path);
+    });
+    document.getElementById('br-back').disabled = browserHistory.idx <= 0;
+    document.getElementById('br-fwd').disabled = browserHistory.idx >= browserHistory.stack.length - 1;
+  }
+
+  function loadPath(path, pushHist = true) {
+    const page = document.getElementById('br-page');
+    const status = document.getElementById('br-status');
+    const progress = document.getElementById('br-progress');
+    status.textContent = `Contacting fun.tylerhoang.xyz…`;
+    progress.style.display = 'block';
+    progress.querySelector('.progress-bar').style.width = '20%';
+    setTimeout(() => {
+      progress.querySelector('.progress-bar').style.width = '70%';
+      status.textContent = `Reading ${path}…`;
+    }, 80);
+    setTimeout(() => {
+      page.innerHTML = pathToContent(path);
+      page.scrollTop = 0;
+      if (pushHist) {
+        browserHistory.stack = browserHistory.stack.slice(0, browserHistory.idx + 1);
+        browserHistory.stack.push(path);
+        browserHistory.idx = browserHistory.stack.length - 1;
+      }
+      updateChrome(path);
+      progress.querySelector('.progress-bar').style.width = '100%';
+      setTimeout(() => {
+        progress.style.display = 'none';
+        progress.querySelector('.progress-bar').style.width = '0%';
+        status.textContent = 'Done';
+      }, 120);
+    }, 220);
+  }
+
+  // delegated click handler — anything with data-go inside the browser navigates
+  document.getElementById('w-browser').addEventListener('click', (e) => {
+    const t = e.target.closest('[data-go]');
+    if (t) { e.preventDefault(); loadPath(t.dataset.go); }
+  });
+  document.getElementById('br-back').addEventListener('click', () => {
+    if (browserHistory.idx > 0) { browserHistory.idx--; loadPath(browserHistory.stack[browserHistory.idx], false); }
+  });
+  document.getElementById('br-fwd').addEventListener('click', () => {
+    if (browserHistory.idx < browserHistory.stack.length - 1) { browserHistory.idx++; loadPath(browserHistory.stack[browserHistory.idx], false); }
+  });
+  document.getElementById('br-home').addEventListener('click', () => loadPath('/articles'));
+  document.getElementById('br-go').addEventListener('click', () => {
+    loadPath(document.getElementById('br-path').textContent.trim() || '/articles');
+  });
+  document.getElementById('br-reload').addEventListener('click', (e) => {
+    const btn = e.currentTarget;
+    btn.classList.remove('spinning'); void btn.offsetWidth; btn.classList.add('spinning');
+    loadPath(browserHistory.stack[browserHistory.idx] || '/articles', false);
   });
+  // initial page load
+  loadPath('/articles');
 
   // fetch films
   Aero.fetchFilms()
-- 
cgit v1.3-2-g0d8e