b596b2d608
UI: - Editor tab strip above the report with per-spec scoping (sidebar tree, results, source, status counts, hero copy); cookie-persisted active spec - Status pill + workers / headed overflow menu moved from topbar into the editor bar to slim the global chrome - Summary stripe and pending-preview body so the report never lands empty - Tag bar with first-6 + "+N more" + clear; auto-run first idle test on load - Mobile drawer for the test explorer; keyboard shortcuts overlay (?) - Skipped + failed sample tests with proper icons / step rendering Tabs: - Network tab: public git.levkin.ca repos rendered as Playwright-style GET ... 200 rows with expandable JSON bodies and repo links - Trace tab: career timeline as a Gantt-style waterfall - Console tab: live run events; Source tab regenerates per active spec Theming: - Wire up high-contrast (WCAG AAA) theme: cycle dark → light → hc → dark, widen theme cookie regex to accept "hc", add HC overrides for syntax tokens and a few hardcoded "text-on-accent" sites in app.css Testing: - Add @playwright/test dev dependency + playwright.config.ts on port 3173 - tests/portfolio.spec.ts: 37 specs across 12 describe blocks - scripts/fetch-gitea-repos.mjs to refresh giteaRepos from the Gitea API Docs / housekeeping: - README rewritten to reflect editor strip, network tab, HC theme, test runner, and updated project structure - IDEAS.md trimmed to remaining roadmap; shipped items removed - .gitignore ignores stray PDFs at repo root (canonical resume in assets/) - Add assets/ilia-dobkin-resume.pdf as the canonical resume binary Co-authored-by: Cursor <cursoragent@cursor.com>
209 lines
11 KiB
HTML
209 lines
11 KiB
HTML
<!doctype html>
|
||
<html lang="en" data-theme="dark">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<title>Ilia Dobkin — portfolio.spec.ts</title>
|
||
<meta name="description" content="Ilia Dobkin — Senior SDET portfolio, styled as a Playwright test runner." />
|
||
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg" />
|
||
<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=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||
<link rel="stylesheet" href="css/base.css?v=7" />
|
||
<link rel="stylesheet" href="css/app.css?v=7" />
|
||
</head>
|
||
<body>
|
||
<!-- ============== TOP BAR ============== -->
|
||
<header class="topbar" role="banner">
|
||
<div class="topbar__left">
|
||
<button class="btn btn--ghost menu-btn" id="menu-btn" aria-label="Open test explorer" title="Test Explorer">
|
||
<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M2 4h12M2 8h12M2 12h12" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
|
||
</button>
|
||
<a class="brand" href="#" aria-label="Ilia Dobkin home">
|
||
<svg class="brand__logo" viewBox="0 0 32 32" fill="none" aria-hidden="true">
|
||
<!-- Custom mark: a play-triangle inside a soft rounded square, evoking a runner -->
|
||
<rect x="2" y="2" width="28" height="28" rx="7" fill="currentColor" opacity="0.12"/>
|
||
<rect x="2" y="2" width="28" height="28" rx="7" stroke="currentColor" stroke-width="1.5"/>
|
||
<path d="M13 10.5 L23 16 L13 21.5 Z" fill="#4ec9b0"/>
|
||
<circle cx="9" cy="16" r="1.4" fill="currentColor"/>
|
||
</svg>
|
||
<span class="brand__name">ilia.dobkin</span>
|
||
</a>
|
||
<span class="crumb"><span class="crumb__sep">/</span> tests <span class="crumb__sep">/</span> <strong>portfolio.spec.ts</strong></span>
|
||
</div>
|
||
|
||
<div class="topbar__right">
|
||
<button class="btn btn--run" id="run-all" title="Run all tests">
|
||
<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M4 3 L13 8 L4 13 Z" fill="currentColor"/></svg>
|
||
<span>Run all</span>
|
||
</button>
|
||
<button class="btn btn--ghost" id="stop-all" title="Stop" disabled>
|
||
<svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true"><rect x="3" y="3" width="10" height="10" rx="1.5" fill="currentColor"/></svg>
|
||
</button>
|
||
<button class="btn btn--ghost" id="reset-all" title="Reset">
|
||
<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M8 3.5a4.5 4.5 0 1 1-4.39 5.5" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"/><path d="M8 1 L8 5 L4 5" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
</button>
|
||
<button class="btn btn--ghost" id="theme-toggle" title="Toggle theme (T)" aria-label="Toggle theme">
|
||
<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M11 8a3 3 0 1 1-3-3 3 3 0 0 0 3 3z" fill="currentColor"/></svg>
|
||
</button>
|
||
<button class="btn btn--ghost" id="kshelp-open" title="Keyboard shortcuts (?)" aria-label="Keyboard shortcuts">
|
||
<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">
|
||
<circle cx="8" cy="8" r="6.4" stroke="currentColor" stroke-width="1.4" fill="none"/>
|
||
<path d="M6 6.4c.1-1.2 1-2 2.1-2s2 .8 2 1.9c0 .9-.6 1.4-1.4 1.8-.5.3-.7.6-.7 1.1v.3" stroke="currentColor" stroke-width="1.4" fill="none" stroke-linecap="round"/>
|
||
<circle cx="8" cy="11.6" r=".75" fill="currentColor"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ============== MAIN LAYOUT ============== -->
|
||
<main class="layout">
|
||
<div class="sidebar-scrim" id="sidebar-scrim"></div>
|
||
<!-- Sidebar: Test Explorer -->
|
||
<aside class="sidebar" id="sidebar" aria-label="Test Explorer">
|
||
<div class="sidebar__head">
|
||
<span class="sidebar__title">TEST EXPLORER</span>
|
||
<button class="iconbtn" id="expand-all" title="Expand all" aria-label="Expand all"><svg viewBox="0 0 16 16" width="12" height="12"><path d="M3 6 L8 11 L13 6" stroke="currentColor" stroke-width="1.6" fill="none"/></svg></button>
|
||
</div>
|
||
|
||
<div class="filter">
|
||
<span class="filter__icon">⌕</span>
|
||
<input id="grep" type="text" placeholder='--grep "@playwright"' autocomplete="off" spellcheck="false" />
|
||
</div>
|
||
|
||
<div class="tags" id="tag-bar" aria-label="Filter by tag"></div>
|
||
|
||
<nav class="tree" id="tree" aria-label="Tests"></nav>
|
||
|
||
<div class="sidebar__foot">
|
||
<span id="sidebar-foot-meta">v1.0.0 · 12 tests</span>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- Main Pane -->
|
||
<section class="main" aria-label="Test results">
|
||
<!-- Editor bar: spec tabs on the left, status pill + overflow menu on the right.
|
||
The status pill (counts for the active spec) and the small "⋯" menu
|
||
(workers / headed) used to live in the top bar; they were merged here
|
||
to slim that strip and keep run state visually anchored to the editor. -->
|
||
<div class="editor-bar">
|
||
<div class="editor-strip" id="editor-strip" role="tablist" aria-label="Open spec files"></div>
|
||
<div class="editor-bar__right">
|
||
<div class="status-pill" id="status-pill" aria-live="polite">
|
||
<span class="dot dot--idle" id="status-dot"></span>
|
||
<span id="status-text">idle</span>
|
||
<span class="status-counts">
|
||
<span class="cnt cnt--pass" title="passed">✓ <em id="cnt-pass">0</em></span>
|
||
<span class="cnt cnt--fail" title="failed">✗ <em id="cnt-fail">0</em></span>
|
||
<span class="cnt cnt--skip" title="skipped">⊘ <em id="cnt-skip">0</em></span>
|
||
</span>
|
||
</div>
|
||
<div class="overflow" id="overflow">
|
||
<button class="overflow__btn" id="overflow-btn" type="button" aria-haspopup="menu" aria-expanded="false" aria-label="Run options">
|
||
<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><circle cx="3.4" cy="8" r="1.3" fill="currentColor"/><circle cx="8" cy="8" r="1.3" fill="currentColor"/><circle cx="12.6" cy="8" r="1.3" fill="currentColor"/></svg>
|
||
</button>
|
||
<div class="overflow__menu" id="overflow-menu" role="menu" hidden>
|
||
<label class="toggle workers" title="Workers — number of tests to run in parallel">
|
||
<span>--workers=</span>
|
||
<select id="workers" aria-label="Workers">
|
||
<option value="1">1</option>
|
||
<option value="2">2</option>
|
||
<option value="4">4</option>
|
||
</select>
|
||
</label>
|
||
<label class="toggle" title="Headed mode (slower animations)">
|
||
<input type="checkbox" id="headed" />
|
||
<span>--headed</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tabs" role="tablist">
|
||
<button class="tab is-active" data-tab="report" role="tab">Report</button>
|
||
<button class="tab" data-tab="trace" role="tab">Trace</button>
|
||
<button class="tab" data-tab="source" role="tab">Source</button>
|
||
<button class="tab" data-tab="network" role="tab">Network</button>
|
||
<button class="tab" data-tab="console" role="tab">Console</button>
|
||
<div class="tabs__spacer"></div>
|
||
</div>
|
||
|
||
<!-- Report -->
|
||
<div class="pane is-active" id="pane-report" role="tabpanel">
|
||
<div class="hero">
|
||
<div class="hero__tag">describe</div>
|
||
<h1 class="hero__title">Ilia Dobkin</h1>
|
||
<p class="hero__sub">Senior SDET · Toronto, ON · <span class="mono">test.describe("portfolio")</span></p>
|
||
<p class="hero__hint">Click the green <span class="kbd">▶</span> next to any test to run it — or press <span class="kbd">Run all</span> above.</p>
|
||
</div>
|
||
<!-- Tiny run-history banner above the results list. Pulls the eye to
|
||
dynamic data (e.g. "Last run · 1.4s · 2 passed · 2 pending"). -->
|
||
<div class="summary-stripe" id="summary-stripe" aria-live="polite"></div>
|
||
<div class="results" id="results"></div>
|
||
</div>
|
||
|
||
<!-- Trace -->
|
||
<div class="pane" id="pane-trace" role="tabpanel">
|
||
<div class="trace-head">
|
||
<div class="trace-head__title">Career timeline · trace viewer</div>
|
||
<div class="trace-head__meta"><span class="legend"><i class="sw sw--pass"></i> pass</span><span class="legend"><i class="sw sw--info"></i> milestone</span></div>
|
||
</div>
|
||
<div class="trace" id="trace"></div>
|
||
<div class="trace-rule"></div>
|
||
<div class="trace-axis" id="trace-axis"></div>
|
||
</div>
|
||
|
||
<!-- Source -->
|
||
<div class="pane" id="pane-source" role="tabpanel">
|
||
<div class="source" id="source"></div>
|
||
</div>
|
||
|
||
<!-- Network (Gitea repos as Playwright-style requests) -->
|
||
<div class="pane" id="pane-network" role="tabpanel">
|
||
<div class="network-pane">
|
||
<div class="network-head">
|
||
<div class="network-head__title">Network · git.levkin.ca</div>
|
||
<div class="network-head__meta"><span class="legend"><i class="sw sw--pass"></i> 200</span><span class="legend mono">application/json</span></div>
|
||
</div>
|
||
<div class="network-scroll" id="gitea-network" data-repo-list="1"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Console -->
|
||
<div class="pane" id="pane-console" role="tabpanel">
|
||
<div class="console" id="console"></div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- ============== BOTTOM STATUS BAR ============== -->
|
||
<footer class="statusbar" role="contentinfo">
|
||
<span class="sb__seg">⎇ main</span>
|
||
<span class="sb__seg">● 0</span>
|
||
<span class="sb__seg" id="sb-runtime">runtime: 0ms</span>
|
||
<span class="sb__spacer"></span>
|
||
<span class="sb__seg">TypeScript</span>
|
||
<span class="sb__seg">UTF-8</span>
|
||
<span class="sb__seg">LF</span>
|
||
<span class="sb__seg sb__seg--accent">Playwright 1.49</span>
|
||
</footer>
|
||
|
||
<!-- ============== KEYBOARD SHORTCUTS OVERLAY ============== -->
|
||
<div class="kshelp" id="kshelp" hidden role="dialog" aria-modal="true" aria-labelledby="kshelp-title">
|
||
<div class="kshelp__scrim" id="kshelp-scrim"></div>
|
||
<div class="kshelp__panel" tabindex="-1">
|
||
<div class="kshelp__head">
|
||
<span class="kshelp__title" id="kshelp-title">Keyboard shortcuts</span>
|
||
<button class="kshelp__close" id="kshelp-close" type="button" aria-label="Close">×</button>
|
||
</div>
|
||
<div class="kshelp__grid" id="kshelp-grid"></div>
|
||
<div class="kshelp__foot mono"><span class="kbd">?</span> toggles · <span class="kbd">Esc</span> closes</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="js/data.js?v=7"></script>
|
||
<script src="js/app.js?v=7"></script>
|
||
</body>
|
||
</html>
|