joshwcomeau.com
Live
Loading the live site…
Josh W. Comeau
Frontend
Stack
ReactCSS
Style
PlayfulAnimated
From the site itself
- Title
- Josh W. Comeau
- Description
- Friendly articles and tutorials for front-end web developers. ❤️
- Language
- English
- Added
- Nov 2, 2026
- Captured
- Nov 2, 2026
Design study
How Josh W. Comeau's site is built
Read on Nov 2, 2026Colors, type, shapes and motion read from the live page. It's here to learn from: the design is Josh W. Comeau's.
Sample built with its tokens
Wotfard
Josh W. Comeau
This block isn't a copy of the site: it's put together only with the colors, typefaces and corners we read from it.
Main actionSecondary
Typefaces
- WotfardTextAa400Aa500Aa600
Type sizes
- 24pxPortfolio
- 22pxPortfolio
- 19pxPortfolio
- 17pxPortfolio
- 16pxPortfolio
- 14pxPortfolio
- 12pxPortfolio
Corners and spacing
2px4px8px12pxpill
Spacing
245812163248
Content width: 1100px
Motion
ease300ms
cubic-bezier(0.41, 0.1, 0.13, 1)350ms
cubic-bezier(0.06, 0.63, 0.43, 1)850ms
200ms300ms350ms850ms· 28 animated elements
Recognized patterns
- Light themeLight background with dark text.
- Pill buttonsButtons and tags with fully rounded ends.
- 3D / WebGL sceneA real-time rendered scene fills much of the screen.
- Card gridProjects laid out in a grid.
Is this yours and you'd rather we didn't show it? Ask us to remove it
We found these, but a single loose pattern doesn't add points: it takes several together, or a direct trace of a generator.
- Stock Lucide iconsIcons are the unchanged Lucide set, the one most generators use.svg.lucide ×4
Automatic estimate by folios.directory, measured Nov 4, 2026. If it's wrong, the mistake is ours. Using AI is fine: this only shows how close a site is to a generator's defaults.
Report a mistake
Is this your portfolio?
joshwcomeau.com