test.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Proposal & Demo • Christopher Lam</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;600;700&display=swap" rel="stylesheet">
  <style>
    :root { --bg: #0b0c0f; --panel:#0f1216; --fg: #e8e8e8; --muted:#9aa0a6; --line:#22252b; --accent:#f6bd60; }
    *{ box-sizing:border-box; }
    html,body{ height:100%; margin:0; }
    body{ font-family:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; background:var(--bg); color:var(--fg); }
    a{ color:var(--accent); text-decoration:none; }
    code,kbd{ background:#111318; border:1px solid #1d2128; padding:.1rem .3rem; border-radius:.3rem; }

    #app{ min-height:100dvh; display:grid; grid-template-rows:auto auto 1fr auto; }

    .topbar{ position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:1rem; padding:.9rem 1.1rem; border-bottom:1px solid var(--line); backdrop-filter: blur(6px); background:linear-gradient(180deg, rgba(11,12,15,.97), rgba(11,12,15,.92)); }
    .topbar a{ font-weight:600; opacity:.95; }
    .spacer{ flex:1; }
    .btn{ appearance:none; border:1px solid #2c313a; background:#15171c; color:var(--fg); padding:.5rem .7rem; border-radius:.5rem; font:inherit; cursor:pointer; }
    .btn:hover{ border-color:#3a404b; }
    .pill{ border:1px solid var(--line); padding:.25rem .5rem; border-radius:999px; color:var(--muted); }

    .section{ border:1px solid var(--line); background:var(--panel); border-radius:.8rem; padding:1rem; margin:1rem; }
    .section h2{ margin:0 0 .6rem 0; font-size:1rem; }
    .cols{ display:grid; grid-template-columns: 2fr 1fr; gap:1rem; }

    .toolbar{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin:.8rem 1rem 0; }
    .input{ width:240px; background:#0f1216; border:1px solid #2b3038; color:var(--fg); border-radius:.5rem; padding:.5rem .6rem; font:inherit; }
    select.input{ width:auto; }

    .grid{ display:grid; grid-template-columns: repeat( auto-fill, minmax(220px,1fr) ); gap:.9rem; padding:1rem; }
    .card{ border:1px solid var(--line); background:var(--panel); border-radius:.7rem; overflow:hidden; display:grid; grid-template-rows: 140px auto; cursor:pointer; }
    .thumb{ position:relative; background:#0c0e12; }
    .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
    .card h3{ margin:.7rem .8rem .2rem; font-size:.95rem; }
    .meta{ margin:0 .8rem .8rem; color:var(--muted); font-size:.85rem; display:flex; gap:.5rem; flex-wrap:wrap; }

    dialog[open]{ border:1px solid var(--line); background:var(--panel); color:var(--fg); border-radius:.8rem; width:min(900px, 92vw); }
    .modal-head{ display:flex; align-items:center; gap:.8rem; padding:.8rem; border-bottom:1px solid var(--line); }
    .modal-body{ display:grid; grid-template-columns: 1.2fr 1fr; gap:1rem; padding:1rem; }
    .modal-img{ width:100%; height:360px; background:#0c0e12; display:grid; place-items:center; border:1px solid var(--line); border-radius:.6rem; overflow:hidden; }
    .modal-img img{ width:100%; height:100%; object-fit:cover; }

    footer{ border-top:1px solid var(--line); padding: .9rem 1.1rem; color:var(--muted); }

    @media (max-width: 1000px){ .cols{ grid-template-columns: 1fr; } .modal-body{ grid-template-columns: 1fr; } }
  </style>
</head>
<body>
  <div id="app">
    <div class="topbar">
      <a href="/index.html"><strong>Christopher Lam</strong></a>
      <a href="/projects.html">projects</a>
      <a href="/photos.html">photos</a>
      <a href="/resume.html">resume</a>
      <span class="spacer"></span>
      <span class="pill" id="clock">SF • --:--:--</span>
      <button class="btn" id="themeBtn" title="Toggle theme (T)">Theme</button>
    </div>

    <div class="section">
      <h2>Website Improvement Proposal (No Frameworks)</h2>
      <div class="cols">
        <div>
          <ol>
            <li><strong>Data‑driven projects</strong>: keep project content in a single JSON file. The page maps that data into cards automatically. No copy‑paste HTML.</li>
            <li><strong>Search, filter, and sort</strong>: instant UI with keyboard shortcuts (<kbd>/</kbd> focuses search).</li>
            <li><strong>Accessible modals</strong> using native <code>&lt;dialog&gt;</code> with focus trap and <kbd>Esc</kbd> to close.</li>
            <li><strong>Progressive enhancement</strong>: page works without JS (basic markup), then upgrades with JS.</li>
            <li><strong>Performance</strong>: lazy images, reduced layout shift, small inline JS (no CDN). Ready for static hosting.</li>
            <li><strong>Design consistency</strong>: matches your IBM Plex / dark motif, with light mode toggle saved to <code>localStorage</code>.</li>
          </ol>
        </div>
        <div>
          <div class="pill" style="display:inline-block; margin-bottom:.5rem;">Demo controls</div>
          <div>• <kbd>/</kbd> focus search • <kbd>T</kbd> toggle theme • click a card to open details • <kbd>Esc</kbd> close</div>
        </div>
      </div>
    </div>

    <div class="toolbar" aria-label="Project controls">
      <input id="q" class="input" placeholder="Search projects…" aria-label="Search" />
      <select id="tag" class="input" aria-label="Filter by tag"></select>
      <select id="sort" class="input" aria-label="Sort order">
        <option value="new">Newest → Oldest</option>
        <option value="old">Oldest → Newest</option>
      </select>
    </div>

    <main id="grid" class="grid" aria-live="polite"></main>

    <dialog id="modal" aria-label="Project details">
      <div class="modal-head">
        <strong id="mTitle">Title</strong>
        <span class="spacer"></span>
        <button class="btn" id="closeBtn">Close</button>
      </div>
      <div class="modal-body">
        <div class="modal-img"><img id="mImg" alt="" /></div>
        <div>
          <p class="pill" id="mMeta" style="display:inline-block"></p>
          <p id="mBlurb" style="margin-top:.6rem"></p>
        </div>
      </div>
    </dialog>

    <footer>
      <span>Lightweight, accessible, and fast. This page is a working blueprint you can apply to <code>projects.html</code>.</span>
    </footer>
  </div>

  <script>
  (()=>{
    // ——— Live clock ———
    const clock = document.getElementById('clock');
    const tick = () => clock.textContent = 'SF • ' + new Date().toLocaleTimeString('en-US', { timeZone:'America/Los_Angeles' });
    tick(); setInterval(tick, 1000);

    // ——— Theme toggle (respects system, saves choice) ———
    const themeBtn = document.getElementById('themeBtn');
    const applyTheme = t => { document.documentElement.style.colorScheme = t; localStorage.setItem('theme', t); };
    const saved = localStorage.getItem('theme');
    applyTheme(saved || (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'));
    themeBtn.addEventListener('click', ()=> applyTheme((localStorage.getItem('theme')==='dark')?'light':'dark'));

    // ——— Demo data (replace with /projects.json later) ———
    const PROJECTS = [
      { id:'multitool', title:'Multi‑Tool Design', year:2022, tags:['mechanical','design'], img:'https://picsum.photos/seed/multi/800/600',
        blurb:'Pocket‑size multi‑tool for mechanical engineers: calipers, wire stripper, screwdriver — constraints driven, practical, portable.' },
      { id:'lamp', title:'Analog‑Dim LED Lamp', year:2025, tags:['arduino','electronics'], img:'https://picsum.photos/seed/lamp/800/600',
        blurb:'Arduino Nano + MCP4725 DAC driving LED driver with rotary encoder, smooth perceptual dimming & state save.' },
      { id:'mousetrap', title:'Mousetrap Car (1st Place)', year:2024, tags:['physics','mechanics'], img:'https://picsum.photos/seed/mouse/800/600',
        blurb:'Anticipated torque & tracking issues at design time; won for reliability and straight‑line performance.' },
      { id:'faceshields', title:'3D‑Printed Face Shields', year:2020, tags:['community','manufacturing'], img:'https://picsum.photos/seed/shield/800/600',
        blurb:'Team printed 3,500 shields for NorCal Ambulance during COVID — logistics, QC, and iteration.' },
      { id:'nota', title:'NOTA: Essays on Dialogue', year:2025, tags:['writing','philosophy'], img:'https://picsum.photos/seed/nota/800/600',
        blurb:'Pieces on free expression, diversity of thought, and constructive disagreement.' },
      { id:'photography', title:'Photography Portfolio', year:2021, tags:['photos','design'], img:'https://picsum.photos/seed/photo/800/600',
        blurb:'Street & travel photos; color‑sensitive curation and print‑ready exports.' }
    ];

    // ——— Build tag list ———
    const tagSel = document.getElementById('tag');
    const tags = ['all', ...Array.from(new Set(PROJECTS.flatMap(p=>p.tags)))];
    tagSel.innerHTML = tags.map(t=>`<option value="${t}">${t}</option>`).join('');

    // ——— Render grid ———
    const grid = document.getElementById('grid');
    const q = document.getElementById('q');
    const sortSel = document.getElementById('sort');

    function render(){
      const needle = q.value.trim().toLowerCase();
      const tag = tagSel.value;
      const sort = sortSel.value;
      let out = PROJECTS.filter(p => (
        (tag==='all' || p.tags.includes(tag)) && (!needle || p.title.toLowerCase().includes(needle) || p.blurb.toLowerCase().includes(needle))
      ));
      out.sort((a,b)=> sort==='new' ? b.year-a.year : a.year-b.year);

      grid.innerHTML = out.map(p => `
        <article class="card" data-id="${p.id}" tabindex="0" aria-label="Open ${p.title}">
          <div class="thumb"><img src="${p.img}" alt="" loading="lazy"></div>
          <h3>${p.title}</h3>
          <div class="meta"><span>${p.year}</span> • ${p.tags.map(t=>`<span class="pill">${t}</span>`).join(' ')}</div>
        </article>
      `).join('') || `<div class="pill">No matches. Try a different tag or search.</div>`;
    }

    q.addEventListener('input', render);
    tagSel.addEventListener('change', render);
    sortSel.addEventListener('change', render);

    // ——— Keyboard shortcuts ———
    addEventListener('keydown', (e)=>{
      if(e.key==='/' && e.target.tagName!=='INPUT' && e.target.tagName!=='TEXTAREA'){ e.preventDefault(); q.focus(); }
      if(e.key.toLowerCase()==='t'){ themeBtn.click(); }
      if(e.key==='Escape'){ closeModal(); }
    });

    // ——— Modal ———
    const modal = document.getElementById('modal');
    const mTitle = document.getElementById('mTitle');
    const mImg = document.getElementById('mImg');
    const mMeta = document.getElementById('mMeta');
    const mBlurb = document.getElementById('mBlurb');
    const closeBtn = document.getElementById('closeBtn');

    function openModal(p){
      mTitle.textContent = p.title;
      mImg.src = p.img; mImg.alt = p.title;
      mMeta.textContent = `${p.year} • ${p.tags.join(' · ')}`;
      mBlurb.textContent = p.blurb;
      modal.showModal();
    }
    function closeModal(){ if(modal.open) modal.close(); }
    closeBtn.addEventListener('click', closeModal);
    modal.addEventListener('click', (e)=>{ if(e.target === modal) closeModal(); });

    grid.addEventListener('click', (e)=>{
      const card = e.target.closest('.card');
      if(!card) return;
      const id = card.getAttribute('data-id');
      const p = PROJECTS.find(x=>x.id===id);
      if(p) openModal(p);
    });
    grid.addEventListener('keydown', (e)=>{
      if(e.key==='Enter' || e.key===' '){
        const card = e.target.closest('.card');
        if(!card) return; const id = card.getAttribute('data-id');
        const p = PROJECTS.find(x=>x.id===id); if(p){ e.preventDefault(); openModal(p); }
      }
    });

    // Initial render
    render();
  })();
  </script>
</body>
</html>