Start Here

Add Your Images

Every component below uses a coloured placeholder box so you can see the layout. To make it yours, drop an <img> inside that box. The trick is object-fit: cover — it fills the box at any size without squishing your photo.

Placeholder → real image HOW-TO

Placeholder (what you start with)

Your image dropped in

A few tips:

Keep images in an images/ folder next to your HTML, then link them like images/my-project.jpg.
Always add alt text describing the picture — it's read aloud by screen readers.
Resize big photos before uploading (aim under ~300 KB) so the page loads fast.
Use lowercase file names with no spaces: hero-shot.jpg, not Hero Shot.JPG.

HTML

<!-- BEFORE — an empty placeholder box -->
<div class="proj-thumb"></div>

<!-- AFTER — drop your own image inside it -->
<div class="proj-thumb">
  <img src="images/my-project.jpg" alt="Screenshot of my project">
</div>

CSS

/* the box keeps its shape... */
.proj-thumb{
  aspect-ratio:16 / 10;   /* same shape every time */
  overflow:hidden;        /* clip anything that spills out */
  border-radius:12px;
}
/* ...and the image fills it cleanly */
.proj-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;       /* fill without stretching */
  display:block;
}

01 — Show Your Projects

Project Cards

The workhorse of any portfolio: a tidy grid of cards with a thumbnail, tech tags, and quick links to the live site and code. Hover to reveal the actions.

Grid + hover actions GRID

ReactAPI

Weather Dashboard

Live forecasts with a clean, card-based UI.

UIFigma

Fitness App

A motivating redesign of a workout tracker.

HTMLCSS

Bakery Site

A warm landing page for a local bakery.

HTML

<div class="proj-grid">
  <article class="proj-card">
    <div class="proj-thumb">
      <img src="project.jpg" alt="">
      <div class="actions">
        <a href="#"><i class="ph ph-eye"></i></a>
        <a href="#"><i class="ph ph-github-logo"></i></a>
      </div>
    </div>
    <div class="proj-body">
      <div class="proj-tags"><span>React</span></div>
      <h3>Project title</h3>
      <p>Short description.</p>
    </div>
  </article>
</div>

CSS

.proj-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:18px;
}
.proj-card{ border:1px solid #e6e8ee; border-radius:16px; overflow:hidden; transition:transform .25s,box-shadow .25s; }
.proj-card:hover{ transform:translateY(-4px); box-shadow:0 16px 36px rgba(20,24,40,.12); }
.proj-thumb{
  aspect-ratio:16/10;
  background:linear-gradient(135deg,#ede9fe,#fae8ff);
  display:flex; align-items:center; justify-content:center;
  font-size:2.4rem; color:#a78bfa; position:relative;
}
/* hide actions until hover */
.proj-thumb .actions{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; gap:12px;
  background:rgba(124,58,237,0); opacity:0; transition:.25s;
}
.proj-card:hover .proj-thumb .actions{ opacity:1; background:rgba(124,58,237,.85); }
.proj-thumb .actions a{
  width:42px; height:42px; border-radius:50%;
  background:#fff; color:#7c3aed;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; text-decoration:none;
}

02 — Show Your Projects

Bento Showcase

Mixed-size tiles let your best project take the spotlight while others fill the gaps. The trendiest way to feature work without everything looking the same.

Asymmetric tile grid BENTO

Featured: Aurora

Full product redesign

Analytics App

Dashboards

Photo Site

Shop

Mobile App

iOS & Android

HTML

<div class="bento">
  <div class="b b1"><h4>Featured: Aurora</h4><small>Full product redesign</small></div>
  <div class="b b2"><h4>Analytics App</h4><small>Dashboards</small></div>
  <div class="b b3"><h4>Photo Site</h4></div>
  <div class="b b4"><h4>Shop</h4></div>
  <div class="b b5"><h4>Mobile App</h4><small>iOS &amp; Android</small></div>
</div>

CSS

.bento{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:130px;
  gap:14px;
}
.b{
  border-radius:16px; padding:20px; color:#fff;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
}
.b h4{ font-size:1rem; }
.b small{ opacity:.8; font-size:.78rem; }
/* the featured tile spans 2 columns AND 2 rows */
.b1{ grid-column:span 2; grid-row:span 2; background:linear-gradient(135deg,#7c3aed,#ec4899); }
.b2{ grid-column:span 2; background:linear-gradient(135deg,#0ea5e9,#22d3ee); }
.b3{ background:linear-gradient(135deg,#f59e0b,#f43f5e); }
.b4{ background:linear-gradient(135deg,#10b981,#34d399); }
.b5{ grid-column:span 2; background:linear-gradient(135deg,#6366f1,#a855f7); }

03 — Show Your Projects

Minimal List

When the work speaks for itself, a clean typographic list feels confident and fast. Each row nudges on hover and links straight to the project.

Typographic rows LIST

2026

Aurora Checkout Redesign

UX · Front-end

2025

Northwind Storefront

E-commerce

2025

Lumen Analytics

Dashboard · Data viz

HTML

<div class="min-list">
  <a class="min-row" href="#">
    <span class="yr">2026</span>
    <div><h3>Project name</h3><p>Role · Type</p></div>
    <span class="go">→</span>
  </a>
</div>

CSS

.min-row{
  display:grid;
  grid-template-columns:48px 1fr auto;
  gap:18px; align-items:center;
  padding:18px 6px; border-bottom:1px solid #e6e8ee;
  text-decoration:none; color:inherit;
}
.min-row:hover{ background:#fafafe; padding-left:14px; }
.min-row .go{ opacity:0; }
.min-row:hover .go{ opacity:1; color:#7c3aed; }

04 — Show Your Projects

Filterable Gallery

Let visitors narrow your work by type. A little JavaScript toggles which cards show — great once you have projects in a few different categories.

Filter buttons + grid INTERACTIVE

Travel Blog

Web

Brand Kit

Design

Habit Tracker

App

News Portal

Web

Poster Series

Design

HTML

<div class="filter-bar">
  <button class="filter-btn active" data-filter="all">All</button>
  <button class="filter-btn" data-filter="web">Web</button>
  <button class="filter-btn" data-filter="design">Design</button>
  <button class="filter-btn" data-filter="app">Apps</button>
</div>

<div class="fg-grid">
  <div class="fg-item" data-cat="web">
    <div class="t">🌐</div>
    <div class="c"><h4>Travel Blog</h4><small>Web</small></div>
  </div>
  <div class="fg-item" data-cat="design">
    <div class="t">🎨</div>
    <div class="c"><h4>Brand Kit</h4><small>Design</small></div>
  </div>
  <div class="fg-item" data-cat="app">
    <div class="t">📱</div>
    <div class="c"><h4>Habit Tracker</h4><small>App</small></div>
  </div>
  <div class="fg-item" data-cat="web">
    <div class="t">📰</div>
    <div class="c"><h4>News Portal</h4><small>Web</small></div>
  </div>
  <div class="fg-item" data-cat="design">
    <div class="t">✏️</div>
    <div class="c"><h4>Poster Series</h4><small>Design</small></div>
  </div>
</div>

CSS

.filter-bar{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.filter-btn{
  padding:7px 16px; border-radius:999px;
  border:1px solid #e6e8ee; background:#fff; color:#52596b;
  font-size:.82rem; font-weight:600; cursor:pointer; transition:.18s;
}
.filter-btn:hover{ border-color:#7c3aed; color:#7c3aed; }
.filter-btn.active{ background:#7c3aed; color:#fff; border-color:#7c3aed; }

.fg-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:14px;
}
.fg-item{ background:#fff; border:1px solid #e6e8ee; border-radius:14px; overflow:hidden; }
.fg-item .t{
  aspect-ratio:4/3;
  background:linear-gradient(135deg,#ede9fe,#dbeafe);
  display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; color:#a78bfa;
}
.fg-item .c{ padding:12px 14px; }
.fg-item h4{ font-size:.92rem; }
.fg-item small{ color:#6b7280; font-size:.76rem; }

JavaScript

document.querySelectorAll('.filter-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const f = btn.dataset.filter;
    document.querySelectorAll('.filter-btn')
      .forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    document.querySelectorAll('.fg-item').forEach(item => {
      item.style.display =
        (f === 'all' || item.dataset.cat === f) ? '' : 'none';
    });
  });
});

05 — Show Your Projects

Hover Reveal Cards

Keep cards clean, then reveal the description on hover. The image zooms slightly and the text slides in — a small touch that feels polished.

Reveal on hover HOVER

Aurora

A full checkout redesign that recovered lost sales.

Lumen

Data dashboards that make numbers make sense.

Northwind

A storefront built for speed and clarity.

HTML

<div class="reveal-card">
  <div class="bg"></div>
  <div class="info">
    <h4>Project name</h4>
    <p>Hidden until hover.</p>
  </div>
</div>

CSS

.reveal-card{ position:relative; aspect-ratio:3/4; overflow:hidden; }
.reveal-card .bg{ position:absolute; inset:0; transition:transform .4s; }
.reveal-card:hover .bg{ transform:scale(1.08); }
/* description collapses, then expands on hover */
.info p{ max-height:0; opacity:0; overflow:hidden; transition:.35s; }
.reveal-card:hover .info p{ max-height:60px; opacity:.9; }

06 — Go Deeper

Case Study Breakdown

The most valuable thing on a portfolio. Don't just show the final screen — tell the story: the role you played, and a clear Problem → Process → Solution. This is what turns a gallery into a portfolio.

Full project write-up CASE STUDY

UXWeb App2026

Redesigning the Aurora checkout

A cart that lost shoppers at the final step. I rebuilt the checkout into one focused flow — and recovered the drop-off.

My roleDesign & Front-end

Timeline6 weeks

ToolsFigma, React

TeamSolo + 1 PM

1

The problem

68% abandoned a cluttered 4-page checkout — too many fields, no progress, hidden costs.

2

The process

Mapped the flow, ran a 5-user test, prototyped a single page with inline validation and a sticky summary.

3

The solution

Shipped a one-screen checkout with autosave, clear errors, and upfront totals — four steps down to one.

HTML

<article class="cs">
  <div class="cs-cover"><img src="cover.jpg" alt=""></div>
  <div class="cs-body">
    <h3>Project title</h3>
    <p class="lede">One-line outcome.</p>

    <!-- what YOU did -->
    <div class="cs-meta">
      <div><small>My role</small><span>Design &amp; Build</span></div>
      <div><small>Timeline</small><span>6 weeks</span></div>
    </div>

    <!-- tell the story: Problem → Process → Solution -->
    <div class="cs-steps">
      <div class="cs-step"><div class="num">1</div>
        <div><h4>The problem</h4><p>68% abandoned a cluttered 4-page checkout.</p></div></div>
      <div class="cs-step"><div class="num">2</div>
        <div><h4>The process</h4><p>Mapped the flow and prototyped a single page.</p></div></div>
      <div class="cs-step"><div class="num">3</div>
        <div><h4>The solution</h4><p>Shipped a one-screen checkout with upfront totals.</p></div></div>
    </div>
  </div>
</article>

CSS

.cs-meta{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:16px; padding:20px 0;
  border-block:1px solid #e6e8ee;
}
.cs-step{ display:grid; grid-template-columns:42px 1fr; gap:16px; }
.cs-step .num{
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#f3effe; color:#7c3aed; font-weight:800;
}

07 — Go Deeper

Project Gallery

One screenshot is never enough. Show a project from several angles — a wide hero shot plus detail crops — so people can really see what you built.

Multi-shot grid GALLERY

HTML

<div class="pf-gallery">
  <div class="hero"><img src="hero.jpg" alt=""></div>
  <div class="shot"><img src="detail-1.jpg" alt=""></div>
  <div class="shot"><img src="detail-2.jpg" alt=""></div>
  <div class="shot"><img src="detail-3.jpg" alt=""></div>
</div>

CSS

.pf-gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
/* hero spans the full width on top, thumbs fill the row below */
.pf-gallery .hero{ grid-column:1 / -1; aspect-ratio:16/7; }
.pf-gallery .shot{ aspect-ratio:4/3; }
.pf-gallery img{ width:100%; height:100%; object-fit:cover; }

08 — Go Deeper

Results & Impact

Employers want outcomes, not just visuals. Back up a project with the numbers it moved — conversions, load time, ratings. Even class projects can show before/after metrics.

Outcome metrics IMPACT

1.2s

Page load — down from 5.4s

9 / 10

Test users finished the task

4 → 1

Steps to check out

100

Lighthouse score

HTML

<div class="pf-impact">
  <div class="stat"><div class="n">1.2s</div>
    <div class="l">Page load — down from 5.4s</div></div>
  <div class="stat"><div class="n">9 / 10</div>
    <div class="l">Test users finished the task</div></div>
  <div class="stat"><div class="n">4 → 1</div>
    <div class="l">Steps to check out</div></div>
  <div class="stat"><div class="n">100</div>
    <div class="l">Lighthouse score</div></div>
</div>

CSS

.pf-impact{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:16px;
}
.stat .n{ font-size:1.8rem; font-weight:800; color:#16181d; }
/* honest, specific numbers read better than gradient buzzwords */

09 — More Layouts

Scroll Carousel

A side-scrolling row of projects — popular on designer portfolios for browsing work like a timeline. Built with overflow-x and CSS scroll-snap, so each card clicks neatly into place.

Horizontal scroll + snap SCROLL

Aurora

Checkout redesign

Lumen

Analytics dashboard

Northwind

Storefront

Habit

Mobile app

Frame

Photo gallery

Drag or scroll sideways

HTML

<!-- add as many .car-card blocks as you like; they scroll sideways -->
<div class="carousel">
  <div class="car-card">
    <div class="t">💻</div>
    <div class="c"><h3>Aurora</h3><p>Checkout redesign</p></div>
  </div>
  <div class="car-card">
    <div class="t">📈</div>
    <div class="c"><h3>Lumen</h3><p>Analytics dashboard</p></div>
  </div>
  <div class="car-card">
    <div class="t">🏪</div>
    <div class="c"><h3>Northwind</h3><p>Storefront</p></div>
  </div>
  <div class="car-card">
    <div class="t">📱</div>
    <div class="c"><h3>Habit</h3><p>Mobile app</p></div>
  </div>
  <div class="car-card">
    <div class="t">📷</div>
    <div class="c"><h3>Frame</h3><p>Photo gallery</p></div>
  </div>
</div>

CSS

.carousel{
  display:flex;
  gap:18px;
  overflow-x:auto;            /* scroll sideways */
  padding-bottom:14px;
  scroll-snap-type:x mandatory;
}
.car-card{
  flex:0 0 290px;             /* fixed width, no shrink */
  scroll-snap-align:start;    /* snap each card into place */
  background:#fff; border:1px solid #e6e8ee;
  border-radius:16px; overflow:hidden;
}
.car-card .t{
  aspect-ratio:16/10;
  background:linear-gradient(135deg,#ede9fe,#fae8ff);
  display:flex; align-items:center; justify-content:center;
  font-size:2.2rem; color:#a78bfa;
}
.car-card .c{ padding:16px; }
.car-card h3{ font-size:1rem; margin-bottom:4px; }
.car-card p{ color:#6b7280; font-size:.84rem; }

10 — More Layouts

Split Feature

A big visual on one side, the story on the other. Great for spotlighting a single standout project — the image carries the impact while the text gives context.

Two-column spotlight SPLIT

FeaturedWeb App

Lumen Analytics

A dashboard that turns raw numbers into clear, glanceable insight — rebuilt for speed and clarity.

View case study

HTML

<div class="split-feat">
  <div class="vis"><img src="project.jpg" alt=""></div>
  <div class="txt">
    <div class="tags"><span>Featured</span><span>Web App</span></div>
    <h3>Project name</h3>
    <p>What it is and why it matters.</p>
    <a href="#">View case study →</a>
  </div>
</div>

CSS

.split-feat{
  display:grid;
  grid-template-columns:1fr 1fr;   /* visual | text */
  border-radius:18px; overflow:hidden;
}
.vis img{ width:100%; height:100%; object-fit:cover; }
.txt{ padding:40px; display:flex; flex-direction:column; justify-content:center; }
.tags{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.tags span{ font-size:.7rem; background:#f3effe; color:#7c3aed; padding:3px 9px; border-radius:999px; font-weight:600; }
@media(max-width:680px){ .split-feat{ grid-template-columns:1fr; } }

11 — More Layouts

Featured Project

Lead with your best work instead of a bio. A full-bleed hero puts one strong project front-and-center the moment someone lands — with a clear way to dig in.

Work-first hero FEATURE

Featured project

Aurora — a checkout people actually finish

A six-week redesign that cut a four-page checkout down to one focused screen and recovered the drop-off.

Read the case study Live site

HTML

<section class="feat-hero">
  <div class="cap">
    <div class="ey">Featured project</div>
    <h2>Project headline</h2>
    <p>One or two lines on the outcome.</p>
    <div class="btns">
      <a class="primary" href="#">Case study</a>
      <a class="ghost" href="#">Live site</a>
    </div>
  </div>
  <div class="shot"><img src="hero.jpg" alt=""></div>
</section>

CSS

.feat-hero{ border-radius:18px; overflow:hidden; }
.cap{ padding:40px; }
.btns .primary{ background:#7c3aed; color:#fff; }
.btns a{ padding:11px 22px; border-radius:999px; font-weight:700; }
.shot{ aspect-ratio:16/7; }
.shot img{ width:100%; height:100%; object-fit:cover; }

12 — Full Examples

Minimal Portfolio

A complete one-page portfolio in the editorial style: a confident type-led intro and a clean numbered index of work. Lots of whitespace, no clutter — lets the projects speak.

Whole page — type-driven MINIMAL

Maya Chen

Designer & front-end developer making calm, useful interfaces.

Currently crafting design systems and shipping them in React. Previously at two startups.

01

Aurora Checkout

UX · 2026

02

Lumen Analytics

Product · 2025

03

Northwind Store

E-commerce · 2025

HTML

<div class="bar">
  <div class="logo">Your Name</div>
  <nav><a href="#">Work</a><a href="#">About</a></nav>
</div>
<header class="hero">
  <h1>A confident one-line intro.</h1>
  <p>What you do, in a sentence.</p>
</header>
<div class="work">
  <a class="row"><span class="n">01</span>
    <h3>Aurora Checkout</h3><span class="meta">UX · 2026</span></a>
  <a class="row"><span class="n">02</span>
    <h3>Lumen Analytics</h3><span class="meta">Product · 2025</span></a>
  <a class="row"><span class="n">03</span>
    <h3>Northwind Store</h3><span class="meta">E-commerce · 2025</span></a>
</div>

CSS

.hero h1{
  font-size:clamp(1.9rem,4.5vw,3rem);
  font-weight:800; letter-spacing:-.03em;
  max-width:15ch;          /* keep lines short & punchy */
}
.row{
  display:grid; grid-template-columns:34px 1fr auto;
  gap:16px; padding:18px 0; border-top:1px solid #eef0f3;
}

13 — Full Examples

Bold & Colorful

A high-energy portfolio: a dark canvas, oversized headline with a pop of accent, and a grid of vivid project blocks. Great for showing personality and creative range.

Whole page — vivid blocks BOLD

JORDAN·K

Available for work

I build loud,
memorable websites.

Aurora

Brand Kit

Arcade

HTML

<div class="top">
  <div class="logo">YOUR·NAME</div>
  <div class="pill">Available for work</div>
</div>
<header class="hero">
  <h1>I build <em>loud</em> websites.</h1>
</header>
<div class="grid">
  <a class="blk"><i class="ph-duotone ph-rocket-launch"></i>Aurora</a>
  <a class="blk"><i class="ph-duotone ph-paint-brush"></i>Brand Kit</a>
  <a class="blk"><i class="ph-duotone ph-game-controller"></i>Arcade</a>
</div>

CSS

.fp-bold{ background:#0e0e14; color:#fff; }
.hero h1{ font-size:clamp(2.2rem,6vw,3.6rem); font-weight:900; line-height:.98; }
.hero h1 em{ font-style:normal; color:#a3e635; }   /* accent word */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.blk{ aspect-ratio:1; border-radius:16px; }
.blk:nth-child(1){ background:linear-gradient(135deg,#7c3aed,#ec4899); }

14 — Full Examples

Gallery Portfolio

An image-led portfolio with a warm, gallery feel: one large hero piece up top, then a tidy pair of works below. Ideal when your visuals do the talking — photography, illustration, UI.

Whole page — image-led GALLERY

studio.ria

Selected work, 2023–2026.

HTML

<div class="bar">
  <div class="logo">studio.ria</div>
  <nav><a href="#">Work</a><a href="#">Info</a></nav>
</div>
<header class="lead"><h1>Selected work.</h1></header>

<!-- one big hero piece -->
<div class="frame"><img src="hero.jpg" alt=""></div>

<!-- a tidy pair below -->
<div class="two">
  <div class="f"><img src="a.jpg" alt=""></div>
  <div class="f"><img src="b.jpg" alt=""></div>
</div>

CSS

.fp-gal{ background:#faf9f7; }       /* warm, gallery feel */
.frame{ margin:0 32px; aspect-ratio:16/8; border-radius:16px; }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:16px 32px; }
.two .f{ aspect-ratio:4/3; border-radius:14px; }
.frame img,.two .f img{ width:100%; height:100%; object-fit:cover; }

Add Your Images

Project Cards

Weather Dashboard

Fitness App

Bakery Site

Bento Showcase

Featured: Aurora

Analytics App

Photo Site

Shop

Mobile App

Minimal List

Aurora Checkout Redesign

Northwind Storefront

Lumen Analytics

Filterable Gallery

Travel Blog

Brand Kit

Habit Tracker

News Portal

Poster Series

Hover Reveal Cards

Aurora

Lumen

Northwind

Case Study Breakdown

Redesigning the Aurora checkout

The problem

The process

The solution

Project Gallery

Results & Impact

Scroll Carousel

Aurora

Lumen

Northwind

Habit

Frame

Split Feature

Lumen Analytics

Featured Project

Aurora — a checkout people actually finish

Minimal Portfolio

Designer & front-end developer making calm, useful interfaces.

Aurora Checkout

Lumen Analytics

Northwind Store

Bold & Colorful

I build loud,memorable websites.

Gallery Portfolio

Selected work, 2023–2026.

I build loud,
memorable websites.