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>
87 lines
4.4 KiB
Markdown
87 lines
4.4 KiB
Markdown
# IDEAS — portfolio.spec.ts roadmap
|
||
|
||
Future enhancements, ranked by **payoff ÷ effort**. Quick wins on top.
|
||
|
||
---
|
||
|
||
## Quick wins (an evening or less)
|
||
|
||
### 1. Persist filter + tab state in URL
|
||
Add `?grep=@playwright&tab=trace` so links into specific views work. Mirror to / from `location.hash`.
|
||
|
||
- **Why**: Shareable deep links to "what I want a recruiter to see."
|
||
- **Where**: `app.js` → wrap `applyFilter` and tab clicks to call `history.replaceState`.
|
||
|
||
### 2. Footer "playback speed" slider
|
||
1×, 2×, 5×, 10× — multiply the `duration` of every test. Pairs well with the `--headed` toggle.
|
||
|
||
- **Where**: `app.js` → make `headed()` return a numeric multiplier, not a boolean.
|
||
|
||
### 3. Real Playwright HTML report download button
|
||
A "View report" button that bundles the current run state into an actual `playwright-report/index.html`-style page and downloads it. Bonus points: include screenshots of the current page.
|
||
|
||
### 4. Network tab filter + copy-as-cURL
|
||
Add a filter input above the repo list and a "Copy cURL" button per row.
|
||
|
||
---
|
||
|
||
## Medium lift (a weekend)
|
||
|
||
### 5. Trace tab drill-down
|
||
Click a bar on the career timeline → scroll the Report tab to that company and highlight it. Add a hover tooltip with role + bullet count + key tech.
|
||
|
||
- **Where**: `app.js` → bind `click` handlers in `renderTrace()`, animate `scrollIntoView`.
|
||
|
||
### 6. Pinned-repo / activity feed
|
||
On Projects or Network, pull **live** data from Gitea: latest commit, last push, star count — without baking `data.js`. Render with the same green-check / red-x vocabulary.
|
||
|
||
- **Approach**: small backend (Cloudflare Workers / Vercel function) that proxies `GET /api/v1/repos/{owner}/{repo}` and caches for 5–10 minutes (CORS-friendly). Static snapshot in `giteaRepos` already covers descriptions offline.
|
||
|
||
### 7. Real resume PDF generation
|
||
The current `download resume.pdf` opens a print-styled HTML page. Replace with a true PDF generated server-side (Puppeteer) or client-side (`pdf-lib`, `jsPDF`). Multi-page, properly hyphenated, with embedded fonts.
|
||
|
||
### 8. Custom domain on `iliadobkin.com`
|
||
- Buy / point domain → static host (S3 + CloudFront, or your Proxmox box behind Caddy)
|
||
- Set up Caddy site block with auto-TLS
|
||
- Add `og:image` (a screenshot of the runner) and `og:title` for nice link previews
|
||
- Plumb a tiny analytics pixel (Plausible or self-hosted Umami)
|
||
|
||
---
|
||
|
||
## Ambitious experiments (a project on its own)
|
||
|
||
### 9. MCP integration showcase
|
||
Make a tiny live demo of your Playwright MCP server — embed a Cursor-style sidebar showing fake assistant chat where an LLM "writes a test" against the site and you watch the test appear and run.
|
||
|
||
### 10. Live "watch mode"
|
||
Add a fake file-tree on the left (`portfolio.spec.ts`, `fixtures/`, `playwright.config.ts`). Clicking a file opens it in a code-editor view (Monaco editor, full syntax highlighting). Editing reruns the affected tests.
|
||
|
||
### 11. Tag-driven "narrative mode"
|
||
Click a tag and the site replays as a story: it runs only tests with that tag, in a deliberate order, with auto-scroll between sections. Great for recruiters with 30 seconds. "Show me the iGaming story" → runs experience@iGaming, skills@playwright, metrics tests in sequence.
|
||
|
||
### 12. Recording mode (literal demo videos)
|
||
Use the MediaRecorder API to capture a 20-second video of a Run All cycle and offer it as a download — recruiters can embed in Slack.
|
||
|
||
---
|
||
|
||
## Content / polish backlog
|
||
|
||
- [ ] Add 1–2 GIFs or screenshots in this README
|
||
- [ ] Generate `og:image` social card (screenshot the dark hero)
|
||
- [ ] Write a short blog post on `iliadobkin.com/blog` titled "I built my portfolio as a Playwright test runner"
|
||
- [ ] Add a "References" test: collapsed quotes from past managers / colleagues, each rendered as a test assertion
|
||
- [ ] Audit color contrast in light theme (WCAG AA minimum)
|
||
- [ ] Test on iOS Safari + Firefox (currently QA'd in Chromium)
|
||
- [ ] Add a "print" stylesheet so the whole Report tab prints clean
|
||
- [ ] Split `projects` into three tests (homelab / MCP / AI) so `projects.spec.ts` reads as 3 sibling rows
|
||
|
||
---
|
||
|
||
## Notes to self
|
||
|
||
Things to keep invariant as the project grows:
|
||
|
||
1. **`data.js` stays human-editable.** No code-gen, no schema validation, no DSL. Just JS objects.
|
||
2. **Vanilla, framework-free.** If a feature genuinely needs React or a charting lib, weigh the bundle cost — the whole site is ~30 KB unminified.
|
||
3. **Every interaction should *feel* like a real test runner.** When in doubt, ask: "what would Playwright / Vitest UI do here?"
|