Josh W. Comeau Portfolio
Independent developer educator and course creator
A soft, cloud-illustrated blog that doubles as a portfolio — interactive CSS and React demos sit inside real articles, ranked by a "Popular content" sidebar so new visitors land on the best material first.
Location
Montréal, Canada
Companies
Skills
Notable
- Author of open-source npm packages (use-sound, react-flip-move) downloaded ~600,000 times per month
- 31,984+ developers registered for his courses (The Joy of React, CSS for JS Developers, Whimsical Animations)
What makes it work
A breakdown of the choices that make this portfolio stand out.
Interactive blog posts as living portfolio pieces
Josh's CSS articles contain interactive sliders, live code demos, and animated diagrams. Each post demonstrates frontend skill in real-time rather than describing it. The teaching content and the portfolio content are the same content.
Helpfulness as a brand, structurally reinforced
Every post leads with "here's something useful for you," and the sidebar's "Popular content" list surfaces the most-read guides so new visitors immediately land on proven material instead of guessing. That inversion — help first, credentials never — builds more goodwill and sharing than a traditional showcase ever would.
Depth over breadth in topic coverage
Rather than shallow overviews of 20 topics, Josh writes deep dives on single CSS properties and browser APIs. This positions him as the definitive resource on specific searches — which compounds into long-tail SEO traffic for years.
A soft, whimsical visual identity around technical content
Pastel-blue skies and hand-drawn cloud illustrations bookend the page, top and bottom, around dense articles on CSS subgrid and animation timing. The content is technically rigorous; the wrapper is warm and approachable — proof a personal brand can be both at once.
What Frontend Developers can take from this
Specific, actionable tips to apply to your own portfolio — no generic advice.
A single interactive demo demonstrates frontend skill better than a screenshot gallery. If you write about CSS, embed a live example.
Write to teach, not to impress. Helpful content gets shared; impressive content gets admired once and forgotten.
Go deep on topics others skim. A definitive guide outranks an overview permanently.
Your blog IS your portfolio. Consistent publishing over 12 months compounds into more inbound opportunities than cold applications.
A soft, distinctive visual identity (an illustration style, a signature palette) makes dense technical content feel approachable — pick one visual motif and repeat it everywhere.
Projects
No case-study grid here, because the articles are the projects: the CSS explainers carry their own live sliders and demos. Josh W. Comeau's portfolio grows every time a post teaches something, and readers have used the work before realizing it was a showcase.
joshwcomeau.com — Interactive CSS & React Blog
A technical blog where articles embed interactive widgets written as React components inside MDX. Examples include a draggable Bézier-curve playground in the SVG paths guide, spring-easing demos in the linear() article, and live code playgrounds throughout. The 2024 rebuild moved it to the Next.js App Router. By Josh's own count the codebase is over 100,000 lines, not counting content.
Building one-off interactive explainers inside a content pipeline requires React rendering, browser APIs, animation physics and build tooling all at once. Documenting the tradeoffs publicly (Linaria's rough edges, Shiki's memory use, the MDX v1→v3 migration) shows senior-level judgment, not just output.
Sandpack powers the React playgrounds; static HTML/CSS playgrounds run on his own fork of agneym's Playground, because Sandpack's static templates can break under strict browser privacy settings
Zero-runtime styling: switched from styled-components to Linaria so styles compile to CSS modules compatible with React Server Components
Shiki syntax highlighting runs at compile time, adding 0kb to the JS bundle, with a lighter lazy-loaded highlighter for interactive cases
Small full-stack touches: a like button (up to 16 likes per visitor) stored in MongoDB via a Next.js Route Handler, with IP-hashed anonymous IDs
CSS for JavaScript Developers
A self-paced interactive course that teaches CSS fundamentals and mental models to React/Vue developers. The curriculum is 200 lessons and 40 hours of content across 10 modules (Module 0 through Module 9), mixing written lessons, videos, exercises and mini-games. It runs on Josh's own Next.js course platform, which his blog is deliberately built to mirror.
A course platform someone else pays to use is a full product: curriculum design, interactive tooling, video, and a custom platform. It also packages his time at Khan Academy and in senior roles at Gatsby and DigitalOcean into one thing.
200 lessons / 40 hours of content across 10 modules
Self-hosted, custom-built course platform on Next.js rather than a third-party course marketplace
Exercises and mini-games instead of passive video — the same interactive approach as the blog
A React hook for playing sound effects. It adds under 1kb gzip to the bundle and asynchronously loads a ~9–10kb dependency after page load. Audio work is delegated to Howler.js, with escape hatches to the underlying Howl instance for anything the hook doesn't expose.
A small library with a deliberate API: a tiny surface for the common case, and passthroughs to Howler for everything else. Keeping bundle cost down by deferring the heavy dependency is the kind of performance thinking frontend teams look for.
<1kb gzip in the main bundle; the heavier audio engine is fetched asynchronously
Wraps Howler.js rather than reinventing audio — unrecognized options pass straight through to Howl
3.2k stars on GitHub
More Frontend Developer portfolios
Ready to build your portfolio?
Follow the Frontend Developer roadmap — skills, projects, and timeline to get hired.