Sarah Drasner Portfolio
Distinguished Engineer, Area Tech Lead for AI and the Web Ecosystem for Chrome at Google
A dense, no-frills /projects page — seven featured CodePens, a full GitHub repo list with star counts, and a grid of 20 blueprint-style "Code Drawings" — from the creator of the widely used Night Owl VS Code theme.
Location
Location: classified. Send a pigeon.
Companies
Skills
Notable
- Author of two books; formerly VP at Netlify and Principal at Microsoft Azure
- Open-source project "awesome-actions" has 28,000+ GitHub stars
- Co-organized Concatenate, a nonprofit providing free developer conferences/workshops for Nigerian and Kenyan developers
What makes it work
A breakdown of the choices that make this portfolio stand out.
A raw project index instead of three polished case studies
The /projects page skips curation entirely: seven featured CodePens, a full GitHub repo list with live star counts, and a grid of small "Code Drawings" thumbnails all sit on one page. It reads less like a curated portfolio and more like an engineer's actual working archive — a credibility signal of its own for an audience that knows how to skim a repo list.
"Code Drawings" as a named, ongoing visual practice
A grid of small square thumbnails — blueprint-style technical diagrams titled things like "Transformers," "MCP in Practice," and "Android Activity Lifecycle," numbered in AI, Android, rendering, and WASM series — sits above the CodePen list as its own category. Treating visual experiments as a standing practice, not one-off doodles, signals that visual explanation is a discipline she maintains, not a party trick she once did.
Dark, low-contrast visual style that stays out of the way
Near-black background, condensed display headings, minimal color — the design doesn't compete with the content. For someone whose actual claim to fame is a wildly popular syntax-highlighting theme, a plain, understated personal site is a quietly confident choice: the taste is already proven elsewhere.
Live GitHub stats instead of static claims
Rather than writing "I maintain popular open-source tools," the page lists real repos with real-time star counts — a curated GitHub Actions list sits above 28,000 stars, a CSS Grid generator above 5,000, and several Vue and Netlify tools in the hundreds. Numbers that update themselves are more convincing than numbers typed into a bio once and never touched again.
What Frontend Developers can take from this
Specific, actionable tips to apply to your own portfolio — no generic advice.
If your GitHub activity is genuinely strong, link or list it directly rather than summarizing it in prose — a real star count is more convincing than a claim.
A dense, uncurated project list works if you have enough real output to fill it — it signals volume and consistency that a 3-project showcase can't.
If you maintain a recurring creative practice (sketches, experiments, drawings), name it and group it as its own section instead of scattering it across a blog.
A well-known open-source project is your strongest asset — lead with it and let a plain design carry it, rather than competing with it visually.
Pick a narrow specialization and go deep. "I know SVG animation deeply" gets more callbacks than "I know React, Vue, Angular, CSS, and JavaScript."
Projects
Curation is skipped entirely. Sarah Drasner's projects page is a working archive — CodePens, repos with live star counts, a running series of "Code Drawings" — and the volume makes an argument three polished case studies couldn't: this is a habit, not a highlight reel.
Night Owl VS Code Theme
A VS Code dark theme "for the night owls out there". The README says its colour choices consider what is accessible to people with colorblindness and in low-light conditions, with contrast used sparingly so it stays meaningful. It ships with a No Italics variant and a daytime Light Owl theme. Listed on sarah.dev/projects alongside two sibling themes, In Bed by 7pm and a Fortnite theme.
A theme with millions of installs is developer-experience work judged daily by a picky audience. The README's reasoning about colorblindness, low light, and contrast shows design decisions made for the user, not just taste.
3.5M+ Marketplace installs: checkable social proof that keeps growing
Accessibility reasoning (colorblindness, low light, meaningful contrast) written into the README
Grew into a family: No Italics variant, Light Owl, and sibling themes on the same projects page
Featured CodePen Demos — SVG, GreenSock & Vue
Seven CodePens featured on sarah.dev/projects: React animated page transitions (GreenSock + SVG), a Vue-controlled Wall-E built from a Dribbble shot, a Vue world-time comparison dial using the native toLocaleTimeString API instead of moment.js, the JavaScript Array Explorer, a "BOOM" SVG piece, example motion-design docs, and a demo that generates alt text with Azure's Computer Vision API.
Each pen is small, shareable, and explained in a sentence or two of why it exists (drop a date library, help people find array methods, make alt text more common). That's the habit of explaining your work, not just shipping it.
Every demo comes with a stated motivation, not just a title
Range: page transitions, data-bound SVG characters, accessibility tooling, motion-design documentation
Array Explorer shows a demo graduating into a tool with thousands of stars
CSS Grid Generator
A Vue app for building CSS Grid layouts. You set the number and units of columns and rows, drag within the boxes to place divs, and it generates the CSS. The README gives the reason: many people weren't using Grid because they felt it was too complicated, so the goal was to get them up and running quickly.
It starts from a real adoption problem (developers avoiding CSS Grid) and ships the smallest tool that removes the barrier. Code generation from direct manipulation is a strong frontend interview topic: state, drag interactions, and output that has to be correct.
Problem-first README: built because people found Grid too intimidating
Drag-to-place UI that outputs real, copyable CSS
5,300+ stars. Scope is deliberately small, per the README it 'only touches on a fraction' of Grid
Code Drawings — Blueprint-Style Technical Explainers
A numbered series of 20 blueprint-style diagrams on sarah.dev/projects, titled "Visual explorations of code". The series runs AI 01–04 (Transformers, MCP in Practice, Vector Databases, Context Windows), Android 01–06 (hardware, AOSP architecture, process sandbox, activity lifecycle, build process, package structure), JS Fundamentals (Event Loop), Rendering 01–04, and WASM 01–05.
Explaining a system in one dense, accurate diagram shows you understand it. Series organised by topic (AI, Android, rendering, WASM) show sustained study, not one-off doodles.
Numbered series by domain, which makes it read as a curriculum rather than a gallery
Descriptive alt text on each drawing (e.g. transformer attention as key-value lookup)
Topics track current engineering work: MCP, context windows, WASM component model
More Frontend Developer portfolios
Ready to build your portfolio?
Follow the Frontend Developer roadmap — skills, projects, and timeline to get hired.