Developer portfolio design: a site that shows taste

A good developer portfolio is a small, fast site with four parts: a hero that says in one line what you build, three to six project cards that explain the problem and your part in solving it, a short about section, and a contact link. Taste shows in the details: a calm hero background, consistent cards, readable type and a link preview that looks finished when a recruiter pastes your URL into a hiring channel. You don't need a framework showcase. You need a page that is obviously cared for.

The structure of a developer portfolio

Say what you build, not what you are. "I build fast checkout flows for online shops" tells a reader more than "Full stack developer". If you are early in your career, "I build accessible web apps with React and Postgres" is honest and specific. Hero section design has more on writing that first line.

A hero background that shows taste

Many portfolios either use a flat white page or a heavy animated background that delays everything else. A middle path is a layered CSS gradient: two or three soft radial blooms over a dark or pale ground. It is a few lines of code, has no network cost and still looks considered. Website hero background and CSS mesh gradient go further.

.hero {
  min-height: 70vh;
  color: #f4f4f8;
  background:
    radial-gradient(ellipse 60% 50% at 80% 10%, rgb(56 189 248 / 0.28), transparent 70%),
    radial-gradient(ellipse 50% 60% at 15% 20%, rgb(124 58 237 / 0.45), transparent 70%),
    linear-gradient(180deg, #0e1020 0%, #07080f 100%);
}

.hero h1 {
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.05;
  max-width: 18ch;
}

If you want motion, animate slowly, keep the words still and respect prefers-reduced-motion; reduced motion explains how. A little grain on top hides banding on large dark gradients, covered in CSS noise texture.

Project cards that explain impact

A project card has seconds to justify a click. Give each one the same four parts: a title, a one sentence problem, what you built and the outcome, then links to the live project and the code. Outcomes don't need to be dramatic. "Used by our 30 person team every day" or "Cut page load from 4 s to 1.2 s" are fine when they are true and yours.

.projects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1.5rem;
}

.card {
  border-radius: 1rem;
  padding: 1.5rem;
  background: linear-gradient(160deg, #161a2e 0%, #0f1222 100%);
  border: 1px solid rgb(255 255 255 / 0.08);
}

.card img {
  aspect-ratio: 16 / 10;
  width: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
}

Screenshots look more finished when they sit on the same background. Place each one on your hero ground with a little padding rather than showing raw browser captures of different sizes.

Open Graph images for your portfolio

Your portfolio link will be pasted into job applications, recruiter messages, Slack channels and social posts. Each of those shows the Open Graph image, 1200×630 pixels. A blank card or a cropped screenshot undoes the care you put into the site. Make one for the home page and, if you have project pages, one per project in the same layout. Dynamic OG images shows how to generate them at build time; Open Graph image size covers the crops.

Writing the about and contact sections

Keep the about section to a short paragraph in the first person: what you enjoy building, how you like to work, and what you are looking for next. A sentence about life outside code is fine; a full biography is not. End the page with one obvious way to reach you, usually an email address written out in full, plus GitHub and LinkedIn. A contact form adds friction for a recruiter who just wants to copy your address into a message. If you are applying for design minded roles, personal branding helps you keep the site, CV and profiles in one look.

Small details that read as taste

• One typeface family, two weights. A good sans for everything, a monospace for code only.
• A measure of 60 to 75 characters for body text, so paragraphs are comfortable to read.
• Real contrast: body text should pass WCAG AA against its background.
• A favicon that matches the hero colours.
• Fast load: a portfolio for a developer that takes four seconds to appear makes its own argument.
• A dark and light theme only if you will maintain both properly.

If you'd rather not draw the preview images and screenshot frames by hand, Gradiently can make them on a Mark, a living gradient background that keeps your words readable, and with Pro resize one design to the link preview, a LinkedIn post and an X header in one step. It can also be connected to ChatGPT and Claude, so you can ask for a set of project previews while you write the case studies.