Brittany Chiang Portfolio
Senior Frontend Engineer at Klaviyo
Clean dark-theme layout with a scrollable work history section and subtly animated hover states. One of the most referenced developer portfolios on the internet.
Location
Didn't say. We're respecting the mystery.
Companies
Skills
Notable
- VS Code theme "Halcyon" has 100k+ installs
- Built Apple Music's embeddable web player (MusicKit.js) as a UI Engineer Co-op at Apple
- Previous portfolio site (v4) has 8k+ GitHub stars and 4k+ forks
What makes it work
A breakdown of the choices that make this portfolio stand out.
Dark theme that reduces cognitive load
The deep navy background keeps the eye on the content rather than the chrome. A single mint-green accent handles every interactive element — hover states, active links, CTA buttons — creating coherence without a style guide document.
Work history as the hero, not a project dump
Most developer portfolios lead with a grid of side projects. Brittany leads with her employment timeline — company, title, date, and two-sentence impact summary. This speaks directly to recruiters who care about professional context before personal projects.
Sticky sidebar navigation with active scroll detection
A two-column layout with a sticky left nav that tracks your scroll position is a subtle technical flex. It signals attention to UX details that any senior frontend role would require.
Brevity in the bio
The "About" copy is three short paragraphs — who she is, what she does day-to-day at Klaviyo, and a one-line personal aside about climbing and hunting for Korok seeds. None of the three run past four sentences. It tells visitors what they need to know and gets out of the way — a quality every hiring manager appreciates after reading 200-word autobiographies all day.
What Frontend Developers can take from this
Specific, actionable tips to apply to your own portfolio — no generic advice.
Choose a single accent color and apply it to every interactive element. Consistency beats variety.
Put your professional work history before personal projects — recruiters care about where you worked, not just what you built at 2am.
Sticky navigation that tracks scroll position is a 30-line implementation that signals more UX sense than a flashy animation.
Split your bio into short, single-purpose paragraphs — who you are, what you do now, one personal detail — rather than one long block. Keep each paragraph to four sentences or fewer.
Dark themes work best with a restricted palette. If you go dark, limit yourself to one background tone, one surface tone, and one accent.
Projects
Here the job history comes first and the side projects second — and one of those side projects is the portfolio itself, open-sourced and forked 4k+ times. Brittany Chiang's layout gets copied by the thousand; the ordering is the part worth copying.
Spotify Profile
A web app for visualizing personalized Spotify data: top artists, top tracks, recently played tracks, and detailed audio information about each track. It can also create and save new playlists of recommended tracks based on a user's existing playlists. An Express server handles the Spotify authorization-code login and token refresh; the React client calls the Spotify Web API directly.
It covers three things frontend interviews probe: a real OAuth flow with token expiry and refresh, a third-party REST API with many endpoints, and turning raw audio-feature numbers into UI people actually want to look at.
Server-side /login, /callback and /refresh_token routes keep the Spotify client secret off the browser; the client tracks token age and refreshes it when it expires
Track pages pull both the audio-features and audio-analysis endpoints, then render the numbers as charts instead of raw JSON
Writes as well as reads: builds a recommendations playlist from seed tracks and saves it to the user's account
brittanychiang.com v4 (Open Source)
The fourth version of Brittany's personal site, built with Gatsby and hosted on Netlify, now published open source on GitHub under MIT. Dark navy layout, a tabbed job-history section, a featured-projects section, and scroll-reveal animations. Content is pulled into components through Gatsby's GraphQL static queries. It has since been replaced by a Next.js site; the v4 repo stays live at v4.brittanychiang.com.
It's a personal site whose code holds up to scrutiny: a keyboard-navigable tab list, a focus-trapped mobile menu, and motion that respects reduced-motion preferences. That's the accessibility detail most portfolio code skips, and it lines up with the accessibility-focused role she holds now.
8k+ stars and 4k+ forks on GitHub — one of the most-copied developer portfolio codebases around
The job-history tabs use proper role="tablist"/"tab"/"tabpanel" semantics with arrow-key handling; the mobile menu traps focus and closes on Escape
A usePrefersReducedMotion hook gates the scroll-reveal and anime.js intro animations
The fourth public iteration, with v1–v3 also linked from the README — the site's evolution is visible
Halcyon Theme
A minimal dark blue color theme ported to VS Code, Sublime Text, Atom, iTerm, Hyper and more. The Halcyon site publishes the full 14-color palette, from #171c28 background to #ffcc66 and #5ccfe6 accents.
A small, finished, widely used product. It shows design judgment (a restrained palette that holds up across many editors) and follow-through (maintaining ports for several tools), not just code.
100k+ installs on the VS Code Marketplace
One palette carried consistently across VS Code, Sublime, Atom, iTerm and Hyper
Palette published openly with hex values — documentation as part of the product
More Frontend Developer portfolios
Ready to build your portfolio?
Follow the Frontend Developer roadmap — skills, projects, and timeline to get hired.