A split-screen developer portfolio with a cinematic name splash, sticky left bio panel, and scrollable right panel for experience and projects. Deep navy background, cyan accent links, pill-shaped skill tags, and a two-tab layout that lets recruiters switch between your work history and your builds. Used by engineers who want their portfolio to feel like a product — not a resume.
What Is This Style?
A developer portfolio in this style is built around one idea: the person browsing it should never lose sight of who you are. The sticky left panel keeps your name, role, bio, and contact details permanently visible while the recruiter or hiring manager scrolls through your experience and projects on the right.
The opening splash — your name growing from small to enormous across the viewport in about 1.2 seconds — is the only dramatic moment. Everything after is calm, dark, and editorial. Deep navy, one cyan accent color, off-white text, and zero decoration.
The Vibe
A terminal that hired you before the interview.
This layout communicates technical taste without saying a word about technical taste. The split-screen structure is architectural. The restrained color palette feels like a design decision, not a color-picker mistake. The name splash is cinematic. The tag clouds and company links do the work of a resume without looking like one.
Who Uses This Layout
The canonical example is Brittany Chiang's portfolio — widely referenced in developer communities as the "gold standard" for engineer personal sites. Josh Comeau's site, Lee Robinson's, and dozens of senior engineers at top-tier tech companies use a variant of this format. The pattern is strong enough that it's become a trusted signal: if your portfolio looks like this, you probably know what you're doing.
When to Use It
Use this layout when you are a software engineer (frontend, backend, full-stack, or ML) applying to product companies, startups, or any role where having a polished personal site helps. It works best when you have 2–6 experience entries and 2–5 projects to show. Avoid it if you are a visual designer whose work needs to be seen in large thumbnails — this layout is optimized for prose and metadata, not visual portfolios.
Design Rules (Deep Dive)
The Sticky Left Panel Is the Core Innovation
The left panel uses position: sticky; top: 0; height: 100vh on desktop. It never scrolls. This means your name, role, bio, and contact details are always visible while the recruiter reads through your experience or projects on the right. This solves the core UX problem of portfolio sites — the person evaluating you loses context as they scroll. Here they never lose it.
On mobile this stickiness is released: the left panel becomes a normal top section, the right panel follows below. The layout must collapse gracefully to a single column without the sticky behavior.
Cyan Touches One Thing at a Time
#2DD4BF is the only accent color. It appears on: the active tab underline, company name links in experience entries, tag pill text, the status dot, and link hover states. The rule is that it should never appear on more than one element type in the same visual block. If the company name is cyan, the skill tags in that entry should not also be cyan — it dilutes the signal. Cyan is a focal point, not a pattern fill.
The Name Splash: Scale Only, Nothing Else
The splash screen shows the developer's name and nothing else — no tagline, no logo, no nav. The name scales from ~40px to clamp(5rem, 12vw, 9rem) over 1.2s using cubic-bezier(0.22, 1, 0.36, 1). After the animation completes (~1.5s total), the splash fades out and the portfolio layout fades in. The restraint is intentional: one thing, done with conviction, is more memorable than five things competing for attention.
Experience Entry Grid
Each experience entry uses a two-column grid: date range on the left (130px, tiny caps, muted), content on the right (job title, company link, description, skill tags). The entire entry gets a subtle #1E2A3A background on hover — no border, no shadow, just a dim highlight that expands to include the padding. This hover state is the only interactive feedback on experience entries.
Project Cards vs Experience Entries
Experience entries use the two-column date/content grid. Project cards use a different pattern: single column with a thumbnail positioned top-right (88×66px, grid-row: 1 / 3). The visual distinction between the two tab contents signals that the information architecture has changed — not just the data, but the display logic.
The Tab Strip
Two tabs only: Experience and Projects. Plain text, no pill or box background. Active tab: off-white text + 2px cyan bottom border. The tab strip has a barely-visible 1px solid #1E293B bottom rule. No more than two tabs — adding a third (Blog, Contact, etc.) breaks the focused binary of "where I've worked" vs "what I've built."
Skill Tags in Context
Skill tags appear in two places: the left panel tag cloud (always visible) and inside experience entries (contextual). Left panel tags show the full technical stack. Entry tags show only what was relevant to that specific role. This distinction matters — recruiters read the left panel to assess overall fit, then read entry tags to understand depth in specific areas.
The Core Philosophy
A developer portfolio in this layout is an argument, not a brochure. The sticky left panel argues: here is who I am, consistently, at every point of your evaluation. The experience tab argues: here is where I've applied these skills, with dates and companies you can verify. The projects tab argues: here is what I build when I have full autonomy.
The dark navy background is not an aesthetic choice — it is a cultural signal. It says: I spend my days in a terminal or a dark-mode editor. My tools look like this. My portfolio looks like this. For technical hiring managers evaluating dozens of React portfolios with white backgrounds and hero gradients, this layout reads as different before a single word is processed.
The name splash is the only vanity. Everything after it is evidence.