Add README, IDEAS, and .gitignore
This commit is contained in:
Builder
parent
cfa5b0e4f9
commit
7564148c3c
23
.gitignore
vendored
Normal file
23
.gitignore
vendored
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
# Editor
|
||||||
|
.vscode/
|
||||||
|
.idea/
|
||||||
|
.cursor/
|
||||||
|
*.swp
|
||||||
|
*.swo
|
||||||
|
|
||||||
|
# OS
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
|
|
||||||
|
# Logs
|
||||||
|
*.log
|
||||||
|
.npm
|
||||||
|
|
||||||
|
# QA artifacts
|
||||||
|
qa_*.png
|
||||||
|
test-results/
|
||||||
|
playwright-report/
|
||||||
|
|
||||||
|
# Local server / scratch
|
||||||
|
.cache/
|
||||||
|
tmp/
|
||||||
127
IDEAS.md
Normal file
127
IDEAS.md
Normal file
@ -0,0 +1,127 @@
|
|||||||
|
# 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?"
|
||||||
197
README.md
Normal file
197
README.md
Normal file
@ -0,0 +1,197 @@
|
|||||||
|
# portfolio.spec.ts
|
||||||
|
|
||||||
|
> A personal portfolio + resume styled as a **Playwright test runner**. Built by an SDET, for SDETs.
|
||||||
|
|
||||||
|
Click the green ▶ next to any test to "run" it — each passing test reveals a portfolio section. Filter by `@tag` chips like a real `--grep`. Includes a career-timeline trace viewer, a Source tab that renders the portfolio as actual-looking Playwright spec code, and a downloadable PDF resume.
|
||||||
|
|
||||||
|
**Live preview:** deploy locally (see below) or open `index.html` directly.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Why this exists
|
||||||
|
|
||||||
|
A traditional portfolio doesn't tell a hiring manager you live in test runners all day. This one does — every interaction is a love letter to the tooling SDETs use:
|
||||||
|
|
||||||
|
- Sidebar **Test Explorer** with collapsible suite + green run arrows
|
||||||
|
- Pass / fail / skip status pill in the top bar with live counts
|
||||||
|
- Progress bars under each test that fill in real time
|
||||||
|
- VS Code dark+ / Playwright trace viewer palette (Inter + JetBrains Mono)
|
||||||
|
- A `Trace` tab that draws your career as a Gantt-style waterfall
|
||||||
|
- A `Source` tab that renders the portfolio as a real-looking `.spec.ts` file
|
||||||
|
- A `Console` tab that logs test run events live
|
||||||
|
- `--headed` toggle that slows animations down for demo mode
|
||||||
|
- Cookie-persisted dark / light theme toggle
|
||||||
|
- Mobile drawer for the test explorer, fully responsive
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Stack
|
||||||
|
|
||||||
|
Intentionally zero-framework. The whole point is craftsmanship: hand-rolled HTML, CSS variables, and vanilla JS. Easy to read, easy to fork, deploys anywhere static.
|
||||||
|
|
||||||
|
| Layer | Choice |
|
||||||
|
| ----------- | ----------------------------------------- |
|
||||||
|
| Markup | Single `index.html` |
|
||||||
|
| Styling | `css/base.css` (tokens) + `css/app.css` |
|
||||||
|
| Behavior | `js/data.js` (content) + `js/app.js` (UI) |
|
||||||
|
| Type | Inter (sans) + JetBrains Mono (mono) |
|
||||||
|
| Icons / Logo| Hand-written inline SVG |
|
||||||
|
| Build | None — open the file |
|
||||||
|
| Hosting | Any static host (S3, Netlify, GitHub Pages, your homelab) |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Project structure
|
||||||
|
|
||||||
|
```
|
||||||
|
portfolio/
|
||||||
|
├── index.html # Single-page shell — topbar, sidebar, tabs, statusbar
|
||||||
|
├── README.md # You are here
|
||||||
|
├── IDEAS.md # Future work, ranked by effort/payoff
|
||||||
|
├── css/
|
||||||
|
│ ├── base.css # Design tokens: colors, type, spacing, dark/light themes
|
||||||
|
│ └── app.css # Component styles: tree, tabs, results, trace, source, etc.
|
||||||
|
├── js/
|
||||||
|
│ ├── data.js # All portfolio content — single source of truth
|
||||||
|
│ └── app.js # Test-runner behavior: tree, run engine, tabs, theme, drawer
|
||||||
|
└── assets/
|
||||||
|
└── favicon.svg # Custom mark
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Quick start
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# clone / open in Cursor, then:
|
||||||
|
cd portfolio
|
||||||
|
python3 -m http.server 8765
|
||||||
|
open http://localhost:8765
|
||||||
|
```
|
||||||
|
|
||||||
|
That's it. No build step, no dependencies. Edit a file, refresh the page.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Editing content
|
||||||
|
|
||||||
|
**All content lives in [`js/data.js`](js/data.js)** under `window.PORTFOLIO`. Change a title, swap a job, retag a skill — the UI updates automatically because every section is rendered from this single object.
|
||||||
|
|
||||||
|
```js
|
||||||
|
window.PORTFOLIO = {
|
||||||
|
person: { first: 'Ilia', last: 'Dobkin', /* ... */ },
|
||||||
|
|
||||||
|
// Master tag palette — drives the filter bar
|
||||||
|
tags: ['@playwright', '@cypress', '@api', '@ci', /* ... */],
|
||||||
|
|
||||||
|
// The test suite — each entry maps to one portfolio section
|
||||||
|
suite: {
|
||||||
|
name: 'Ilia Dobkin · portfolio',
|
||||||
|
tests: [
|
||||||
|
{
|
||||||
|
id: 'about',
|
||||||
|
title: 'should introduce Ilia Dobkin',
|
||||||
|
tags: ['@playwright', '@leadership'],
|
||||||
|
duration: 142,
|
||||||
|
steps: [
|
||||||
|
{ kind: 'info', title: 'navigate to /about', dur: 12 },
|
||||||
|
{ kind: 'ok', title: 'render bio', dur: 48 },
|
||||||
|
{ kind: 'ok', title: 'assert credentials', dur: 82 },
|
||||||
|
],
|
||||||
|
render: renderAbout, // function that returns the section HTML
|
||||||
|
},
|
||||||
|
// ...
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
experience: [ /* roles, in reverse-chronological order */ ],
|
||||||
|
skills: [ /* name, level (0–100), tags */ ],
|
||||||
|
projects: [ /* name, desc, tags */ ],
|
||||||
|
stack: { Editors: [...], Languages: [...], /* ... */ },
|
||||||
|
metrics: [ /* label / value pairs for the KPI cards */ ],
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
### Add a new test (section)
|
||||||
|
|
||||||
|
1. Add an entry to `PORTFOLIO.suite.tests`.
|
||||||
|
2. Write a `render<Name>()` function further down in `data.js` that returns HTML.
|
||||||
|
3. Reference it as the `render` property. Done — it appears in the sidebar + report.
|
||||||
|
|
||||||
|
### Add a new tag
|
||||||
|
|
||||||
|
Append to `PORTFOLIO.tags`. To make it filter anything, also add it to the `tags: []` array on the relevant tests.
|
||||||
|
|
||||||
|
### Add an experience entry
|
||||||
|
|
||||||
|
Push to `PORTFOLIO.experience`. The Trace tab parses `when` (`"Aug 2023 – Apr 2026"`) automatically and lays it out on the timeline.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Customizing the look
|
||||||
|
|
||||||
|
All design tokens live in [`css/base.css`](css/base.css) as CSS variables, scoped to `:root[data-theme='dark']` and `:root[data-theme='light']`.
|
||||||
|
|
||||||
|
**Want a different accent?** Change `--accent` (default `#4ec9b0`, Playwright's signature teal).
|
||||||
|
|
||||||
|
**Different font?** Swap the `<link>` in `index.html` and `--font-sans` / `--font-mono` in `base.css`.
|
||||||
|
|
||||||
|
**Different statusbar color?** `--statusbar-bg` (default VS Code blue `#007acc`).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Deploying
|
||||||
|
|
||||||
|
Any static host works because there's no build:
|
||||||
|
|
||||||
|
- **S3 / CloudFront** — upload the folder; entry point `index.html`.
|
||||||
|
- **GitHub Pages** — push to `gh-pages` branch, point to root.
|
||||||
|
- **Netlify / Vercel** — drag-and-drop the folder.
|
||||||
|
- **Your homelab (Caddy / nginx)** — just serve the directory.
|
||||||
|
- **Custom domain (e.g. `iliadobkin.com`)** — point an A/CNAME record at your host.
|
||||||
|
|
||||||
|
> Note: the theme toggle persists via a cookie, which works fine on any normal domain. If you embed in a sandboxed iframe that strips cookies, the theme will reset on reload but otherwise works.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Architecture cheatsheet
|
||||||
|
|
||||||
|
**Render loop is simple and stateless per-test:**
|
||||||
|
|
||||||
|
```
|
||||||
|
state[testId] = { status: 'idle' | 'running' | 'passed', runtime: ms }
|
||||||
|
|
||||||
|
runTest(id)
|
||||||
|
├─ flip state to 'running'
|
||||||
|
├─ refreshTreeRow + refreshResultRow (update sidebar + main pane)
|
||||||
|
├─ animate progress bar via requestAnimationFrame
|
||||||
|
└─ on completion → state 'passed', renderBody() injects section HTML
|
||||||
|
```
|
||||||
|
|
||||||
|
**Where to look for things:**
|
||||||
|
|
||||||
|
| You want to change… | Open |
|
||||||
|
| -------------------------------- | --------------------------------- |
|
||||||
|
| What a test looks like inside | `data.js` — the matching `render*` fn |
|
||||||
|
| The order or set of tests | `data.js` — `PORTFOLIO.suite.tests` |
|
||||||
|
| The trace tab parsing | `app.js` — `renderTrace()` + `parseMon()` |
|
||||||
|
| The fake source code | `app.js` — `renderSource()` |
|
||||||
|
| Run-animation timing | `app.js` — `runTest()` / `tween()`|
|
||||||
|
| Theme colors | `base.css` — `:root[data-theme=*]`|
|
||||||
|
| Mobile breakpoints | `app.css` — `@media (max-width: 900px)` |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Roadmap
|
||||||
|
|
||||||
|
See [IDEAS.md](IDEAS.md) for the backlog. Quick wins on top, ambitious experiments at the bottom.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
MIT. Fork it, restyle it, replace the content with your own. If you ship a variation, a wave hello on LinkedIn would be appreciated but is not required.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Built by** [Ilia Dobkin](https://www.linkedin.com/in/idobkin/) · Senior SDET · Toronto
|
||||||
Loading…
x
Reference in New Issue
Block a user