Career-Transition Portfolio

---
title: "Career-Transition Portfolio"
slug: job-transition-portfolio-clean
bestFor: "Career switchers — leading with story, not a thin work history"
aestheticFamily: "Clean / Narrative-first"
description: "A portfolio for someone changing careers. Leads with the story (why this pivot, what you bring), then evidence (transferable projects, learning artifacts, recommendations). Built so a hiring manager can scan in 90 seconds and trust in 3 minutes."
---

# DESIGN.md — Career-Transition Portfolio

## Brand essence
You're transitioning. You don't have ten years of perfectly relevant work — and that's fine. This site puts the *story* of the pivot first (one paragraph, honest), then the *evidence* (transferable skills, side projects, learning artifacts, references). Calm, structured, undefensive. Designed so a hiring manager forms a trust signal in the first 90 seconds.

## Color palette
- `--bg`: `#FCFCFD` — soft white
- `--bg-tint`: `#F4F6F8` — section alt, evidence cards
- `--ink`: `#0F172A` — primary text
- `--ink-mid`: `#475569` — secondary text
- `--ink-soft`: `#94A3B8` — captions, metadata
- `--border`: `#E2E8F0` — 1px borders
- `--accent`: `#0EA5A4` — primary accent (links, current-role badge, the one CTA) — teal feels neither corporate-blue nor branded
- `--accent-soft`: `#E0F2F1` — pill backgrounds, "currently learning" badge fill
- `--warning-soft`: `#FEF3C7` — used ONCE, for the "honest about" disclosure block (a feature of this design — see below)

## Typography
- **Display + Body**: a single neutral, friendly sans (e.g., Inter, Geist Sans). Both display and body.
- **Serif accent**: ONE serif (e.g., Source Serif, Lora) used ONLY for the personal story paragraph and pull quotes — the moments that need to feel human-handed.
- **Mono**: small, used for skill-tag chips and learning-log entries.

Type scale:
- H1: 48 / 56, weight 600, sans
- Story paragraph: 22 / 36, weight 400, serif
- H2: 30 / 38, weight 600, sans
- H3: 18 / 26, weight 600, sans
- Body: 17 / 28, sans
- Small / chip: 13 / 18, sans, weight 500

Hierarchy rules:
- The hero H1 is short and concrete: "[Name] — [target role], coming from [previous field]." That sentence carries more honesty than any tagline.
- The story paragraph below is the only serif on the page, signaling "read this, it's the human part."
- Every section heading is preceded by a numeric label ("01 / Story", "02 / Evidence") in mono caption.

## Spacing & layout
- Container: 920px max-width — narrow enough that the page reads like a document, not a marketing site.
- Single column. Asymmetric only on the "Evidence" grid (2 columns at >=900px).
- Section vertical padding: 96px desktop, 64px mobile.
- 8px baseline. 24px paragraph spacing.
- Border radius: 12 for cards, 999 for chips.

## Component patterns
- **Navigation**: 56px tall, wordmark left, 4 anchor links right ("Story · Evidence · Skills · Contact"), all anchored to one-page sections. No multi-page site.
- **Hero**: H1 + sub-line ("Open to roles in X · Based in Y · Available June"), then the serif story paragraph (3–5 sentences), then 2 CTAs ("Read my evidence" anchor, "Email me" mailto).
- **"Currently learning" pill**: top of evidence section, `--accent-soft` fill, accent text, mono caption: e.g., "CURRENTLY: Hugging Face transformers course, week 3/8". Updates often — signals momentum.
- **Evidence cards**: `--bg-tint` fill, no border, 16px radius, 24px padding. Each card has: project name, role/context, 1-paragraph "what I did", outcome line ("shipped to N users" / "got me my first interview"), small skill chips at bottom.
- **Skill chips**: pill-shaped, mono caption, `--bg-tint` fill, `--ink-mid` text. Differentiated chips for "from prior career" (default) vs "newly learned" (`--accent-soft` fill, accent text).
- **The "honest about" block**: single light-`--warning-soft` block near the bottom, titled "What I'm honest about", containing 2–3 lines acknowledging gaps ("I haven't shipped production ML at scale yet — I'm closing that gap with [project]"). This is a *feature* — hiring managers respect the disclosure and it's a unique-to-this-template move.
- **Buttons**: primary = `--accent` fill, white text, 12px radius, 12px/24px padding, weight 600. Secondary = `--bg-tint` fill, ink text. No more than 2 primary buttons on the page.
- **Form fields** (contact, if used): 44px tall, 12px radius, 1px `--border`, 2px focus ring in `--accent`.
- **Recommendations / quotes**: small avatar (40px), one short quote in serif italic, name + previous-role context (e.g., "Former manager at [company]") in mono caption.

## Motion
- Easing: `cubic-bezier(0.16, 1, 0.3, 1)`.
- Durations: 150ms hover, 300ms scroll-reveal.
- Reveals on H2 only (gentle fade + 8px translateY). Body and cards do not animate in.
- The "currently learning" pill has a 1px pulse in accent every 4 seconds — subtle proof of life.

## Imagery / iconography
- One real headshot — natural light, framed at the shoulders, not corporate. Square crop, 12px radius.
- Project screenshots only when they exist. Otherwise no images.
- Icons: Lucide, 1.5px stroke, 16px inline / 20px standalone. Used to label evidence card types (CodeIcon for projects, BookIcon for courses, UsersIcon for community work).
- No stock photography. No "career change" cliché illustration of a person standing at a fork in the road.

## Voice & tone
First-person, calm, unapologetic. Acknowledge the pivot openly ("I spent 8 years in healthcare ops; I'm moving into product because…"). Use specifics, not buzzwords. The "honest about" block is the tone in miniature: not defensive, not boasting, just clear.

## What to AVOID
- No "I'm a passionate self-taught X" — show the work instead.
- No long career history sections — that's what LinkedIn is for. Link to it.
- No multi-page site — everything on one page, scroll-anchored.
- No purple/pink gradients or playful illustrations that undercut the seriousness of the pivot.
- No "I'm available immediately!!!" — calm beats desperate.
- No skills-bar charts ("Python ████████░░ 80%"). Hiring managers don't believe them.
- No glassmorphism, no neon, no animated cursor effects.
- No emoji except inside the "currently learning" pill (one acceptable).