Building a software engineer portfolio that earns trust on the first scroll.

Why most developer portfolios feel the same

Search “portfolio website examples” and you’ll see the same shape over and over: a hero gradient, three project cards, a contact form, and a footer. They look fine. They also look interchangeable. For a software engineer portfolio, the goal isn’t to be the prettiest tab in a recruiter’s browser — it’s to communicate judgment. Every choice on the page is a small proof that you make deliberate decisions.

This guide walks through the technical and editorial choices behind the site you’re reading: an editorial, magazine-style portfolio built on React, TypeScript, TanStack Router, and Tailwind CSS. The angle is opinionated on purpose — fast, type-safe, and quietly distinctive.

The stack, and why each piece is here

React + TypeScript

React is a safe default for a portfolio: the ecosystem is enormous and the hiring signal is universal. TypeScript matters more than the framework choice — it turns the portfolio into a tiny demonstration of how you model data. A typed content/portfolio.ts file becomes the single source of truth for roles, projects, and links; every page renders from it, and renaming a field surfaces every consumer in one pass.

TanStack Router for file-based, type-safe routing

I picked TanStack Router instead of a lighter client router because it gives end-to-end type-safe navigation: <Link to="/projects" /> is type-checked against the actual route tree, and per-route head() metadata makes SEO straightforward. Every section (Home, About, Projects, Resume, Contact) is a real route with its own title, description, and canonical URL — not a hash anchor on a single landing page. That’s the difference between a site that ranks for “software engineer portfolio” variants and a site that only ranks for your name.

Tailwind CSS v4 with semantic tokens

Tailwind v4’s CSS-first config keeps the design system in src/styles.css: a small palette (cream, navy, steel-blue), a type pairing (Instrument Serif + Work Sans), and hairline dividers. Every color and shadow is a semantic token, so dark-mode and theming changes never require touching components. No purple gradients, no rounded-2xl everything — the visual restraint is itself the brand.

Performance choices that actually move the needle

On a portfolio, the “hero” is usually a giant headline, not an image. That changes what you optimize for. Three things mattered most:

• Font display: swap. The Google Fonts request uses &display=swap so the page paints with a system fallback while Instrument Serif loads. The first contentful paint never waits on the network.
• Fetch priority on the font stylesheet. The stylesheet <link> uses fetchpriority="high" paired with preconnect to fonts.googleapis.com and fonts.gstatic.com, so the critical font lands in the first round trip.
• Per-route metadata, not a single SPA shell. Each route ships its own title, description, and JSON-LD, which keeps the rendered HTML lean and gives crawlers a real page per URL.

Information architecture: routes over hash anchors

A common mistake in developer portfolio examples is collapsing everything onto / with anchor links (#projects, #contact). It looks tidy, but Google indexes one page and one meta description. Splitting into /about, /projects, /resume, and /contact gives each section its own indexable surface, its own social preview, and its own analytics line item. It also forces you to write per-page copy, which is good for you and good for the reader.

Content patterns that signal seniority

The visual system is half the work; the writing is the other half. A few patterns that consistently land better than generic copy:

• Lead with outcomes, not stacks. “Built a merchant-maintenance REST API in Java/Vert.x” reads stronger than “Java, Vert.x, REST” as a tag cloud.
• Number your sections. An editorial “01 / Experience” rhythm gives the page a spine and quietly says you’ve thought about hierarchy.
• Let the resume be the resume. Render the CV as native HTML (not an embedded PDF) so it’s readable on mobile, indexable by search engines, and printable.

What I’d steal from this for your own portfolio

If you’re starting from scratch: pick a real type system, pick a router with file-based routes, and write the content before you pick the colors. The fastest way to a portfolio that doesn’t look like every other React template is to commit to one editorial voice and one restrained palette, then let the engineering choices show in the load time and the URL structure rather than in animated gradients.

The whole site is intentionally small: a handful of routes, one content file, no CMS. That’s the point. A portfolio is a long-lived artifact you should be able to maintain in fifteen minutes, two years from now, without remembering which plugin owns which feature.