portfolio designer ux ui product-design creative modern
Portfolio Designer
Light, vibrant product designer portfolio with full-width case studies, skill matrix, testimonials, and personal bio.
modern Responsive Vanilla JS
Live Preview
Sections
navbarherocase-studiesskillsabouttestimonialscontactfooter
Patterns used
HTML
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sarah Kim — Product Designer</title>
<meta name="description" content="Senior product designer crafting intuitive, impactful digital experiences. Previously at Figma and Spotify." />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://webspire.de/webspire-tokens.css">
<link rel="stylesheet" href="https://webspire.de/webspire-components.css">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
body { font-family: 'Inter', system-ui, sans-serif; }
/* Brand tokens */
:root {
--ws-color-accent: oklch(0.68 0.19 45);
--ws-color-accent-light: oklch(0.73 0.17 45);
--ws-color-accent-soft: oklch(0.97 0.03 75);
--ws-color-secondary: oklch(0.45 0.22 295);
--ws-color-secondary-light: oklch(0.65 0.16 295);
--ws-color-teal: oklch(0.58 0.14 195);
}
/* interactions/hover-lift */
.hover-lift {
--lift-distance: -4px;
--lift-shadow: 0 8px 24px oklch(0 0 0 / 0.2);
--lift-duration: 0.25s;
transition:
transform var(--lift-duration) cubic-bezier(0.16, 1, 0.3, 1),
box-shadow var(--lift-duration) cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-lift:hover {
transform: translateY(var(--lift-distance));
box-shadow: var(--lift-shadow);
}
@media (prefers-reduced-motion: reduce) {
.hover-lift { transition: none; }
}
/* interactions/underline-draw */
.underline-draw {
--underline-color: currentColor;
--underline-speed: 0.25s;
display: inline;
padding-bottom: 0.0625rem;
background: linear-gradient(to right, var(--underline-color) 0%, var(--underline-color) 98%);
background-size: 0 1px;
background-repeat: no-repeat;
background-position: left 98%;
transition: background-size var(--underline-speed) ease;
text-decoration: none;
}
.underline-draw:hover,
.underline-draw:focus-visible {
background-size: 100% 1px;
}
@media (prefers-reduced-motion: reduce) {
.underline-draw { transition: none; }
}
</style>
</head>
<body class="bg-white text-slate-700 antialiased">
<!-- Navbar -->
<nav class="ws-navbar fixed top-0 inset-x-0 z-50 bg-white/80 backdrop-blur-md border-b border-slate-100" aria-label="Main navigation">
<div class="mx-auto max-w-6xl flex items-center justify-between px-6 py-4">
<a href="#" class="text-lg font-bold text-slate-900 tracking-tight">Sarah Kim</a>
<ul class="hidden md:flex items-center gap-8 text-sm font-medium" role="list">
<li><a href="#case-studies" class="underline-draw text-slate-500 hover:text-slate-900 transition-colors">Case Studies</a></li>
<li><a href="#about" class="underline-draw text-slate-500 hover:text-slate-900 transition-colors">About</a></li>
<li><a href="#contact" class="underline-draw text-slate-500 hover:text-slate-900 transition-colors">Contact</a></li>
<li><a href="/resume.pdf" class="font-semibold transition-colors" style="color: var(--ws-color-accent);">Resume</a></li>
</ul>
<button
type="button"
class="md:hidden p-2 text-slate-500 hover:text-slate-900"
aria-label="Open menu"
aria-expanded="false"
id="menu-toggle"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
<!-- Mobile menu -->
<div id="mobile-menu" class="hidden md:hidden border-t border-slate-100 bg-white/95 backdrop-blur-md">
<ul class="flex flex-col gap-1 px-6 py-4 text-sm font-medium" role="list">
<li><a href="#case-studies" class="block py-2 text-slate-500 hover:text-slate-900 transition-colors">Case Studies</a></li>
<li><a href="#about" class="block py-2 text-slate-500 hover:text-slate-900 transition-colors">About</a></li>
<li><a href="#contact" class="block py-2 text-slate-500 hover:text-slate-900 transition-colors">Contact</a></li>
<li><a href="/resume.pdf" class="block py-2 font-semibold" style="color: var(--ws-color-accent);">Resume</a></li>
</ul>
</div>
</nav>
<main>
<!-- Hero -->
<section class="ws-hero min-h-[85vh] flex items-center pt-20" aria-label="Introduction">
<div class="mx-auto max-w-6xl px-6 py-24">
<p class="text-sm font-semibold tracking-widest uppercase mb-6" style="color: var(--ws-color-accent);">Product Designer</p>
<h1 class="text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-extrabold text-slate-900 tracking-tight leading-[1.08] max-w-4xl">
I design products people love to use.
</h1>
<p class="mt-6 text-lg sm:text-xl text-slate-500 leading-relaxed max-w-2xl">
Senior Product Designer at <span class="text-slate-900 font-semibold">Figma</span>, previously at
<span class="text-slate-900 font-semibold">Spotify</span>. I turn complex problems into simple,
delightful experiences that drive real business outcomes.
</p>
<div class="mt-10 flex flex-wrap gap-4">
<a href="#case-studies" class="hover-lift inline-flex items-center gap-2 rounded-2xl bg-slate-900 text-white px-7 py-3.5 text-sm font-semibold hover:bg-slate-800 transition-colors">
View Case Studies
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
</a>
<a href="/resume.pdf" class="hover-lift inline-flex items-center gap-2 rounded-2xl border-2 border-slate-200 text-slate-700 px-7 py-3.5 text-sm font-semibold hover:border-slate-300 hover:bg-slate-50 transition-colors">
Download Resume
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
</a>
</div>
</div>
</section>
<!-- Case Studies -->
<section id="case-studies" class="ws-blog py-24" aria-labelledby="cases-heading">
<div class="mx-auto max-w-6xl px-6">
<h2 id="cases-heading" class="text-sm font-semibold tracking-widest uppercase mb-16" style="color: var(--ws-color-accent);">Selected Work</h2>
<!-- Case Study 1 -->
<article class="mb-20 grid gap-8 lg:grid-cols-2 lg:gap-12 items-center">
<div class="bg-gradient-to-br from-orange-100 via-orange-50 to-amber-50 rounded-2xl aspect-[4/3] flex items-center justify-center">
<div class="w-3/4 h-2/3 rounded-xl bg-white/60 backdrop-blur-sm border border-white/80 shadow-lg"></div>
</div>
<div class="lg:py-8">
<p class="text-xs font-semibold tracking-widest uppercase text-slate-400 mb-3">Figma · Lead Designer</p>
<h3 class="text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight">Reimagining the Onboarding Experience</h3>
<p class="mt-4 text-slate-500 leading-relaxed">
Led the end-to-end redesign of Figma's onboarding flow, reducing time-to-first-design from 12 minutes to under 4. Conducted 30+ user interviews and ran a 6-week iterative prototyping sprint with engineering.
</p>
<p class="mt-4 text-2xl font-bold" style="color: var(--ws-color-accent);">Increased activation by 34%</p>
<ul class="mt-6 flex flex-wrap gap-2" role="list" aria-label="Skills used">
<li class="text-xs font-medium bg-slate-100 text-slate-600 rounded-full px-3 py-1">User Research</li>
<li class="text-xs font-medium bg-slate-100 text-slate-600 rounded-full px-3 py-1">Prototyping</li>
<li class="text-xs font-medium bg-slate-100 text-slate-600 rounded-full px-3 py-1">Design Systems</li>
</ul>
</div>
</article>
<!-- Case Study 2 -->
<article class="mb-20 grid gap-8 lg:grid-cols-2 lg:gap-12 items-center">
<div class="lg:order-2 bg-gradient-to-br from-indigo-100 via-violet-50 to-purple-50 rounded-2xl aspect-[4/3] flex items-center justify-center">
<div class="w-3/4 h-2/3 rounded-xl bg-white/60 backdrop-blur-sm border border-white/80 shadow-lg"></div>
</div>
<div class="lg:order-1 lg:py-8">
<p class="text-xs font-semibold tracking-widest uppercase text-slate-400 mb-3">Spotify · Senior Designer</p>
<h3 class="text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight">Collaborative Playlist Creation</h3>
<p class="mt-4 text-slate-500 leading-relaxed">
Designed the collaborative playlist feature that lets friends add, vote, and reorder songs in real time. Built and validated 4 interaction models through 200+ usability tests before shipping to 150M+ users.
</p>
<p class="mt-4 text-2xl font-bold" style="color: var(--ws-color-secondary);">Grew shared playlists by 52%</p>
<ul class="mt-6 flex flex-wrap gap-2" role="list" aria-label="Skills used">
<li class="text-xs font-medium bg-slate-100 text-slate-600 rounded-full px-3 py-1">Interaction Design</li>
<li class="text-xs font-medium bg-slate-100 text-slate-600 rounded-full px-3 py-1">Usability Testing</li>
<li class="text-xs font-medium bg-slate-100 text-slate-600 rounded-full px-3 py-1">Motion Design</li>
</ul>
</div>
</article>
<!-- Case Study 3 -->
<article class="grid gap-8 lg:grid-cols-2 lg:gap-12 items-center">
<div class="bg-gradient-to-br from-teal-100 via-emerald-50 to-cyan-50 rounded-2xl aspect-[4/3] flex items-center justify-center">
<div class="w-3/4 h-2/3 rounded-xl bg-white/60 backdrop-blur-sm border border-white/80 shadow-lg"></div>
</div>
<div class="lg:py-8">
<p class="text-xs font-semibold tracking-widest uppercase text-slate-400 mb-3">Spotify · Product Designer</p>
<h3 class="text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight">Podcast Discovery Redesign</h3>
<p class="mt-4 text-slate-500 leading-relaxed">
Rethought the podcast browsing experience to surface relevant content earlier. Designed a card-based exploration model informed by analysis of 2M+ listening patterns and A/B tested across 12 markets.
</p>
<p class="mt-4 text-2xl font-bold" style="color: var(--ws-color-teal);">Boosted discovery rate by 28%</p>
<ul class="mt-6 flex flex-wrap gap-2" role="list" aria-label="Skills used">
<li class="text-xs font-medium bg-slate-100 text-slate-600 rounded-full px-3 py-1">Data-Informed Design</li>
<li class="text-xs font-medium bg-slate-100 text-slate-600 rounded-full px-3 py-1">A/B Testing</li>
<li class="text-xs font-medium bg-slate-100 text-slate-600 rounded-full px-3 py-1">Content Strategy</li>
</ul>
</div>
</article>
</div>
</section>
<!-- Skills -->
<section class="ws-features py-24 bg-slate-50" aria-labelledby="skills-heading">
<div class="mx-auto max-w-6xl px-6">
<div class="grid gap-12 lg:grid-cols-5">
<div class="lg:col-span-2">
<h2 id="skills-heading" class="text-3xl sm:text-4xl font-bold text-slate-900 tracking-tight">What I Do</h2>
<p class="mt-4 text-slate-500 leading-relaxed">
I operate across the full design process — from early research and strategy through to pixel-perfect delivery and design system governance.
</p>
</div>
<div class="lg:col-span-3 grid sm:grid-cols-2 gap-10">
<div>
<h3 class="text-xs font-semibold tracking-widest uppercase mb-4" style="color: var(--ws-color-accent);">Research</h3>
<ul class="space-y-2.5 text-slate-600" role="list">
<li class="flex items-center gap-2.5">
<span class="w-1 h-1 rounded-full shrink-0" style="background: var(--ws-color-accent);" aria-hidden="true"></span>User Interviews
</li>
<li class="flex items-center gap-2.5">
<span class="w-1 h-1 rounded-full shrink-0" style="background: var(--ws-color-accent);" aria-hidden="true"></span>Surveys & Analytics
</li>
<li class="flex items-center gap-2.5">
<span class="w-1 h-1 rounded-full shrink-0" style="background: var(--ws-color-accent);" aria-hidden="true"></span>Usability Testing
</li>
<li class="flex items-center gap-2.5">
<span class="w-1 h-1 rounded-full shrink-0" style="background: var(--ws-color-accent);" aria-hidden="true"></span>Competitive Analysis
</li>
</ul>
</div>
<div>
<h3 class="text-xs font-semibold tracking-widest uppercase mb-4" style="color: var(--ws-color-secondary);">Design</h3>
<ul class="space-y-2.5 text-slate-600" role="list">
<li class="flex items-center gap-2.5">
<span class="w-1 h-1 rounded-full shrink-0" style="background: var(--ws-color-secondary);" aria-hidden="true"></span>Wireframing
</li>
<li class="flex items-center gap-2.5">
<span class="w-1 h-1 rounded-full shrink-0" style="background: var(--ws-color-secondary);" aria-hidden="true"></span>High-Fidelity Prototyping
</li>
<li class="flex items-center gap-2.5">
<span class="w-1 h-1 rounded-full shrink-0" style="background: var(--ws-color-secondary);" aria-hidden="true"></span>Design Systems
</li>
<li class="flex items-center gap-2.5">
<span class="w-1 h-1 rounded-full shrink-0" style="background: var(--ws-color-secondary);" aria-hidden="true"></span>Interaction & Motion
</li>
</ul>
</div>
<div class="sm:col-span-2">
<h3 class="text-xs font-semibold tracking-widest uppercase mb-4" style="color: var(--ws-color-teal);">Tools</h3>
<ul class="flex flex-wrap gap-2.5" role="list">
<li class="text-sm font-medium bg-white border border-slate-200 text-slate-600 rounded-full px-4 py-1.5">Figma</li>
<li class="text-sm font-medium bg-white border border-slate-200 text-slate-600 rounded-full px-4 py-1.5">Framer</li>
<li class="text-sm font-medium bg-white border border-slate-200 text-slate-600 rounded-full px-4 py-1.5">Principle</li>
<li class="text-sm font-medium bg-white border border-slate-200 text-slate-600 rounded-full px-4 py-1.5">Maze</li>
<li class="text-sm font-medium bg-white border border-slate-200 text-slate-600 rounded-full px-4 py-1.5">Miro</li>
<li class="text-sm font-medium bg-white border border-slate-200 text-slate-600 rounded-full px-4 py-1.5">Notion</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- About -->
<section id="about" class="ws-hero py-24" aria-labelledby="about-heading">
<div class="mx-auto max-w-6xl px-6">
<div class="grid gap-12 lg:grid-cols-5 items-center">
<div class="lg:col-span-2 flex justify-center">
<div class="w-72 h-72 sm:w-80 sm:h-80 rounded-2xl bg-gradient-to-br from-orange-100 via-rose-50 to-violet-100 flex items-center justify-center">
<span class="text-slate-400 text-sm">Photo</span>
</div>
</div>
<div class="lg:col-span-3">
<h2 id="about-heading" class="text-3xl sm:text-4xl font-bold text-slate-900 tracking-tight mb-6">A bit about me</h2>
<div class="space-y-4 text-slate-500 leading-relaxed">
<p>
I fell into design through architecture school in Seoul, where I learned that every space — physical or digital — should respect the people who inhabit it. After moving to San Francisco, I spent two years at a tiny startup where I wore every hat imaginable, then joined Spotify's growth team, where I discovered how much I love solving problems at scale.
</p>
<p>
At Figma, I focus on the new-user journey and design system tooling. I'm most energized when I can pair deep user research with rapid prototyping — the moment a messy insight clicks into a clear interface is what keeps me in this craft.
</p>
<p>
When I'm not pushing pixels, you'll find me experimenting with ceramics, running trails in the Marin Headlands, or hunting down the best <span class="text-slate-900 font-medium">jjajangmyeon</span> in the Bay Area. I also volunteer as a design mentor with Out in Tech.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="ws-testimonials py-24 bg-slate-50" aria-labelledby="testimonials-heading">
<div class="mx-auto max-w-6xl px-6">
<h2 id="testimonials-heading" class="text-sm font-semibold tracking-widest uppercase mb-12" style="color: var(--ws-color-accent);">Kind Words</h2>
<div class="grid gap-8 md:grid-cols-2">
<blockquote class="hover-lift bg-white rounded-2xl p-8 sm:p-10 border border-slate-100">
<p class="text-slate-700 leading-relaxed text-lg">
"Sarah has this rare ability to hold the entire problem space in her head while still sweating every pixel. During the onboarding redesign, she'd present research findings in the morning and have a testable prototype by lunch. The team shipped faster because of her clarity."
</p>
<footer class="mt-6 flex items-center gap-4">
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-orange-200 to-rose-200" aria-hidden="true"></div>
<div>
<p class="text-sm font-semibold text-slate-900">James Okafor</p>
<p class="text-sm text-slate-400">Engineering Manager, Figma</p>
</div>
</footer>
</blockquote>
<blockquote class="hover-lift bg-white rounded-2xl p-8 sm:p-10 border border-slate-100">
<p class="text-slate-700 leading-relaxed text-lg">
"I've worked with many designers, and Sarah stands out because she genuinely listens. She doesn't just hand off mockups — she sits with engineers, understands constraints, and finds solutions that are better than what anyone imagined. The collaborative playlist feature wouldn't exist without her persistence."
</p>
<footer class="mt-6 flex items-center gap-4">
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-violet-200 to-indigo-200" aria-hidden="true"></div>
<div>
<p class="text-sm font-semibold text-slate-900">Lena Bergstrom</p>
<p class="text-sm text-slate-400">VP of Product, Spotify</p>
</div>
</footer>
</blockquote>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact" class="ws-contact py-24" aria-labelledby="contact-heading">
<div class="mx-auto max-w-2xl px-6 text-center">
<h2 id="contact-heading" class="text-3xl sm:text-4xl font-bold text-slate-900 tracking-tight">Let's work together</h2>
<p class="mt-4 text-slate-500 leading-relaxed">
I'm always interested in challenging product problems, design leadership roles, and meaningful freelance projects.
</p>
<a href="mailto:sarah@sarahkim.design" class="mt-8 inline-block text-2xl sm:text-3xl font-bold transition-colors" style="color: var(--ws-color-accent);">
sarah@sarahkim.design
</a>
<ul class="mt-10 flex justify-center gap-6" role="list" aria-label="Social links">
<li>
<a href="#" class="text-slate-400 transition-colors hover:text-[oklch(0.68_0.19_45)]" aria-label="LinkedIn profile">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" /></svg>
</a>
</li>
<li>
<a href="#" class="text-slate-400 transition-colors hover:text-[oklch(0.68_0.19_45)]" aria-label="Dribbble profile">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0C5.375 0 0 5.375 0 12s5.375 12 12 12 12-5.375 12-12S18.625 0 12 0zm7.938 5.563a10.18 10.18 0 012.25 6.375c-.328-.063-3.625-.75-6.938-.313-.063-.188-.125-.313-.188-.5-.188-.438-.375-.875-.625-1.313 3.688-1.5 5.313-3.688 5.5-3.938v-.312zM12 1.813c2.688 0 5.125 1.063 6.938 2.75-.188.25-1.688 2.25-5.25 3.563-1.625-3-3.438-5.5-3.75-5.875A10.3 10.3 0 0112 1.812zM8.063 3.063c.25.375 2.063 2.875 3.75 5.813-4.75 1.25-8.938 1.25-9.375 1.25a10.24 10.24 0 015.625-7.063zM1.813 12v-.375c.438.063 5.313.063 10.438-1.438.313.563.563 1.125.813 1.688-.125.063-.313.063-.438.125-5.375 1.75-8.25 6.5-8.438 6.813A10.18 10.18 0 011.813 12zM12 22.188c-2.438 0-4.688-.813-6.5-2.25.188-.313 2.25-4.375 8.188-6.375h.063c1.5 4.063 2.125 7.5 2.25 8.25a10.4 10.4 0 01-4 .375zm5.75-1.813c-.125-.5-.625-3.813-2.063-7.813 3.063-.5 5.75.313 6.125.438a10.23 10.23 0 01-4.063 7.375z" /></svg>
</a>
</li>
<li>
<a href="#" class="text-slate-400 transition-colors hover:text-[oklch(0.68_0.19_45)]" aria-label="X (Twitter) profile">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" /></svg>
</a>
</li>
</ul>
<p class="mt-8 text-sm text-slate-400">Based in San Francisco. Open to freelance.</p>
</div>
</section>
</main>
<!-- Footer -->
<footer class="ws-footer border-t border-slate-100 py-8">
<div class="mx-auto max-w-6xl px-6 text-center">
<p class="text-sm text-slate-400">
Designed and built by Sarah Kim
</p>
</div>
</footer>
<script>
const toggle = document.getElementById('menu-toggle');
const menu = document.getElementById('mobile-menu');
if (toggle && menu) {
toggle.addEventListener('click', () => {
const expanded = toggle.getAttribute('aria-expanded') === 'true';
toggle.setAttribute('aria-expanded', String(!expanded));
menu.classList.toggle('hidden');
});
menu.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
menu.classList.add('hidden');
toggle.setAttribute('aria-expanded', 'false');
});
});
}
</script>
</body>
</html>
Product designer portfolio with vibrant case study cards and warm personal tone. Light, airy design that showcases work impact through metrics and testimonials.