sayamjain.com
A portfolio that measures itself.
This site: an engineer's field notebook where the page measures, draws and annotates the work in front of you.
- Role
- Design and build, solo
- When
- First built October 2023, rebuilt October 2026
- Status
- Live, you're on it
- Sheet
0.96 → 0
layout shift, after moving the particle canvas out of the page flow
3.1 KB
ink engine, replacing about 34 KB of particle library
20 fps
for the ink field when nothing moves on a 60 Hz screen, 60 while you do
19
pages, every one prerendered static
Overview
A portfolio is a claim about craft, so this one tries to prove it. The site is an engineer's field notebook: the name measures its own width live, figures draw themselves in passes, and an ink field behind the page gathers into each diagram as it's drawn.
I designed and built it end to end, and checked every claim on it against the code and git history behind each project.
What I built
Design system
- A field notebook: graph paper by day and carbon by night, one acid lime highlighter, and three typefaces with one job each, written down in DESIGN.md.
Interface
- A masthead that measures its own width and cap height live, and page titles that measure themselves.
- Figures that draw in passes, a pinned figure that lights the boxes each decision affects, and step through demos built from the real code.
- Page transitions with React's ViewTransition: titles carry between pages and the navigation mark slides.
Ink engine
- A Canvas 2D engine of my own: about 20 frames a second when idle, drifting with a finger on phones, gathering along a figure's boxes as they draw, and paused by the motion switch.
Trust
- Every claim checked against code, git history or the person it's about. Content tests check for percentages, credit for colleagues' SmartRich work and testimonials without a role, and run before every release.
Search and AI answers
- Structured data for the person, the services and the blog posts, a share image for every page, llms.txt for AI assistants, and IndexNow after every release.
Quality
- Layout shift measured at zero on the main pages, full keyboard use, and a finished, still page for reduced motion or the motion switch.
How it works
- Content filestyped, one source
- Content tests
- Static pagesall prerendered
- First paintthe finished page
- Reveal observer
- CSS drawsonce, never scrubbed
- Ink gathersCanvas 2D
Content lives in typed files that tests check before the build prerenders every page. In the browser the first paint is the finished page; a reveal observer marks what arrives, CSS draws it once, and the ink field gathers into figures as they appear.
Key decisions
Only measure what's true
Every number on the page comes from the page itself or the content files: the masthead's width, a career's months, a package's price.
In Fig. 1:Content filesFirst paint
No motion library
CSS scroll timelines, React's ViewTransition and a small canvas engine do the work; no smooth scrolling, no WebGL scene and no preloader between a visitor and the page.
In Fig. 1:CSS drawsInk gathers
Check claims like code
Content tests fail on a percentage, a colleague's SmartRich work without credit or a testimonial without a role, and they run before every release, like a type check.
In Fig. 1:Content filesContent tests
Content first, motion second
The first paint is the finished page and drawing only adds to it, so print, no JavaScript and reduced motion all get the whole page.
In Fig. 1:First paintReveal observer
Measure before polishing
The worst defect this site had, a layout shift of 0.96 from the old particle canvas, was found by measuring, not by looking, and taken to zero.
In Fig. 1:First paint
What I learned
Craft you claim has to be craft you can measure. The biggest fix on this site was invisible on my own screen and obvious in the numbers.
Stack
Frontend
Motion
Search
Testing