Shipnotes pitches itself as a tool that turns merged pull requests into polished changelog entries automatically. The page is a full single-page marketing site for that pitch — hero, social proof, feature grid, pricing, FAQ — built to demonstrate professional front-end craft, not to sell a product that doesn’t exist.
What makes it work
- Never pretends to be a real product. A persistent “Concept product” tag sits next to the wordmark at all times, and every simulated interaction — the pricing calculator, the before/after preview, the email form — says so plainly when you use it.
-
A skip link that actually works.
Its target is genuinely focusable, with
tabindex="-1"and programmatic focus — not just a visual scroll. The kind of detail that's easy to fake and easy to miss testing for.
Design at a glance
- paper · #faf6ef
- ink · #16140f
- accent · #d9531e
- border · #e3ddd0
System font stacks throughout, by design — zero custom fonts, zero font-loading delay.
- Hero section — pending capture
Built to last
- ~99 KB total, 17 requests, zero images, zero fonts, zero third-party requests
- Zero horizontal overflow verified across nine widths, 320–1920px
- Every animation is transform/opacity-based;
prefers-reduced-motioncollapses all of it, verified not just declared
Want a marketing page with this much craft, for a real product?
Start a projectFor developers — the full technical breakdown
01. Hardcoded content, reversed mid-build from the original plan
- Problem
- The original plan rendered testimonials, FAQ, and social proof from JS data modules — meaning none of it would exist without JavaScript.
- Choice
- Hardcoded that content directly in HTML instead, leaving the unused data modules in place with a comment explaining why.
- Result
- Social proof, testimonials, and FAQ are real, readable markup even with JavaScript disabled or failing.
02. No performance numbers that weren't actually measured
- Problem
- No Lighthouse or equivalent audit tool was available in the development environment.
- Choice
- Reported only what was directly measured via the browser's real Navigation/Resource Timing APIs.
- Result
- Every performance claim on this page is something that was actually verified, not estimated.
Accessibility & performance
- Skip link with a genuinely focusable target (
tabindex="-1"+ programmatic focus) - Mobile menu and FAQ accordion built on native disclosure/button patterns, not styled divs
- Measured contrast, not assumed — 4.5:1 text, 3:1 UI boundaries
prefers-reduced-motioncollapses every animation to near-zero, verified empirically
What I’d do differently
No automated test suite — verification was manual (keyboard interaction, computed-style checks, responsive sweeps) rather than an automated runner. Reasonable at this size, but worth saying plainly rather than implying coverage that isn't there.
Stack
- HTML5
- CSS3
- Vanilla JavaScript (ES modules)
- Zero dependencies