portfolio bento grid dark personal designer developer cards asymmetric modern
Portfolio Bento
Dark asymmetric bento-grid portfolio for designers and developers with cards for profile, work, skills, stats, and social links.
modern Responsive
Live Preview
Sections
profileavailabilitylocationworkskillssocialstatstestimonialtoolbox
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alex Meier — Product Designer</title>
<meta name="description" content="Product designer crafting interfaces for ambitious startups. Available for freelance and full-time roles.">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600&display=swap');
*, *::before, *::after { box-sizing: border-box; }
body {
font-family: 'Inter', system-ui, sans-serif;
background: #0F0F0F;
color: #E8E6E1;
-webkit-font-smoothing: antialiased;
min-height: 100vh;
}
/* ── Bento grid ────────────────────────────────────────────── */
.bento-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 12px;
}
/* Card base */
.card {
background: #1A1A1A;
border-radius: 20px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.06);
transition: border-color 0.2s ease;
}
.card:hover { border-color: rgba(255,255,255,0.12); }
/* Column spans */
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-12 { grid-column: span 12; }
/* Row spans */
.row-2 { grid-row: span 2; }
/* Responsive: stack on small screens */
@media (max-width: 768px) {
.bento-grid { grid-template-columns: 1fr; }
[class*="col-"] { grid-column: span 1; grid-row: span 1; }
}
/* ── Tag pill ─────────────────────────────────────────────── */
.tag {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
background: rgba(255,255,255,0.07);
border-radius: 100px;
font-size: 11px;
color: rgba(255,255,255,0.5);
}
/* ── Availability pulse ──────────────────────────────────── */
@keyframes pulse-ring {
0% { box-shadow: 0 0 0 0 rgba(74,222,128,0.4); }
70% { box-shadow: 0 0 0 8px rgba(74,222,128,0); }
100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}
.pulse { animation: pulse-ring 2s ease infinite; }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }
/* ── Social link ─────────────────────────────────────────── */
.social-link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-radius: 12px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
font-size: 13px;
color: rgba(255,255,255,0.6);
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease;
}
.social-link:hover {
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.9);
}
/* ── Work card ───────────────────────────────────────────── */
.work-thumb {
aspect-ratio: 16/9;
border-radius: 12px;
overflow: hidden;
background: #252525;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: rgba(255,255,255,0.2);
letter-spacing: .06em;
text-transform: uppercase;
}
/* ── Skill bar ───────────────────────────────────────────── */
.skill-bar-track {
height: 4px;
background: rgba(255,255,255,0.07);
border-radius: 99px;
overflow: hidden;
}
.skill-bar-fill {
height: 100%;
border-radius: 99px;
background: linear-gradient(90deg, #7C6AF5, #A78BFA);
}
/* ── Map card ────────────────────────────────────────────── */
.map-bg {
background:
radial-gradient(circle at 50% 50%, rgba(124,106,245,0.12) 0%, transparent 60%),
linear-gradient(135deg, #141414 0%, #1E1E1E 100%);
}
.map-dot {
width: 10px; height: 10px;
background: #7C6AF5;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(124,106,245,0.25), 0 0 20px rgba(124,106,245,0.3);
}
/* ── CTA button ──────────────────────────────────────────── */
.btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
border-radius: 100px;
background: #7C6AF5;
color: white;
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: opacity 0.15s ease;
}
.btn-primary:hover { opacity: 0.85; }
/* ── Tech badge ──────────────────────────────────────────── */
.tech-badge {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 12px 10px;
background: rgba(255,255,255,0.04);
border-radius: 14px;
border: 1px solid rgba(255,255,255,0.06);
font-size: 10px;
color: rgba(255,255,255,0.4);
text-align: center;
}
</style>
</head>
<body>
<main class="max-w-5xl mx-auto px-4 py-8 sm:px-6 sm:py-12">
<div class="bento-grid" role="list">
<!-- ── 1. Profile card ── col-4 row-2 ─────────────────── -->
<article class="card col-4 row-2 p-6 flex flex-col" role="listitem" style="background: linear-gradient(145deg, #1C1C2E 0%, #1A1A1A 100%)">
<!-- Avatar -->
<div style="width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#7C6AF5,#A78BFA);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:600;margin-bottom:20px;flex-shrink:0">
A
</div>
<h1 class="text-xl font-semibold tracking-tight mb-1">Alex Meier</h1>
<p style="font-size:13px;color:rgba(255,255,255,0.45);margin-bottom:16px">Product Designer</p>
<p style="font-size:13px;color:rgba(255,255,255,0.55);line-height:1.7;flex:1">
Crafting interfaces that feel inevitable. 7 years turning complex products into calm experiences.
</p>
<!-- Tags -->
<div class="flex flex-wrap gap-2 mt-5">
<span class="tag">UI Design</span>
<span class="tag">Systems</span>
<span class="tag">Prototyping</span>
</div>
<!-- CTA -->
<a href="mailto:hello@alexmeier.co" class="btn-primary mt-5 self-start">
Get in touch
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true"><path d="M2 6h8M7 3l3 3-3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
</a>
</article>
<!-- ── 2. Availability ── col-4 ────────────────────────── -->
<article class="card col-4 p-5 flex items-center gap-4" role="listitem">
<div
class="pulse"
style="width:36px;height:36px;border-radius:50%;background:rgba(74,222,128,0.15);display:flex;align-items:center;justify-content:center;flex-shrink:0"
aria-hidden="true"
>
<div style="width:10px;height:10px;border-radius:50%;background:#4ADE80"></div>
</div>
<div>
<p class="text-sm font-medium">Available for work</p>
<p style="font-size:12px;color:rgba(255,255,255,0.4);margin-top:2px">Open to freelance & full-time from May 2026</p>
</div>
</article>
<!-- ── 3. Location ── col-4 ───────────────────────────── -->
<article class="card col-4 p-5 map-bg flex flex-col justify-between" role="listitem" style="min-height: 110px">
<div class="flex items-center gap-2" style="font-size:12px;color:rgba(255,255,255,0.4)">
<svg width="13" height="13" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M7 1a4 4 0 0 1 4 4c0 3-4 8-4 8S3 8 3 5a4 4 0 0 1 4-4z" stroke="currentColor" stroke-width="1.2"/><circle cx="7" cy="5" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>
Berlin, Germany · UTC+2
</div>
<div class="flex items-center gap-3 mt-4">
<div class="map-dot" role="img" aria-label="Location marker"></div>
<span style="font-size:14px;font-weight:500">Berlin</span>
</div>
</article>
<!-- ── 4. Featured work 1 ── col-8 ───────────────────── -->
<article class="card col-8 p-5" role="listitem">
<div class="work-thumb mb-4" style="background:linear-gradient(135deg,#1E1B3A,#2D2A4A)">
<span>Dashboard preview</span>
</div>
<div class="flex items-start justify-between gap-4">
<div>
<h2 class="text-sm font-semibold mb-1">Orbit — Analytics Platform</h2>
<p style="font-size:12px;color:rgba(255,255,255,0.45);line-height:1.6">Redesigned the core dashboard and onboarding for a B2B analytics tool. Reduced time-to-insight by 40%.</p>
</div>
<a href="#" class="flex-shrink-0" style="font-size:12px;color:#7C6AF5;text-decoration:none;white-space:nowrap">View →</a>
</div>
<div class="flex gap-2 mt-3">
<span class="tag">Figma</span>
<span class="tag">User Research</span>
<span class="tag">Design System</span>
</div>
</article>
<!-- ── 5. Skills ── col-4 ────────────────────────────── -->
<article class="card col-4 p-5" role="listitem">
<h2 class="text-xs font-medium mb-4" style="color:rgba(255,255,255,0.35);text-transform:uppercase;letter-spacing:.1em">Skills</h2>
<div style="display:flex;flex-direction:column;gap:12px">
<div>
<div class="flex justify-between mb-1.5" style="font-size:12px;color:rgba(255,255,255,0.6)">
<span>Visual Design</span><span style="color:rgba(255,255,255,0.3)">95%</span>
</div>
<div class="skill-bar-track"><div class="skill-bar-fill" style="width:95%"></div></div>
</div>
<div>
<div class="flex justify-between mb-1.5" style="font-size:12px;color:rgba(255,255,255,0.6)">
<span>Prototyping</span><span style="color:rgba(255,255,255,0.3)">88%</span>
</div>
<div class="skill-bar-track"><div class="skill-bar-fill" style="width:88%"></div></div>
</div>
<div>
<div class="flex justify-between mb-1.5" style="font-size:12px;color:rgba(255,255,255,0.6)">
<span>Design Systems</span><span style="color:rgba(255,255,255,0.3)">82%</span>
</div>
<div class="skill-bar-track"><div class="skill-bar-fill" style="width:82%"></div></div>
</div>
<div>
<div class="flex justify-between mb-1.5" style="font-size:12px;color:rgba(255,255,255,0.6)">
<span>Frontend (HTML/CSS)</span><span style="color:rgba(255,255,255,0.3)">70%</span>
</div>
<div class="skill-bar-track"><div class="skill-bar-fill" style="width:70%"></div></div>
</div>
</div>
</article>
<!-- ── 6. Social links ── col-3 ──────────────────────── -->
<article class="card col-3 p-4 flex flex-col gap-2" role="listitem">
<h2 class="text-xs font-medium mb-1" style="color:rgba(255,255,255,0.35);text-transform:uppercase;letter-spacing:.1em">Find me</h2>
<a href="#" class="social-link" aria-label="Twitter / X profile">
<span>Twitter / X</span>
<span style="font-size:16px" aria-hidden="true">𝕏</span>
</a>
<a href="#" class="social-link" aria-label="Dribbble profile">
<span>Dribbble</span>
<span style="font-size:14px" aria-hidden="true">●</span>
</a>
<a href="#" class="social-link" aria-label="LinkedIn profile">
<span>LinkedIn</span>
<span style="font-size:14px" aria-hidden="true">in</span>
</a>
<a href="#" class="social-link" aria-label="Read.cv profile">
<span>Read.cv</span>
<span style="font-size:14px" aria-hidden="true">cv</span>
</a>
</article>
<!-- ── 7. Stats strip ── col-5 ───────────────────────── -->
<article class="card col-5 p-5 flex items-center gap-0" role="listitem">
<div class="flex-1 text-center" style="padding: 0 12px">
<p class="text-2xl font-semibold tabular-nums">7+</p>
<p style="font-size:11px;color:rgba(255,255,255,0.35);margin-top:4px">Years</p>
</div>
<div style="width:1px;height:36px;background:rgba(255,255,255,0.07)"></div>
<div class="flex-1 text-center" style="padding: 0 12px">
<p class="text-2xl font-semibold tabular-nums">40+</p>
<p style="font-size:11px;color:rgba(255,255,255,0.35);margin-top:4px">Projects</p>
</div>
<div style="width:1px;height:36px;background:rgba(255,255,255,0.07)"></div>
<div class="flex-1 text-center" style="padding: 0 12px">
<p class="text-2xl font-semibold tabular-nums">12</p>
<p style="font-size:11px;color:rgba(255,255,255,0.35);margin-top:4px">Clients</p>
</div>
</article>
<!-- ── 8. Testimonial ── col-7 ────────────────────────── -->
<article class="card col-7 p-6" role="listitem" style="background:linear-gradient(135deg,#1A1830,#1A1A1A)">
<p style="font-size:22px;color:rgba(255,255,255,0.15);line-height:1;margin-bottom:12px;font-family:Georgia,serif">"</p>
<blockquote style="font-size:14px;color:rgba(255,255,255,0.7);line-height:1.7;font-style:italic">
Alex transformed our chaotic Figma library into a coherent design system in 6 weeks. The clarity it brought to the team was worth 10× the investment.
</blockquote>
<figcaption class="flex items-center gap-3 mt-4">
<div style="width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#F59E0B,#EF4444);flex-shrink:0"></div>
<div>
<p style="font-size:12px;font-weight:500">Maria Schulz</p>
<p style="font-size:11px;color:rgba(255,255,255,0.35)">CPO, Flowdesk</p>
</div>
</figcaption>
</article>
<!-- ── 9. Featured work 2 ── col-5 ───────────────────── -->
<article class="card col-5 p-5" role="listitem">
<div class="work-thumb mb-4" style="background:linear-gradient(135deg,#1A2E1A,#1E2E1E);aspect-ratio:4/3">
<span>App preview</span>
</div>
<h2 class="text-sm font-semibold mb-1">Grove — Habit Tracker</h2>
<p style="font-size:12px;color:rgba(255,255,255,0.45);line-height:1.6">iOS + Android app design. From 0 to App Store in 10 weeks.</p>
<div class="flex gap-2 mt-3">
<span class="tag">Mobile</span>
<span class="tag">iOS</span>
</div>
</article>
<!-- ── 10. Currently reading ── col-4 ─────────────────── -->
<article class="card col-4 p-5" role="listitem">
<h2 class="text-xs font-medium mb-4" style="color:rgba(255,255,255,0.35);text-transform:uppercase;letter-spacing:.1em">Currently reading</h2>
<div class="flex gap-4 items-start">
<div style="width:44px;height:60px;border-radius:6px;background:linear-gradient(135deg,#2A1A3E,#3E1A2E);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:18px">📖</div>
<div>
<p style="font-size:13px;font-weight:500;line-height:1.4">The Design of Everyday Things</p>
<p style="font-size:11px;color:rgba(255,255,255,0.35);margin-top:4px">Don Norman</p>
</div>
</div>
</article>
<!-- ── 11. Tech stack ── col-4 ───────────────────────── -->
<article class="card col-4 p-5" role="listitem">
<h2 class="text-xs font-medium mb-4" style="color:rgba(255,255,255,0.35);text-transform:uppercase;letter-spacing:.1em">Toolbox</h2>
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:8px">
<div class="tech-badge">
<span style="font-size:20px">🎨</span>
Figma
</div>
<div class="tech-badge">
<span style="font-size:20px">◼</span>
Framer
</div>
<div class="tech-badge">
<span style="font-size:20px">▲</span>
Vercel
</div>
<div class="tech-badge">
<span style="font-size:20px">◈</span>
Notion
</div>
</div>
</article>
<!-- ── 12. Quote / Philosophy ── col-4 ───────────────── -->
<article class="card col-4 p-6 flex flex-col justify-center" role="listitem" style="background:linear-gradient(145deg,#1C2A1C,#1A1A1A)">
<p style="font-size:16px;font-weight:300;line-height:1.65;color:rgba(255,255,255,0.7)">
"Good design is<br>
<em style="font-style:italic;color:rgba(255,255,255,0.95)">invisible.</em><br>
Great design is<br>
<em style="font-style:italic;color:rgba(255,255,255,0.95)">inevitable.</em>"
</p>
</article>
</div>
<!-- Footer -->
<footer class="mt-8 text-center" style="font-size:12px;color:rgba(255,255,255,0.2)">
<p>© 2026 Alex Meier · <a href="mailto:hello@alexmeier.co" style="color:rgba(255,255,255,0.35);text-decoration:none">hello@alexmeier.co</a></p>
</footer>
</main>
</body>
</html>
Dark bento-grid portfolio template. 12 asymmetric cards on a CSS grid: profile, availability status, location, two featured work samples, skill bars, social links, stat strip, testimonial, toolbox, and a philosophy quote. Responsive — stacks to single column on mobile.