Run the interactive demo | Clean your CSV | Repair your page | Watch the 20-second tour | Inspect a real browser report
Don't take my word. Run the fix.
The video combines actual captured demo states, with captions. It is not real-time benchmark playback.
FixProof is a dependency-free static portfolio app for demonstrating small web and data cleanup work. It contains three original synthetic repair cases, a local responsive-layout tool, and a local Clean your CSV workflow that produces a cleaned CSV, a review-needed CSV, and a JSON change report.
The before states are intentionally broken only inside their previews. No client work, customer data, external assets, analytics, or network form submission is included.
Have a small website issue? Send the bug, budget and deadline on X. Please share public details only in GitHub issues.
The checked-in browser report is one observed run, not a performance guarantee. The live app always starts pending and measures again on your device.
Requirements: Python 3 and Node.js 20 or newer.
python3 -m http.server 3020 --bind 127.0.0.1Open http://127.0.0.1:3020/, select any case, or choose Run all checks.
For the CSV portfolio, open http://127.0.0.1:3020/csv.html, choose Load messy sample, then Parse CSV. Keep the sample email key and default cleanup policy, choose Review cleanup, inspect the results, and confirm the review checkbox to enable all three downloads.
For your own layout, open http://127.0.0.1:3020/repair.html, load the broken example or paste HTML/CSS, then choose Analyze layout. Nothing renders until you choose Analyze. The file picker accepts one .html file; CSS is entered in the CSS editor.
Tests and syntax checks:
node --test
npm run checkCSV 데모는 http://127.0.0.1:3020/csv.html에서 Load messy sample → Parse CSV → Review cleanup 순서로 실행합니다. 결과와 변경 내역을 확인한 뒤 체크박스에 동의하면 정리본, 검토 필요 목록, JSON 보고서를 내려받을 수 있습니다. 레이아웃 도구는 http://127.0.0.1:3020/repair.html에서 Load broken example을 누른 뒤 Analyze layout을 선택합니다. 기존 세 데모는 첫 화면의 Run all checks에서 실행합니다.
This is a synthetic portfolio workflow, not a previous customer result. The built-in 14-row fixture includes Korean and English names, leading zeroes, edge whitespace, an exact duplicate, a conflicting email key, a missing key, quoted commas and quotes, a multiline value, and spreadsheet-risk cells.
The tool accepts pasted text or one UTF-8 .csv file. It supports a UTF-8 BOM, LF and CRLF records, escaped quotes, and quoted multiline cells. It rejects invalid UTF-8 files, malformed quotes, empty or duplicate headers, uneven row widths, input over 1 MiB, more than 10,000 data rows or 100 columns, and cells over 100 KiB. Input remains in browser memory only; this project does not upload or persist it.
Cleanup is intentionally exact and conservative. You select one or more key columns, optional leading/trailing whitespace removal, and Keep all or Collapse for exact duplicates. Internal whitespace, case, numeric-looking text, and leading zeroes are not normalized. A row missing any selected key is quarantined. If the same key has differing processed cells, every row in that key group is quarantined before duplicate collapse. The report verifies inputRows = cleanedRows + quarantinedRows + collapsedRows and records each row's original values, processed values, classification, changes, policy, and limits.
Both CSV exports use a UTF-8 BOM, CRLF records, and CSV quoting. Immediately before export, a leading apostrophe is added to a cell that starts with a tab or newline, or with spaces followed by =, +, -, or @. Headers receive the same check. This export-only protection is listed in the report and also affects negative numbers; it is conservative and does not guarantee safety in every spreadsheet application. The JSON report includes original input values, so handle it like the source file and review it before sharing.
The tool rebuilds an allowlisted structural HTML subset in an inert template. It removes scripts, event handlers, links, forms, frames, media, SVG, custom elements, and resource-bearing attributes. It strips CSS imports; its sandbox and CSP block external resource requests. Inline style and remaining author CSS are retained for layout inspection. The preview can differ substantially from the source site. It is not a URL importer or a complete adversarial browser isolation guarantee.
Analysis runs each of four CSS viewport widths in an isolated sandbox frame. It reports the rendered document width and elements causing overflow. Supported patches target stable tool IDs for observed fixed pixel width or long unbroken text. Absolute positioning, complex grids, transformed layouts, and other causes remain unresolved unless the remeasurement actually fits. The tool never treats hidden overflow as a repair.
Before and Patched previews use the same sanitized markup and CSS as measurement. The selectable width and slider set the frames' CSS viewport, then scale the display to fit. The table contains only the four measured widths. Editing either editor or changing stress mode invalidates results and disables downloads until the next completed scan.
Downloads include a standalone sanitized layout copy with a strict CSP and no scripts, the exact CSS patch, and a JSON report containing the sanitized markup/CSS, removal counts, stress mode, all measured widths, and limitations. The exports are a local starting point for review, not a claim that the original site is fully preserved. Max input sizes are 200 KB HTML, 100 KB combined CSS, and 1,500 HTML elements. No input is persisted or sent to this project's services.
- Heavy page: both variants share one deterministic 6,000-item catalog and search function. The before fixture mounts all matching cards. The fixed fixture reports the same match count and visible label order while mounting only 18 cards. The check compares the rendered fixture DOM, not only catalog data.
- Mobile overflow: the browser measures
scrollWidthandclientWidthon the same 390px fixture markup used by the previews. The before content is 520px wide; the fixed content resolves to its viewport. The preview is displayed at reduced scale, while its CSS viewport remains 390px. - Dead button: browser checks click the actual local fixture. The before button has no handler. The fixed button rejects empty input and confirms valid input without a request.
Results are pending on load. A report becomes available only after a real run. It contains:
- all individual timing samples and their median;
- DOM card counts and catalog sample count;
- before-bug and fixed-pass assertions for every case;
- rendered overflow dimensions and actual form messages;
- user agent, language, viewport, fixture version, and timestamp.
The Heavy page result area also shows the last run's Before and Fixed median DOM update and frame-aligned elapsed times. It stays Pending until measured and never calculates a claimed improvement percentage.
Heavy-page timing uses performance.now() around DOM creation and insertion in a hidden measurement container. domUpdateMs ends after insertion. frameAlignedElapsedMs ends after two animation-frame callbacks; it is not an authoritative paint-completion measurement. The report includes medianDomUpdateMs and medianFrameAlignedElapsedMs plus five raw samples in alternating before/fixed order. These are synthetic fixture measurements, not Lighthouse scores or Web Vitals. Timings vary with browser, hardware, extensions, tab visibility, and current device load. A slower fixed timing is reported as observed; the repair assertion is based on bounded DOM and rendered search parity, not a promised speedup.
The exported JSON schema is represented by the report object produced in app.js. A report is internally consistent when validateEvidenceReport in core.js accepts its fixture version, environment, three findings, timing block, and derived status.
Everything is served directly from the repository root with relative asset paths, so the same files work at /fixproof/ on GitHub Pages.
- Publish this directory as the root of the
dresecuri-lee/fixproofrepository. - In repository settings, choose Pages, Deploy from a branch,
main, and/ (root). - The expected public URL is
https://dresecuri-lee.github.io/fixproof/.
There is no build step and no runtime dependency. After the first load, the app itself needs no external font, image, API, or service.
The fixtures and interface are original and synthetic. The project was built with AI assistance and is intended to be reviewed through its source, automated tests, and real browser run rather than by unchecked claims.