# 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