Portfolio + Resume Combos for Designers and Developers
A mid-level and an entry-level sample you can copy, plus where the portfolio link goes, how to caption case studies, and which bullets earn a click.
By Priya Shah · Sep 30, 2026 · 18 min read
If you design, build, or do both, your resume has one extra job: getting someone to open your portfolio. That means a link in the header that works on the first click, three or four case studies that match the bullets on the page, and numbers in your own units — screens, components, templates, kilobytes, users tested, clients shipped.
Below is a complete mid-level sample for a hybrid designer–developer, a shorter entry-level variant, a section-by-section method, weak-versus-strong bullets, a skills table, and how pay is usually set. Adapt the wording; don't copy the numbers, because you have to be able to defend every one of them in an interview.
Sample resume
Two samples. The first is mid-level, two pages, written for a hybrid design-and-front-end role. The second is the same person four years earlier, on one page, with projects standing in for jobs. Square brackets mark the parts you must replace with real details.
Mid-level: product designer who codes (2 pages)
Mid-level combined resume — portfolio-first header
MAYA OKONKWO Product Designer & Front-End Developer Manchester, UK · maya.okonkwo@email.com · +44 7700 900000 Portfolio: mayaokonkwo.design — 4 case studies, 2 with code walkthroughs Code: github.com/maya-okonkwo — design-system repo, live Storybook
SUMMARY Product designer and front-end developer, 6 years across an in-house SaaS team and an 18-person studio. Works end to end: research, Figma, then the React components that ship. Built 2 design systems, documented 40+ components in Storybook, treats WCAG 2.2 AA as the baseline rather than a retrofit. Start with the checkout case study — 5-minute read, includes the code.
EXPERIENCE
Product Designer (Design + Front End) — B2B SaaS company, ~120 staff, Manchester Mar 2023 – present - Redesigned the paid checkout from 6 screens to 3, tested with 12 people across 3 rounds, then built the 9 new React components myself - Built and maintain the product design system: 42 components in Figma, matched 1:1 to a TypeScript component library published as an internal npm package - Cut first-load JavaScript on the marketing templates from 480 kB to 210 kB by replacing a carousel library and moving 4 widgets to server components - Fixed 63 axe DevTools violations across 14 screens and added keyboard-only and NVDA passes to the definition of done for every ticket - Run a fortnightly design-and-front-end review with 3 designers and 5 engineers; wrote the 2-page handoff standard the team now uses in Figma Dev Mode → Case study: mayaokonkwo.design/checkout
UI Designer & Front-End Developer — digital product studio, 18 staff, Leeds Aug 2020 – Feb 2023 - Shipped 11 client projects in 30 months, from 6-page brochure sites to a 40-template Next.js rebuild for a membership body - Designed and coded a 12-template component kit in Figma and Sass that 4 studio developers reused across 5 later projects - Raised Lighthouse performance from the low 60s to 90+ on 5 client templates by compressing 300+ images to WebP and deferring 3 third-party scripts - Presented design work directly to client stakeholders in 20+ meetings and wrote the scope notes that became the build estimate - Mentored 2 interns through their first live builds, reviewing every pull request for 6 months → Case study: mayaokonkwo.design/membership-rebuild
Junior Designer — in-house marketing team, retail brand, Manchester Jul 2019 – Jul 2020 - Produced around 120 social and display assets a month across 8 sizes, working from a 30-page brand guideline - Built 18 responsive HTML email templates tested in 6 clients including Outlook desktop - Rebuilt the 40-item asset library in Figma, cutting the time to find and export a resized asset from 15 minutes to under 2
SKILLS Design: Figma (components, variables, Dev Mode), Adobe Illustrator, Photoshop, InDesign, After Effects (basics) Front end: HTML, CSS, Sass, JavaScript (ES2015+), TypeScript, React, Next.js, Tailwind, Storybook, Vite Testing & quality: Jest, Playwright, axe DevTools, Lighthouse, NVDA and VoiceOver checks, WCAG 2.2 AA Research: moderated usability tests, guerrilla testing, Dovetail, session-recording review Workflow: Git and GitHub, pull-request review, Jira, Linear, Notion, CI checks
EDUCATION BA (Hons) Graphic Design, 2:1 — [University], Manchester · 2016–2019 Final-year project: a typographic wayfinding system, included in the portfolio
LICENCES AND CERTIFICATIONS IAAP Certified Professional in Accessibility Core Competencies (CPACC) — 2024 Adobe Certified Professional, Photoshop — 2021 Full UK driving licence (used for on-site photography days)
Entry-level variant: same person, one page
Entry-level combined resume — projects carry the page
MAYA OKONKWO Junior Designer / Front-End Developer Manchester, UK · maya.okonkwo@email.com · +44 7700 900000 Portfolio: mayaokonkwo.design — 3 case studies, each with the brief, the process and the shipped result Code: github.com/maya-okonkwo — 4 repos, README on each explaining the decisions
SUMMARY Graphic design graduate who codes what she designs. Three portfolio projects, all live and all built by hand in HTML, CSS and vanilla JavaScript, including a 6-page site for a local charity that now handles its event sign-ups. Looking for a junior role where design and front-end sit in the same job description.
PROJECTS
Charity events site — self-directed, live since Feb 2019 - Designed 6 page templates in Figma after interviewing 3 volunteer coordinators about how they currently collect sign-ups - Built the site in HTML, CSS and vanilla JavaScript; passes axe DevTools with 0 violations and works keyboard-only - Handed over a 4-page editing guide; 2 volunteers have since updated content without help
Component kit for student projects — self-directed, 2019 - Built 14 reusable components in Figma and Sass, documented with usage notes and a do/don't example for each - Shared with 9 classmates; 5 used it for their final submissions
EXPERIENCE
Design Intern — retail brand marketing team, Manchester · Jun–Aug 2018 - Resized 200+ campaign assets across 8 formats to a 30-page brand guideline, with 2 rounds of feedback per set - Drafted 4 email layouts, 2 of which were sent to the full subscriber list
Freelance design — 2017–2019 - Delivered 7 small jobs for local businesses: 3 logo sets, 2 menu redesigns, 2 one-page sites, all quoted and invoiced by me
SKILLS Design: Figma, Adobe Illustrator, Photoshop, InDesign Front end: HTML, CSS, Sass, JavaScript, Git and GitHub, responsive layout across 3 breakpoints Quality: axe DevTools, Lighthouse, manual keyboard testing, cross-browser checks in Chrome, Safari and Firefox
EDUCATION BA (Hons) Graphic Design, 2:1 — [University], Manchester · 2016–2019 Electives in interaction design and typography; final-year wayfinding project in the portfolio
LICENCES AND CERTIFICATIONS Adobe Certified Professional, Photoshop — 2019 No licence is required for this work; this line exists only because the certification sits next to it.
How to write each section
Work top to bottom. The portfolio link is part of the writing job, not an afterthought pasted into the footer.
- Header — five lines, no decoration. Name, then the role title you are applying for, then city and country, then email and phone, then your links. Give the portfolio its own line and the code host its own line, and add four to eight words after each saying what the reader will find. "Portfolio: yourname.design — 4 case studies" earns clicks; "Portfolio available on request" throws the click away. Type URLs as plain text as well as hyperlinking them, so they survive a print or a paste into a form. If work is under NDA, write "password on request" rather than hiding the link. Skip the photo, the skill-level star ratings and the two-column layout that shuffles when a parser reads it.
- Summary — three sentences, built from a formula. Use: [Role] with [years] across [contexts]. [What you own end to end], including [scope in your own units]. [One line pointing at the best case study].
Example — design-leaning
Product designer with 5 years in-house on a subscription product. Owns discovery through to shipped UI: 30+ Figma components matched to a coded library, 40 moderated usability sessions run and written up. The onboarding case study shows the research, the 3 rejected directions and what shipped.
Example — development-leaning
Front-end developer with 4 years on marketing and product sites, comfortable taking a Figma file straight to production React. Ships accessible, fast pages: 5 template rebuilds under 250 kB of first-load JavaScript, WCAG 2.2 AA checked with axe DevTools and a keyboard pass. Repo links on each case study.
- Experience — one bullet formula, used every time. Action verb + what you designed or built + scope in your own units + the outcome you can defend. Your units are screens, flows, templates, components, breakpoints, kilobytes, Lighthouse scores, participants tested, sprints, clients, releases. Aim for three to five bullets per job, six at most for the current one, and add a single "→ Case study:" pointer per job so the reader knows which bullet has proof behind it.
Example bullets
- Redesigned the account setup flow from 7 screens to 4 and tested the new flow with 10 people before build - Built 24 React components with TypeScript props and Storybook docs, now used across 3 product areas - Migrated 38 templates from a legacy theme to Next.js over 5 sprints with no drop in organic traffic - Cut the design-to-build handoff from 3 meetings to 1 by publishing tokens in Figma variables and matching them to CSS custom properties - Fixed 63 axe DevTools violations across 14 screens and added keyboard-only testing to the team's definition of done - Reduced homepage first-load JavaScript from 480 kB to 210 kB by replacing 2 dependencies and lazy-loading the hero video - Ran 3 rounds of moderated testing with 12 participants and rewrote 9 pieces of interface copy from the findings - Delivered 11 client projects in 30 months as the only person doing both design and front end - Reviewed 200+ pull requests over 18 months and wrote the 2-page front-end review checklist the team adopted - Mentored 2 interns through their first live builds, pairing weekly for 6 months
- Skills — grouped, specific, and true. Four or five labelled lines beat a 40-word blob: design tools, languages and frameworks, testing and accessibility, research, workflow. Name versions and specifics where they matter (Figma variables and Dev Mode, ES2015+, WCAG 2.2 AA). Drop anything you could not answer a follow-up question about, and cut the self-scored bars — a reader who cares will open your code instead.
- Education — short, and placed by usefulness. Degree, subject, institution, years. Put it at the bottom once you have two years of work; keep it near the top as a new graduate and add a relevant module or final-year project that appears in the portfolio. Typical entry-level education for web developers and digital designers is a bachelor's degree (BLS, 2025), and graphic designers usually need a bachelor's degree in graphic design or a related field (BLS, 2025) — but requirements stretch from a high school diploma upwards, and BLS notes that people in these jobs may not need specific education credentials if they can demonstrate their abilities through prior work experience or projects (BLS, 2025). That is the whole argument for the combo: the portfolio is the evidence the credential would otherwise stand in for. BLS also states that employers rely on portfolios in making hiring decisions for graphic designers (BLS, 2025).
- Licences and certifications — keep the heading honest. No occupational licence is required to design or build software in most places, so do not manufacture one. What goes here: vendor software certifications, accessibility credentials such as the IAAP CPACC, cloud certifications such as an AWS or Microsoft Azure associate-level credential if the job asks for them, and a driving licence only if the work involves travel or shoots. BLS notes that certification programs for graphic designers are generally available through software product vendors, that certification in graphic design software may give jobseekers a competitive advantage, and that information on certifications is available from CareerOneStop (BLS, 2025). List the awarding body and the year, and leave the heading off entirely if you have nothing for it.
- Match the portfolio to the page. Three or four case studies is enough. Each one needs a title that names the problem, two or three lines of context, the constraint you worked inside, what you rejected, and the shipped result. If a resume bullet claims a number, the case study should show where it came from. If a case study has no matching bullet, either add the bullet or drop the case study.
Weak vs strong bullets
Four pairs. The weak versions are not badly written — they are just unverifiable, which is the same thing on a resume.
Pair 1 — ownership
- Weak: Responsible for the redesign of the checkout experience.
- Strong: Redesigned checkout from 6 screens to 3, tested the new flow with 12 people across 3 rounds, then built the 9 replacement React components.
The weak one hides whether you designed it, built it, or sat in the meetings. The strong one states the scope in screens and components and shows the research came before the build.
Pair 2 — performance
- Weak: Improved site speed and followed performance best practice.
- Strong: Cut homepage first-load JavaScript from 480 kB to 210 kB by removing 2 dependencies and lazy-loading the hero video; Lighthouse performance rose from 61 to 94.
Kilobytes and Lighthouse scores are the units a front-end reviewer already uses, and they invite a question you can answer.
Pair 3 — design systems
- Weak: Helped build a design system used across the company.
- Strong: Built 42 Figma components and matched them 1:1 to a TypeScript library published as an internal npm package; 3 product areas now consume it.
"Helped" and "across the company" tell the reader nothing about size or your part in it. Component counts and consumers do.
Pair 4 — accessibility
- Weak: Detail oriented about accessibility and always kept standards in mind.
- Strong: Cleared 63 axe DevTools violations across 14 screens, added keyboard-only and NVDA passes to the definition of done, and documented WCAG 2.2 AA criteria for 8 component patterns.
Named tools, a named standard, and a change to how the team works — three things an interviewer can probe.
Skills to include
Pick the ones the job advert actually asks for, then make sure each appears somewhere other than the skills list.
| Skill | Hard or soft | How to show it on the resume |
|---|---|---|
| Figma (components, variables, Dev Mode) | Hard | Name it in skills and attach a component count plus the handoff change it enabled |
| HTML, CSS and Sass | Hard | Tie to templates or breakpoints shipped, not just listed as a language |
| JavaScript and TypeScript | Hard | State the version or typing scope: "24 components with typed props" |
| React or another component framework | Hard | Name the framework in a bullet about what you built and how many consumers it has |
| Git, branching and pull-request review | Hard | Give a review volume or a checklist you wrote, plus a public repo link in the header |
| Accessibility to WCAG 2.2 AA | Hard | Name the standard, the tools (axe DevTools, NVDA, VoiceOver) and the violations cleared |
| Web performance tuning | Hard | Use kilobytes, image counts or Lighthouse scores before and after |
| Adobe Illustrator, Photoshop, InDesign | Hard | Group under design tools; attach asset volumes or brand-guideline work |
| Usability testing and research | Hard | Participants, rounds, and one decision that changed because of the findings |
| Communication with non-designers | Soft | Count the stakeholder presentations or name the artefact you wrote to settle a debate |
| Creative problem-solving | Soft | Show a constraint you worked inside — budget, legacy CMS, 3-week deadline — and what you shipped anyway |
| Time management across parallel work | Soft | Projects or clients delivered in a stated period, as "11 projects in 30 months" |
BLS lists communication skills, creativity, customer-service skills and problem-solving skills among the important qualities for web developers and digital designers, and analytical skills, artistic ability, communication skills, computer skills, creativity and time-management skills for graphic designers (BLS, 2025). None of those belong on the page as adjectives. Turn each into a bullet with a countable consequence.
Pay and outlook
Pay for design and development work is usually a base salary, paid monthly or fortnightly, sometimes with a bonus tied to company performance and, at product companies, equity or share options. Contract and freelance work is paid by the day or the hour instead, at a higher headline rate that has to absorb your own tax, software licences, pension, sick days and unpaid gaps between projects. Agencies and studios often sit below in-house product teams on base pay; the trade is range and volume of work.
What moves the number:
- Which job title the budget comes from. In the United States, the median annual wage for web developers was $92,650 in May 2025, while web and digital interface designers had a median of $104,000 in the same month, and software developers a median of $135,980 (BLS, May 2025). Graphic designers had median annual pay of $62,960 in 2025 (BLS, 2025). The same hybrid skill set can be hired under any of those titles, so the title on the requisition matters as much as your skills.
- How much of the stack you cover. People who can take research to production code, or design to a shipped component library, tend to be paid against engineering bands rather than visual-design bands.
- Industry and company stage. Regulated industries, enterprise software and finance usually pay more than agencies, charities, education and cultural organisations.
- Location and remote policy. City-level markets differ sharply, and many employers band remote pay by region.
- Seniority and scope. Owning a design system, a platform migration or other people's review queue moves you up a band faster than years of service.
On outlook, BLS projects employment of web developers and digital designers to grow 5 percent from 2025 to 2035, with about 13,600 openings a year on average over that decade, and employment of software developers, quality assurance analysts and testers to grow 10 percent over the same period (BLS, 2025–35). Employment of graphic designers is projected to decline 2 percent from 2025 to 2035 (BLS, 2025–35). Read that as a direction of travel for how you position yourself: interface, product and front-end work is the growing end, and a designer who can also build has two doors instead of one.
For current rates, check the official source for your country rather than aggregator averages. In the United States, that is the Occupational Outlook Handbook and the Occupational Employment and Wage Statistics programme, both from the U.S. Bureau of Labor Statistics; CareerOneStop is the source BLS names for certification information (BLS, 2025). Elsewhere, use your national statistics agency or government careers service, and sanity-check against advertised ranges in job postings for your city and your exact title.
Related guides
- Cover Letter for Designer and Developer Roles
- Interview Questions for Designers and Developers
- Portfolio Case Study Structure: Brief, Process, Result
- Front-End Developer Resume Example
- UX and Product Designer Resume Example
- Graphic Designer Resume Example
- Web Developer Resume Example
- Freelance Designer Resume and Rate Card
- Design System Specialist: Role Guide
- Accessibility Specialist: Role Guide
- Switching from Graphic Design to Product Design
- Career Change into Front-End Development
Frequently asked questions
What if I have no professional experience yet?
Replace the experience section with a projects section and keep everything else the same. Three projects is enough: one that solves a real problem for a real person, one that shows you can work to someone else's brief or brand, and one that shows your taste when nobody is constraining you. Write each with the same bullet formula — action verb, what you built, scope, outcome — and use the units you actually have: templates built, breakpoints supported, participants asked, violations cleared, people who used the result. Unpaid, coursework and volunteer work all count, as long as you label them honestly. Keep the header identical to the mid-level version, because the portfolio link matters more when there is no job history behind it: BLS notes that people in these jobs may not need specific education credentials if they can demonstrate their abilities through prior work experience or projects, and that employers rely on portfolios in making hiring decisions for graphic designers (BLS, 2025).
What format and layout should the combo use?
Send a PDF unless the employer asks for something else, exported under 1 MB so it opens on a phone, and name the file Firstname-Lastname-Role.pdf. Use a single column, 10 to 11 point body text, 14 to 18 point for your name, 0.75 to 1 inch margins, and one accent colour at most — your portfolio is where the design lives. Left-align everything, avoid text inside images or icons, and never put your email or portfolio URL in a graphic. Type the URLs out in plain text as well as linking them. Keep the portfolio and code links on lines four and five of the header, above the fold on page one. If you also keep a web version of your resume, make it a page on your own portfolio domain rather than a separate site, and make sure the two say the same thing.
How long should it be?
One page up to roughly three years of experience, two pages beyond that, and two pages is the ceiling for almost everybody in this field — the portfolio absorbs the depth. Spend page one on the header, summary, current or most recent role and skills. Push older roles, education and certifications to page two, each compressed to two or three bullets. Anything more than ten years old becomes a single line with dates and title, or disappears. If you are running over, cut adjectives before you cut numbers, and cut the third bullet about an old job before you cut a case-study pointer.
Should I lead with the resume or the portfolio when I apply?
Follow the application form, but design the resume so it survives either order. Most recruiters open the PDF first, see the portfolio line in the header, and click through if a bullet made them curious — so put your strongest countable bullet in the top third of page one and name the case study that backs it. When you email a hiring manager directly, put one sentence and one portfolio link in the body, attach the PDF, and name the single case study that matches the job advert. Pointing at one relevant project beats asking someone to browse nine.
Sources
- U.S. Bureau of Labor Statistics — Web Developers and Digital Designers : Occupational Outlook Handbook (2025)
- U.S. Bureau of Labor Statistics — Graphic Designers : Occupational Outlook Handbook (2025)
- U.S. Bureau of Labor Statistics — Software Developers, Quality Assurance Analysts, and Testers : Occupational Outlook Handbook (2025-05)
