128 lines
7.3 KiB
Markdown
128 lines
7.3 KiB
Markdown
# IDEAS — portfolio.spec.ts roadmap
|
||
|
||
Future enhancements, ranked by **payoff ÷ effort**. Quick wins on top.
|
||
|
||
---
|
||
|
||
## Quick wins (an evening or less)
|
||
|
||
### 1. Add a deliberate "failure" or "skipped" test
|
||
Set one test (e.g. `should accept inbound contact`) to status `skipped` with an amber ⊘ icon, or have a `should match expected response time` test that fails with a stack trace. Adds visual variety + shows you understand real test output.
|
||
|
||
- **Why**: A test suite that's 100% green looks fake. Mixed outcomes feel authentic and let you show error-rendering chops.
|
||
- **Where**: `data.js` → add `status: 'skipped' | 'failed'` field on tests; extend `statusIcon()` / `statusClass()` in `app.js`.
|
||
|
||
### 2. Workers indicator (`--workers=4`)
|
||
Add a dropdown next to `--headed` that picks 1, 2, or 4 workers. Run-all then runs N tests in parallel visually, with N progress bars filling concurrently.
|
||
|
||
- **Why**: Shows off parallelization (your daily reality), looks cool.
|
||
- **Where**: `app.js` → rewrite `runAll()` to pull from a queue with `Promise.all` of N workers.
|
||
|
||
### 3. Keyboard shortcuts overlay
|
||
- `R` runs all, `Esc` stops, `T` toggles theme, `/` focuses grep, `1`–`9` runs that test, `?` opens a help overlay.
|
||
- **Why**: Power-user keybindings feel native to VS Code / terminal users.
|
||
- **Where**: `app.js` → add `document.addEventListener('keydown', ...)` near `init()`.
|
||
|
||
### 4. 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`.
|
||
|
||
### 5. 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.
|
||
|
||
### 6. 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.
|
||
|
||
---
|
||
|
||
## Medium lift (a weekend)
|
||
|
||
### 7. 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`.
|
||
|
||
### 8. Network tab
|
||
A new tab modeled after Playwright's network panel. Each project entry becomes a fake XHR — `GET git.levkin.ca/api/repos/playwright-mcp 200 142ms` — clicking expands request/response detail. Same visual language as Source.
|
||
|
||
- **Why**: Plays directly into your "I see networks every day" identity.
|
||
|
||
### 9. Pinned-repo / activity feed
|
||
On Projects, pull live data from your Gitea (`git.levkin.ca`) or GitHub: latest commit, last build status, star count. Render with the same green-check / red-x vocabulary.
|
||
|
||
- **Approach**: small backend (Cloudflare Workers / Vercel function) that proxies a couple of API calls and caches for 5–10 minutes.
|
||
|
||
### 10. 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.
|
||
|
||
### 11. Search-runner: open-command style
|
||
`Ctrl+P` opens a command palette with fuzzy matching across test names, sections, and tags — VS Code-style.
|
||
|
||
### 12. Code-coverage strip
|
||
A small bar at the top of the report saying `coverage: 9 / 9 tests · 100%`. When tests are filtered out, it shows the current selection's coverage. Tiny detail, big SDET energy.
|
||
|
||
### 13. 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) — bonus: render a private `/admin` route that shows live visitor data in a Console-tab style
|
||
|
||
### 14. Dark+ light high-contrast variant
|
||
Third theme — high-contrast accessible mode (WCAG AAA). Toggle cycles dark → light → high-contrast. Reinforces your AODA/WCAG expertise.
|
||
|
||
---
|
||
|
||
## Ambitious experiments (a project on its own)
|
||
|
||
### 15. Real Playwright tests of the portfolio
|
||
Ship a `tests/` directory with actual Playwright specs that exercise the site (`page.click('#run-all')`, asserts that 9 tests pass). Include the report in CI. The site that looks like a Playwright report is itself tested by Playwright. Self-referential, beautiful.
|
||
|
||
### 16. 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. Pure flex.
|
||
|
||
### 17. 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. Becomes more "interactive IDE" than portfolio.
|
||
|
||
### 18. Multi-spec navigation
|
||
Split content across multiple "spec files":
|
||
- `portfolio.spec.ts` — about, experience, contact
|
||
- `projects.spec.ts` — homelab, MCP server, local AI
|
||
- `skills.spec.ts` — tag-driven
|
||
- `playground.spec.ts` — interactive demos, mini-games, fun stuff
|
||
|
||
Each gets its own tab in the editor strip at the top.
|
||
|
||
### 19. 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.
|
||
|
||
### 20. 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. Closing the loop on "you're a tester, prove the site works" with video evidence.
|
||
|
||
---
|
||
|
||
## 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" — pair with this repo
|
||
- [ ] Add a "References" test: collapsed quotes from past managers / colleagues, each rendered as a test assertion (`expect(reference.satisfaction).toBeGreaterThan(threshold)`)
|
||
- [ ] Audit color contrast in light theme (WCAG AA minimum)
|
||
- [ ] Add ARIA labels to the run buttons (`aria-label="Run test: should introduce Ilia Dobkin"`)
|
||
- [ ] Test on iOS Safari + Firefox (currently QA'd in Chromium)
|
||
- [ ] Add a "print" stylesheet so the whole Report tab prints clean
|
||
|
||
---
|
||
|
||
## Notes to self
|
||
|
||
Things to keep invariant as the project grows:
|
||
|
||
1. **No build step.** The day this needs `npm install` is the day it loses its character.
|
||
2. **`data.js` stays human-editable.** No code-gen, no schema validation, no DSL. Just JS objects.
|
||
3. **Vanilla, framework-free.** If a feature genuinely needs React or a charting lib, weigh the bundle cost — the whole site is ~30 KB unminified.
|
||
4. **Every interaction should *feel* like a real test runner.** When in doubt, ask: "what would Playwright / Vitest UI do here?"
|